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

上傳人：1*** IP屬地：廣東上傳時間：2025-03-11 格式：PPTX 頁數(shù)：59 大小：1.15MB 積分：30 舉報 版權(quán)申訴

已閱讀5頁，還剩54頁未讀，繼續(xù)免費閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

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

目錄02.任務(wù)1：開發(fā)書評展示功能05.拓展任務(wù)03.任務(wù)2：開發(fā)書評發(fā)表功能04.任務(wù)3：開發(fā)書評評價功能01.知識儲備：Flask框架的中間件、消息閃現(xiàn)機制及ElementPlus框架核心UI組件

學(xué)習(xí)目標(biāo)知識目標(biāo)：了解Flask框架的中間件，并熟練掌握其應(yīng)用方法；了解Flask框架的緩存機制，熟練掌握其原理及使用；了解ElementPlus前端框架的組件，掌握常用組件的配置和使用。能力目標(biāo)：通過學(xué)習(xí)Flask框架的中間件，能夠在項目中實現(xiàn)高級別的控制和定制；通過學(xué)習(xí)Flask框架的緩存機制，能夠在項目中提升開發(fā)效率和代碼質(zhì)量；通過學(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.項目需求小白將在之前開發(fā)工作的基礎(chǔ)上，完成“古典文學(xué)網(wǎng)”項目的“書評”模塊的開發(fā)，包括書評展示、書評發(fā)表以及書評評價等功能。02知識儲備

2.知識儲備為了項目的順利開發(fā)，小白需要掌握Flask框架的中間件、消息閃現(xiàn)機制及ElementPlus框架核心UI組件

2.1.Flask框架的中間件Flask框架的中間件是FlaskWeb應(yīng)用的核心組件之一，它可以在不改變現(xiàn)有視圖邏輯的前提下，允許我們在處理HTTP請求和響應(yīng)的過程中插入自定義的邏輯或操作，如身份驗證、日志記錄、請求預(yù)處理等。接下來，我們將創(chuàng)建一個名為SimpleMiddleware的中間件，并展示如何應(yīng)用它。以下是其關(guān)鍵代碼示例：classSimpleMiddleware:

def__init__(self,app):

self.app=app

def__call__(self,environ,start_response):

#請求處理前的操作

......

response=self.app(environ,start_response)

#請求處理后的操作

......

returnresponse

2.1.Flask框架的中間件若需要使用SimpleMiddleware中間件，我們只需將其添加到app實例中。以下是具體的實現(xiàn)代碼示例：fromflaskimportFlaskfromSimpleMiddlewareimportSimpleMiddleware

app=Flask(__name__)#將中間件附加到Flask應(yīng)用app.wsgi_app=SimpleMiddleware(app.wsgi_app)

2.2.Flask框架的消息閃現(xiàn)消息閃現(xiàn)（FlashMessages）是一種高效機制，用于在多個請求之間傳遞一次性消息。這些消息通常用于在重定向后向用戶展示一次性的通知，如表單提交成功、驗證失敗等關(guān)鍵信息。在Flask中，我們可以通過flash()函數(shù)在一個請求中設(shè)置消息，并在隨后的請求中利用get_flashed_messages()函數(shù)來檢索并展示這些消息，從而為用戶提供即時的反饋。

2.2.Flask框架的消息閃現(xiàn)接下來，我們開發(fā)一個消息閃現(xiàn)的案例，通過模擬登錄操作來演示該機制的工作方式。當(dāng)?shù)卿洺晒?，利用消息閃現(xiàn)技術(shù)將登錄成功的消息傳遞至主頁。以下是具體的實現(xiàn)步驟。首先，我們創(chuàng)建一個名為“HI_FLASH”的Flask項目，并構(gòu)建其項目框架目錄。該項目的整體結(jié)構(gòu)如圖7.1所示。圖7.1“HI_FLASH”項目的框架目錄

2.2.Flask框架的消息閃現(xiàn)logo接下來，我們打開app.py文件，開發(fā)index()和login()兩個視圖函數(shù)，用以處理首頁展示和登錄操作的請求。具體代碼如下所示：fromflaskimportFlask,flash,redirect,render_template,request,url_forapp=Flask(__name__)app.secret_key='randomstring'@app.route('/')defindex():returnrender_template('index.html')@app.route('/login',methods=['GET','POST'])deflogin():#錯誤提示error=None#判斷請求方式，POST請求方式為登錄操作ifrequest.method=='POST':#獲取賬號及密碼uname=request.form['uname']upwd=request.form['upwd']#模擬登錄操作，內(nèi)置賬號為admin，密碼為123456ifuname!='admin'andupwd!='123456':error='用戶名或密碼有誤。請重新登錄！'else:#消息閃現(xiàn)，傳遞消息到首頁

flash('您已成功登錄！')#跳轉(zhuǎn)至首頁returnredirect(url_for('index'))returnrender_template('login.html',error=error)if__name__=='__main__':#啟動服務(wù)，設(shè)置主機和端口app.run(host="",port=5000,debug=True)

2.2.Flask框架的消息閃現(xiàn)logo接下來，我們找到“/templates/login.html”文件，開發(fā)用戶登錄頁面。以下是其具體代碼實現(xiàn)：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>用戶登錄</title></head><body><h1>登錄頁面</h1>{%iferror%}<p><strong>Error:</strong>{{error}}{%endif%}<formaction="/login"method="POST"><dl><dt>用戶名:</dt><dd><inputtype=textname="uname"></dd><dt>密碼:</dt><dd><inputtype="password"name="upwd"></dd></dl><p><inputtype="submit"value="登錄"></p></form></body></html>

2.2.Flask框架的消息閃現(xiàn)logo緊接著，我們找到項目的/templates/index.html文件，開發(fā)項目的首頁功能。以下是其具體代碼實現(xiàn)：<!DOCTYPEhtml><htmllang="en"><head>

<metacharset="UTF-8">

{%withmessages=get_flashed_messages()%}

{%ifmessages%}

<ulclass=flashes>

{%formessageinmessages%}

<li>{{message}}</li>

{%endfor%}

</ul>

{%endif%}

{%endwith%}<h1>首頁</h1><p>

您想要<ahref="{{url_for('login')}}"><b>登錄？</b></a></p></body></html>

2.2.Flask框架的消息閃現(xiàn)logo最終，我們啟動Flask應(yīng)用，通過訪問“:5000/login”來進入登錄頁面，執(zhí)行登錄操作。一旦登錄成功，跳轉(zhuǎn)至首頁后，會相應(yīng)地顯示“您已成功登錄！”的閃現(xiàn)消息。運行結(jié)果如圖7.2(a)和圖7.2(b)所示。圖7.2(a)登錄頁面圖7.2(b)首頁顯示閃現(xiàn)消息頁面

2.3ElementPlus框架常用組件logoText文本組件Text文本組件是用于執(zhí)行文本常見操作的核心組件。通過el-text標(biāo)簽，該組件能夠展示文本的多種樣式和操作。特別地，用戶可以通過設(shè)置type屬性來選擇Text組件的文本類型，以滿足不同的展示和交互需求。接下來，我們將利用Text文本組件來開發(fā)不同類型的文本顯示頁面。設(shè)計效果如圖7.3所示。圖7.3Text文本組件運行效果

2.3ElementPlus框架常用組件logoText文本組件<template><el-textclass="mx-1">Default</el-text><el-textclass="mx-1"type="primary">Primary</el-text><el-textclass="mx-1"type="success">Success</el-text><el-textclass="mx-1"type="info">Info</el-text><el-textclass="mx-1"type="warning">Warning</el-text><el-textclass="mx-1"type="danger">Danger</el-text></template>圖7.3Text文本組件運行效果

2.3ElementPlus框架常用組件logoInput輸入框Input是一個用于輸入文本信息的組件。Input組件提供了多種屬性和事件，以滿足不同的輸入需求。Input組件具有以下一些常用屬性和事件，見表7.1，表7.2。屬性說明type類型，與原生input類型相同，例如v-model綁定值placeholder輸入框占位文本clearable是否顯示清除按鈕，只有當(dāng)type不是'textareadisabled是否禁用size輸入框尺寸，只在type不為'textarea'時有效show-password是否顯示切換密碼圖標(biāo)name等價于原生inputname屬性autosizetextarea高度是否自適應(yīng)，僅type為'textarea'時生效表7.1Input組件的常用屬性表7.2Input組件的常用事件事件說明blur當(dāng)選擇器的輸入框失去焦點時觸發(fā)focus當(dāng)選擇器的輸入框獲得焦點時觸發(fā)change僅當(dāng)modelValue改變時，當(dāng)輸入框失去焦點或用戶按Enter時觸發(fā)

2.3ElementPlus框架常用組件logoInput輸入框接下來，我們利用Input組件，開發(fā)一個文本輸入框，它使用type、placeholder、v-model、clearable等屬性。設(shè)計效果如圖7.4所示。圖7.4Image圖片組件運行效果源代碼詳情如下：<template><el-inputv-model="input"style="width:240px"placeholder="Pleaseinput"clearable/></template><scriptlang="ts"setup>import{ref}from'vue'constinput=ref('')</script>

2.3ElementPlus框架常用組件logoRadio單選框Radio單選框組件通常用于提供用戶單選數(shù)據(jù)的操作，比如用戶在完善資料時性別的選擇。Radio單選框組件具有以下一些常用屬性和事件，見表7.3，表7.4。表7.3Radio組件的常用屬性屬性說明v-model綁定值value單選框的值label單選框的label如果value沒有值，label則作為value使用disabled是否禁用單選框size單選框的尺寸name原始name屬性表7.4Radio組件的常用事件事件說明change綁定值變化時觸發(fā)的事件

2.3ElementPlus框架常用組件logoRadio單選框接下來，我們將結(jié)合el-radio-group元素和el-radio子元素可以實現(xiàn)一組單選按鈕組。設(shè)計效果如圖7.5所示。圖7.5Radio單選框組件運行效果源代碼詳情如下：<template><el-radio-groupv-model="radio"><el-radio:value="3">OptionA</el-radio><el-radio:value="6">OptionB</el-radio><el-radio:value="9">OptionC</el-radio></el-radio-group></template><scriptlang="ts"setup>import{ref}from'vue'constradio=ref(3)</script>

2.2.ElementPlus框架常用組件logoDescriptions描述列表

Descriptions描述列表組件用于以列表形式展示多個字段。它使用el-descriptions和el-descriptions-item標(biāo)簽來布局列表頁面。

接下來，我們將利用Descriptions描述列表組件來開發(fā)一個列表展示頁面。設(shè)計效果如圖7.6所示。圖7.6Descriptions描述列表組件運行效果

2.2.ElementPlus框架常用組件logoDescriptions描述列表上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<template><el-descriptionstitle="UserInfo"><el-descriptions-itemlabel="Username">kooriookami</el-descriptions-item><el-descriptions-itemlabel="Telephone">lt;/el-descriptions-item><el-descriptions-itemlabel="Place">Suzhou</el-descriptions-item><el-descriptions-itemlabel="Remarks"><el-tagsize="small">School</el-tag></el-descriptions-item><el-descriptions-itemlabel="Address">No.1188,WuzhongAvenue,WuzhongDistrict,Suzhou,JiangsuProvince</el-descriptions-item></el-descriptions></template>03項目任務(wù)小白馬上要著手于項目的“書評”功能模塊的開發(fā)工作。由于該功能模塊涉及項目前后端的協(xié)同開發(fā)，這無疑是一次嚴(yán)峻的挑戰(zhàn)。

3.1開發(fā)書評展示功能1.需求描述在文學(xué)作品頁面中，我們需要開發(fā)文學(xué)作品的評論列表展示功能。該功能將呈現(xiàn)當(dāng)前文學(xué)作品的評論信息，包括了評論數(shù)量、評論者信息、評論內(nèi)容以及一系列便捷的操作按鈕，確保用戶能夠全面、直觀地瀏覽和了解該文學(xué)作品的評論。運行效果如圖7.7所示。圖7.7文學(xué)評論展示效果

3.1開發(fā)書評展示功能任務(wù)步驟：1.需求描述2.開發(fā)書評展示API接口3.開發(fā)書評展示功能

3.1.1開發(fā)書評展示功能1.需求描述在開發(fā)該功能時，我們需要使用后端項目的API接口，具體API接口信息見表7.5所示。表7.5開發(fā)過程中調(diào)用的API接口表接口調(diào)用方式說明書評展示API接口http://ip地址:端口/api/classics/get-discuss/<int:cid>本節(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接口通過文學(xué)作品編號（cid）在數(shù)據(jù)庫中檢索文學(xué)評論表（discuss），獲取指定文學(xué)作品的詳盡評論信息返回給客戶端。此外，接口在獲取評論信息后，還會進一步查詢與之相關(guān)的評論用戶信息，以確保最終返回的數(shù)據(jù)集能夠完全符合前端應(yīng)用的需求。該API接口的說明請參照表7.6。功能說明書評展示API接口調(diào)用路徑http://ip地址:端口/api/classics/get-discuss/<int:cid>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-discuss/1返回數(shù)據(jù)JSON（樣例）{

"code":"200","msg":"操作成功！","data":[

{

"did":1,

"comment":"我喜歡！",

"lowcount":0,

"topcount":0,......

"user":{

"uid":1,

"uname":"xiaobai",

"avatar":"tx.png",

"nikename":"小白",

}

},......}表7.6書評展示API接口說明表

3.1.2開發(fā)書評展示API接口2.開發(fā)數(shù)據(jù)操作模塊在"cls_svr"項目中，我們找到“app/dao/ClassicsDao.py”文件。在該文件中，我們開發(fā)查詢文學(xué)評論列表的功能。以下是實現(xiàn)該功能所需的關(guān)鍵代碼：......fromapp.model.modelsimportDiscuss#數(shù)據(jù)庫操作類classClassicsDao:

......

#9.獲取某文學(xué)作品的評論列表defgetDiscussByCid(self,cid):

try:#排序查詢:按評論時間從高到低排序

discuss=Discuss.query.filter(Discuss.cid==cid).order_by(Discuss.cdate.desc()).all()returndiscussexceptExceptionase:print(e)pass

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

接左邊：

#循環(huán)取出文學(xué)評論，并封裝評論的用戶#文學(xué)評論列表dis_list=[]

fordisindiscuss:#獲取用戶編號uid=dis.uid#查詢用戶信息user=db_usr.getUserByUid(uid)#構(gòu)建返回數(shù)據(jù)dis_tmp={"did":dis.did,"comment":ment,"cdate":dis.cdate,"topcount":dis.topcount,"lowcount":dis.lowcount,"cid":dis.cid}#轉(zhuǎn)換數(shù)據(jù)為Json格式數(shù)據(jù)users_Schema=UsersSchema()users_data=users_Schema.dump(user)dis_tmp["user"]=users_data#將構(gòu)建好的文學(xué)評論列表加入返回列表中dis_list.append(dis_tmp)#將轉(zhuǎn)換后的JSON格式數(shù)據(jù)存儲至返回結(jié)果result_msg["data"]=dis_listreturnjsonify(result_msg)......

3.1.2開發(fā)書評展示API接口4.API接口測試后端項目啟動后，我們可以通過訪問“:5000/api/classics/get-discuss/1”來調(diào)用API接口。測試結(jié)果如圖7.8所示。圖7.8書評展示API接口測試結(jié)果

3.1.3開發(fā)書評展示功能1開發(fā)業(yè)務(wù)邏輯在“cls_clt”項目中，我們找到“/src/views/ClassicView.vue”的文學(xué)作品頁面。在該文件中，我們調(diào)用“書評展示API接口”，獲取文學(xué)作品的評論信息。關(guān)鍵代碼如下所示：<scriptlang="ts"setup>......//文學(xué)評論數(shù)據(jù)vardisDatas=ref([])//調(diào)用API接口，獲取文學(xué)評論信息functioninitDis(){axios({method:'get',url:'/svr/api/classics/get-discuss/'+cid.value}).then(function(response){if(response.data.code=='200'){

disDatas.value=response.data.data}}).catch(function(error){console.log(error)})}

接左邊：//監(jiān)聽路由參數(shù)watch(()=>route.params,(newValue,oldValue)=>{......//初始化文學(xué)評論信息initDis()},//immediate:true選項來強制偵聽器的回調(diào)立即執(zhí)行{immediate:true})......</script>

3.1.3開發(fā)書評展示功能2開發(fā)頁面邏輯在“cls_clt”項目的ClassicView.vue頁面文件中，我們將當(dāng)前文學(xué)評論數(shù)據(jù)，通過v-for命令展示評論列表，將評論信息呈現(xiàn)給用戶。以下是實現(xiàn)這一功能的關(guān)鍵代碼：......<el-main>......<divstyle="margin:auto"><el-divider>書評信息({{clsDmentscount}}條)</el-divider><el-descriptionsv-for="itemindisDatas":key="item.did"class="margin-top":column="1"><template#title><el-avatar:size="35":src="String('/svr/api/image/display/head/')+item.user.avatar"style="vertical-align:middle"/><el-textclass="mx-1"type="primary"size="large"style="margin-left:5px">{{item.user.nikename}}</el-text></template>

接左邊：<template#extra><el-button-groupclass="ml-4"><el-buttontype="danger"><el-icon><Upload/></el-icon>頂（{{item.topcount}}）</el-button><el-buttontype="danger"><el-icon><Download/></el-icon>踩（{{item.lowcount}}）</el-button></el-button-group></template><el-descriptions-item><divstyle="margin-left:80px"><el-textclass="mx-1"size="large">{{ment}}</el-text></div></el-descriptions-item></el-descriptions></div></el-main>......

3.1.3開發(fā)書評展示功能3測試書評展示功能成功運行前端項目后，我們通過瀏覽器瀏覽了文學(xué)作品展示頁。這個頁面會呈現(xiàn)該文學(xué)作品的評論列表。運行效果如圖7.7所示。圖7.7文學(xué)評論展示效果

3.2.1開發(fā)書評發(fā)表功能1.需求描述當(dāng)用戶成功登錄后，并瀏覽文學(xué)作品時，頁面將展示一個醒目的“發(fā)表書評”區(qū)域。用戶可在此區(qū)域中自由輸入對文學(xué)作品的深刻感悟和獨到見解，單擊“發(fā)表書評”按鈕，即可完成整個書評的發(fā)布流程。同時，書評列表將實時更新，展現(xiàn)最新的書評內(nèi)容。運行效果如圖7.9所示。圖7.9發(fā)表書評運行效果

3.2.1開發(fā)書評發(fā)表功能1.需求描述在開發(fā)該功能時，我們需要使用后端項目的API接口，具體API接口信息見表7.7所示。表7.7開發(fā)過程中調(diào)用的API接口表接口調(diào)用方式說明書評發(fā)表API接口http://ip地址:端口/api/classics/pub-discuss本節(jié)進行開發(fā)

3.2開發(fā)書評發(fā)表功能任務(wù)步驟：1.需求描述2.開發(fā)書評發(fā)表API接口3.開發(fā)書評發(fā)表功能

3.2.2開發(fā)書評發(fā)表API接口1.需求描述該API接口將接收前端傳遞的文學(xué)編號和書評內(nèi)容，并將其插入到數(shù)據(jù)庫中相應(yīng)的文學(xué)評論表中，并更新文學(xué)表中的書評數(shù)量（commentscount）字段。最后，該接口會將結(jié)果反饋給客戶端，確保信息的即時性和交互性。本API接口需要經(jīng)歷嚴(yán)格的身份驗證流程，以確保數(shù)據(jù)的絕對安全和訪問的合法性。有關(guān)該接口的說明，請參閱表7.8。表7.8書評發(fā)表API接口說明表功能說明書評發(fā)表API接口調(diào)用路徑http://ip地址:端口/api/classics/pub-discussHTTP請求方式POST請求數(shù)據(jù)類型application/json請求數(shù)據(jù)參數(shù)參數(shù)名類型長度描述必須cidint文學(xué)作品編號■commentvarchar書評內(nèi)容■返回數(shù)據(jù)類型application/json返回數(shù)據(jù)參數(shù)參數(shù)名類型長度描述必須codevarchar狀態(tài)碼，200正確，其他錯誤■msgvarchar返回消息內(nèi)容■請求參數(shù)JSON（樣例）{

"cid":1,"comment":"文筆細膩，值得一看！"}返回數(shù)據(jù)JSON（樣例）{"code":"200","msg":"操作成功！"}

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

......#10.發(fā)表文學(xué)評論defaddDiscuss(self,discuss):

flag=True#成功標(biāo)志，True操作成功，F(xiàn)alse操作失敗try:#查詢對應(yīng)的文學(xué)作品classic=Classics.query.get(discuss.cid)#設(shè)置文學(xué)作品的評論數(shù)(+1)mentscount=mentscount+1#將評論插入文學(xué)評論表

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

3.2.2開發(fā)書評發(fā)表API接口3.開發(fā)業(yè)務(wù)邏輯模塊在“cls_svr”項目中，我們找到“/app/api/classics_blueprint.py”的文學(xué)藍圖文件。在此文件中，我們將定義一個視圖函數(shù)，實現(xiàn)API接口，用于處理發(fā)表書評的請求。以下是實現(xiàn)該功能的關(guān)鍵代碼：fromapp.model.modelsimportDiscuss,DiscussSchema......#發(fā)表文學(xué)評論接口@classics_blueprint.route('/pub-discuss',methods=["POST"])@jwt_required()#用戶身份鑒權(quán)defpubDiscuss():#返回信息result_msg={"code":"200","msg":"操作成功！"}#獲取Json格式的請求，并解析JSONrequest_body=request.get_json()#判斷傳入的Json數(shù)據(jù)是否為空ifrequest.get_json()isNone:result_msg["code"]="404"result_msg["msg"]="參數(shù)錯誤"returnjsonify(result_msg)#獲取文學(xué)評論數(shù)據(jù)cid=request_body.get("cid")#文學(xué)作品編號comment=request_body.get("comment")#評論內(nèi)容#獲取認(rèn)證的用戶編號(登錄時，通過uid生成Token)uid=get_jwt_identity()cdate=datetime.datetime.now()接左邊：

#新建評論對象discuss=Discuss(cid=cid,uid=uid,comment=comment,cdate=cdate)#創(chuàng)建數(shù)據(jù)庫操作對象db_op=ClassicsDao()#發(fā)表文學(xué)評論flag=db_op.addDiscuss(discuss)ifflag:result_msg["code"]="200"result_msg["msg"]="操作成功！"else:result_msg["code"]="404"result_msg["msg"]="操作失??！"#返回操作結(jié)果returnjsonify(result_msg)......

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

3.2.1開發(fā)書評發(fā)表功能1.開發(fā)業(yè)務(wù)邏輯在“cls_clt”項目中，我們找到“/src/views/ClassicView.vue”的文學(xué)作品展示頁面。在這個文件中，我們調(diào)用“書評發(fā)表API接口”，對文學(xué)作品發(fā)表評論。以下是實現(xiàn)這一功能的關(guān)鍵代碼：<scriptlang="ts"setup>......//書評內(nèi)容constcomment=ref('')......//發(fā)表書評functionpubDiscuss(){letdata={cid:cid.value,comment:comment.value}axios({method:'post',url:'/svr/api/classics/pub-discuss',headers:{'Content-Type':'application/json',Authorization:'Bearer'+token.value},data:data})接左邊：.then(function(response){if(response.data.code=='200'){//發(fā)表書評成功后，顯示書評initDis()//文學(xué)作品評論數(shù)+1clsDmentscount++//清空評論信息comment.value=''//提示信息ElMessage({message:'發(fā)表書評成功！',type:'success',plain:true})}}).catch(function(error){//鑒權(quán)判斷if(error.response.status==401){//設(shè)置當(dāng)前登錄用戶的token為空token.value=''userStore.setToken('')//提示信息ElMessage({message:'請重新登錄！',type:'success',plain:true})}})}</script>

3.2.1開發(fā)書評發(fā)表功能2.開發(fā)頁面邏輯在“cls_clt”項目的ClassicView.vue頁面文件中，我們開發(fā)書評發(fā)表的頁面邏輯功能，通過用戶token來控制書評發(fā)表區(qū)域的顯示和隱藏功能。以下是實現(xiàn)這一功能的關(guān)鍵代碼：<template>......<divv-if="token!=''"style="margin:auto;text-align:center"><el-divider>發(fā)表書評</el-divider><el-inputv-model="comment"style="width:80%":autosize="{minRows:2,maxRows:4}"type="textarea"placeholder="請輸入評論信息..."/><br/><el-buttonstyle="margin-top:5px"type="primary"@click="pubDiscuss">發(fā)表書評</el-button></div>......</template>

3.2.3開發(fā)書評發(fā)表功能3.測試書評發(fā)表功能成功運行前端項目后，用戶進行登錄操作，并訪問文學(xué)作品頁面。在此頁面上，用戶可以輸入書評內(nèi)容，并通過單擊“發(fā)表書評”按鈕，發(fā)表書評內(nèi)容。運行效果如圖7.9所示。圖7.9發(fā)表書評運行效果

3.3開發(fā)書評評價功能任務(wù)步驟：1.需求描述2.開發(fā)書評評價API接口3.開發(fā)書評評價功能

3.3.1開發(fā)書評評價功能需求描述在本小節(jié)中，我們將推出書評評價功能。此功能可以讓用戶對書評信息進行評價。在文學(xué)作品展示頁面，用戶可以對書評點贊或表示反對，實現(xiàn)個性化互動與交流。運行效果如圖7.11所示。圖7.11書評評價展示效果

3.3.1開發(fā)書評評價功能需求描述在開發(fā)該功能時，我們需要使用后端項目的API接口，具體API接口信息見表7.9所示。表7.9開發(fā)過程中調(diào)用的API接口表接口調(diào)用方式說明書評評價API接口http://ip地址:端口/api/classics/judge-discuss本節(jié)進行開發(fā)

3.3.2開發(fā)書評評價API接口1.需求描述該API接口將接收前端傳遞的書評編號（did）和評價標(biāo)志，隨后根據(jù)這些信息對文學(xué)評論表（discuss）中對應(yīng)的書評進行評價操作，具體操作為更新該書評的頂/踩字段（topcount/lowcount）的值。同時，該接口還會在評論評價表（discusjudges）中新增一條評價記錄，以記錄用戶的評價信息。該接口的說明請參閱表7.10。表7.10書評評價API接口說明表功能說明書評評價API接口調(diào)用路徑http://ip地址:端口/api/classics/judge-discussHTTP請求方式POST請求數(shù)據(jù)類型application/json請求數(shù)據(jù)參數(shù)參數(shù)名類型長度描述必須didint書評編號■toplowint評價標(biāo)志（0-踩，1-頂）■返回數(shù)據(jù)類型application/json返回數(shù)據(jù)參數(shù)參數(shù)名類型長度描述必須codevarchar狀態(tài)碼，200正確，其他錯誤■msgvarchar返回消息內(nèi)容■請求參數(shù)JSON（樣例）{

"did":1,"toplow":0}返回數(shù)據(jù)JSON（樣例）{"code":"200","msg":"操作成功！"}

3.3.2開發(fā)書評評價API接口2.開發(fā)數(shù)據(jù)操作模塊在“cls_svr”項目中，我們找到“/app/dao/ClassicsDao.py”文件，開發(fā)評價書評的數(shù)據(jù)庫操作功能。以下是實現(xiàn)該功能的關(guān)鍵代碼：......#數(shù)據(jù)庫操作類classClassicsDao:

......#11.評價書評defupdateDiscussTopLow(self,judge):

flag=True#成功標(biāo)志，True操作成功，F(xiàn)alse操作失敗try:#查詢書評信息dis=Discuss.query.get(judge.did)#設(shè)置書評的“頂”和“踩”的數(shù)量ifjudge.toplow==1:dis.topcount=dis.topcount+1else:dis.lowcount=dis.lowcount+1#將評價信息插入書評評價表

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

3.3.2開發(fā)書評評價API接口3.開發(fā)業(yè)務(wù)邏輯模塊在“cls_svr”項目中，請找到“/app/api/classics_blueprint.py”的文學(xué)藍圖文件。在該文件中，我們將編寫視圖函數(shù)，實現(xiàn)API接口，用以處理書評評價功能的邏輯。以下是實現(xiàn)這一功能的關(guān)鍵代碼：......fromapp.model.modelsimportDiscusjudges#評價書評接口@classics_blueprint.route('/judge-discuss',methods=["POST"])@jwt_required()#用戶身份鑒權(quán)defjudgeDiscuss():#返回信息result_msg={"code":"200","msg":"操作成功！"}#獲取Json格式的請求，并解析JSONrequest_body=request.get_json()#判斷傳入的Json數(shù)據(jù)是否為空ifrequest.get_json()isNone:result_msg["code"]="404"result_msg["msg"]="參數(shù)錯誤"returnjsonify(result_msg)#獲取評價數(shù)據(jù)did=request_body.get("did")#書評編號toplow=request_body.get("toplow")#頂/踩的標(biāo)志#獲取認(rèn)證的用戶編號(登錄時，通過uid生成Token)

uid=get_jwt_identity()

jdate=datetime.datetime.now()接左邊：#新建評價對象judge=Discusjudges(did=did,uid=uid,toplow=toplow,jdate=jdate)#創(chuàng)建數(shù)據(jù)庫操作對象db_op=ClassicsDao()#評價書評flag=db_op.updateDiscussTopLow(judge)ifflag:result_msg["code"]="200"result_msg["msg"]="操作成功！"else:result_msg["code"]="404"result_msg["msg"]="操作失?。?#返回操作結(jié)果returnjsonify(result_msg)......

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

3.3.3開發(fā)書評評價功能1.開發(fā)業(yè)務(wù)邏輯模塊在“cls_clt”項目中，我們找到“/src/views/ClassicView.vue”的文學(xué)展示頁面。在這個文件中，我們調(diào)用“書評評價API接口”，對書評進行評價。以下是實現(xiàn)這一功能的關(guān)鍵代碼：<scriptlang="ts"setup>......//頂、踩書評(0-踩，1-頂)functionjudgeDiscus(did,judge){letdata={did:did,toplow:judge}axios({method:'p

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

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

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔