项目8：“古典文学网”用户中心功能开发

项目8：“古典文学网”用户中心功能开发XXX202X-XX-XX

目录02.任务1：开发个人信息展示功能05.任务4：开发我的书评展示功能03.任务2：开发用户头像上传功能04.任务3：开发个人信息修改功能01.文件上传、文件下载及ElementPlus框架Upload组件06.任务5：开发密码重置功能07.拓展任务

学习目标知识目标：了解Flask框架的文件上传，并熟练掌握其原理及使用；了解Flask框架的文件下载，并熟练掌握其原理及使用；了解ElementPlus框架的Upload组件，掌握常用组件的布局和使用。能力目标：通过学习Flask框架的文件上传，能够在项目中实现文件上传；通过学习Flask框架的文件下载，能够在项目中实现文件下载；通过学习ElementPlus的Upload组件，能够在项目中开发上传应用。素质目标：培养系统思维，严格遵守行业规范和标准，提高软件质量和可靠性；培养责任感、职业精神和团队精神，遵守职业道德。01项目描述

1.1.项目需求小白将在之前开发工作的基础上，完成“古典文学网”项目的“用户中心”模块的开发，包括个人信息展示、我的书评以及密码重置等功能。02知识储备

2.知识储备为了项目的顺利开发，小白需要掌握Flask框架的关键技术，如文件上传、文件下载及ElementPlus框架Upload组件。

2.1

Flak框架的文件上传文件上传是Web应用中不可或缺的功能之一。在Flask框架中，实现文件上传功能通常涉及以下几个步骤。首先，通过HTML表单中的<inputtype="file">元素，用户可以选择并上传文件。随后，在服务器端，Flask框架利用request.files这个字典来接收客户端上传的文件。最后，通过调用文件的save()方法，我们可以将上传的文件永久地保存在文件系统中。下面，我们将开发一个简洁的图片上传案例。

2.1.Flak框架的文件上传具体的开发步骤参考如下：首先，我们将创建一个名为“hi_upload”的Flask项目，并开发其项目框架。项目的整体结构如图8.1所示。图8.1“hi_upload”项目的框架目录

2.1.Flak框架的文件上传接下来，请找到“/app/conf/config.py”的配置文件。在此文件中，我们将定义文件上传的目录及允许上传的文件扩展名的集合。以下具体代码的实训。#文件存放目录FILE_PATH=r'D:/upload_file'#上传文件时，允许的文件扩展名的集合ALLOWED_EXTENSIONS=set(['png','gif','jpg','webp','jpeg'])

2.1.Flak框架的文件上传随后，我们找到“/app.py”的文件。在此文件中，我们开发文件上传的视图函数。以下是具体代码实现：fromflaskimportFlask,requestfromflaskimportjsonifyimportosimportuuid#导入上传的配置(路径，扩展名的集合)fromconfigimportFILE_PATH,ALLOWED_EXTENSIONS#secure_filename函数可以避免潜在的文件名安全问题fromwerkzeug.utilsimportsecure_filenameapp=Flask(__name__)#判断文件类型是否允许上传defallowed_file(filename):return'.'infilenameandfilename.rsplit('.',1)[1].lower()inALLOWED_EXTENSIONS#上传文件@app.route("/upload",methods=["POST"])defupload():#返回信息result_msg={"code":"200","msg":"上传成功！"}#判断是否存在上传文件（file是上传文件的参数名称）if'file'notinrequest.files:result_msg["code"]="404"result_msg["msg"]="文件不存在！"returnjsonify(result_msg)接左边：

#判断上传目录是否存在，不存在则创建对应目录ifnotos.path.exists(FILE_PATH):os.makedirs(FILE_PATH)#获取上传文件upfile=request.files['file']

#判断文件是否允许上传ifupfileandallowed_file(upfile.filename):#获取文件名称upname=secure_filename(upfile.filename)#处理重名情况，因此使用uuid生成文件名fname=str(uuid.uuid4())+'.'+upname.rsplit('.',1)[1]#保存文件到上传目录upfile.save(os.path.join(FILE_PATH,fname))result_msg["upFile"]=fnameelse:#构建返回的Json数据result_msg["code"]="400"result_msg["msg"]="上传失败！"#返回操作结果returnjsonify(result_msg)if__name__=='__main__':#启动服务，设置主机和端口app.run(host="",port=5000,debug=True)

2.1.Flak框架的文件上传项目启动后，我们可以访问URL“:5000/upload”来调用该API。测试结果如图8.2所示。图8.2文件上传API接口测试结果

2.2Flak框架的文件下载send_file函数是Flask中最常用的文件下载方法之一。它允许我们从服务器向客户端发送文件，而不需要将整个文件读入内存中。该函数的语法参考如下：1.使用send_file函数send_file(path_or_file,as_attachment=True,download_name=filename)在上述代码中，参数说明如下：path_or_file：需要发送的文件路径或者二进制文件对象；as_attachment：如果设置为True，浏览器会提示用户下载文件，而不是尝试在浏览器中打开它。默认值为False；download_name：保存文件时附件的默认名称，默认为文件名。

2.2Flak框架的文件下载我们基于上一小节的“hi_upload”项目，利用send_file函数来构建一个文件下载案例。在/app.py文件中，我定义了一个专门用于处理文件下载的视图函数，实现API接口。以下是实现这一功能的具体代码：1.使用send_file函数fromflaskimportsend_file#下载文件@app.route('/downloadfile/<filename>')

defdownload_file(filename):

#构建下载文件的路径

file_path=os.path.join(FILE_PATH,filename)

#使用send_file函数发送文件

#as_attachment=True将会告诉浏览器这是一个附件，应该下载而不是显示

#如果我们的文件名是中文或有特殊字符，可能需要设置download_name

returnsend_file(file_path,as_attachment=True,download_name=filename)

2.2Flak框架的文件下载最后，项目启动后，我们可以在浏览器中访问URL“:5000/downloadfile/580d7438-63a4-4e8c-9351-634c4e9b41c1.png”来下载图片“580d7438-63a4-4e8c-9351-634c4e9b41c1.png”（该图片是上一节中上传的图片）。下载的结果如图8.3所示。1.使用send_file函数图8.3文件下载测试结果

2.2Flak框架的文件下载send_from_directory函数与send_file函数类似，它用于从指定目录中发送文件给客户端。该函数的语法如下：2.使用send_from_directory函数send_from_directory(directory,filename,as_attachment=True)在上述代码中，参数说明如下：directory：文件所在的目录路径（相对于Flask应用的根目录或绝对路径）；filename：要发送的文件的名称；as_attachment（可选）：如果设置为True，浏览器会提示用户下载文件，而不是尝试在浏览器中打开它。默认值为False。

2.2Flak框架的文件下载我们基于上一小节的“hi_upload”项目，利用send_from_directory函数来构建一个文件下载案例。在/app.py文件中，开发了用于处理文件下载的视图函数，实现API接口。以下是实现这一功能的具体代码：2.使用send_from_directory函数fromflaskimportsend_from_directory#下载文件@app.route('/download/<filename>')defdownload(filename):

#检查文件名是否安全（防止目录遍历等攻击）if'..'infilenameorfilename.startswith('/'):return"BadRequest",400#as_attachment=True将会告诉浏览器这是一个附件，应该下载而不是显示#发送文件returnsend_from_directory(FILE_PATH,filename,as_attachment=True)

2.2Flak框架的文件下载最后，项目启动后，可以通过浏览器访问URL“:5000/download/580d7438-63a4-4e8c-9351-634c4e9b41c1.png”来下载图片“580d7438-63a4-4e8c-9351-634c4e9b41c1.png”（该图片是上一节中上传的图片）。下载的结果如图8.4所示。2.使用send_from_directory函数图8.4文件下载测试结果

2.3ElementPlus的Upload组件Upload组件提供了单击或拖拽的便捷方式，使用户能够将文件上传至服务器。这一组件通过el-upload标签在文件上传页面中实现布局，灵活适应并展示多种文件上传场景，为用户提供了丰富的上传体验。Upload组件具有以下一些常用属性和事件，见表8.1。属性说明action请求URL。headers设置上传的请求头部。method设置上传请求方法。multiple是否支持多选文件。data上传时附带的额外参数从v2.3.13支持Awaitable数据，和Function。name上传的文件字段名。drag是否启用拖拽上传。auto-upload是否自动上传文件。on-success文件上传成功时的钩子。on-error文件上传失败时的钩子。before-upload上传文件之前的钩子，参数为上传的文件，若返回false或者返回Promise且被reject，则停止上传。on-progress文件上传时的钩子。表8.1Upload组件的常用属性

2.3ElementPlus的Upload组件logo图8.5Upload组件运行效果接下来，我们利用ElementPlus框架中的Upload组件，来开发一个头像上传界面。具体的设计预期如图8.5所示。

2.3ElementPlus的Upload组件logo上图所展示的网页布局所对应的源代码详情如下：<template><el-uploadclass="avatar-uploader"action="apiUrl"name="file":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><imgv-if="imageUrl":src="imageUrl"class="avatar"/><el-iconv-elseclass="avatar-uploader-icon"><Plus/></el-icon></el-upload></template>接左边：<scriptlang="ts"setup>import{ref}from'vue'import{ElMessage}from'element-plus'import{Plus}from'@element-plus/icons-vue'importtype{UploadProps}from'element-plus'//头像UrlconstimageUrl=ref('')//上传头像成功的回调函数consthandleAvatarSuccess:UploadProps['onSuccess']=(response,uploadFile)=>{imageUrl.value=URL.createObjectURL(uploadFile.raw!)}//上传头像前的回调函数constbeforeAvatarUpload:UploadProps['beforeUpload']=(rawFile)=>{if(rawFile.type!=='image/jpeg'){ElMessage.error('AvatarpicturemustbeJPGformat!')returnfalse}elseif(rawFile.size/1024/1024>2){ElMessage.error('Avatarpicturesizecannotexceed2MB!')returnfalse}returntrue}</script>03项目任务小白马上要进行“用户中心”功能模块的开发工作。由于该模块的开发将涉及项目前后端的协同作业，这无疑将对小白的开发能力构成一次严峻的挑战。

3.1开发个人信息展示功能任务步骤：1.需求描述2.开发侧边栏导航组件3.开发个人信息展示功能

3.1开发个人信息展示功能1.需求描述我们将开发一个用户个人信息展示功能，为用户提供个人资料的展示服务。通过此功能，当前登录用户的个人资料将被呈现在个人资料页面。运行效果如图8.6所示。图8.6个人信息展示效果

3.1开发个人信息展示功能1.需求描述在开发该功能时，我们需要使用后端项目的API接口，具体API接口信息见表8.2所示。表8.2开发过程中调用的API接口表接口调用方式说明查询用户信息API接口http://ip地址:端口/api/user/get-user请参考项目6中的“6.3.1.开发导航栏用户中心显示功能”小节图片显示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>请参考项目2中的“2.3.5.开发图片显示API接口”小节

3.1开发个人信息展示功能2开发侧边栏导航组件在“cls_clt”项目中，我们找到“/src/components”这一组件目录，并在其中新建一个名为AsideComp.vue的侧边栏导航组件。在此组件中，我们将根据当前用户的登录状态来判断当前用户是否具有访问权限。以下提供了该组件的具体代码实现：（1）开发业务逻辑<scriptlang="ts"setup>import{ref,onMounted}from'vue'import{useRouter}from'vue-router'//引入状态管理文件import{useTokenStore}from'@/stores/token'import{ElMessage}from'element-plus'//创建Token状态管理StoreconstuserStore=useTokenStore()//获取登录的Tokenconsttoken=ref(userStore.getToken())//创建路由对象，用于编程式导航constrouter=useRouter()//用于接收传递给组件的数据，此处传递的是选中的菜单索引constprops=defineProps({asideIndex:String})//设置菜单选中索引constasideIndex=props.asideIndex接左边：//判断是否具有访问权限functionisRight(){

//判断Token是否为空

if(token.value==''){

//提示信息

ElMessage({

message:'请重新登录！',

type:'success',

plain:true

})

//跳转至登录页

router.push('/login')

}}//完成初始渲染并创建DOM节点后，进行页面加载onMounted(()=>{

//判断是否具有访问权限

isRight()})</script>

3.1开发个人信息展示功能2开发侧边栏导航组件在“cls_clt”项目的AsideComp.vue侧边栏导航组件中，我们采用Menu菜单组件来开发侧边栏导航功能，包括了个人信息、我的书评、修改密码、退出等菜单栏，并通过相应的配置，将其整合至AsideComp.vue中。以下是实现这一功能的具体代码：（2）开发页面逻辑<template>

<!--用户中心侧边导航开始-->

<el-menu:default-active="asideIndex"class="el-menu-vertical-demo":router="true">

<el-menu-itemindex="">

<el-icon><User/></el-icon>

<span>个人信息</span>

</el-menu-item>

<el-menu-itemindex="">

<el-icon><ChatLineRound/></el-icon>

<span>我的书评</span>

</el-menu-item>

<el-menu-itemindex="">

<el-icon><Edit/></el-icon>

<span>修改密码</span>

</el-menu-item>

<el-menu-itemindex="/out">

<el-icon><Back/></el-icon>

<span>退出</span>

</el-menu-item>

</el-menu></template>

3.1开发个人信息展示功能3开发个人信息展示功能在“cls_clt”项目中，我们找到“/src/views/”目录。随后，在该目录下，我们创建一个新的页面文件，命名为“UserView.vue”。在“UserView.vue”页面中，我们将开发个人信息展示功能。以下是实现这一功能的具体代码参考：（1）开发业务逻辑-1<scriptlang="ts"setup>import{ref,inject,reactive,onMounted}from'vue'import{useRoute,useRouter,RouterLink}from'vue-router'importtype{FormInstance,FormRules}from'element-plus'importtype{UploadProps}from'element-plus'import{ElMessage}from'element-plus'//引入顶部导航组件importHeaderCompfrom'../components/HeaderComp.vue'//引入底部组件importFooterCompfrom'@/components/FooterComp.vue'//引入侧边组件importAsideCompfrom'@/components/AsideComp.vue'//引入状态管理文件import{useTokenStore}from'@/stores/token'constaxios=inject('axios')//注入axios//创建路由对象，用于编程式导航constrouter=useRouter()

3.1开发个人信息展示功能3开发个人信息展示功能在“cls_clt”项目中，我们找到“/src/views/”目录。随后，在该目录下，我们创建一个新的页面文件，命名为“UserView.vue”。在“UserView.vue”页面中，我们将开发个人信息展示功能。以下是实现这一功能的具体代码参考：（1）开发业务逻辑-2//创建Token状态管理StoreconstuserStore=useTokenStore()//获取登录的Tokenconsttoken=ref(userStore.getToken())//导航栏菜单选中索引constactiveIndex=ref('/user')//侧边栏菜单选中索引constasideIndex=ref('/user')//用户数据varuser=ref({})//头像UrlconstavatarUrl=ref('/svr/api/image/display/head/tx.png')//以下为表单数据校验代码interfaceDataForm{nikename:stringsex:stringphone:stringavatar:string}

3.1开发个人信息展示功能3开发个人信息展示功能在“cls_clt”项目中，我们找到“/src/views/”目录。随后，在该目录下，我们创建一个新的页面文件，命名为“UserView.vue”。在“UserView.vue”页面中，我们将开发个人信息展示功能。以下是实现这一功能的具体代码参考：（1）开发业务逻辑-3construleFormRef=ref<FormInstance>()//表单数据(用户数据)constdataForm=reactive<DataForm>({nikename:'',sex:'男',phone:'',avatar:'tx.png'})//表单校验规则construles=reactive<FormRules<DataForm>>({nikename:[{required:true,message:'请输入昵称...',trigger:'blur'}],phone:[{required:true,message:'请输入电话...',trigger:'blur'}]})//修改按钮事件constsubmitForm=async(formEl:FormInstance|undefined)=>{if(!formEl)returnawaitformEl.validate((valid,fields)=>{if(valid){console.log('submit!')}else{console.log('errorsubmit!',fields)}})}

3.1开发个人信息展示功能3开发个人信息展示功能在“cls_clt”项目中，我们找到“/src/views/”目录。随后，在该目录下，我们创建一个新的页面文件，命名为“UserView.vue”。在“UserView.vue”页面中，我们将开发个人信息展示功能。以下是实现这一功能的具体代码参考：（1）开发业务逻辑-4//重置按钮事件constresetForm=(formEl:FormInstance|undefined)=>{if(!formEl)returnformEl.resetFields()}

3.1开发个人信息展示功能3开发个人信息展示功能在“cls_clt”项目中，我们找到“/src/views/”目录。随后，在该目录下，我们创建一个新的页面文件，命名为“UserView.vue”。在“UserView.vue”页面中，我们将开发个人信息展示功能。以下是实现这一功能的具体代码参考：（1）开发业务逻辑-5//调用API接口，获取当前登录用户functioninitUser(){//判断Token是否存在if(token.value!=''){axios({method:'get',url:'/svr/api/user/get-user',headers:{Authorization:'Bearer'+token.value}}).then(function(response){//console.log(response.data)if(response.data.code=='200'){user.value=response.data.data//初始化表单数据dataForm.nikename=user.value.nikenamedataForm.phone=user.value.phonedataForm.sex=user.value.sexavatarUrl.value='/svr/api/image/display/head/'+user.value.avatar}})

接左边：.catch(function(error){console.log(error)//鉴权判断if(error.response.status==401){//没有权限或已过期，设置token为空token.value=''userStore.setToken('')//提示信息ElMessage({message:'请重新登录！',type:'success',plain:true})}})}}//完成初始渲染并创建DOM节点后，进行页面加载onMounted(()=>{//初始化用户数据initUser()})</script>

3.1开发个人信息展示功能3开发个人信息展示功能接下来，在“cls_clt”项目中，我们找到“/src/router/index.js”路由配置文件。在该文件中，我们将为个人信息展示页面配置相应的路由信息。以下是配置此功能的关键代码参考：（1）开发业务逻辑-6//导入组件importUserViewfrom'@/views/UserView.vue'constrouter=createRouter({

history:createWebHistory(import.meta.env.BASE_URL),

routes:[

{

path:'/user',name:'user',component:UserView}]})exportdefaultrouter

3.1开发个人信息展示功能3开发个人信息展示功能在“cls_clt”项目的UserView.vue页面文件中，我们将当前登录用户的个人信息呈现给用户。以下是实现这一功能的具体代码：（2）开发页面逻辑-1<template><el-container><el-header><HeaderComp:active-index="activeIndex"/></el-header><el-container><el-asidewidth="200px"><!--侧边导航组件--><AsideComp:aside-index="asideIndex"/></el-aside><el-container><el-main><div><!--用户信息开始--><elheader><template#icon><el-icon><User/></el-icon></template><template#title>用户信息</template>

3.1开发个人信息展示功能3开发个人信息展示功能在“cls_clt”项目的UserView.vue页面文件中，我们将当前登录用户的个人信息呈现给用户。以下是实现这一功能的具体代码：（2）开发页面逻辑-2<divstyle="display:flex;justify-content:center;margin-top:10px"><el-formref="ruleFormRef"style="max-width:600px":model="dataForm":rules="rules"label-width="auto"status-icon><el-form-itemlabel="头像"><!--头像上传组件开始--><el-uploadclass="avatar-uploader"action="":show-file-list="false"><imgv-if="avatarUrl":src="avatarUrl"style="width:100px;height:100px"class="avatar"/><el-iconv-elseclass="avatar-uploader-icon"><Plus/></el-icon></el-upload><!--头像上传组件结束--></el-form-item>

3.1开发个人信息展示功能3开发个人信息展示功能在“cls_clt”项目的UserView.vue页面文件中，我们将当前登录用户的个人信息呈现给用户。以下是实现这一功能的具体代码：（2）开发页面逻辑-3<el-form-itemlabel="昵称"prop="nikename"><el-inputv-model="dataForm.nikename"/></el-form-item><el-form-itemlabel="电话"prop="phone"><el-inputv-model="dataForm.phone"/></el-form-item><el-form-itemlabel="性别"prop="sex"><el-radio-groupv-model="dataForm.sex"><el-radiovalue="男">男</el-radio><el-radiovalue="女">女</el-radio></el-radio-group></el-form-item><el-form-item><el-buttontype="primary"@click="submitForm(ruleFormRef)">修改</el-button><el-button@click="resetForm(ruleFormRef)">取消</el-button></el-form-item></el-form></div></elheader>

3.1开发个人信息展示功能3开发个人信息展示功能在“cls_clt”项目的UserView.vue页面文件中，我们将当前登录用户的个人信息呈现给用户。以下是实现这一功能的具体代码：（2）开发页面逻辑-4</div></el-main><el-footer><el-footer><FooterComp/></el-footer></el-footer></el-container></el-container></el-container></template><style>.avatar-uploader.el-upload{border:1pxdashedvar(--el-border-color);border-radius:6px;cursor:pointer;position:relative;overflow:hidden;transition:var(--el-transition-duration-fast);}.avatar-uploader.el-upload:hover{border-color:var(--el-color-primary);}.el-icon.avatar-uploader-icon{font-size:28px;color:#8c939d;width:100px;height:100px;text-align:center;}</style>

3.1开发个人信息展示功能3开发个人信息展示功能接下来，我们需要在顶部导航组件和侧边栏导航组件等关键组件添加指向个人信息展示页面的路由。以下是实现这一功能的关键代码参考：HeaderComp.vue（顶部导航组件）关键代码：（2）开发页面逻辑-5

<el-menu-itemindex="/user">用户中心</el-menu-item>AsideComp.vue（顶部导航组件）关键代码：<el-menu-itemindex="/user"><el-icon><User/></el-icon><span>个人信息</span></el-menu-item>

3.1开发个人信息展示功能3开发个人信息展示功能成功运行前端项目，并在完成登录流程后，用户单击顶部导航栏中的用户中心菜单，即可顺利进入用户个人信息展示页面。运行效果如图8.6所示。（3）测试个人信息展示功能图8.6个人信息展示效果

3.2开发用户头像上传功能任务步骤：1.需求描述2.开发头像上传API接口3.开发头像上传功能

3.2开发用户头像上传功能1.需求描述我们计划在用户个人信息展示页面增设一个头像上传功能。当用户访问个人信息展示页面时，只需轻轻单击当前头像，便会弹出一个图片选择窗口。用户从中挑选出心仪的头像后，系统将自动调用后端的头像上传API接口，将所选头像迅速上传至服务端。上传成功后，用户的头像将在页面上实时更新，呈现全新风貌。这一功能的操作流程与效果详见图8.7(a)，图8.7(b)所示。图8.7(a)头像选择效果图8.7(b)头像上传后效果

3.2开发用户头像上传功能1.需求描述在开发该功能时，我们需要使用后端项目的API接口，具体API接口信息见表8.3所示。表8.3开发过程中调用的API接口表接口调用方式说明头像上传API接口http://ip地址:端口/api/user/upload本节进行开发图片显示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>请参考项目2中的“2.3.5.开发图片显示API接口”小节

3.2开发用户头像上传功能2.开发头像上传API接口（1）需求描述该API接口将接收待上传的图片，将其存储至项目配置中指定的用户头像图片目录。在图片上传的过程中，系统会对上传的头像进行重新命名，并在完成后向客户端返回上传的结果。该接口的说明请参阅表8.4。表8.4头像上传API接口说明表功能说明头像上传API接口调用路径http://ip地址:端口/api/user/uploadHTTP请求方式POST请求数据类型application/x-www-form-urlencoded请求数据参数参数名类型长度描述必须filefile图片文件（png,gif,jpg等）■返回数据类型application/json返回数据参数参数名类型长度描述必须codevarchar状态码，200正确，其他错误■msgvarchar返回消息内容■upFilevarchar返回头像图片名称■请求参数（样例）file:4.jpg返回数据JSON（样例）{

"code":"200",

"msg":"上传成功！",

"upFile":"776321f3-59b8-4db1-ac8c-0e5b166494f4.jpg"}

3.2开发用户头像上传功能2.开发头像上传API接口（2）开发业务逻辑模块首先，在“cls_svr”项目中，我们找到“/app/conf/config.py”配置文件。在此文件中，我们将定义允许上传的图片扩展名的集合。以下是实现这一功能的关键代码：#上传文件时，允许的头像图片扩展名的集合ALLOWED_EXTENSIONS=set(['png','gif','jpg','webp','jpeg'])

3.2开发用户头像上传功能2.开发头像上传API接口（2）开发业务逻辑模块接下来，在“cls_svr”项目中，我们找到“/app/api/user_blueprint.py”用户蓝图文件。在此蓝图中，我们将定义用于头像上传的视图函数，实现API接口。以下是实现这一功能的关键代码：importosimportuuid#导入上传头像的配置(头像路径，图片扩展名的集合)fromapp.conf.configimportALLOWED_EXTENSIONS,IMAGE_HEAD_PATHfromwerkzeug.utilsimportsecure_filename#判断头像图片是否允许上传defallowed_file(filename):return'.'infilenameandfilename.rsplit('.',1)[1].lower()inALLOWED_EXTENSIONS#上传用户头像@user_blueprint.route("/upload",methods=["POST"])defupload():#返回信息result_msg={"code":"200","msg":"上传成功！"}#判断是否有上传文件if'file'notinrequest.files:result_msg["code"]="404"result_msg["msg"]="文件不存在！"returnjsonify(result_msg)

3.2开发用户头像上传功能2.开发头像上传API接口（2）开发业务逻辑模块接下来，在“cls_svr”项目中，我们找到“/app/api/user_blueprint.py”用户蓝图文件。在此蓝图中，我们将定义用于头像上传的视图函数，实现API接口。以下是实现这一功能的关键代码：#获取上传文件upfile=request.files['file']#判断是否允许上传ifupfileandallowed_file(upfile.filename):#获取文件名称upname=secure_filename(upfile.filename)#upname=upfile.filename#处理重名情况，因此使用uuid生成文件名fname=str(uuid.uuid4())+'.'+upname.rsplit('.',1)[1]#保存文件到上传目录

upfile.save(os.path.join(IMAGE_HEAD_PATH,fname))result_msg["upFile"]=fnameelse:#构建返回的Json数据result_msg["code"]="400"result_msg["msg"]="上传失败！"#返回操作结果returnjsonify(result_msg)

3.2开发用户头像上传功能2.开发头像上传API接口（3）API接口测试后端项目启动后，我们可以通过访问URL“:5000/api/user/upload”来调用该API。测试结果如图8.8所示。图8.8头像上传API接口测试结果

3.2开发用户头像上传功能3.开发头像上传功能（1）开发业务逻辑在“cls_clt”项目中，我们找到“/src/views/UserView.vue”的个人信息展示页面。在该文件中，我们将调用“头像上传API接口”实现头像上传功能。以下是实现这一功能的关键代码：<scriptlang="ts"setup>//上传头像成功的回调函数consthandleAvatarSuccess:UploadProps['onSuccess']=(response,uploadFile)=>{//设置新头像URLavatarUrl.value=URL.createObjectURL(uploadFile.raw!)//更新用户数据的头像名称dataForm.avatar=response.upFile}//上传头像前的回调函数constbeforeAvatarUpload:UploadProps['beforeUpload']=(rawFile)=>{//获取上传头像的后缀constfileSuffix=rawF.substring(rawF.lastIndexOf('.')+1).toLowerCase()//允许上传的头像扩展名的集合constwhiteList=['png','gif','jpg','webp','jpeg']//判断头像是否允许上传if(whiteList.indexOf(fileSuffix)===-1){ElMessage.error('头像只能是：png,gif,jpg,webp,jpeg格式')returnfalse}//判断头像大小是否符合要求if(rawFile.size/1024/1024>2){ElMessage.error('头像大小不能超过2MB!')returnfalse}returntrue}</script>

3.2开发用户头像上传功能3.开发头像上传功能（2）开发页面逻辑在cls_clt项目的UserView.vue页面文件中，我们为el-upload上传组件增添了调用头像上传API接口的功能，从而实现了用户头像的上传。以下是实现这一功能的关键代码：<template>

<el-form-itemlabel="头像"><!--头像上传组件开始--><el-uploadclass="avatar-uploader"name="file"

action="/svr/api/user/upload":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><imgv-if="avatarUrl":src="avatarUrl"style="width:100px;height:100px"class="avatar"/><el-iconv-elseclass="avatar-uploader-icon"><Plus/></el-icon></el-upload><!--头像上传组件结束--></el-form-item></template>

3.2开发用户头像上传功能3.开发头像上传功能（3）测试头像上传功能成功运行前端项目，并在完成登录流程后，用户可以通过单击顶部导航栏中的用户中心菜单，进入用户个人信息展示页面。在该页面上，用户只需单击自己的头像，便能选择并上传他们心仪的头像图片，从而完成头像的上传更新。实际运行效果如图8.7所示。图8.7(a)头像选择效果图8.7(b)头像上传后效果

3.3开发个人信息修改功能任务步骤：1.需求描述2.开发用户修改API接口3.开发个人信息修改功能

3.3.1开发个人信息修改功能1需求描述我们需要在用户个人信息展示页面中增设个人信息修改功能。当用户浏览个人信息展示页面时，能够直接在此页面上更新个人信息，包括但不限于头像、昵称、电话号码等关键资料。运行效果如图8.9(a)和图8.9(b)所示。图8.9(a)个人信息修改前展示效果图图8.9(b)个人信息修改后展示效果

3.3.1开发个人信息修改功能1需求描述表8.5开发过程中调用的API接口表接口调用方式说明用户修改API接口http://ip地址:端口/api/user/update-user本节进行开发在开发该功能时，我们需要使用后端项目的API接口，具体API接口信息见表8.5所示。

3.3.2开发个人信息修改功能2.开发用户修改API接口该API接口将接收前端传递的用户数据，对用户表（users）中相应的用户记录进行修改操作，并将操作结果返回给客户端。该接口的说明请参阅表8.6。（1）需求描述表8.6用户修改API接口说明表功能说明用户修改API接口调用路径http://ip地址:端口/api/user/update-userHTTP请求方式POST请求数据类型application/json请求数据参数参数名类型长度描述必须nikenamevarchar昵称■avatarvarchar

头像■sexvarchar

性别■phonevarchar电话■返回数据类型application/json返回数据参数参数名类型长度描述必须codevarchar状态码，200正确，其他错误■msgvarchar返回消息内容■请求参数JSON（样例）{

"nikename":"小李子",

"avatar":"7eeafa31-eaf0-4160-ae2e-6a29649ae593.jpeg",

"sex":"男",

"phone":}返回数据JSON（样例）{"code":"200","msg":"操作成功！"}

3.3.2开发个人信息修改功能2.开发用户修改API接口在“cls_svr”项目中，我们找到“/app/dao/UsersDao.py”文件，开发用户信息修改的数据库操作功能。以下是实现该功能的关键代码：（2）开发数据操作模块#数据库操作类classUsersDao:

#4.修改用户资料defupdateUserBySelf(self,user):

flag=True#成功标志，True操作成功，False操作失败try:#查询用户user_tmp=Users.query.get(user.uid)#设置用户修改的字段user_tmp.nikename=user.nikenameuser_tmp.avatar=user.avataruser_tmp.sex=user.sexuser_tmp.phone=user.phone

db.session.commit()#提交至数据库exceptExceptionase:flag=Falsedb.session.rollback()#异常，回滚数据库passreturnflag

3.3.2开发个人信息修改功能2.开发用户修改API接口在“cls_svr”项目中，请找到“/app/api/user_blueprint.py”用户蓝图文件。在这个蓝图中，我们将编写视图函数，实现API接口，用以处理用户修改的逻辑。以下是实现这一功能的关键代码：（3）开发业务逻辑模块#修改用户信息接口@user_blueprint.route('/update-user',methods=["POST"])@jwt_required()#用户身份鉴权defupdateUser():#返回信息result_msg={"code":"200","msg":"操作成功！"}#获取Json格式的请求，并解析JSONrequest_body=request.get_json()#判断传入的Json数据是否为空ifrequest.get_json()isNone:result_msg["code"]="404"result_msg["msg"]="参数错误"returnjsonify(result_msg)#获取参数nikename=request_body.get("nikename")avatar=request_body.get("avatar")sex=request_body.get("sex")phone=request_body.get("phone")#获取认证的用户编号(登录时，通过uid生成Token)uid=get_jwt_identity()

3.3.2开发个人信息修改功能2.开发用户修改API接口在“cls_svr”项目中，请找到“/app/api/user_blueprint.py”用户蓝图文件。在这个蓝图中，我们将编写视图函数，实现API接口，用以处理用户修改的逻辑。以下是实现这一功能的关键代码：（3）开发业务逻辑模块#创建数据库操作对象db_op=UsersDao()#新建用户对象user=Users(uid=uid,nikename=nikename,sex=sex,phone=phone,avatar=avatar)#修改用户信息flag=db_op.updateUserBySelf(user)ifflag:result_msg["code"]="200"result_msg["msg"]="操作成功！"else:result_msg["code"]="404"result_msg["msg"]="操作失败！"#返回操作结果returnjsonify(result_msg)

3.3.2开发个人信息修改功能2.开发用户修改API接口后端项目启动后，我们可以通过访问URL“:5000/api/user/update-user”来调用该API。在进行测试之前，请确保在请求的headers中设置Authorization参数，其值应当遵循“Bearer+空格+token”的格式，这里的token是我们在登录操作后收到的令牌。测试结果如图8.10所示。（4）API接口测试图8.10用户修改API接口测试结果

3.3.3开发个人信息修改功能3.开发个人信息修改功能在“cls_clt”项目中，我们找到“/src/views/UserView.vue”的个人信息展示页面。在这个文件中，我们调用“用户修改API接口”，开发用户个人资料修改功能。以下是实现这一功能的关键代码：（1）开发业务逻辑-1<scriptlang="ts"setup>//修改用户信息functioneditUser(){

axios({method:'post',url:'/svr/api/user/update-user',headers:{'Content-Type':'application/json',

Authorization:'Bearer'+token.value},data:dataForm}).then(function(response){if(response.data.code=='200'){//提示信息ElMessage({message:'修改成功！',type:'success',plain:true})}})

3.3.3开发个人信息修改功能3.开发个人信息修改功能在“cls_clt”项目中，我们找到“/src/views/UserView.vue”的个人信息展示页面。在这个文件中，我们调用“用户修改API接口”，开发用户个人资料修改功能。以下是实现这一功能的关键代码：（1）开发业务逻辑-2.catch(function(error){//鉴权判断if(error.response.status==401){//设置当前登录用户的token为空token.value=''userStore.setToken('')//提示信息ElMessage({message:'请重新登录！',type:'success',plain:true})}})}//修改按钮事件constsubmitForm=async(formEl:FormInstance|undefined)=>{if(!formEl)returnawaitformEl.validate((valid,fields)=>{if(valid){//修改用户信息editUser()}else{console.log('errorsubmit!',fields)}})}</script>

3.3.3开发个人信息修改功能3.开发个人信息修改功能成功运行前端项目，并在完成登录流程后，用户可以通过单击顶部导航栏中的用户中心菜单，进入用户个人信息展示页面。在这一界面上，用户可以对个人资料进行修改。运行效果如图8.9所示。（2）测试个人信息修改功能图8.9(a)个人信息修改前展示效果图图8.9(b)个人信息修改后展示效果

3.4开发我的书评展示功能任务步骤：1.需求描述2.开发我的书评API接口3.开发我的书评功能

3.4.1开发文学展示功能1需求描述我们计划在用户中心模块中开发了一项显示个人发布的书评信息的功能，使用户能够轻松浏览自己发布的书评信息。当用户访问“我的书评”页面时，系统将以列表形式展示用户以往所发表的书评。运行效果如图8.11所示。图8.11我的书评运行效果

3.4.1开发文学展示功能1需求描述在开发该功能时，我们需要使用后端项目的API接口，具体API接口信息见表8.7所示。表8.7开发过程中调用的API接口表接口调用方式说明我的书评API接口http://ip地址:端口/api/classics/get-mydiscuss本节进行开发图片显示API接口http://ip地址:端口/api/image/display/<string:type>/<strin