項目6：“古典文學網”賞文學功能開發XXX202X-XX-XX

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

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

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

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

2.1.Flask框架的類視圖

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

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

2.1.創建名為“hi_view”的Flask項目fromflaskimportFlaskfromflask.viewsimportMethodView#構建appapp=Flask(__name__)#創建類視圖，封裝了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__':

#啟動服務，設置主機和端口

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

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

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

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

2.2.ElementPlus框架常用組件logo用Layout布局容器來開發一個常見的網頁布局上圖所展示的網頁布局所對應的源代碼詳情如下：<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標簽的所有特性，還增添了多項實用的擴展功能。其中，該組件支持懶加載技術，以優化頁面加載性能；同時，允許用戶自定義占位圖和加載失敗時的顯示內容。Image組件的常用屬性見表6.1。屬性說明src圖片源地址，同原生屬性一致。fit確定圖片如何適應容器框，可選值有fill、contain、cover、none、scale-down。alt圖片無法顯示時的替代文本。lazy是否開啟懶加載，當圖片滾動到可視范圍內才會加載。initial-index初始預覽圖像索引，小于url-list的長度。preview-src-list開啟圖片預覽功能。scroll-container設置滾動容器，若未定義，則為最近一個overflow值為auto或scroll的父元素。placeholder占位內容，當圖片加載失敗時顯示。error加載失敗內容，當圖片加載失敗時顯示。表6.1Image組件的常用屬性

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

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='默認圖片url'constsrcList=['圖片1的url','圖片2的url','圖片3的url']</script>上圖所展示的網頁布局所對應的源代碼詳情如下：

2.2.ElementPlus框架常用組件logoResult結果

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

2.2.ElementPlus框架常用組件logoResult結果上圖所展示的網頁布局所對應的源代碼詳情如下：<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組件允許用戶選擇一定數量的星星，以表示他們對某個產品、服務或任何可評分項目的滿意度。

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

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

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

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

3.1開發導航欄用戶中心顯示功能任務步驟：1.需求描述2.開發查詢用戶信息API接口3.開發導航欄用戶中心顯示功能

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

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

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

}}

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

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

defgetUserByUid(self,uid):

try:

#查詢

user=Users.query.get(uid)

returnuser

exceptExceptionase:

print(e)

pass

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

#返回信息

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

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

uid=get_jwt_identity()

#創建數據庫操作對象

db_op=UsersDao()

#查詢用戶信息

user=db_op.getUserByUid(uid)

#判斷查詢結果

ifuserisnotNone:

#轉換數據為Json格式數據

users_Schema=UsersSchema()

users_data=users_Schema.dump(user)

result_msg["data"]=users_data

else:

result_msg["code"]="404"

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

#返回操作結果returnjsonify(result_msg)

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

3.1.3開發導航欄用戶中心顯示功能1開發業務邏輯在“cls_clt”項目中，請找到“/src/components/HeaderComp.vue”頂部導航組件文件。在此文件中，我們將根據當前用戶的登錄狀態來動態地調整導航欄菜單的顯示內容。為實現這一功能，我們需要獲取并驗證用戶登錄后存儲的Token，同時獲取當前登錄用戶的信息。以下是實現這一邏輯的關鍵代碼：<scriptlang="ts"setup>import{useTokenStore}from'@/stores/token'//創建Token狀態管理StoreconstuserStore=useTokenStore()//獲取登錄用戶的Tokenconsttoken=ref(userStore.getToken())//調用API接口，獲取當前登錄用戶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)//鑒權判斷if(error.response.status==401){//沒有權限或已過期，設置token為空user_url.value='/svr/api/image/display/head/tx.png'token.value=''userStore.setToken('')}})}}//完成初始渲染并創建DOM節點后，進行頁面加載onMounted(()=>{

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

3.1.3開發導航欄用戶中心顯示功能2開發頁面邏輯在“cls_clt”項目的HeaderComp.vue頂部導航欄組件中，我們開發了業務邏輯，用于檢測當前用戶的登錄狀態，并根據這一狀態動態地調整導航欄菜單的顯示內容。以下是實現這一功能的關鍵代碼：

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

3.2開發用戶退出功能1.需求描述在前端項目中，我們將實現用戶退出功能。當登錄用戶希望退出當前賬號時，只需單擊用戶中心的“退出”菜單項，系統將立即刪除與用戶身份驗證相關的token，從而有效退出當前賬號，并自動跳轉至首頁，如圖6.8所示。圖6.8用戶退出功能運行效果

3.2開發用戶退出功能2.業務功能實現（1）創建退出View組件（2）配置退出菜單路由（3）測試退出功能

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

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

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

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

3.2開發用戶退出功能2.業務功能實現（2）配置退出菜單路由接下來，在“cls_clt”項目的HeaderComp.vue頂部導航欄組件的退出菜單，配置退出的URL。以下是實現這一功能的關鍵代碼：

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

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

3.3開發文學列表展示功能任務步驟：1.需求描述2.開發文學列表信息API接口3.開發文學列表展示功能

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

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

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

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

"classics":[{"cid":1

"title":"關雎",}]

}}

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

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

try:#查詢

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

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

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

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

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

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

//導航欄菜單選中索引constactiveIndex=ref('/clslist/'+route.params.tid)//調用API接口，獲取文學列表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開發文學列表展示功能1.開發業務邏輯模塊接下來，在“cls_clt”項目中，我們找到“/src/router/index.js”路由配置文件。在該文件中，我們將為文學列表頁面配置相應的路由信息。以下是配置此功能的關鍵代碼參考：//導入組件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開發文學列表展示功能2.開發頁面邏輯在“cls_clt”項目的ClassicListView.vue頁面文件中，我們將文學列表信息以清晰、直觀的方式呈現給用戶。以下是實現這一功能的具體代碼：<template><el-container><el-header><HeaderComp:active-index="activeIndex"/></el-header><el-main><div><!--文學列表開始--><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><!--文學列表結束--><el-dividerborder-style="dotted"/></div></el-main><el-footer><FooterComp/></el-footer></el-container></template>

3.3.3開發文學列表展示功能2.開發頁面邏輯接下來，在“cls_clt”項目的HeaderComp.vue頂部導航欄組件中，我們為文學類型菜單配置訪問文學列表的URL。以下是實現這一功能的關鍵代碼：

<el-menu-item

v-for="iteminnavDatas"

:key="item.tid"

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

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

>

3.3.3開發文學列表展示功能2.開發頁面邏輯最后，在“cls_clt”項目的HomeView.vue首頁組件中，我們為文學推薦模塊增添了跳轉至文學列表頁面的功能。以下是實現這一功能的關鍵代碼：<scriptlang="ts"setup>//跳轉至文學列表constgoClassics=(tid)=>{

//console.log('gogoClassics')

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

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

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

3.3.3開發文學列表展示功能3.測試文學列表展示功能

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

3.4開發文學展示功能任務步驟：1.需求描述2.開發文學作品信息API接口3.開發文學作品展示功能

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

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

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

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

"title":"關雎","author":"詩經·國風·周南",}}

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

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

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

classic=db_op.getClassicsByCid(cid)#轉換Json數據classics_Schema=ClassicsSchema()classics_data=classics_Schema.dump(classic)

#將轉換后的JSON格式數據存儲至返回結果result_msg["data"]=classics_data

#返回操作結果returnjsonify(result_msg)

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

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

3.4.3開發文學作品展示功能1.開發業務邏輯模塊接下來，在“cls_clt”項目中，我們找到“/src/router/index.js”路由配置文件。在此文件中，我們將為文學作品展示頁面配置路由信息。以下是具體代碼參考：//導入組件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開發文學列表展示功能2.開發頁面邏輯在“cls_clt”項目的ClassicView.vue頁面文件中，我們將接口返回的文學作品數據呈現給用戶。以下是實現這一關鍵功能的具體代碼實現：<template><el-container><el-header><HeaderComp:active-index="activeIndex"/></el-header><el-main><!--文學作品展示開始--><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><!--文學作品展示結束--></el-main><el-footer><FooterComp/></el-footer></el-container></template>

3.4.3開發文學作品展示功能2.開發頁面邏輯接下來，為了提升用戶體驗和導航的便捷性，我們需要在首頁、搜索結果頁、文學列表頁等關鍵頁面添加指向文學作品頁面的超鏈接。以下是實現這一功能的關鍵代碼參考：HomeView.vue（首頁）關鍵代碼：<!--輪播圖開始--><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><!--輪播圖結束--><!--文學推薦欄開始--><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><!--文學推薦欄結束-->

3.4.3開發文學作品展示功能2.開發頁面邏輯SeachView.vue(文學搜索頁)關鍵代碼：<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開發文學作品展示功能2.開發頁面邏輯ClassicListView.vue（文學列表頁）關鍵代碼：<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開發文學作品展示功能2.測試文學作品展示功能成功運行前端項目后，通過瀏覽器順利加載并瀏覽了項目的首頁、查詢結果頁以及文學列表頁等頁面中，用戶只需單擊感興趣的文學作品的封面，便能迅速跳轉至對應的文學作品展示頁面，詳細展示該作品的相關信息。具體效果如圖6.11所示。圖6.11文學作品展示效果

3.5開發文學評價功能