項目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