項目6：“古典文學(xué)網(wǎng)”賞文學(xué)功能開發(fā)

項目6：“古典文學(xué)網(wǎng)”賞文學(xué)功能開發(fā)XXX202X-XX-XX

目錄02.任務(wù)1：開發(fā)導(dǎo)航欄用戶中心顯示功能05.任務(wù)4：開發(fā)文學(xué)展示功能03.任務(wù)2：開發(fā)用戶退出功能04.任務(wù)3：開發(fā)文學(xué)列表展示功能01.知識儲備：類視圖及ElementPlus框架核心組件06.任務(wù)5：開發(fā)文學(xué)評價功能07.拓展任務(wù)

學(xué)習(xí)目標(biāo)知識目標(biāo)：了解Flask框架的WTF表單驗證機制，并熟練掌握其應(yīng)用方法；了解Flask框架的類視圖的組件化思想，熟練其使用及其通信機制；了解ElementPlus前端框架的組件，掌握常用組件的配置和使用。能力目標(biāo)：通過學(xué)習(xí)Flask框架的WTF表單，能夠在項目中提升開發(fā)效率和代碼質(zhì)量；通過學(xué)習(xí)Flask框架的類視圖，能夠在組件化的開發(fā)服務(wù)端項目；通過學(xué)習(xí)ElementPlus的組件，能夠構(gòu)建出高效、美觀且用戶友好的前端界面。素質(zhì)目標(biāo)：培養(yǎng)系統(tǒng)思維，嚴(yán)格遵守行業(yè)規(guī)范和標(biāo)準(zhǔn)，提高軟件質(zhì)量和可靠性；培養(yǎng)責(zé)任感、職業(yè)精神和團隊精神，遵守職業(yè)道德。01項目描述

1.1.項目需求小白需要完成“古典文學(xué)網(wǎng)”項目的“賞文學(xué)”模塊的開發(fā)，包括導(dǎo)航欄用戶中心顯示、用戶退出、文學(xué)列表展示、文學(xué)作品展示，以及文學(xué)評價等功能。02知識儲備

2.知識儲備為了項目的順利開發(fā)，小白需要掌握Flask框架的關(guān)鍵技術(shù)，如類視圖及ElementPlus框架核心組件。

2.1.Flask框架的類視圖

在Flask中，類視圖通常繼承自views.View或views.MethodView。這些基類封裝了HTTP方法（如GET、POST等），使得我們能夠以更加模塊化、結(jié)構(gòu)化的方式來組織和管理視圖邏輯。

下面我們開發(fā)一個類視圖的案例，該案例通過不同的請求方式，輸出HelloXXX的文字信息。

2.1.創(chuàng)建名為“hi_view”的Flask項目fromflaskimportFlaskfromflask.viewsimportMethodView#構(gòu)建appapp=Flask(__name__)#創(chuàng)建類視圖，封裝了HTTP方法classHelloView(MethodView):

#定義GET請求的處理方法

defget(self,name=None):

return"Hello"+name+"GoGet!"

#定義POST請求的處理方法

defpost(self,name=None):

return"Hello"+name+"GoPost!"

#如果需要，可以定義其他HTTP方法（如PUT）的處理方法#將類視圖注冊到路由上app.add_url_rule('/hello/<name>',view_func=HelloView.as_view('hello_view'))if__name__=='__main__':

#啟動服務(wù)，設(shè)置主機和端口

app.run(host="",port=5000,debug=True)

2.1.運行“hi_view”的Flask項目啟動hi_view應(yīng)用，分別使用GET和POST方式訪問“:5000/api/hello/小白”URL，測試結(jié)果如圖6.1(a)，圖6.1(b)所示。圖6.1(a)GET請求結(jié)果圖6.1(b)POST請求結(jié)果

2.2.ElementPlus框架常用組件ElementPlus框架中，Layout布局組件占據(jù)著舉足輕重的地位，它為用戶提供了構(gòu)建復(fù)雜頁面布局的能力。該組件基于24分欄系統(tǒng)，通過列（col）元素創(chuàng)建出基礎(chǔ)的網(wǎng)格布局。在運用Layout布局時，我們可以利用row標(biāo)簽來組織行，并通過col標(biāo)簽來規(guī)劃列。特別值得一提的是，col標(biāo)簽的span屬性賦予了用戶極大的靈活性，允許我們根據(jù)需求自由組合布局，從而打造出豐富多樣的頁面結(jié)構(gòu)。

2.2.ElementPlus框架常用組件logo圖6.2Layout布局容器運行效果用Layout布局容器來開發(fā)一個常見的網(wǎng)頁布局

2.2.ElementPlus框架常用組件logo用Layout布局容器來開發(fā)一個常見的網(wǎng)頁布局上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<template><el-row><el-col:span="24"><divclass="grid-contentep-bg-purple-dark"/></el-col></el-row><el-row><el-col:span="12"><divclass="grid-contentep-bg-purple"/></el-col><el-col:span="12"><divclass="grid-contentep-bg-purple-light"/></el-col></el-row><el-row><el-col:span="8"><divclass="grid-contentep-bg-purple"/></el-col><el-col:span="8"><divclass="grid-contentep-bg-purple-light"/></el-col><el-col:span="8"><divclass="grid-contentep-bg-purple"/></el-col></el-row><el-row><el-col:span="6"><divclass="grid-contentep-bg-purple"/></el-col><el-col:span="6"><divclass="grid-contentep-bg-purple-light"/></el-col><el-col:span="6"><divclass="grid-contentep-bg-purple"/></el-col><el-col:span="6"><divclass="grid-contentep-bg-purple-light"/></el-col></el-row><el-row><el-col:span="4"><divclass="grid-contentep-bg-purple"/></el-col><el-col:span="4"><divclass="grid-contentep-bg-purple-light"/></el-col><el-col:span="4"><divclass="grid-contentep-bg-purple"/></el-col><el-col:span="4"><divclass="grid-contentep-bg-purple-light"/></el-col><el-col:span="4"><divclass="grid-contentep-bg-purple"/></el-col><el-col:span="4"><divclass="grid-contentep-bg-purple-light"/></el-col></el-row></template><stylelang="scss">.el-row{margin-bottom:20px;}.el-row:last-child{margin-bottom:0;}.el-col{border-radius:4px;}.grid-content{border-radius:4px;min-height:36px;}</style>

2.2.ElementPlus框架常用組件logoImage圖片Image圖片組件用于展示圖片。它不僅保留了原生img標(biāo)簽的所有特性，還增添了多項實用的擴展功能。其中，該組件支持懶加載技術(shù)，以優(yōu)化頁面加載性能；同時，允許用戶自定義占位圖和加載失敗時的顯示內(nèi)容。Image組件的常用屬性見表6.1。屬性說明src圖片源地址，同原生屬性一致。fit確定圖片如何適應(yīng)容器框，可選值有fill、contain、cover、none、scale-down。alt圖片無法顯示時的替代文本。lazy是否開啟懶加載，當(dāng)圖片滾動到可視范圍內(nèi)才會加載。initial-index初始預(yù)覽圖像索引，小于url-list的長度。preview-src-list開啟圖片預(yù)覽功能。scroll-container設(shè)置滾動容器，若未定義，則為最近一個overflow值為auto或scroll的父元素。placeholder占位內(nèi)容，當(dāng)圖片加載失敗時顯示。error加載失敗內(nèi)容，當(dāng)圖片加載失敗時顯示。表6.1Image組件的常用屬性

2.2.ElementPlus框架常用組件logoImage圖片Image圖片組件提供了previewSrcList屬性，它允許用戶開啟預(yù)覽大圖模式。我們可以使用initial-index屬性來指定第一張預(yù)覽圖片在列表中的位置，默認(rèn)情況下，這個位置索引為0。接下來，我們開發(fā)一個具備圖片預(yù)覽功能的網(wǎng)頁。設(shè)計預(yù)期如圖6.3所示。圖6.3Image圖片預(yù)覽運行效果

2.2.ElementPlus框架常用組件logoImage圖片<template><divclass="demo-image__preview"><el-imagestyle="width:100px;height:100px":src="url":zoom-rate="1.2":max-scale="7":min-scale="0.2":preview-src-list="srcList":initial-index="2"fit="cover"/></div></template><scriptlang="ts"setup>consturl='默認(rèn)圖片url'constsrcList=['圖片1的url','圖片2的url','圖片3的url']</script>上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：

2.2.ElementPlus框架常用組件logoResult結(jié)果

Result組件通常用于展示操作的結(jié)果，比如用戶提交表單后的成功或失敗提示。接下來，我們將使用Result組件開發(fā)一個用戶操作結(jié)果反饋頁面。設(shè)計效果如圖6.4所示。圖6.4Result組件運行效果

2.2.ElementPlus框架常用組件logoResult結(jié)果上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<template><el-row><el-col:sm="12":lg="6"><el-resulticon="success"title="SuccessTip"sub-title="Pleasefollowtheinstructions"><template#extra><el-buttontype="primary">Back</el-button></template></el-result></el-col><el-col:sm="12":lg="6"><el-resulticon="warning"title="WarningTip"sub-title="Pleasefollowtheinstructions"><template#extra><el-buttontype="primary">Back</el-button></template></el-result></el-col>

接左邊：<el-col:sm="12":lg="6"><el-resulticon="error"title="ErrorTip"sub-title="Pleasefollowtheinstructions"><template#extra><el-buttontype="primary">Back</el-button></template></el-result></el-col><el-col:sm="12":lg="6"><el-resulticon="info"title="InfoTip"><template#sub-title><p>Usingslotassubtitle</p></template><template#extra><el-buttontype="primary">Back</el-button></template></el-result></el-col></el-row></template>

2.2.ElementPlus框架常用組件logoRate評分

Rate評分組件用于展示用戶對某個項目的評分，通常通過星星或其他圖形表示。Rate組件允許用戶選擇一定數(shù)量的星星，以表示他們對某個產(chǎn)品、服務(wù)或任何可評分項目的滿意度。

接下來，我們將使用Rate組件來開發(fā)一個星級評分頁面。設(shè)計效果如圖6.5所示。圖6.5Rate評分組件運行效果

2.2.ElementPlus框架常用組件logoRate評分

上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<template><el-ratev-model="star"@change="judgeStar"/></template><scriptlang="ts"setup>import{ref}from'vue'//默認(rèn)的星級conststar=ref(3)//星級評價方法constjudgeStar=(value)=>{console.log('gojudge'+value)}</script>03項目任務(wù)小白馬上要著手于項目的“賞文學(xué)”功能模塊的開發(fā)工作。由于該功能模塊涉及項目前后端的協(xié)同開發(fā)，這無疑是一次嚴(yán)峻的挑戰(zhàn)。

3.1開發(fā)導(dǎo)航欄用戶中心顯示功能1.需求描述在首頁頂部導(dǎo)航欄中，當(dāng)用戶登錄后會呈現(xiàn)用戶中心菜單，并顯示當(dāng)前登錄用戶的頭像。導(dǎo)航欄中用戶中心菜單的展示效果如圖6.6所示。圖6.6導(dǎo)航欄用戶中心菜單運行效果

3.1開發(fā)導(dǎo)航欄用戶中心顯示功能任務(wù)步驟：1.需求描述2.開發(fā)查詢用戶信息API接口3.開發(fā)導(dǎo)航欄用戶中心顯示功能

3.1.1開發(fā)導(dǎo)航欄用戶中心顯示功能1.需求描述在開發(fā)該功能時，我們需要使用后端項目的API接口，具體API接口信息見表6.2所示。表6.2開發(fā)過程中調(diào)用的API接口表接口調(diào)用方式說明查詢用戶信息API接口http://ip地址:端口/api/user/get-user本節(jié)進行開發(fā)圖片顯示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>請參考項目2中的“2.3.5.開發(fā)圖片顯示API接口”小節(jié)

3.1.2開發(fā)查詢用戶信息API接口1.需求描述該API接口通過驗證當(dāng)前登錄用戶的Token，在數(shù)據(jù)庫中檢索用戶表（users），以獲取用戶信息，并返回給客戶端。本API接口需要經(jīng)歷嚴(yán)格的身份驗證流程，以確保數(shù)據(jù)的絕對安全和訪問的合法性。有關(guān)該接口的說明，請參閱表6.3。表6.3查詢用戶信息API接口說明表功能說明查詢用戶信息API接口調(diào)用路徑http://ip地址:端口/api/user/get-userHTTP請求方式GET請求數(shù)據(jù)類型application/x-www-form-urlencoded請求數(shù)據(jù)參數(shù)無返回數(shù)據(jù)類型application/json返回數(shù)據(jù)參數(shù)參數(shù)名類型長度描述必須codevarchar狀態(tài)碼，200正確，其他錯誤■msgvarchar返回消息內(nèi)容■dataarray返回用戶信息■返回數(shù)據(jù)JSON（樣例）{

"code":"200","msg":"操作成功！","data":{"uid":1,"uname":"xiaobai","upwd":"123456""avatar":"xiaobai.jpg"

}}

3.1.2開發(fā)查詢用戶信息API接口2.開發(fā)數(shù)據(jù)操作模塊在"cls_svr"項目中，我們找到“app/dao/UsersDao.py”文件。在該文件中，開發(fā)從數(shù)據(jù)庫中查詢用戶信息的功能。以下是實現(xiàn)該功能的關(guān)鍵代碼：#數(shù)據(jù)庫操作類classUsersDao:

#3.通過用戶編號查詢用戶

defgetUserByUid(self,uid):

try:

#查詢

user=Users.query.get(uid)

returnuser

exceptExceptionase:

print(e)

pass

3.1.2開發(fā)查詢用戶信息API接口3.開發(fā)業(yè)務(wù)邏輯模塊在“cls_svr”項目中，我們找到“/app/api/user_blueprint.py”的用戶藍圖文件。在此藍圖中，我們將定義用于查詢用戶信息的視圖函數(shù)，實現(xiàn)API接口。以下是實現(xiàn)這一功能的關(guān)鍵代碼：fromapp.model.modelsimportUsers,UsersSchema#獲取用戶信息接口@user_blueprint.route('/get-user')@jwt_required()#用戶身份鑒權(quán)defgetUser():

#返回信息

result_msg={"code":"200","msg":"操作成功！"}

#獲取認(rèn)證的用戶編號(登錄時，通過uid生成Token)

uid=get_jwt_identity()

#創(chuàng)建數(shù)據(jù)庫操作對象

db_op=UsersDao()

#查詢用戶信息

user=db_op.getUserByUid(uid)

#判斷查詢結(jié)果

ifuserisnotNone:

#轉(zhuǎn)換數(shù)據(jù)為Json格式數(shù)據(jù)

users_Schema=UsersSchema()

users_data=users_Schema.dump(user)

result_msg["data"]=users_data

else:

result_msg["code"]="404"

result_msg["msg"]="操作失敗！"

#返回操作結(jié)果returnjsonify(result_msg)

3.1.2開發(fā)查詢用戶信息API接口4.API接口測試后端項目啟動后，我們可以通過訪問URL“:5000/api/user/get-user”來調(diào)用該API。在進行測試之前，請確保在請求的headers中設(shè)置Authorization參數(shù)，其值應(yīng)當(dāng)遵循“Bearer+空格+token”的格式，這里的token是我們在登錄操作后收到的令牌。測試結(jié)果如圖6.7所示。圖6.7查詢用戶信息API接口測試結(jié)果

3.1.3開發(fā)導(dǎo)航欄用戶中心顯示功能1開發(fā)業(yè)務(wù)邏輯在“cls_clt”項目中，請找到“/src/components/HeaderComp.vue”頂部導(dǎo)航組件文件。在此文件中，我們將根據(jù)當(dāng)前用戶的登錄狀態(tài)來動態(tài)地調(diào)整導(dǎo)航欄菜單的顯示內(nèi)容。為實現(xiàn)這一功能，我們需要獲取并驗證用戶登錄后存儲的Token，同時獲取當(dāng)前登錄用戶的信息。以下是實現(xiàn)這一邏輯的關(guān)鍵代碼：<scriptlang="ts"setup>import{useTokenStore}from'@/stores/token'//創(chuàng)建Token狀態(tài)管理StoreconstuserStore=useTokenStore()//獲取登錄用戶的Tokenconsttoken=ref(userStore.getToken())//調(diào)用API接口，獲取當(dāng)前登錄用戶functioninitAvatar(){//判斷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'){letuser=response.data.datauser_url.value='/svr/api/image/display/head/'+user.avatar}})

接左邊：.catch(function(error){console.log(error)//鑒權(quán)判斷if(error.response.status==401){//沒有權(quán)限或已過期，設(shè)置token為空user_url.value='/svr/api/image/display/head/tx.png'token.value=''userStore.setToken('')}})}}//完成初始渲染并創(chuàng)建DOM節(jié)點后，進行頁面加載onMounted(()=>{

//初始化導(dǎo)航欄頭像initAvatar()})</script>

3.1.3開發(fā)導(dǎo)航欄用戶中心顯示功能2開發(fā)頁面邏輯在“cls_clt”項目的HeaderComp.vue頂部導(dǎo)航欄組件中，我們開發(fā)了業(yè)務(wù)邏輯，用于檢測當(dāng)前用戶的登錄狀態(tài)，并根據(jù)這一狀態(tài)動態(tài)地調(diào)整導(dǎo)航欄菜單的顯示內(nèi)容。以下是實現(xiàn)這一功能的關(guān)鍵代碼：

<el-menu-itemv-if="token==''"index="/register">注冊</el-menu-item><el-menu-itemv-if="token==''"index="/login">登錄</el-menu-item><el-sub-menuv-if="token!=''"index=""><template#title><el-avatarsize="small":src="user_url"/></template>

<el-menu-itemindex="">用戶中心</el-menu-item><el-menu-itemindex="">退出</el-menu-item></el-sub-menu>

3.1.3開發(fā)導(dǎo)航欄用戶中心顯示功能3測試用戶中心顯示功能在成功前端項目后，我們通過瀏覽器輕松訪問項目首頁。接下來，我們單擊頁面上的“登錄”菜單，并順利完成了登錄流程。一旦登錄成功，首頁頂部的導(dǎo)航欄便會自動更新，用戶的頭像清晰可見，并且“用戶中心”菜單項也隨即顯現(xiàn)。運行效果如圖6.6所示。圖6.6導(dǎo)航欄用戶中心菜單運行效果

3.2開發(fā)用戶退出功能1.需求描述在前端項目中，我們將實現(xiàn)用戶退出功能。當(dāng)?shù)卿浻脩粝Ｍ顺霎?dāng)前賬號時，只需單擊用戶中心的“退出”菜單項，系統(tǒng)將立即刪除與用戶身份驗證相關(guān)的token，從而有效退出當(dāng)前賬號，并自動跳轉(zhuǎn)至首頁，如圖6.8所示。圖6.8用戶退出功能運行效果

3.2開發(fā)用戶退出功能2.業(yè)務(wù)功能實現(xiàn)（1）創(chuàng)建退出View組件（2）配置退出菜單路由（3）測試退出功能

3.2開發(fā)用戶退出功能2.業(yè)務(wù)功能實現(xiàn)（1）創(chuàng)建退出View組件在“cls_clt”項目中，我們找到“/src/views/”目錄。隨后，在該目錄下新建一個名為“OutView.vue”的頁面文件。在該頁面中，我們將開發(fā)用戶退出功能，為用戶提供退出服務(wù)。以下是實現(xiàn)該功能的具體代碼參考：<scriptlang="ts"setup>import{useRouter}from'vue-router'//引入狀態(tài)管理文件import{useTokenStore}from'@/stores/token'//創(chuàng)建Token狀態(tài)管理StoreconstuserStore=useTokenStore()//設(shè)置當(dāng)前登錄用戶的token為空userStore.setToken('')//創(chuàng)建路由對象constrouter=useRouter()//退出后，跳轉(zhuǎn)至首頁router.push('/')</script><template>

<el-emptydescription="退出失敗！"/></template>

3.2開發(fā)用戶退出功能2.業(yè)務(wù)功能實現(xiàn)（2）配置退出菜單路由在“cls_clt”項目中，我們找到“/src/router/index.js”路由配置文件。在該文件中，我們將為用戶退出頁面配置相應(yīng)的路由信息。以下是配置的關(guān)鍵代碼：//導(dǎo)入組件importOutViewfrom'@/views/OutView.vue'constrouter=createRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[

{path:'/out',name:'out',component:OutView}]})exportdefaultrouter

3.2開發(fā)用戶退出功能2.業(yè)務(wù)功能實現(xiàn)（2）配置退出菜單路由接下來，在“cls_clt”項目的HeaderComp.vue頂部導(dǎo)航欄組件的退出菜單，配置退出的URL。以下是實現(xiàn)這一功能的關(guān)鍵代碼：

<el-menu-itemindex="/out">退出</el-menu-item>

3.2開發(fā)用戶退出功能2.業(yè)務(wù)功能實現(xiàn)（3）測試退出功能通過瀏覽器輕松地訪問該項目的首頁。在完成登錄操作后，我們只需單擊頂部導(dǎo)航欄的“退出”菜單項，即可安全地注銷當(dāng)前登錄的賬號。其運行效果如圖6.8所示。圖6.8用戶退出功能運行效果

3.3開發(fā)文學(xué)列表展示功能任務(wù)步驟：1.需求描述2.開發(fā)文學(xué)列表信息API接口3.開發(fā)文學(xué)列表展示功能

3.3.1開發(fā)文學(xué)列表展示功能需求描述我們計劃為“古典文學(xué)網(wǎng)”開發(fā)一個文學(xué)列表展示功能。當(dāng)用戶瀏覽至首頁時，無論是單擊頂部導(dǎo)航菜單中的特定文學(xué)類型，還是文學(xué)推薦區(qū)域中的“查看更多”鏈接，都能便捷地跳轉(zhuǎn)到相應(yīng)的文學(xué)列表頁面。該功能的運行效果將如圖6.9(a)和圖6.9(b)所示。圖6.9(a)首頁導(dǎo)航連接圖6.9(b)文學(xué)列表顯示效果

3.3.1開發(fā)文學(xué)列表展示功能需求描述在開發(fā)該功能時，我們需要使用后端項目的API接口，具體API接口信息見表6.4所示。接口調(diào)用方式說明文學(xué)列表信息API接口http://ip地址:端口/api/classics/get-classics/<int:tid>本節(jié)進行開發(fā)圖片顯示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>開發(fā)圖片顯示API接口”小節(jié)表6.4開發(fā)過程中調(diào)用的API接口表

3.3.2開發(fā)文學(xué)列表信息API接口1.需求描述此API接口的核心功能在于，根據(jù)文學(xué)類型編號（tid）檢索數(shù)據(jù)庫中的文學(xué)類型表（classictype）和文學(xué)表（classics），進而提取并返回相關(guān)的文學(xué)列表數(shù)據(jù)至客戶端。有關(guān)該接口的說明，請參閱表6.5。表6.5文學(xué)列表信息API接口說明表功能說明文學(xué)列表信息API接口調(diào)用路徑HTTP請求方式GET請求數(shù)據(jù)類型application/x-www-form-urlencoded請求數(shù)據(jù)參數(shù)返回數(shù)據(jù)類型參數(shù)名類型長度描述必須tidint文學(xué)類型編號■返回數(shù)據(jù)類型application/json返回數(shù)據(jù)參數(shù)參數(shù)名類型長度描述必須codevarchar狀態(tài)碼，200正確，其他錯誤■msgvarchar返回消息內(nèi)容■dataarray返回文學(xué)列表■請求示例:5000/api/classics/get-classics/1返回數(shù)據(jù)JSON（樣例）{

"code":"200","msg":"操作成功！","data":[{"cover":"zzbj.png","name":"諸子百家","tid":1,

"classics":[{"cid":1

"title":"關(guān)雎",}]

}}

3.3.2開發(fā)文學(xué)列表信息API接口2.開發(fā)數(shù)據(jù)操作模塊在“cls_svr”項目中，請找到“/app/dao/ClassicsDao.py”文件。在該文件中，我們將開發(fā)查詢文學(xué)類型以及文學(xué)列表的功能。以下是實現(xiàn)這一功能的關(guān)鍵代碼：#數(shù)據(jù)庫操作類classClassicsDao:

#5.獲取文學(xué)類型defgetClassictypeByTid(self,tid):

try:#查詢

classictype=Classictype.query.get(tid)returnclassictypeexceptExceptionase:print(e)pass#6.獲取某文學(xué)類型下的文學(xué)列表defgetClassicsByTid(self,tid):

try:#排序查詢:按星級評價從高到低排序

classics=Classics.query.filter(Classics.tid==tid).order_by(Classics.rating.desc()).all()returnclassicsexceptExceptionase:print(e)pass

3.3.2開發(fā)文學(xué)列表信息API接口3.開發(fā)業(yè)務(wù)邏輯模塊在“cls_svr”項目中，請找到“/app/api/classics_blueprint.py”的文學(xué)藍圖文件。在這個藍圖中，我們將定義用于查詢文學(xué)列表信息的視圖函數(shù)，實現(xiàn)API接口。以下是實現(xiàn)該功能的關(guān)鍵代碼：#按文學(xué)類型，獲取文學(xué)列表@classics_blueprint.route('/get-classics/<int:tid>')defget_classics(tid):#返回信息result_msg={"code":"200","msg":"操作成功！"}#判斷請求及參數(shù)是否正確iftidisNone:result_msg["code"]="404"result_msg["msg"]="參數(shù)錯誤"returnjsonify(result_msg)#創(chuàng)建數(shù)據(jù)庫操作對象db_op=ClassicsDao()#查詢文學(xué)類型classictype=db_op.getClassictypeByTid(tid)#查詢文學(xué)列表classics=db_op.getClassicsByTid(tid)#many=True轉(zhuǎn)換多條數(shù)據(jù)classics_Schema=ClassicsSchema(many=True)classics_data=classics_Schema.dump(classics)#構(gòu)建返回數(shù)據(jù)classictype_tmp={"tid":tid,"name":,"cover":classictype.cover}classictype_tmp["classics"]=classics_data#將轉(zhuǎn)換后的JSON格式數(shù)據(jù)存儲至返回結(jié)果result_msg["data"]=classictype_tmpreturnjsonify(result_msg)

3.3.2開發(fā)文學(xué)列表信息API接口4.API接口測試后端項目啟動后，我們可以通過訪問“:5000/api/classics/get-classics/1”來調(diào)用相應(yīng)的API接口。測試結(jié)果如圖6.10所示。圖6.10文學(xué)列表信息API接口測試結(jié)果

3.3.3開發(fā)文學(xué)列表展示功能1.開發(fā)業(yè)務(wù)邏輯模塊在“cls_clt”項目中，我們找到“/src/views/”目錄。在該目錄下，我們將創(chuàng)建一個命名為“ClassicListView.vue”的頁面文件，在該頁面中，我們將開發(fā)文學(xué)列表的展示功能。以下是實現(xiàn)這一功能的具體代碼參考：<scriptlang="ts"setup>import{ref,watch}from'vue'import{useRoute,RouterLink}from'vue-router'import{inject}from'vue'//引入頂部導(dǎo)航組件importHeaderCompfrom'@/components/HeaderComp.vue'//引入底部組件importFooterCompfrom'@/components/FooterComp.vue'constaxios=inject('axios')//注入axios//創(chuàng)建路由對象constroute=useRoute()//文學(xué)類型編號consttid=ref('')//文學(xué)數(shù)據(jù)列表varclsDatas=ref({})tid.value=route.params.tid//監(jiān)聽路由參數(shù)變化watch(()=>route.params,(newValue,oldValue)=>{tid.value=newValue.tidinitClsList()//初始化文學(xué)列表},//immediate:true選項來強制偵聽器的回調(diào)立即執(zhí)行{immediate:true})接左邊：

//導(dǎo)航欄菜單選中索引constactiveIndex=ref('/clslist/'+route.params.tid)//調(diào)用API接口，獲取文學(xué)列表functioninitClsList(){axios({method:'get',url:'/svr/api/classics/get-classics/'+tid.value}).then(function(response){if(response.data.code=='200'){clsDatas.value=response.data.data}}).catch(function(error){console.log(error)})}</script>

3.3.3開發(fā)文學(xué)列表展示功能1.開發(fā)業(yè)務(wù)邏輯模塊接下來，在“cls_clt”項目中，我們找到“/src/router/index.js”路由配置文件。在該文件中，我們將為文學(xué)列表頁面配置相應(yīng)的路由信息。以下是配置此功能的關(guān)鍵代碼參考：//導(dǎo)入組件importClassicListViewfrom'@/views/ClassicListView.vue'constrouter=createRouter({

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

routes:[

{

path:'/clslist/:tid',name:'clslist',component:ClassicListView}]})exportdefaultrouter

3.3.3開發(fā)文學(xué)列表展示功能2.開發(fā)頁面邏輯在“cls_clt”項目的ClassicListView.vue頁面文件中，我們將文學(xué)列表信息以清晰、直觀的方式呈現(xiàn)給用戶。以下是實現(xiàn)這一功能的具體代碼：<template><el-container><el-header><HeaderComp:active-index="activeIndex"/></el-header><el-main><div><!--文學(xué)列表開始--><elheader><template#icon><el-avatar:size="30"class="mr-3":src="String('/svr/api/image/display/head/')+clsDatas.cover"style="vertical-align:middle"/></template><template#title>{{clsD}}</template>

接左邊：

<divclass="mt-4text-smfont-bold">

<el-rowjustify="center":gutter="5">

<el-col:span="4"v-for="iteminclsDatas.classics":key="item.cid"><el-cardstyle="padding:'0px'"><template#header>{{item.title}}</template><RouterLinkto=""><img:src="String('/svr/api/image/display/cls/')+item.cover"style="width:100%;display:block"/></RouterLink></el-card></el-col></el-row></div></elheader><!--文學(xué)列表結(jié)束--><el-dividerborder-style="dotted"/></div></el-main><el-footer><FooterComp/></el-footer></el-container></template>

3.3.3開發(fā)文學(xué)列表展示功能2.開發(fā)頁面邏輯接下來，在“cls_clt”項目的HeaderComp.vue頂部導(dǎo)航欄組件中，我們?yōu)槲膶W(xué)類型菜單配置訪問文學(xué)列表的URL。以下是實現(xiàn)這一功能的關(guān)鍵代碼：

<el-menu-item

v-for="iteminnavDatas"

:key="item.tid"

:index="String('/clslist/')+item.tid"

>{{}}</el-menu-item

>

3.3.3開發(fā)文學(xué)列表展示功能2.開發(fā)頁面邏輯最后，在“cls_clt”項目的HomeView.vue首頁組件中，我們?yōu)槲膶W(xué)推薦模塊增添了跳轉(zhuǎn)至文學(xué)列表頁面的功能。以下是實現(xiàn)這一功能的關(guān)鍵代碼：<scriptlang="ts"setup>//跳轉(zhuǎn)至文學(xué)列表constgoClassics=(tid)=>{

//console.log('gogoClassics')

router.push({name:'clslist',params:{tid:tid}})}</script><template>

<!--文學(xué)推薦欄開始--><divv-for="iteminrecommendDatas":key="item.tid"><elheader@back="goClassics(item.tid)">

</elheader><el-dividerborder-style="dotted"/></div><!--文學(xué)推薦欄結(jié)束--></template>

3.3.3開發(fā)文學(xué)列表展示功能3.測試文學(xué)列表展示功能

成功運行前端項目后，通過瀏覽器順利加載并瀏覽了項目的首頁。在首頁中，無論是單擊頂部導(dǎo)航菜單中的文學(xué)類型，還是文學(xué)推薦區(qū)域的“查看更多”鏈接，用戶都能被引導(dǎo)至相應(yīng)的文學(xué)列表頁面。運行效果如圖6.9(a)和圖6.9(b)所示。圖6.9(a)首頁導(dǎo)航連接圖6.9(b)文學(xué)列表顯示效果

3.4開發(fā)文學(xué)展示功能任務(wù)步驟：1.需求描述2.開發(fā)文學(xué)作品信息API接口3.開發(fā)文學(xué)作品展示功能

3.4.1開發(fā)文學(xué)展示功能需求描述我們計劃開發(fā)一個文學(xué)作品展示功能。當(dāng)用戶對某部文學(xué)作品產(chǎn)生濃厚興趣，并單擊該文學(xué)作品，將跳轉(zhuǎn)至文學(xué)作品展示頁面，展示文學(xué)作品的詳細信息。不論用戶是從首頁、查詢結(jié)果頁還是文學(xué)列表頁進入，只需單擊相應(yīng)文學(xué)作品的封面，便能迅速進入該作品的展示頁面。此功能的運行效果如圖6.11所示。圖6.11文學(xué)作品展示效果

3.4.1開發(fā)文學(xué)展示功能需求描述在開發(fā)該功能時，我們需要使用后端項目的API接口，具體API接口信息見表6.6所示。表6.6開發(fā)過程中調(diào)用的API接口表接口調(diào)用方式說明文學(xué)作品信息API接口http://ip地址:端口/api/classics/get-classic/<int:cid>本節(jié)進行開發(fā)圖片顯示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>開發(fā)圖片顯示API接口”小節(jié)

3.4.2開發(fā)文學(xué)作品信息API接口1.需求描述該API接口的核心功能是接收前端傳送的文學(xué)編號（cid），然后對文學(xué)表（classics）中進行查詢，檢索到的文學(xué)作品詳細信息返回給客戶端。有關(guān)該接口的說明，請參閱表6.7。表6.7文學(xué)作品信息API接口說明表功能說明文學(xué)作品信息API接口調(diào)用路徑HTTP請求方式GET請求數(shù)據(jù)類型application/x-www-form-urlencoded請求數(shù)據(jù)參數(shù)參數(shù)名類型長度描述必須cidint文學(xué)作品編號■返回數(shù)據(jù)類型application/json返回數(shù)據(jù)參數(shù)參數(shù)名類型長度描述必須codevarchar狀態(tài)碼，200正確，其他錯誤■msgvarchar返回消息內(nèi)容■dataarray返回文學(xué)作品信息■請求示例:5000/api/classics/get-classic/1返回數(shù)據(jù)JSON（樣例）{

"code":"200","msg":"操作成功！","data":{"cid":1

"title":"關(guān)雎","author":"詩經(jīng)·國風(fēng)·周南",}}

3.4.2開發(fā)文學(xué)作品信息API接口2.開發(fā)數(shù)據(jù)操作模塊在“cls_svr”項目中，我們找到“/app/dao/ClassicsDao.py”文件，并在該文件內(nèi)開發(fā)從數(shù)據(jù)庫中查詢文學(xué)作品信息功能。以下是實現(xiàn)該功能的關(guān)鍵代碼：#數(shù)據(jù)庫操作類classClassicsDao:

#7.獲取文學(xué)作品defgetClassicsByCid(self,cid):try:#查詢classic=Classics.query.get(cid)returnclassicexceptExceptionase:print(e)pass

3.4.2開發(fā)文學(xué)作品信息API接口3.開發(fā)業(yè)務(wù)邏輯模塊在“cls_svr”項目中，我們找到位于“/app/api/classics_blueprint.py”的文學(xué)藍圖文件。在此文件中，我們將定義一個視圖函數(shù)，實現(xiàn)API接口，用于處理查詢文學(xué)作品信息的請求。以下是實現(xiàn)該功能的關(guān)鍵代碼：#獲取文學(xué)作品信息接口@classics_blueprint.route('/get-classic/<int:cid>')defgetClassic(cid):#返回信息result_msg={"code":"200","msg":"操作成功！"}#判斷請求及參數(shù)是否正確ifcidisNone:result_msg["code"]="404"result_msg["msg"]="參數(shù)錯誤"returnjsonify(result_msg)#創(chuàng)建數(shù)據(jù)庫操作對象db_op=ClassicsDao()#查詢文學(xué)作品信息

classic=db_op.getClassicsByCid(cid)#轉(zhuǎn)換Json數(shù)據(jù)classics_Schema=ClassicsSchema()classics_data=classics_Schema.dump(classic)

#將轉(zhuǎn)換后的JSON格式數(shù)據(jù)存儲至返回結(jié)果result_msg["data"]=classics_data

#返回操作結(jié)果returnjsonify(result_msg)

3.4.2開發(fā)文學(xué)作品信息API接口4.API接口測試后端項目啟動后，我們可以通過訪問“:5000/api/classics/get-classic/1”來檢索文學(xué)作品信息。測試結(jié)果如圖6.12所示。圖6.12文學(xué)作品信息API接口測試結(jié)果

3.4.3開發(fā)文學(xué)作品展示功能1.開發(fā)業(yè)務(wù)邏輯模塊在“cls_clt”項目中，我們找到“/src/views/”目錄。隨后，在此目錄下，我們需創(chuàng)建一個名為“ClassicView.vue”的頁面文件。在該頁面中，我們調(diào)用API接口，查詢文學(xué)作品數(shù)據(jù)，以便后續(xù)調(diào)用。以下是實現(xiàn)該功能所需的代碼參考：<scriptlang="ts"setup>import{ref,watch}from'vue'import{useRoute,useRouter}from'vue-router'import{inject}from'vue'//引入頂部導(dǎo)航組件importHeaderCompfrom'@/components/HeaderComp.vue'//引入底部組件importFooterCompfrom'@/components/FooterComp.vue'constaxios=inject('axios')//注入axios//創(chuàng)建路由對象constroute=useRoute()//文學(xué)編號constcid=ref('')//文學(xué)類型編號consttid=ref('')//文學(xué)作品數(shù)據(jù)varclsData=ref({})//文學(xué)作品星級conststar=ref(0)cid.value=route.params.cidtid.value=route.params.tid//導(dǎo)航欄菜單選中索引constactiveIndex=ref('/clslist/'+route.params.tid)接左邊：//監(jiān)聽路由參數(shù)watch(()=>route.params,(newValue,oldValue)=>{cid.value=newValue.cidtid.value=newValue.tid//初始化文學(xué)作品信息initCls()},//immediate:true選項來強制偵聽器的回調(diào)立即執(zhí)行{immediate:true})//調(diào)用API接口，獲取文學(xué)作品信息functioninitCls(){axios({method:'get',url:'/svr/api/classics/get-classic/'+cid.value}).then(function(response){if(response.data.code=='200'){clsData.value=response.data.data//初始化文學(xué)星級star.value=clsData.value.rating}}).catch(function(error){console.log(error)})}</script>

3.4.3開發(fā)文學(xué)作品展示功能1.開發(fā)業(yè)務(wù)邏輯模塊接下來，在“cls_clt”項目中，我們找到“/src/router/index.js”路由配置文件。在此文件中，我們將為文學(xué)作品展示頁面配置路由信息。以下是具體代碼參考：//導(dǎo)入組件importClassicViewfrom'@/views/ClassicView.vue'constrouter=createRouter({

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

routes:[

{path:'/cls/:cid/:tid',name:'cls',component:ClassicView}

]})exportdefaultrouter

3.4.3開發(fā)文學(xué)列表展示功能2.開發(fā)頁面邏輯在“cls_clt”項目的ClassicView.vue頁面文件中，我們將接口返回的文學(xué)作品數(shù)據(jù)呈現(xiàn)給用戶。以下是實現(xiàn)這一關(guān)鍵功能的具體代碼實現(xiàn)：<template><el-container><el-header><HeaderComp:active-index="activeIndex"/></el-header><el-main><!--文學(xué)作品展示開始--><el-result:title="clsData.title"><template#icon><el-imagestyle="width:auto;height:300px":src="String('/svr/api/image/display/cls/')+clsData.cover"fit="contain"/></template><template#sub-title><el-text>{{clsData.author}}（{{clsData.year}}）</el-text><br/><el-text>評價：</el-text><el-ratev-model="star"/></template><template#extra><el-row><divv-html="clsData.describes"></div></el-row></template></el-result><!--文學(xué)作品展示結(jié)束--></el-main><el-footer><FooterComp/></el-footer></el-container></template>

3.4.3開發(fā)文學(xué)作品展示功能2.開發(fā)頁面邏輯接下來，為了提升用戶體驗和導(dǎo)航的便捷性，我們需要在首頁、搜索結(jié)果頁、文學(xué)列表頁等關(guān)鍵頁面添加指向文學(xué)作品頁面的超鏈接。以下是實現(xiàn)這一功能的關(guān)鍵代碼參考：HomeView.vue（首頁）關(guān)鍵代碼：<!--輪播圖開始--><el-carousel:interval="4000"type="card"height="200px">

<el-carousel-itemv-for="itemincarouselDatas":key="item.cid">

<RouterLink:to="String('/cls/'+item.cid)+String('/')+item.tid">

<el-image

style="width:auto;height:200px"

:src="String('/svr/api/image/display/cls/')+item.cover"

fit="contain"/></RouterLink>

</el-carousel-item></el-carousel><!--輪播圖結(jié)束--><!--文學(xué)推薦欄開始--><divv-for="iteminrecommendDatas":key="item.tid"><elheader@back="goClassics(item.tid)">

<el-cardstyle="padding:'0px'"><template#header>{{classic.title}}</template><RouterLink:to="String('/cls/'+classic.cid)+String('/')+classic.tid"><img:src="String('/svr/api/image/display/cls/')+classic.cover"style="width:100%;display:block"/></RouterLink></el-card>

</elheader><el-dividerborder-style="dotted"/></div><!--文學(xué)推薦欄結(jié)束-->

3.4.3開發(fā)文學(xué)作品展示功能2.開發(fā)頁面邏輯SeachView.vue(文學(xué)搜索頁)關(guān)鍵代碼：<el-cardstyle="padding:'0px'"><template#header>{{item.title}}</template><RouterLink:to="String('/cls/'+item.cid)+String('/')+item.tid"><img:src="String('/svr/api/image/display/cls/')+item.cover"style="width:100%;display:block"/></RouterLink></el-card>

3.4.3開發(fā)文學(xué)作品展示功能2.開發(fā)頁面邏輯ClassicListView.vue（文學(xué)列表頁）關(guān)鍵代碼：<el-cardstyle="padding:'0px'"><template#header>{{item.title}}</template><RouterLink:to="String('/cls/'+item.cid)+String('/')+item.tid">

<img

:src="String('/svr/api/image/display/cls/')+item.cover"

style="width:100%;display:block"/></RouterLink></el-card>

3.4.3開發(fā)文學(xué)作品展示功能2.測試文學(xué)作品展示功能成功運行前端項目后，通過瀏覽器順利加載并瀏覽了項目的首頁、查詢結(jié)果頁以及文學(xué)列表頁等頁面中，用戶只需單擊感興趣的文學(xué)作品的封面，便能迅速跳轉(zhuǎn)至對應(yīng)的文學(xué)作品展示頁面，詳細展示該作品的相關(guān)信息。具體效果如圖6.11所示。圖6.11文學(xué)作品展示效果

3.5開發(fā)文學(xué)評價功能