项目6：“古典文学网”赏文学功能开发

项目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开发文学评价功能