項(xiàng)目8：“古典文學(xué)網(wǎng)”用戶中心功能開(kāi)發(fā)

項(xiàng)目8：“古典文學(xué)網(wǎng)”用戶中心功能開(kāi)發(fā)XXX202X-XX-XX

目錄02.任務(wù)1：開(kāi)發(fā)個(gè)人信息展示功能05.任務(wù)4：開(kāi)發(fā)我的書評(píng)展示功能03.任務(wù)2：開(kāi)發(fā)用戶頭像上傳功能04.任務(wù)3：開(kāi)發(fā)個(gè)人信息修改功能01.文件上傳、文件下載及ElementPlus框架Upload組件06.任務(wù)5：開(kāi)發(fā)密碼重置功能07.拓展任務(wù)

學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)：了解Flask框架的文件上傳，并熟練掌握其原理及使用；了解Flask框架的文件下載，并熟練掌握其原理及使用；了解ElementPlus框架的Upload組件，掌握常用組件的布局和使用。能力目標(biāo)：通過(guò)學(xué)習(xí)Flask框架的文件上傳，能夠在項(xiàng)目中實(shí)現(xiàn)文件上傳；通過(guò)學(xué)習(xí)Flask框架的文件下載，能夠在項(xiàng)目中實(shí)現(xiàn)文件下載；通過(guò)學(xué)習(xí)ElementPlus的Upload組件，能夠在項(xiàng)目中開(kāi)發(fā)上傳應(yīng)用。素質(zhì)目標(biāo)：培養(yǎng)系統(tǒng)思維，嚴(yán)格遵守行業(yè)規(guī)范和標(biāo)準(zhǔn)，提高軟件質(zhì)量和可靠性；培養(yǎng)責(zé)任感、職業(yè)精神和團(tuán)隊(duì)精神，遵守職業(yè)道德。01項(xiàng)目描述

1.1.項(xiàng)目需求小白將在之前開(kāi)發(fā)工作的基礎(chǔ)上，完成“古典文學(xué)網(wǎng)”項(xiàng)目的“用戶中心”模塊的開(kāi)發(fā)，包括個(gè)人信息展示、我的書評(píng)以及密碼重置等功能。02知識(shí)儲(chǔ)備

2.知識(shí)儲(chǔ)備為了項(xiàng)目的順利開(kāi)發(fā)，小白需要掌握Flask框架的關(guān)鍵技術(shù)，如文件上傳、文件下載及ElementPlus框架Upload組件。

2.1

Flak框架的文件上傳文件上傳是Web應(yīng)用中不可或缺的功能之一。在Flask框架中，實(shí)現(xiàn)文件上傳功能通常涉及以下幾個(gè)步驟。首先，通過(guò)HTML表單中的<inputtype="file">元素，用戶可以選擇并上傳文件。隨后，在服務(wù)器端，F(xiàn)lask框架利用request.files這個(gè)字典來(lái)接收客戶端上傳的文件。最后，通過(guò)調(diào)用文件的save()方法，我們可以將上傳的文件永久地保存在文件系統(tǒng)中。下面，我們將開(kāi)發(fā)一個(gè)簡(jiǎn)潔的圖片上傳案例。

2.1.Flak框架的文件上傳具體的開(kāi)發(fā)步驟參考如下：首先，我們將創(chuàng)建一個(gè)名為“hi_upload”的Flask項(xiàng)目，并開(kāi)發(fā)其項(xiàng)目框架。項(xiàng)目的整體結(jié)構(gòu)如圖8.1所示。圖8.1“hi_upload”項(xiàng)目的框架目錄

2.1.Flak框架的文件上傳接下來(lái)，請(qǐng)找到“/app/conf/config.py”的配置文件。在此文件中，我們將定義文件上傳的目錄及允許上傳的文件擴(kuò)展名的集合。以下具體代碼的實(shí)訓(xùn)。#文件存放目錄FILE_PATH=r'D:/upload_file'#上傳文件時(shí)，允許的文件擴(kuò)展名的集合ALLOWED_EXTENSIONS=set(['png','gif','jpg','webp','jpeg'])

2.1.Flak框架的文件上傳隨后，我們找到“/app.py”的文件。在此文件中，我們開(kāi)發(fā)文件上傳的視圖函數(shù)。以下是具體代碼實(shí)現(xiàn)：fromflaskimportFlask,requestfromflaskimportjsonifyimportosimportuuid#導(dǎo)入上傳的配置(路徑，擴(kuò)展名的集合)fromconfigimportFILE_PATH,ALLOWED_EXTENSIONS#secure_filename函數(shù)可以避免潛在的文件名安全問(wèn)題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是上傳文件的參數(shù)名稱）if'file'notinrequest.files:result_msg["code"]="404"result_msg["msg"]="文件不存在！"returnjsonify(result_msg)接左邊：

#判斷上傳目錄是否存在，不存在則創(chuàng)建對(duì)應(yīng)目錄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:#構(gòu)建返回的Json數(shù)據(jù)result_msg["code"]="400"result_msg["msg"]="上傳失??！"#返回操作結(jié)果returnjsonify(result_msg)if__name__=='__main__':#啟動(dòng)服務(wù)，設(shè)置主機(jī)和端口app.run(host="",port=5000,debug=True)

2.1.Flak框架的文件上傳項(xiàng)目啟動(dòng)后，我們可以訪問(wèn)URL“:5000/upload”來(lái)調(diào)用該API。測(cè)試結(jié)果如圖8.2所示。圖8.2文件上傳API接口測(cè)試結(jié)果

2.2Flak框架的文件下載send_file函數(shù)是Flask中最常用的文件下載方法之一。它允許我們從服務(wù)器向客戶端發(fā)送文件，而不需要將整個(gè)文件讀入內(nèi)存中。該函數(shù)的語(yǔ)法參考如下：1.使用send_file函數(shù)send_file(path_or_file,as_attachment=True,download_name=filename)在上述代碼中，參數(shù)說(shuō)明如下：path_or_file：需要發(fā)送的文件路徑或者二進(jìn)制文件對(duì)象；as_attachment：如果設(shè)置為True，瀏覽器會(huì)提示用戶下載文件，而不是嘗試在瀏覽器中打開(kāi)它。默認(rèn)值為False；download_name：保存文件時(shí)附件的默認(rèn)名稱，默認(rèn)為文件名。

2.2Flak框架的文件下載我們基于上一小節(jié)的“hi_upload”項(xiàng)目，利用send_file函數(shù)來(lái)構(gòu)建一個(gè)文件下載案例。在/app.py文件中，我定義了一個(gè)專門用于處理文件下載的視圖函數(shù)，實(shí)現(xiàn)API接口。以下是實(shí)現(xiàn)這一功能的具體代碼：1.使用send_file函數(shù)fromflaskimportsend_file#下載文件@app.route('/downloadfile/<filename>')

defdownload_file(filename):

#構(gòu)建下載文件的路徑

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

#使用send_file函數(shù)發(fā)送文件

#as_attachment=True將會(huì)告訴瀏覽器這是一個(gè)附件，應(yīng)該下載而不是顯示

#如果我們的文件名是中文或有特殊字符，可能需要設(shè)置download_name

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

2.2Flak框架的文件下載最后，項(xiàng)目啟動(dòng)后，我們可以在瀏覽器中訪問(wèn)URL“:5000/downloadfile/580d7438-63a4-4e8c-9351-634c4e9b41c1.png”來(lái)下載圖片“580d7438-63a4-4e8c-9351-634c4e9b41c1.png”（該圖片是上一節(jié)中上傳的圖片）。下載的結(jié)果如圖8.3所示。1.使用send_file函數(shù)圖8.3文件下載測(cè)試結(jié)果

2.2Flak框架的文件下載send_from_directory函數(shù)與send_file函數(shù)類似，它用于從指定目錄中發(fā)送文件給客戶端。該函數(shù)的語(yǔ)法如下：2.使用send_from_directory函數(shù)send_from_directory(directory,filename,as_attachment=True)在上述代碼中，參數(shù)說(shuō)明如下：directory：文件所在的目錄路徑（相對(duì)于Flask應(yīng)用的根目錄或絕對(duì)路徑）；filename：要發(fā)送的文件的名稱；as_attachment（可選）：如果設(shè)置為True，瀏覽器會(huì)提示用戶下載文件，而不是嘗試在瀏覽器中打開(kāi)它。默認(rèn)值為False。

2.2Flak框架的文件下載我們基于上一小節(jié)的“hi_upload”項(xiàng)目，利用send_from_directory函數(shù)來(lái)構(gòu)建一個(gè)文件下載案例。在/app.py文件中，開(kāi)發(fā)了用于處理文件下載的視圖函數(shù)，實(shí)現(xiàn)API接口。以下是實(shí)現(xiàn)這一功能的具體代碼：2.使用send_from_directory函數(shù)fromflaskimportsend_from_directory#下載文件@app.route('/download/<filename>')defdownload(filename):

#檢查文件名是否安全（防止目錄遍歷等攻擊）if'..'infilenameorfilename.startswith('/'):return"BadRequest",400#as_attachment=True將會(huì)告訴瀏覽器這是一個(gè)附件，應(yīng)該下載而不是顯示#發(fā)送文件returnsend_from_directory(FILE_PATH,filename,as_attachment=True)

2.2Flak框架的文件下載最后，項(xiàng)目啟動(dòng)后，可以通過(guò)瀏覽器訪問(wèn)URL“:5000/download/580d7438-63a4-4e8c-9351-634c4e9b41c1.png”來(lái)下載圖片“580d7438-63a4-4e8c-9351-634c4e9b41c1.png”（該圖片是上一節(jié)中上傳的圖片）。下載的結(jié)果如圖8.4所示。2.使用send_from_directory函數(shù)圖8.4文件下載測(cè)試結(jié)果

2.3ElementPlus的Upload組件Upload組件提供了單擊或拖拽的便捷方式，使用戶能夠?qū)⑽募蟼髦练?wù)器。這一組件通過(guò)el-upload標(biāo)簽在文件上傳頁(yè)面中實(shí)現(xiàn)布局，靈活適應(yīng)并展示多種文件上傳場(chǎng)景，為用戶提供了豐富的上傳體驗(yàn)。Upload組件具有以下一些常用屬性和事件，見(jiàn)表8.1。屬性說(shuō)明action請(qǐng)求URL。headers設(shè)置上傳的請(qǐng)求頭部。method設(shè)置上傳請(qǐng)求方法。multiple是否支持多選文件。data上傳時(shí)附帶的額外參數(shù)從v2.3.13支持Awaitable數(shù)據(jù)，和Function。name上傳的文件字段名。drag是否啟用拖拽上傳。auto-upload是否自動(dòng)上傳文件。on-success文件上傳成功時(shí)的鉤子。on-error文件上傳失敗時(shí)的鉤子。before-upload上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回false或者返回Promise且被reject，則停止上傳。on-progress文件上傳時(shí)的鉤子。表8.1Upload組件的常用屬性

2.3ElementPlus的Upload組件logo圖8.5Upload組件運(yùn)行效果接下來(lái)，我們利用ElementPlus框架中的Upload組件，來(lái)開(kāi)發(fā)一個(gè)頭像上傳界面。具體的設(shè)計(jì)預(yù)期如圖8.5所示。

2.3ElementPlus的Upload組件logo上圖所展示的網(wǎng)頁(yè)布局所對(duì)應(yīng)的源代碼詳情如下：<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('')//上傳頭像成功的回調(diào)函數(shù)consthandleAvatarSuccess:UploadProps['onSuccess']=(response,uploadFile)=>{imageUrl.value=URL.createObjectURL(uploadFile.raw!)}//上傳頭像前的回調(diào)函數(shù)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項(xiàng)目任務(wù)小白馬上要進(jìn)行“用戶中心”功能模塊的開(kāi)發(fā)工作。由于該模塊的開(kāi)發(fā)將涉及項(xiàng)目前后端的協(xié)同作業(yè)，這無(wú)疑將對(duì)小白的開(kāi)發(fā)能力構(gòu)成一次嚴(yán)峻的挑戰(zhàn)。

3.1開(kāi)發(fā)個(gè)人信息展示功能任務(wù)步驟：1.需求描述2.開(kāi)發(fā)側(cè)邊欄導(dǎo)航組件3.開(kāi)發(fā)個(gè)人信息展示功能

3.1開(kāi)發(fā)個(gè)人信息展示功能1.需求描述我們將開(kāi)發(fā)一個(gè)用戶個(gè)人信息展示功能，為用戶提供個(gè)人資料的展示服務(wù)。通過(guò)此功能，當(dāng)前登錄用戶的個(gè)人資料將被呈現(xiàn)在個(gè)人資料頁(yè)面。運(yùn)行效果如圖8.6所示。圖8.6個(gè)人信息展示效果

3.1開(kāi)發(fā)個(gè)人信息展示功能1.需求描述在開(kāi)發(fā)該功能時(shí)，我們需要使用后端項(xiàng)目的API接口，具體API接口信息見(jiàn)表8.2所示。表8.2開(kāi)發(fā)過(guò)程中調(diào)用的API接口表接口調(diào)用方式說(shuō)明查詢用戶信息API接口http://ip地址:端口/api/user/get-user請(qǐng)參考項(xiàng)目6中的“6.3.1.開(kāi)發(fā)導(dǎo)航欄用戶中心顯示功能”小節(jié)圖片顯示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>請(qǐng)參考項(xiàng)目2中的“2.3.5.開(kāi)發(fā)圖片顯示API接口”小節(jié)

3.1開(kāi)發(fā)個(gè)人信息展示功能2開(kāi)發(fā)側(cè)邊欄導(dǎo)航組件在“cls_clt”項(xiàng)目中，我們找到“/src/components”這一組件目錄，并在其中新建一個(gè)名為AsideComp.vue的側(cè)邊欄導(dǎo)航組件。在此組件中，我們將根據(jù)當(dāng)前用戶的登錄狀態(tài)來(lái)判斷當(dāng)前用戶是否具有訪問(wèn)權(quán)限。以下提供了該組件的具體代碼實(shí)現(xiàn)：（1）開(kāi)發(fā)業(yè)務(wù)邏輯<scriptlang="ts"setup>import{ref,onMounted}from'vue'import{useRouter}from'vue-router'//引入狀態(tài)管理文件import{useTokenStore}from'@/stores/token'import{ElMessage}from'element-plus'//創(chuàng)建Token狀態(tài)管理StoreconstuserStore=useTokenStore()//獲取登錄的Tokenconsttoken=ref(userStore.getToken())//創(chuàng)建路由對(duì)象，用于編程式導(dǎo)航constrouter=useRouter()//用于接收傳遞給組件的數(shù)據(jù)，此處傳遞的是選中的菜單索引constprops=defineProps({asideIndex:String})//設(shè)置菜單選中索引constasideIndex=props.asideIndex接左邊：//判斷是否具有訪問(wèn)權(quán)限functionisRight(){

//判斷Token是否為空

if(token.value==''){

//提示信息

ElMessage({

message:'請(qǐng)重新登錄！',

type:'success',

plain:true

})

//跳轉(zhuǎn)至登錄頁(yè)

router.push('/login')

}}//完成初始渲染并創(chuàng)建DOM節(jié)點(diǎn)后，進(jìn)行頁(yè)面加載onMounted(()=>{

//判斷是否具有訪問(wèn)權(quán)限

isRight()})</script>

3.1開(kāi)發(fā)個(gè)人信息展示功能2開(kāi)發(fā)側(cè)邊欄導(dǎo)航組件在“cls_clt”項(xiàng)目的AsideComp.vue側(cè)邊欄導(dǎo)航組件中，我們采用Menu菜單組件來(lái)開(kāi)發(fā)側(cè)邊欄導(dǎo)航功能，包括了個(gè)人信息、我的書評(píng)、修改密碼、退出等菜單欄，并通過(guò)相應(yīng)的配置，將其整合至AsideComp.vue中。以下是實(shí)現(xiàn)這一功能的具體代碼：（2）開(kāi)發(fā)頁(yè)面邏輯<template>

<!--用戶中心側(cè)邊導(dǎo)航開(kāi)始-->

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

<el-menu-itemindex="">

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

<span>個(gè)人信息</span>

</el-menu-item>

<el-menu-itemindex="">

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

<span>我的書評(píng)</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開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能在“cls_clt”項(xiàng)目中，我們找到“/src/views/”目錄。隨后，在該目錄下，我們創(chuàng)建一個(gè)新的頁(yè)面文件，命名為“UserView.vue”。在“UserView.vue”頁(yè)面中，我們將開(kāi)發(fā)個(gè)人信息展示功能。以下是實(shí)現(xiàn)這一功能的具體代碼參考：（1）開(kāi)發(fā)業(yè)務(wù)邏輯-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'//引入頂部導(dǎo)航組件importHeaderCompfrom'../components/HeaderComp.vue'//引入底部組件importFooterCompfrom'@/components/FooterComp.vue'//引入側(cè)邊組件importAsideCompfrom'@/components/AsideComp.vue'//引入狀態(tài)管理文件import{useTokenStore}from'@/stores/token'constaxios=inject('axios')//注入axios//創(chuàng)建路由對(duì)象，用于編程式導(dǎo)航constrouter=useRouter()

3.1開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能在“cls_clt”項(xiàng)目中，我們找到“/src/views/”目錄。隨后，在該目錄下，我們創(chuàng)建一個(gè)新的頁(yè)面文件，命名為“UserView.vue”。在“UserView.vue”頁(yè)面中，我們將開(kāi)發(fā)個(gè)人信息展示功能。以下是實(shí)現(xiàn)這一功能的具體代碼參考：（1）開(kāi)發(fā)業(yè)務(wù)邏輯-2//創(chuàng)建Token狀態(tài)管理StoreconstuserStore=useTokenStore()//獲取登錄的Tokenconsttoken=ref(userStore.getToken())//導(dǎo)航欄菜單選中索引constactiveIndex=ref('/user')//側(cè)邊欄菜單選中索引constasideIndex=ref('/user')//用戶數(shù)據(jù)varuser=ref({})//頭像UrlconstavatarUrl=ref('/svr/api/image/display/head/tx.png')//以下為表單數(shù)據(jù)校驗(yàn)代碼interfaceDataForm{nikename:stringsex:stringphone:stringavatar:string}

3.1開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能在“cls_clt”項(xiàng)目中，我們找到“/src/views/”目錄。隨后，在該目錄下，我們創(chuàng)建一個(gè)新的頁(yè)面文件，命名為“UserView.vue”。在“UserView.vue”頁(yè)面中，我們將開(kāi)發(fā)個(gè)人信息展示功能。以下是實(shí)現(xiàn)這一功能的具體代碼參考：（1）開(kāi)發(fā)業(yè)務(wù)邏輯-3construleFormRef=ref<FormInstance>()//表單數(shù)據(jù)(用戶數(shù)據(jù))constdataForm=reactive<DataForm>({nikename:'',sex:'男',phone:'',avatar:'tx.png'})//表單校驗(yàn)規(guī)則construles=reactive<FormRules<DataForm>>({nikename:[{required:true,message:'請(qǐng)輸入昵稱...',trigger:'blur'}],phone:[{required:true,message:'請(qǐng)輸入電話...',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開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能在“cls_clt”項(xiàng)目中，我們找到“/src/views/”目錄。隨后，在該目錄下，我們創(chuàng)建一個(gè)新的頁(yè)面文件，命名為“UserView.vue”。在“UserView.vue”頁(yè)面中，我們將開(kāi)發(fā)個(gè)人信息展示功能。以下是實(shí)現(xiàn)這一功能的具體代碼參考：（1）開(kāi)發(fā)業(yè)務(wù)邏輯-4//重置按鈕事件constresetForm=(formEl:FormInstance|undefined)=>{if(!formEl)returnformEl.resetFields()}

3.1開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能在“cls_clt”項(xiàng)目中，我們找到“/src/views/”目錄。隨后，在該目錄下，我們創(chuàng)建一個(gè)新的頁(yè)面文件，命名為“UserView.vue”。在“UserView.vue”頁(yè)面中，我們將開(kāi)發(fā)個(gè)人信息展示功能。以下是實(shí)現(xiàn)這一功能的具體代碼參考：（1）開(kāi)發(fā)業(yè)務(wù)邏輯-5//調(diào)用API接口，獲取當(dāng)前登錄用戶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//初始化表單數(shù)據(jù)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)//鑒權(quán)判斷if(error.response.status==401){//沒(méi)有權(quán)限或已過(guò)期，設(shè)置token為空token.value=''userStore.setToken('')//提示信息ElMessage({message:'請(qǐng)重新登錄！',type:'success',plain:true})}})}}//完成初始渲染并創(chuàng)建DOM節(jié)點(diǎn)后，進(jìn)行頁(yè)面加載onMounted(()=>{//初始化用戶數(shù)據(jù)initUser()})</script>

3.1開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能接下來(lái)，在“cls_clt”項(xiàng)目中，我們找到“/src/router/index.js”路由配置文件。在該文件中，我們將為個(gè)人信息展示頁(yè)面配置相應(yīng)的路由信息。以下是配置此功能的關(guān)鍵代碼參考：（1）開(kāi)發(fā)業(yè)務(wù)邏輯-6//導(dǎo)入組件importUserViewfrom'@/views/UserView.vue'constrouter=createRouter({

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

routes:[

{

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

3.1開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能在“cls_clt”項(xiàng)目的UserView.vue頁(yè)面文件中，我們將當(dāng)前登錄用戶的個(gè)人信息呈現(xiàn)給用戶。以下是實(shí)現(xiàn)這一功能的具體代碼：（2）開(kāi)發(fā)頁(yè)面邏輯-1<template><el-container><el-header><HeaderComp:active-index="activeIndex"/></el-header><el-container><el-asidewidth="200px"><!--側(cè)邊導(dǎo)航組件--><AsideComp:aside-index="asideIndex"/></el-aside><el-container><el-main><div><!--用戶信息開(kāi)始--><elheader><template#icon><el-icon><User/></el-icon></template><template#title>用戶信息</template>

3.1開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能在“cls_clt”項(xiàng)目的UserView.vue頁(yè)面文件中，我們將當(dāng)前登錄用戶的個(gè)人信息呈現(xiàn)給用戶。以下是實(shí)現(xiàn)這一功能的具體代碼：（2）開(kāi)發(fā)頁(yè)面邏輯-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="頭像"><!--頭像上傳組件開(kāi)始--><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><!--頭像上傳組件結(jié)束--></el-form-item>

3.1開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能在“cls_clt”項(xiàng)目的UserView.vue頁(yè)面文件中，我們將當(dāng)前登錄用戶的個(gè)人信息呈現(xiàn)給用戶。以下是實(shí)現(xiàn)這一功能的具體代碼：（2）開(kāi)發(fā)頁(yè)面邏輯-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開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能在“cls_clt”項(xiàng)目的UserView.vue頁(yè)面文件中，我們將當(dāng)前登錄用戶的個(gè)人信息呈現(xiàn)給用戶。以下是實(shí)現(xiàn)這一功能的具體代碼：（2）開(kāi)發(fā)頁(yè)面邏輯-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開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能接下來(lái)，我們需要在頂部導(dǎo)航組件和側(cè)邊欄導(dǎo)航組件等關(guān)鍵組件添加指向個(gè)人信息展示頁(yè)面的路由。以下是實(shí)現(xiàn)這一功能的關(guān)鍵代碼參考：HeaderComp.vue（頂部導(dǎo)航組件）關(guān)鍵代碼：（2）開(kāi)發(fā)頁(yè)面邏輯-5

<el-menu-itemindex="/user">用戶中心</el-menu-item>AsideComp.vue（頂部導(dǎo)航組件）關(guān)鍵代碼：<el-menu-itemindex="/user"><el-icon><User/></el-icon><span>個(gè)人信息</span></el-menu-item>

3.1開(kāi)發(fā)個(gè)人信息展示功能3開(kāi)發(fā)個(gè)人信息展示功能成功運(yùn)行前端項(xiàng)目，并在完成登錄流程后，用戶單擊頂部導(dǎo)航欄中的用戶中心菜單，即可順利進(jìn)入用戶個(gè)人信息展示頁(yè)面。運(yùn)行效果如圖8.6所示。（3）測(cè)試個(gè)人信息展示功能圖8.6個(gè)人信息展示效果

3.2開(kāi)發(fā)用戶頭像上傳功能任務(wù)步驟：1.需求描述2.開(kāi)發(fā)頭像上傳API接口3.開(kāi)發(fā)頭像上傳功能

3.2開(kāi)發(fā)用戶頭像上傳功能1.需求描述我們計(jì)劃在用戶個(gè)人信息展示頁(yè)面增設(shè)一個(gè)頭像上傳功能。當(dāng)用戶訪問(wèn)個(gè)人信息展示頁(yè)面時(shí)，只需輕輕單擊當(dāng)前頭像，便會(huì)彈出一個(gè)圖片選擇窗口。用戶從中挑選出心儀的頭像后，系統(tǒng)將自動(dòng)調(diào)用后端的頭像上傳API接口，將所選頭像迅速上傳至服務(wù)端。上傳成功后，用戶的頭像將在頁(yè)面上實(shí)時(shí)更新，呈現(xiàn)全新風(fēng)貌。這一功能的操作流程與效果詳見(jiàn)圖8.7(a)，圖8.7(b)所示。圖8.7(a)頭像選擇效果圖8.7(b)頭像上傳后效果

3.2開(kāi)發(fā)用戶頭像上傳功能1.需求描述在開(kāi)發(fā)該功能時(shí)，我們需要使用后端項(xiàng)目的API接口，具體API接口信息見(jiàn)表8.3所示。表8.3開(kāi)發(fā)過(guò)程中調(diào)用的API接口表接口調(diào)用方式說(shuō)明頭像上傳API接口http://ip地址:端口/api/user/upload本節(jié)進(jìn)行開(kāi)發(fā)圖片顯示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>請(qǐng)參考項(xiàng)目2中的“2.3.5.開(kāi)發(fā)圖片顯示API接口”小節(jié)

3.2開(kāi)發(fā)用戶頭像上傳功能2.開(kāi)發(fā)頭像上傳API接口（1）需求描述該API接口將接收待上傳的圖片，將其存儲(chǔ)至項(xiàng)目配置中指定的用戶頭像圖片目錄。在圖片上傳的過(guò)程中，系統(tǒng)會(huì)對(duì)上傳的頭像進(jìn)行重新命名，并在完成后向客戶端返回上傳的結(jié)果。該接口的說(shuō)明請(qǐng)參閱表8.4。表8.4頭像上傳API接口說(shuō)明表功能說(shuō)明頭像上傳API接口調(diào)用路徑http://ip地址:端口/api/user/uploadHTTP請(qǐng)求方式POST請(qǐng)求數(shù)據(jù)類型application/x-www-form-urlencoded請(qǐng)求數(shù)據(jù)參數(shù)參數(shù)名類型長(zhǎng)度描述必須filefile圖片文件（png,gif,jpg等）■返回?cái)?shù)據(jù)類型application/json返回?cái)?shù)據(jù)參數(shù)參數(shù)名類型長(zhǎng)度描述必須codevarchar狀態(tài)碼，200正確，其他錯(cuò)誤■msgvarchar返回消息內(nèi)容■upFilevarchar返回頭像圖片名稱■請(qǐng)求參數(shù)（樣例）file:4.jpg返回?cái)?shù)據(jù)JSON（樣例）{

"code":"200",

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

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

3.2開(kāi)發(fā)用戶頭像上傳功能2.開(kāi)發(fā)頭像上傳API接口（2）開(kāi)發(fā)業(yè)務(wù)邏輯模塊首先，在“cls_svr”項(xiàng)目中，我們找到“/app/conf/config.py”配置文件。在此文件中，我們將定義允許上傳的圖片擴(kuò)展名的集合。以下是實(shí)現(xiàn)這一功能的關(guān)鍵代碼：#上傳文件時(shí)，允許的頭像圖片擴(kuò)展名的集合ALLOWED_EXTENSIONS=set(['png','gif','jpg','webp','jpeg'])

3.2開(kāi)發(fā)用戶頭像上傳功能2.開(kāi)發(fā)頭像上傳API接口（2）開(kāi)發(fā)業(yè)務(wù)邏輯模塊接下來(lái)，在“cls_svr”項(xiàng)目中，我們找到“/app/api/user_blueprint.py”用戶藍(lán)圖文件。在此藍(lán)圖中，我們將定義用于頭像上傳的視圖函數(shù)，實(shí)現(xiàn)API接口。以下是實(shí)現(xiàn)這一功能的關(guān)鍵代碼：importosimportuuid#導(dǎo)入上傳頭像的配置(頭像路徑，圖片擴(kuò)展名的集合)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開(kāi)發(fā)用戶頭像上傳功能2.開(kāi)發(fā)頭像上傳API接口（2）開(kāi)發(fā)業(yè)務(wù)邏輯模塊接下來(lái)，在“cls_svr”項(xiàng)目中，我們找到“/app/api/user_blueprint.py”用戶藍(lán)圖文件。在此藍(lán)圖中，我們將定義用于頭像上傳的視圖函數(shù)，實(shí)現(xiàn)API接口。以下是實(shí)現(xiàn)這一功能的關(guān)鍵代碼：#獲取上傳文件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:#構(gòu)建返回的Json數(shù)據(jù)result_msg["code"]="400"result_msg["msg"]="上傳失??！"#返回操作結(jié)果returnjsonify(result_msg)

3.2開(kāi)發(fā)用戶頭像上傳功能2.開(kāi)發(fā)頭像上傳API接口（3）API接口測(cè)試后端項(xiàng)目啟動(dòng)后，我們可以通過(guò)訪問(wèn)URL“:5000/api/user/upload”來(lái)調(diào)用該API。測(cè)試結(jié)果如圖8.8所示。圖8.8頭像上傳API接口測(cè)試結(jié)果

3.2開(kāi)發(fā)用戶頭像上傳功能3.開(kāi)發(fā)頭像上傳功能（1）開(kāi)發(fā)業(yè)務(wù)邏輯在“cls_clt”項(xiàng)目中，我們找到“/src/views/UserView.vue”的個(gè)人信息展示頁(yè)面。在該文件中，我們將調(diào)用“頭像上傳API接口”實(shí)現(xiàn)頭像上傳功能。以下是實(shí)現(xiàn)這一功能的關(guān)鍵代碼：<scriptlang="ts"setup>//上傳頭像成功的回調(diào)函數(shù)consthandleAvatarSuccess:UploadProps['onSuccess']=(response,uploadFile)=>{//設(shè)置新頭像URLavatarUrl.value=URL.createObjectURL(uploadFile.raw!)//更新用戶數(shù)據(jù)的頭像名稱dataForm.avatar=response.upFile}//上傳頭像前的回調(diào)函數(shù)constbeforeAvatarUpload:UploadProps['beforeUpload']=(rawFile)=>{//獲取上傳頭像的后綴constfileSuffix=rawF.substring(rawF.lastIndexOf('.')+1).toLowerCase()//允許上傳的頭像擴(kuò)展名的集合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('頭像大小不能超過(guò)2MB!')returnfalse}returntrue}</script>

3.2開(kāi)發(fā)用戶頭像上傳功能3.開(kāi)發(fā)頭像上傳功能（2）開(kāi)發(fā)頁(yè)面邏輯在cls_clt項(xiàng)目的UserView.vue頁(yè)面文件中，我們?yōu)閑l-upload上傳組件增添了調(diào)用頭像上傳API接口的功能，從而實(shí)現(xiàn)了用戶頭像的上傳。以下是實(shí)現(xiàn)這一功能的關(guān)鍵代碼：<template>

<el-form-itemlabel="頭像"><!--頭像上傳組件開(kāi)始--><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><!--頭像上傳組件結(jié)束--></el-form-item></template>

3.2開(kāi)發(fā)用戶頭像上傳功能3.開(kāi)發(fā)頭像上傳功能（3）測(cè)試頭像上傳功能成功運(yùn)行前端項(xiàng)目，并在完成登錄流程后，用戶可以通過(guò)單擊頂部導(dǎo)航欄中的用戶中心菜單，進(jìn)入用戶個(gè)人信息展示頁(yè)面。在該頁(yè)面上，用戶只需單擊自己的頭像，便能選擇并上傳他們心儀的頭像圖片，從而完成頭像的上傳更新。實(shí)際運(yùn)行效果如圖8.7所示。圖8.7(a)頭像選擇效果圖8.7(b)頭像上傳后效果

3.3開(kāi)發(fā)個(gè)人信息修改功能任務(wù)步驟：1.需求描述2.開(kāi)發(fā)用戶修改API接口3.開(kāi)發(fā)個(gè)人信息修改功能

3.3.1開(kāi)發(fā)個(gè)人信息修改功能1需求描述我們需要在用戶個(gè)人信息展示頁(yè)面中增設(shè)個(gè)人信息修改功能。當(dāng)用戶瀏覽個(gè)人信息展示頁(yè)面時(shí)，能夠直接在此頁(yè)面上更新個(gè)人信息，包括但不限于頭像、昵稱、電話號(hào)碼等關(guān)鍵資料。運(yùn)行效果如圖8.9(a)和圖8.9(b)所示。圖8.9(a)個(gè)人信息修改前展示效果圖圖8.9(b)個(gè)人信息修改后展示效果

3.3.1開(kāi)發(fā)個(gè)人信息修改功能1需求描述表8.5開(kāi)發(fā)過(guò)程中調(diào)用的API接口表接口調(diào)用方式說(shuō)明用戶修改API接口http://ip地址:端口/api/user/update-user本節(jié)進(jìn)行開(kāi)發(fā)在開(kāi)發(fā)該功能時(shí)，我們需要使用后端項(xiàng)目的API接口，具體API接口信息見(jiàn)表8.5所示。

3.3.2開(kāi)發(fā)個(gè)人信息修改功能2.開(kāi)發(fā)用戶修改API接口該API接口將接收前端傳遞的用戶數(shù)據(jù)，對(duì)用戶表（users）中相應(yīng)的用戶記錄進(jìn)行修改操作，并將操作結(jié)果返回給客戶端。該接口的說(shuō)明請(qǐng)參閱表8.6。（1）需求描述表8.6用戶修改API接口說(shuō)明表功能說(shuō)明用戶修改API接口調(diào)用路徑http://ip地址:端口/api/user/update-userHTTP請(qǐng)求方式POST請(qǐng)求數(shù)據(jù)類型application/json請(qǐng)求數(shù)據(jù)參數(shù)參數(shù)名類型長(zhǎng)度描述必須nikenamevarchar昵稱■avatarvarchar

頭像■sexvarchar

性別■phonevarchar電話■返回?cái)?shù)據(jù)類型application/json返回?cái)?shù)據(jù)參數(shù)參數(shù)名類型長(zhǎng)度描述必須codevarchar狀態(tài)碼，200正確，其他錯(cuò)誤■msgvarchar返回消息內(nèi)容■請(qǐng)求參數(shù)JSON（樣例）{

"nikename":"小李子",

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

"sex":"男",

"phone":}返回?cái)?shù)據(jù)JSON（樣例）{"code":"200","msg":"操作成功！"}

3.3.2開(kāi)發(fā)個(gè)人信息修改功能2.開(kāi)發(fā)用戶修改API接口在“cls_svr”項(xiàng)目中，我們找到“/app/dao/UsersDao.py”文件，開(kāi)發(fā)用戶信息修改的數(shù)據(jù)庫(kù)操作功能。以下是實(shí)現(xiàn)該功能的關(guān)鍵代碼：（2）開(kāi)發(fā)數(shù)據(jù)操作模塊#數(shù)據(jù)庫(kù)操作類classUsersDao:

#4.修改用戶資料defupdateUserBySelf(self,user):

flag=True#成功標(biāo)志，True操作成功，F(xiàn)alse操作失敗try:#查詢用戶user_tmp=Users.query.get(user.uid)#設(shè)置用戶修改的字段user_tmp.nikename=user.nikenameuser_tmp.avatar=user.avataruser_tmp.sex=user.sexuser_tmp.phone=user.phone

db.session.commit()#提交至數(shù)據(jù)庫(kù)exceptExceptionase:flag=Falsedb.session.rollback()#異常，回滾數(shù)據(jù)庫(kù)passreturnflag

3.3.2開(kāi)發(fā)個(gè)人信息修改功能2.開(kāi)發(fā)用戶修改API接口在“cls_svr”項(xiàng)目中，請(qǐng)找到“/app/api/user_blueprint.py”用戶藍(lán)圖文件。在這個(gè)藍(lán)圖中，我們將編寫視圖函數(shù)，實(shí)現(xiàn)API接口，用以處理用戶修改的邏輯。以下是實(shí)現(xiàn)這一功能的關(guān)鍵代碼：（3）開(kāi)發(fā)業(yè)務(wù)邏輯模塊#修改用戶信息接口@user_blueprint.route('/update-user',methods=["POST"])@jwt_required()#用戶身份鑒權(quán)defupdateUser():#返回信息result_msg={"code":"200","msg":"操作成功！"}#獲取Json格式的請(qǐng)求，并解析JSONrequest_body=request.get_json()#判斷傳入的Json數(shù)據(jù)是否為空ifrequest.get_json()isNone:result_msg["code"]="404"result_msg["msg"]="參數(shù)錯(cuò)誤"returnjsonify(result_msg)#獲取參數(shù)nikename=request_body.get("nikename")avatar=request_body.get("avatar")sex=request_body.get("sex")phone=request_body.get("phone")#獲取認(rèn)證的用戶編號(hào)(登錄時(shí)，通過(guò)uid生成Token)uid=get_jwt_identity()

3.3.2開(kāi)發(fā)個(gè)人信息修改功能2.開(kāi)發(fā)用戶修改API接口在“cls_svr”項(xiàng)目中，請(qǐng)找到“/app/api/user_blueprint.py”用戶藍(lán)圖文件。在這個(gè)藍(lán)圖中，我們將編寫視圖函數(shù)，實(shí)現(xiàn)API接口，用以處理用戶修改的邏輯。以下是實(shí)現(xiàn)這一功能的關(guān)鍵代碼：（3）開(kāi)發(fā)業(yè)務(wù)邏輯模塊#創(chuàng)建數(shù)據(jù)庫(kù)操作對(duì)象db_op=UsersDao()#新建用戶對(duì)象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"]="操作失??！"#返回操作結(jié)果returnjsonify(result_msg)

3.3.2開(kāi)發(fā)個(gè)人信息修改功能2.開(kāi)發(fā)用戶修改API接口后端項(xiàng)目啟動(dòng)后，我們可以通過(guò)訪問(wèn)URL“:5000/api/user/update-user”來(lái)調(diào)用該API。在進(jìn)行測(cè)試之前，請(qǐng)確保在請(qǐng)求的headers中設(shè)置Authorization參數(shù)，其值應(yīng)當(dāng)遵循“Bearer+空格+token”的格式，這里的token是我們?cè)诘卿洸僮骱笫盏降牧钆?。測(cè)試結(jié)果如圖8.10所示。（4）API接口測(cè)試圖8.10用戶修改API接口測(cè)試結(jié)果

3.3.3開(kāi)發(fā)個(gè)人信息修改功能3.開(kāi)發(fā)個(gè)人信息修改功能在“cls_clt”項(xiàng)目中，我們找到“/src/views/UserView.vue”的個(gè)人信息展示頁(yè)面。在這個(gè)文件中，我們調(diào)用“用戶修改API接口”，開(kāi)發(fā)用戶個(gè)人資料修改功能。以下是實(shí)現(xiàn)這一功能的關(guān)鍵代碼：（1）開(kāi)發(fā)業(yè)務(wù)邏輯-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開(kāi)發(fā)個(gè)人信息修改功能3.開(kāi)發(fā)個(gè)人信息修改功能在“cls_clt”項(xiàng)目中，我們找到“/src/views/UserView.vue”的個(gè)人信息展示頁(yè)面。在這個(gè)文件中，我們調(diào)用“用戶修改API接口”，開(kāi)發(fā)用戶個(gè)人資料修改功能。以下是實(shí)現(xiàn)這一功能的關(guān)鍵代碼：（1）開(kāi)發(fā)業(yè)務(wù)邏輯-2.catch(function(error){//鑒權(quán)判斷if(error.response.status==401){//設(shè)置當(dāng)前登錄用戶的token為空token.value=''userStore.setToken('')//提示信息ElMessage({message:'請(qǐng)重新登錄！',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開(kāi)發(fā)個(gè)人信息修改功能3.開(kāi)發(fā)個(gè)人信息修改功能成功運(yùn)行前端項(xiàng)目，并在完成登錄流程后，用戶可以通過(guò)單擊頂部導(dǎo)航欄中的用戶中心菜單，進(jìn)入用戶個(gè)人信息展示頁(yè)面。在這一界面上，用戶可以對(duì)個(gè)人資料進(jìn)行修改。運(yùn)行效果如圖8.9所示。（2）測(cè)試個(gè)人信息修改功能圖8.9(a)個(gè)人信息修改前展示效果圖圖8.9(b)個(gè)人信息修改后展示效果

3.4開(kāi)發(fā)我的書評(píng)展示功能任務(wù)步驟：1.需求描述2.開(kāi)發(fā)我的書評(píng)API接口3.開(kāi)發(fā)我的書評(píng)功能

3.4.1開(kāi)發(fā)文學(xué)展示功能1需求描述我們計(jì)劃在用戶中心模塊中開(kāi)發(fā)了一項(xiàng)顯示個(gè)人發(fā)布的書評(píng)信息的功能，使用戶能夠輕松瀏覽自己發(fā)布的書評(píng)信息。當(dāng)用戶訪問(wèn)“我的書評(píng)”頁(yè)面時(shí)，系統(tǒng)將以列表形式展示用戶以往所發(fā)表的書評(píng)。運(yùn)行效果如圖8.11所示。圖8.11我的書評(píng)運(yùn)行效果

3.4.1開(kāi)發(fā)文學(xué)展示功能1需求描述在開(kāi)發(fā)該功能時(shí)，我們需要使用后端項(xiàng)目的API接口，具體API接口信息見(jiàn)表8.7所示。表8.7開(kāi)發(fā)過(guò)程中調(diào)用的API接口表接口調(diào)用方式說(shuō)明我的書評(píng)API接口http://ip地址:端口/api/classics/get-mydiscuss本節(jié)進(jìn)行開(kāi)發(fā)圖片顯示API接口http://ip地址:端口/api/image/display/<string:type>/<strin