项目5：“古典文学网”后端框架解析与开发

项目5：“古典文学网”首页功能开发

目录01.06.拓展任务02.知识储备04.技能拓展项目描述03.项目任务05.项目总结

学习目标知识目标：了解Vue框架的条件渲染与列表渲染机制，并熟练掌握其应用方法；了解Vue框架的生命周期，掌握其各个阶段的运作原理与特性；了解Vue框架的组件化思想，熟练掌握组件的使用及其通信机制；了解Axios网络框架，掌握其使用方法和核心特性；了解ElementPlus前端框架的组件，掌握常用组件的配置和使用。能力目标：通过学习Vue框架的条件与列表渲染，能够实现动态的界面展示和交互效果；通过学习Vue框架的生命周期，能够精准地控制组件的行为和状态通过学习Vue框架的组件，能够在项目中提升开发效率和代码质量；通过学习Axios网络框架，能够在前端开发中高效地进行数据交互；通过学习ElementPlus的组件，能够构建出高效、美观且用户友好的前端界面。素质目标：培养系统思维，严格遵守行业规范和标准，提高软件质量和可靠性；培养责任感、职业精神和团队精神，遵守职业道德。01项目描述

1.项目描述

小白已经初步掌握了Vue框架的基础知识，并成功搭建起了项目的前端开发框架。现在，他需要开发“古典文学网”项目的多个核心功能，包括首页导航、轮播图展示、搜索功能、文学推荐列表，以及用户注册和登录系统等功能的开发。02知识储备

2.知识储备

为了项目的顺利开发，小白不仅需要掌握Vue框架的关键技术，如条件与列表渲染、生命周期与模板引用、组件等，还需深入了解Axios网络框架以及ElementPlus框架。

2.1.Vue框架的条件与列表渲染1.条件渲染

在Vue框架中，条件渲染允许我们根据特定的条件来决定是否渲染某个元素或组件。为实现这一功能，Vue提供了v-if指令，通过它我们可以轻松地根据条件来动态地控制元素的渲染。以下是使用v-if指令在页面中控制<div>元素的显示和隐藏，具体代码如下：<scriptsetup>import{ref}from'vue'

constcondition=ref(true)</script><template><divv-if="condition">这个元素会在condition为true时渲染</div></template>

1.条件渲染

在上述代码中，<div>标签的渲染是受到condition这个条件变量的严格控制的。只有当condition的值为真（true）时，该标签才会被渲染至DOM中。反之，一旦condition的值变为假（false），该标签就会从DOM中自动移除，不再显示在页面上。当需要处理更复杂的条件逻辑时，我们可以使用v-else和v-else-if指令来表示其他的条件分支，从而使代码更加灵活和易于理解。2.1.Vue框架的条件与列表渲染

2.列表渲染

在Vue框架中，列表渲染的核心在于v-for指令的运用。v-for允许我们基于一个数组或对象来动态生成一组DOM元素。无论是数组的每个元素，还是对象的每个属性，都可以被v-for捕捉并转化为可视化的列表项。当创建了一个数组，并希望基于其内容来渲染一个列表时，v-for指令将成为我们的得力助手。以下是使用v-for指令进行显示数组元素的案例，具体代码如下：<scriptsetup>import{ref}from'vue'//数组consttodos=ref([{id:1,text:'LearnHTML'},{id:2,text:'LearnJavaScript'},{id:3,text:'LearnVue'}])</script>2.1.Vue框架的条件与列表渲染

2.列表渲染

接上页代码<template>

<ul>

<liv-for="itemintodos":key="item.id">{{item.id}}-{{item.text}}</li>

</ul></template>

在上述代码中，我们定义了一个todos的数组，该数组包含三个对象。在Vue组件的模板中，我们通过v-for="(item,index)intodos"的语法对todos数组进行迭代。其中，item代表当前正在迭代的元素，而index则是该元素在数组中的索引；:key="item.id"为每个列表项提供了一个唯一的标识符。todos数组渲染效果如图所示。2.1.Vue框架的条件与列表渲染

2.2.Vue框架的生命周期

Vue框架的生命周期是指Vue实例从诞生到消亡所经历的一系列完整流程。这个过程被精心划分为多个关键阶段，每个阶段都配备了特定的钩子函数，使得开发者能够在特定的时间节点上执行相应的操作。

下面我们介绍下Vue生命周期对应的常用钩子函数，具体可参见表Vue框架中的常见钩子函数钩子函数应用场景onMounted()注册一个回调函数，在组件挂载完成后执行onUpdated()树之后调用onUnmounted()注册一个回调函数，在组件实例被卸载之后调用onBeforeMount()注册一个钩子，在组件被挂载之前被调用onBeforeUpdate()树之前调用onBeforeUnmount()注册一个钩子，在组件实例被卸载之前调用2.2.Vue框架的生命周期

我们通过一个案例来理解onMounted钩子函数的用法。具体代码如下所示：<scriptsetup>import{onMounted}from'vue'onMounted(()=>{console.log('这个组件已经挂载完成。')})</script>在上述代码中，我们注册了onMounted钩子函数。当Vue组件完成了其初始渲染且DOM节点成功创建后，该函数将被触发，并在控制台输出一段日志信息。2.2.Vue框架的生命周期

2.3.Vue框架的组件

在Vue框架中，组件构成了应用程序构建的基石。它作为可复用的Vue实例，带有预先定义的选项集，使得代码组织更为高效。

2.3.Vue框架的组件1.定义组件

当我们定义Vue组件时，通常会采用单文件组件（SingleFileComponents，简称SFC）的形式，即将组件的模板、逻辑和样式定义在同一个.vue文件中。这样做的好处是使得组件的结构更加清晰、易于管理。

2.3.Vue框架的组件1.定义组件<scriptsetup>import{ref}from'vue'constcount=ref(0)</script><template><button@click="count++">

你点击了{{count}}次。</button></template>

下面我们使用“项目4”中开发过的“hivue”项目进行演示如何定义和使用组件。请打开“hivue”项目，在“/src/components/”目录下，我们创建一个名为ButtonCounter.vue的组件文件，该文件封装了一个计数器案例，以下是该组件的示例代码：

2.3.Vue框架的组件2.使用组件

在上述代码中，我们在父组件中导入了ButtonCounter.vue组件，随后，通过使用<ButtonCounter/>的语法标签，我们将ButtonCounter组件的内容嵌入到模板中。当这段代码运行时，其效果将如图所示。

2.3.Vue框架的组件3.传递props

当需要向组件中传递数据时，我们可以利用Props这一特性。Props是组件的一种特殊属性，可以在组件上进行声明和注册。例如，如果我们想要向计数组件传递一个起始值，那么就需要在组件的props列表中明确声明它。请打开前一小节在“hivue”项目的

ButtonCounter.vue组件，使用Props接收传递的参数。以下是具体的关键代码实现：<scriptsetup>//定义Props，接收传递的计数起始值constprops=defineProps(['initCount'])constcount=ref(props.initCount)</script>

在上述代码中，我们在ButtonCounter.vue组件中，使用了defineProps()宏来定义props，以便接收外部传递的起始值。这个起始值变量被命名为initCount。接着，我们通过props.initCount获取传递过来的起始值，并将其赋值给组件内部的count变量，从而实现了数据的初始化和传递。

2.3.Vue框架的组件3.传递props

在ButtonCounterView.vue这个父组件中，我们向ButtonCounter.vue子组件传递了计数器的起始值。以下是其关键代码实现：<template>

<h1>显示计数组件</h1>

<ButtonCounter:init-count="4"/>

<ButtonCounter:init-count="5"/>

<ButtonCounter:init-count="6"/></template>

在上述代码中，我们在使用ButtonCounter组件时，通过:init-count="4"设置传递给组件的计数起始值，其运行效果如图所示。

2.3.Vue框架的组件3.传递props

注意：当prop的名字较长时，推荐采用camelCase的命名方式。在上述例子中，我们将prop命名为initCount。而在HTML模板中，为了与HTMLattribute的命名习惯保持一致，我们通常会将camelCase形式的prop名转换为kebab-case（短横线分隔）形式。例如，在上述例子中，在向子组件传递props时，会使用init-count="4"这样的形式。

2.4.vue-axios网络框架

在前后端分离的项目架构中，与后端API接口进行高效且安全地通信是一项至关重要的任务。下面我们将介绍如何运用vue-axios网络框架来实现与后端API接口的通信。

2.4.vue-axios网络框架1.安装vue-axios

vue-axios是一个集成了axios库的Vue插件，使得Vue开发者能够轻松发起HTTP请求，从而与后端服务进行数据的交互。请参照如下步骤安装vue-axios库和axios库。

首先，请先使用VSCode打开前端项目“hivue”，并在VSCode的内置Terminal终端中执行以下安装命令：cnpminstall--saveaxiosvue-axios执行上述命令后，将为前端项目“hivue”安装所需的axios和vue-axios库。安装过程的成功状态如图所示。

2.4.vue-axios网络框架2.配置vue-axios

接下来，在“hivue”项目中，我们找到“/src/main.js”配置文件。在该文件中，我们将集成上一节安装的vue-axios库和axios库。以下是其关键代码示例：//引入axios和vue-axiosimportaxiosfrom'axios'importVueAxiosfrom'vue-axios'//挂载axios和vue-axios，然而只是这样全局并不能用app.use(VueAxios,axios)//将axios组件注入全局axios,这样才能全局使用vide('axios',app.config.globalProperties.axios)

2.4.vue-axios网络框架3.使用vue-axios

鉴于vue-axios实质上是Vue对axios库的封装，因此，当我们在Vue项目中与后端API接口进行通信时，实际上是利用了axios库的功能。接下来，我们将探讨axios库的使用方法，以便更好地理解和利用其在项目中的强大功能。

在axios库中，我们可以通过传递相关的配置参数来创建请求，进而与后端API接口进行通信。以下是访问登录API接口的示例（请确保配置Vue的跨域访问）：import{inject}from"vue";constaxios=inject("axios");//注入一下不然不能用//发起一个post请求axios({method:'post',url:'/svr/api/user/login',data:{uname:'xiaobai',upwd:'123456'},headers:{'Content-Type':'application/json'}

2.4.vue-axios网络框架3.使用vue-axios接上页代码}).then(function(response){//请求成功console.log(response.data)}).catch(function(error){console.log(error)})

在上述代码中，我们利用axios并通过传递一个配置对象来创建HTTP请求。这个配置对象包含了多个属性，其中method指定了请求的HTTP方法（如GET、POST等），url则是请求的URL。此外，data属性用于存放请求体发送的数据，而headers则允许我们自定义请求头信息。如需了解更多配置选项，建议查阅axios的官方文档。

一旦请求被发送，我们可以使用then()方法来指定请求成功时的回调函数，该函数将在请求成功时被执行。相反，catch()方法则用于指定请求失败时的回调函数，以便在请求出现问题时能够进行相应的处理。

2.5.ElementPlus框架常用组件接下来，我们将针对ElementPlus框架中的常用组件进行介绍。

2.5.ElementPlus框架常用组件1.安装ElementPlus框架在前端项目开发过程中，我们采用适配Vue3.x的ElementPlus框架进行功能开发。首先需要安装ElementPlus框架及其Icon图标集合。以下是详细的安装步骤，请参照执行：

首先，请先使用VSCode打开前端项目“hivue”，并在VSCode的内置Terminal终端中执行以下命令：cnpminstallelement-plus--savecnpminstall@element-plus/icons-vue执行上述命令后，将为前端项目“hivue”安装所需的ElementPlus框架及其Icon图标集合。安装过程的成功状态如图所示。图ElementPlus安装结果图ElementPlusIcon图标安装结果

2.5.ElementPlus框架常用组件2.配置ElementPlus框架接下来，在“hivue”项目中，我们找到“/src/main.js”配置文件。在该文件中，我们将集成ElementPlus框架及其Icon图标集合。以下是关键代码的参考：//引入ElementPlusimportElementPlusfrom'element-plus'import'element-plus/dist/index.css'//引入ElementPlus的图标import*asElementPlusIconsVuefrom'@element-plus/icons-vue'//挂载ElementPlusapp.use(ElementPlus)//注册ElementPlus的所有图标for(const[key,component]ofObject.entries(ElementPlusIconsVue)){ponent(key,component)}

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件（1）Container布局容器Container是一个高效的布局容器组件，旨在简化页面基本结构的搭建过程。其中，<el-container>作为外层容器，其内部包含了以下几个子容器组件：<el-header>：顶栏容器。<el-aside>：侧边栏容器。<el-main>：主要区域容器。<el-footer>：底栏容器。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件接下来，我们利用Container布局容器来开发一个常见的网页布局，该页面被划分为上、中、下三个区域，以满足不同内容的展示需求。设计效果如图所示。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件上图所展示的网页布局所对应的源代码详情如下：<template><divclass="common-layout"><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></div></template>对于ElementPlus框架的组件的详细使用方法和指南，可以参考ElementPlus的官方文档，以获得最准确和全面的信息。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件（2）Icon图标ElementPlus提供了一套丰富多样的图标集合，这些图标能够极大地丰富我们网页的布局和视觉效果。使用Icon图标集合前，先要安装Icon图标集合，并通过el-icon标签来便捷地调用和使用这些图标。接下来，我们运用el-icon标签在网页中呈现两个图标。设计效果如图所示。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件上图所展示的网页布局所对应的源代码详情如下：<template><el-icon><CirclePlus/></el-icon><el-icon><Search/></el-icon></template>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件（3）Form表单ElementPlus提供丰富的Form表单组件，包含输入框、单选框、下拉选择、多选框等用户输入的组件。通过表单组件，我们可以收集、验证和提交数据。接下来，我使用Form表单的组件来开发一个注册页面，包含了常见的注册信息。设计效果如图所示。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件上图所展示的网页布局所对应的源代码详情如下：<scriptlang="ts"setup>import{ref,reactive}from'vue'importtype{FormInstance,FormRules}from'element-plus'//定义表单数据的类型interfaceDataForm{uname:stringupwd:stringnikename:stringsex:stringphone:string}construleFormRef=ref<FormInstance>()//定义表单数据constdataForm=reactive<DataForm>({uname:'',upwd:'',nikename:'',sex:'男',phone:''})

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件接上页代码//定义表单规则construles=reactive<FormRules<DataForm>>({uname:[{required:true,message:'请输入账号...',trigger:'blur'}],upwd:[{required:true,message:'请输入密码...',trigger:'blur'}],nikename:[{required:true,message:'请输入昵称...',trigger:'blur'}],phone:[{required:true,message:'请输入电话...',trigger:'blur'}]})//提交按钮事件constsubmitForm=async(formEl:FormInstance|undefined)=>{if(!formEl)returnawaitformEl.validate((valid,fields)=>{if(valid){console.log('submit!')}else{console.log('errorsubmit!',fields)}})}

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件接上页代码//重置按钮事件constresetForm=(formEl:FormInstance|undefined)=>{if(!formEl)returnformEl.resetFields()}</script><template><el-divider>用户注册</el-divider><divstyle="display:flex;justify-content:center"><el-formref="ruleFormRef"style="max-width:600px":model="dataForm":rules="rules"label-width="auto"status-icon><el-form-itemlabel="账号："prop="uname"><el-inputv-model="dataForm.uname"/></el-form-item>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件接上页代码<el-form-itemlabel="密码："prop="upwd"><el-inputv-model="dataForm.upwd"type="password"show-password/></el-form-item><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-itemstyle="width:65%;margin:0auto"><el-buttontype="primary"@click="submitForm(ruleFormRef)">注册</el-button><el-button@click="resetForm(ruleFormRef)">重置</el-button></el-form-item></el-form></div></template>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件（4）Button按钮ElementPlus框架对Button按钮进行了封装，它通过el-button标签来显示按钮，并通过使用type、plain、round和circle来定义按钮的样式。接下来，我们将利用Button组件来开发一组按钮，这些按钮通过type属性的设置呈现出不同的按钮风格。设计效果如图所示。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件上图所展示的网页布局所对应的源代码详情如下：<template><divclass="mb-4"><el-button>Default</el-button><el-buttontype="primary">Primary</el-button><el-buttontype="success">Success</el-button><el-buttontype="info">Info</el-button><el-buttontype="warning">Warning</el-button><el-buttontype="danger">Danger</el-button></div></template>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件（5）Avatar头像Avatar组件可以用来代表人物或对象，支持使用图片、图标或者文字作为Avatar。它使用shape和size属性来设置Avatar的形状和大小。接下来，我们将利用Avatar组件来开发一个用户头像标志。设计效果如图所示。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件上图所展示的网页布局所对应的源代码详情如下：<template><!--circleUrl是头像图片的URL--><el-avatar:size="50":src="circleUrl"/></template>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件（6）Card卡片Card组件用于将信息聚合在卡片容器中展示，它包含标题，内容以及操作区域。Card组件由header、body和footer组成。header和footer是可选的。接下来，我们将利用Card组件来开发一个展示文学作品的网页布局。设计效果如图所示。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件上图所展示的网页布局所对应的源代码详情如下：<template><!--imgUrl是封面图片的URL--><el-card><template#header>桃夭</template><img:src="imgUrl"style="width:100%"/></el-card></template>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件（7）Carousel走马灯Carousel组件是在有限空间内，循环播放同一类型的图片、文字等内容，它使用el-carousel和el-carousel-item标签就得到了一个走马灯。每一个页面的内容是完全可定制的，把我们想要展示的内容放在el-carousel-item标签内。接下来，我们将利用Carousel组件来开发一个网页走马灯的效果。设计效果如图所示。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件上图所展示的网页布局所对应的源代码详情如下：<template><el-carousel:interval="4000"type="card"height="200px"><el-carousel-itemv-for="itemin6":key="item"><h3text="2xl"justify="center">{{item}}</h3></el-carousel-item></el-carousel></template>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件（8）Menu菜单Menu组件为网站提供导航功能的菜单。在这里，我们主要用它来进行网站顶部栏菜单的布局。导航菜单默认为垂直模式，通过将mode属性设置为horizontal来使导航菜单变更为水平模式。另外，在菜单中通过sub-menu组件可以生成二级菜单。Menu还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。接下来，我们将利用Menu组件来开发“古典文学网”的顶部导航布局，该导航栏包含了首页、文学类型导航、注册、登录、用户中心菜单等元素。设计效果如图所示。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件上图所展示的网页布局所对应的源代码详情如下：<template>

<el-menu

:default-active="0"

class="el-menu-demo"

mode="horizontal"

:ellipsis="false">

<el-menu-itemindex="">

<imgstyle="width:100px"src="../assets/logo.svg"alt="Elementlogo"/>

</el-menu-item><el-menu-itemindex="0">首页</el-menu-item><el-menu-itemindex="1">诸子百家</el-menu-item>

<el-menu-itemindex="2">汉赋之韵</el-menu-item>

<el-menu-itemindex="3">唐诗宋词</el-menu-item>

<el-menu-itemindex="4">元曲之音</el-menu-item>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件接上页代码<divclass="flex-grow"/>

<el-menu-itemindex="/register">注册</el-menu-item><el-menu-itemindex="/login">登录</el-menu-item><el-sub-menuindex="5"><template#title><!--circleUrl是头像图片的URL--><el-avatarsize="small":src="circleUrl"/></template><el-menu-itemindex="/user">用户中心</el-menu-item><el-menu-itemindex="/out">退出</el-menu-item></el-sub-menu>

</el-menu></template>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件（9）PageHeader页头PageHeader组件主要用于构建页面的头部区域。它通常包含页面的标题、返回按钮等常用元素，用于快速展示页面的主要信息和提供导航功能。接下来，我们将利用PageHeader组件来开发“古典文学网”的文学推荐布局，该布局用于呈现文学作品推荐列表。设计效果如图所示。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件上图所展示的网页布局所对应的源代码详情如下：<template><elheader><template#icon><el-icon><DArrowRight/></el-icon></template><template#title>查看更多</template><template#content><divclass="flexitems-center"><!--iconUrl是图标的URL--><el-avatar:size="30"class="mr-3":src="iconUrl"/><spanclass="text-largefont-600mr-3">诸子百家</span></div></template>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件接上页代码<divclass="mt-4text-smfont-bold"><el-rowjustify="center":gutter="5"><el-col:span="4"><el-cardstyle="padding:'0px'"><template#header>蒹葭</template><!--imgUrl是封面图片的URL--><img:src="imgUrl"style="width:100%;display:block"/></el-card></el-col></el-row></div></elheader></template>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件（10）Message消息提示

Message组件是一个消息提示组件，常用于主动操作后的反馈提示，比如提交表单时成功或者失败的提示信息展示。

接下来，我们将利用Message组件来开发操作成功提示和操作错误提示。运行效果如图所示。

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件上图所展示的网页布局所对应的源代码详情如下：<scriptlang="ts"setup>import{ElMessage}from'element-plus'constopen2=()=>{

ElMessage({

message:'操作成功！',

type:'success'

})}constopen4=()=>{

ElMessage.error('操作错误！')}</script><template>

<el-button:plain="true"@click="open2">成功提示</el-button>

<el-button:plain="true"@click="open4">错误</el-button></template>

2.5.ElementPlus框架常用组件3.ElementPlus框架的组件（11）Divider分割线Divider组件主要用于区隔内容的分割线，我们可以在分割线上自定义文本内容。接下来，我们将利用Divider组件来开发“古典文学网”注册页面的分割线。设计效果如图所示。上图所展示的网页布局所对应的源代码详情如下：<template><el-divider>用户注册</el-divider></template>03项目任务

3.项目任务

小白已经精通了Vue框架的关键开发技术，并熟练掌握了Axios网络框架和ElementPlus前端框架的实用技巧。基于这些技术积累，小白将开发“古典文学网”前端项目中“首页”模块及注册和登录功能。注意：在进行前端开发之前，请确保后端项目“cls_svr”已经启动并处于运行状态。

3.1.开发导航栏功能

接下来，我们将着手开发“古典文学网”的导航栏功能。

3.1.开发导航栏功能1.需求描述

我们需要为"古典文学网"设计的导航栏功能，该功能由顶部和底部两个导航栏组成，共同构成了网站的全局导航体系。顶部导航栏展示了项目的logo，以及指向首页、文学类型分类、注册、登录和用户中心等关键页面的链接。而底部导航栏则展示项目的其他重要导航信息，为用户提供了更多元化的访问选择。导航栏的运行效果如图所示。

3.1.开发导航栏功能1.需求描述

在开发该功能时，我们需要调用后端项目的API接口，具体API接口信息见表5.2。本项目涉及的图片，可以从本项目素材中获取，并按“项目2的2.3.5.开发图片显示API接口”小节的配置图片路径。项目导航功能所调用的API接口表接口调用方式说明文学导航API接口http://ip地址:端口/api/classics/get-classictypes请参考项目3中的“3.3.4.开发文学导航API接口”小节图片显示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>请参考项目2中的“2.3.5.开发图片显示API接口”小节

3.1.开发导航栏功能2.业务功能实现（1）安装项目扩展库我们以前端项目“cls_clt”为基础，安装项目所需的扩展库。

①安装项目扩展库在本节的功能开发中，首要任务是在前端项目“cls_clt”中安装并集成一系列扩展库，包括axios、vue-axios、ElementPlus和Icon图标集合。以下是详细的安装步骤，请参照执行：请先使用VSCode打开前端项目“cls_clt”，并在VSCode的内置Terminal终端中执行以下命令：cnpminstall--saveaxiosvue-axioscnpminstallelement-plus--savecnpminstall@element-plus/icons-vue执行上述命令后，将为前端项目“cls_clt”安装所需的axios、vue-axios、ElementPlus和Icon图标集合等关键扩展库。

3.1.开发导航栏功能2.业务功能实现②配置扩展库接下来，在“cls_clt”项目中，我们找到“/src/main.js”配置文件。在该文件中，我们将集成上一节安装的扩展库。以下是关键代码的参考示例：//引入axios和vue-axiosimportaxiosfrom'axios'importVueAxiosfrom'vue-axios'//引入ElementPlusimportElementPlusfrom'element-plus'import'element-plus/dist/index.css'//引入ElementPlus的图标import*asElementPlusIconsVuefrom'@element-plus/icons-vue'

3.1.开发导航栏功能2.业务功能实现注意：请确保“cls_clt”项目的跨域请求代理配置正确并可用（参考项目4中的“4.3.3.开发跨域访问功能”小节）。//挂载axios和vue-axios，然而只是这样全局并不能用app.use(VueAxios,axios)//将axios组件注入全局axios,这样才能全局使用vide('axios',app.config.globalProperties.axios)//挂载ElementPlusapp.use(ElementPlus)//注册ElementPlus的所有图标for(const[key,component]ofObject.entries(ElementPlusIconsVue)){ponent(key,component)}接上页代码

3.1.开发导航栏功能2.业务功能实现（2）开发项目导航组件接下来，我们将采用组件化的开发方式，来精心构建项目的顶部和底部导航栏。这一做法旨在提升代码的可复用性，使得整个项目的其他页面能够轻松引入并应用这些导航栏组件，从而实现高效、一致的界面设计。①顶部导航组件在“cls_clt”项目中，我们首先定位到“/src/components”这一组件目录，并在其中新建一个名为HeaderComp.vue的顶部导航组件。这个组件将承担起项目中重要的导航功能。为实现该功能，我们采用了ElementPlus中的Menu菜单组件，并通过相应的配置，将其整合至HeaderComp.vue中。该导航组件调用API接口，并将接口返回的数据进行存储，以便后续调用，以下提供了该组件的具体代码实现：

3.1.开发导航栏功能2.业务功能实现<scriptlang="ts"setup>import{ref,inject,onMounted}from'vue'//构建logo图片及用户中心默认图片的URLconstlogo_url=ref('/svr/api/image/display/head/logo.png')constuser_url=ref('/svr/api/image/display/head/tx.png')constaxios=inject('axios')//注入axios//用于接收传递给组件的数据，此处传递的是选中的菜单索引constprops=defineProps({activeIndex:String})//设置菜单选中索引constactiveIndex=props.activeIndex//导航栏数据列表varnavDatas=ref([])//调用API接口，获取文学类型列表，用于初始化导航栏functioninitNav(){

axios({

method:'get',

url:'/svr/api/classics/get-classictypes'

}).catch(function(error){console.log(error)

})}

3.1.开发导航栏功能2.业务功能实现//完成初始渲染并创建DOM节点后，进行页面加载onMounted(()=>{

initNav()//初始化导航栏})</script><template>

<!--导航标签开始-->

<el-menu

:default-active="activeIndex"

:router="true"

class="el-menu-demo"

mode="horizontal"

:ellipsis="false">

}).then(function(response){

if(response.data.code=='200'){

navDatas.value=response.data.data

}

<el-menu-itemindex="">

<imgstyle="width:60px;height:60px":src="logo_url"alt="古典文学"/>

</el-menu-item>

<el-menu-itemindex="/">首页</el-menu-item>接上页代码

3.1.开发导航栏功能2.业务功能实现

<el-menu-item

v-for="iteminnavDatas"

:key="item.tid"

index=""

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

<divclass="flex-grow"/>

<el-menu-itemindex="/register">注册</el-menu-item>

<el-menu-itemindex="/login">登录</el-menu-item><el-sub-menuindex=""><template#title><el-avatarsize="small":src="user_url"/></template><el-menu-itemindex="">用户中心</el-menu-item><el-menu-itemindex="">退出</el-menu-item></el-sub-menu>

</el-menu>

<!--导航标签结束--></template><style>.flex-grow{

flex-grow:1;}</style>接上页代码

3.1.开发导航栏功能2.业务功能实现

在上述代码中，我们运用了ElementPlus中的Menu组件，为项目精心构建了一个功能丰富的顶部导航栏。该导航栏包含了多个关键菜单项，如主页、注册、登录、用户中心，以及一个动态显示数据库中文学类型的导航菜单。在顶部导航栏中，项目的logo图片和用户头像的显示，我们通过使用之前开发的图片显示API接口，动态地构建图片显示的接口URL，从而确保图片能够准确无误地展示给用户。在导航菜单的URL设置上，我们利用了el-menu-item标签的index属性，为每一个菜单项设置了相应的导航路由。

文学类型导航菜单通过initNav()函数，使用axios库来调用后端提供的“首页”文学导航API接口，从而获取项目中所有的文学类型数据。这个initNav()函数被封装在onMounted()这个Vue组件生命周期钩子中，确保在组件挂载到DOM后立即执行，将获取到的数据通过循环处理，动态地添加到菜单栏中。同时，为了提供用户友好的导航体验，网站导航栏菜单还通过activeIndex变量来接收传递过来的菜单选中索引。这一机制确保了当用户单击某个菜单项时，能够立即更新并高亮显示当前被选中的菜单项，从而为用户提供了直观且便捷的导航指引。

注意：在采用ElementPlus框架进行开发时，请务必在<scriptsetup>标签中明确指定lang="ts"属性，否则可能会导致编译错误。为确保项目的顺利进行，后续的所有开发工作都应遵循这一规范。

3.1.开发导航栏功能2.业务功能实现②底部导航组件在“cls_clt”项目中，我们首先定位到“/src/components”这一组件目录，并在其中新建一个名为FooterComp.vue的底部导航组件。这个组件将显示项目底部的导航信息。以下提供了该组件的具体代码实现：<template><div>关于我们|招贤纳士|商务合作|在线客服|工作时间8:30-22:00</div></template>

3.1.开发导航栏功能2.业务功能实现（3）开发首页导航功能在完成项目导航组件的开发后，下一步是在首页中集成并使用这些组件，以开发首页的导航功能。在“cls_clt”项目中，请定位到“/src/views/HomeView.vue”这一首页文件。在该文件中，我们将利用ElementPlus中的Container布局容器来构建页面的基本框架和结构，整个首页分为顶部、中部、底部三个部分，并在顶部和底部分别嵌入对应的导航菜单组件。以下是具体的代码实现示例：<scriptlang="ts"setup>import{ref,inject,onMounted}from'vue'//引入顶部导航组件importHeaderCompfrom'@/components/HeaderComp.vue'//引入底部组件importFooterCompfrom'@/components/FooterComp.vue'//导航栏菜单选中索引，默认选中首页constactiveIndex=ref('/')</script>

3.1.开发导航栏功能2.业务功能实现在上述代码中，我们导入了顶部导航栏组件（HeaderComp.vue）和底部导航栏组件（FooterComp.vue），并运用了ElementPlus框架的el-container布局容器来结构化页面。页面被明确分割为顶部el-header、中部el-main以及底部el-footer三个部分。<template>

<el-container>

<!--顶部导航栏-->

<el-header>

<HeaderComp:active-index="activeIndex"/>

</el-header>

<!--主要区域容器-->

<el-main></el-main>

<!--底部导航栏-->

<el-footer><FooterComp/></el-footer>

</el-container></template>

3.1.开发导航栏功能2.业务功能实现在顶部区域，我们通过<HeaderComp:active-index="activeIndex"/>标签来展示顶部导航栏组件，并动态地将activeIndex（菜单选中索引）作为属性传递给该组件，以实现菜单项的高亮显示。而在底部区域，我们则通过<FooterComp/>标签来展示底部导航信息。中部区域作为首页的主要内容展示区，将用于呈现页面的核心内容和功能。后续的开发工作将进一步完善这一区域，以满足项目的具体需求。

3.1.开发导航栏功能2.业务功能实现（4）测试首页导航功能最后，我们运行“cls_clt”项目，并通过浏览器顺利地打开并浏览了该项目的首页。在首页上，我们可以清晰地看到顶部导航栏以及底部的导航信息。我们可以单击不同菜单轻松实现不同菜单项之间的切换。整个运行效果如图所示。

3.2.开发轮播图功能接下来，我们着手开发“古典文学网”的首页轮播图功能。

3.2.开发轮播图功能1.需求描述

在“古典文学网”项目的首页中，我们需要开发一个轮播图功能，该功能通过循环展示的方式，呈现六个精选的古典文学信息，同时实现自动定时切换。轮播图的运行效果如图所示。

2.业务功能实现（1）开发业务逻辑在“cls_clt”项目中，请找到“/src/views/HomeView.vue”首页文件。在该文件中，将调用“首页轮播图API接口”以获取轮播图的数据列表，以便后续使用。以下是实现此功能的关键代码：<scriptlang="ts"setup>import{ref,inject,onMounted}from'vue'import{RouterLink}from'vue-router'constaxios=inject('axios')//注入axios//轮播图数据列表varcarouselDatas=ref([])//调用API接口，获取轮播图列表，用于初始化首页轮播图functioninitCarousel(){

axios({

method:'get',

url:'/svr/api/classics/seach-carousels/6'

})3.2.开发轮播图功能

3.2.开发轮播图功能1.需求描述

在开发该功能时，我们需要使用后端项目的API接口，具体API接口信息见表项目导航功能所调用的API接口表接口调用方式说明首页轮播图API接口http://ip地址:端口/api/classics/seach-carousels/<int:num>请参考项目3中的“3.3.7.开发轮播图API接口”小节图片显示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>开发图片显示API接口”小节

2.业务功能实现在上述代码中，我们集成了axios库以处理HTTP请求。随后，我们定义了initCarousel()函数，该函数的主要职责是调用API接口，从后端获取轮播图的数据列表，并将这些数据存储在carouselDatas变量中以供后续使用。这个initCarousel()函数被封装在onMounted()这个Vue组件生命周期钩子中，确保在组件挂载到DOM后立即执行，从而实现了轮播图数据的初始化加载。

.then(function(response){

if(response.data.code=='200'){

carouselDatas.value=response.data.data

}

})

</script>接上页代码3.2.开发轮播图功能

2.业务功能实现（2）开发页面逻辑为了将轮播图数据展示给客户，我们采用了ElementPlus框架中的Carousel走马灯组件。该组件将轮播的文学数据以跑马灯的效果进行呈现，能够循环播放文学的封面等关键内容，为用户提供直观且流畅的浏览体验。以下是实现这一功能的关键代码示例：<!--主要区域容器--><el-main>

<!--轮播图开始-->

<el-carousel:interval="4000"type="card"height="200px">

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

<RouterLinkto=""><el-image

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

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

fit="contain"/></RouterLink>3.2.开发轮播图功能

2.业务功能实现在上述代码中，我们利用el-carousel组件实现了轮播图功能。在el-carousel组件内部，我们借助v-for指令循环遍历carouselDatas轮播图列表的数据，使得每一个el-carousel-item都能展示一张独特的文学封面图片。为了动态地加载这些图片，我们调用了先前开发的图片显示API接口，并据此构建了图片显示的接口URL。</el-carousel-item>

</el-carousel>

<!--轮播图结束-->

<el-dividerborder-style="dashed"/></el-main>接上页代码3.2.开发轮播图功能

2.业务功能实现（3）测试首页轮播图功能最后，我们运行“cls_clt”项目，并通过浏览器顺利地打开首页。在首页上，我们可以看到轮播图的展示。运行效果如图所示。3.2.开发轮播图功能

接下来，我们着手开发“古典文学网”的文学搜索功能。。3.3.开发文学搜索功能

3.3.开发文学搜索功能1.需求描述

在首页设计中，我们需要开发一个文学搜索功能，该功能将为用户提供搜索和浏览体验。当用户从首页的搜索框中输入关键词并单击搜索按钮后，系统将引导用户跳转至搜索结果展示页面。在这一页面中，搜索结果将以列表形式展现，同时页面仍保留搜索框，以便用户继续深化或拓展搜索。如图（a）及图（b）所示。图（a）首页搜索框图（b）搜索结果页

3.3.开发文学搜索功能1.需求描述

在开发该功能时，我们需要使用后端项目的API接口，具体API接口信息见表所示。项目导航功能所调用的API接口表接口调用方式说明文学搜索API接口http://ip地址:端口/api/classics/seach-classics请参考项目3中的“3.3.6.开发文学搜索API接口”小节图片显示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>请参考项目2中的“2.3.5.开发图片显示API接口”小节

3.3.开发文学搜索功能2.业务功能实现（1）开发首页搜索框

①开发业务逻辑

在“cls_clt”项目中，找到“/src/views/HomeView.vue”首页文件。在该文件中，我们将获取用户输入的搜索关键字，并跳转至搜索结果展示页面。以下是实现此功能的关键代码：<scriptlang="ts"setup>import{ref,inject,onMounted}from'vue'import{useRoute,useRouter,RouterLink}from'vue-router'//创建路由对象，用于编程式导航constrouter=useRouter()//搜索栏的关键字constkeyword=ref('')//搜索跳转方法，跳转至搜索页functionseach(){

//获取输入的搜索关键字

varmykeyword=keyword.value

3.3.开发文学搜索功能2.业务功能实现

在上述代码中，我们首先定义了一个变量keyword，用于存储从搜索关键字。接着，我们定义了一个search的函数，该函数的主要作用是处理搜索跳转逻辑。在函数内部，我们获取了用户输入的关键字keyword，并进行了空字符的判断，以确保用户输入的有效性。最后，我们使用编程式导航的方式，通过router.push方法，将用户导航至搜索页面。这里，我们指定了搜索页面的路由名称为“search”。

//当搜索关键字为空时，设置值为：all(搜索所有内容)

if(keyword.value==''){

mykeyword='all'

}

//跳转至搜索页面，并传递关键字

router.push({name:'seach',params:{keyword:mykeyword}})}</script>

3.3.开发文学搜索功能2.业务功能实现②开发页面逻辑

在首页的布局中，我们使用ElementPlus框架的组件构建了搜索输入框界面，当用户单击搜索按钮后，将跳转至搜索结果页面。以下便是实现这一功能的关键代码示例：

<el-main>

<!--搜索栏开始-->

<divclass="mt-4">

<el-input

style="max-width:600px"

v-model="keyword"

placeholder="请输入搜索关键字"

clearable>

3.3.开发文学搜索功能2.业务功能实现

在上述代码中，我们使用ElementPlus框架的Input输入框组件以及Button按钮组件，共同构建了一个搜索输入框界面，当用户单击搜索按钮后，将调用seach()方法，从而跳转至搜索结果页面。<template#prefix>

<el-iconclass="el-input__icon"><search/></el-icon>

</template>

<template#append>

<el-button@click="seach">搜索</el-button>

</template>

</el-input>

</div>

<el-dividerborder-style="dotted"/>

<!--搜索栏结束--></el-main>

3.3.开发文学搜索功能2.业务功能实现（2）开发搜索结果页面

①开发业务逻辑

在“cls_clt”项目中，我们找到“/src/views/”目录。接下来，在此目录下创建名为“SeachView.vue”的页面文件，该页面用于搜索及搜索结果展示。在“SeachView.vue”页面中，我们将接收传递过来的搜索关键字keyword，调用文学搜索API接口，获取搜索结果。以下是具体的代码参考：<scriptlan