项目4：“古典文学网”前端框架解析及开发

项目4：“古典文学网”

前端框架解析及开发

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

学习目标知识目标：了解Vue项目结构及特点，掌握Vue项目的整体框架结构；了解Vue框架的模板语法与响应式基础，掌握它们的核心原理和应用方法；了解Vue框架的事件监听与表单绑定，掌握其如何捕捉和处理用户交互事件；了解Vue框架的计算属性和侦听器，掌握其如何在应用中处理复杂逻辑和动态数据；了解Vue框架的路由和状态管理，掌握如何构建结构清晰、易于维护的前端应用。能力目标：通过学习模板语法与响应式基础，能够应用其提升开发效率与项目质量；通过学习事件监听与表单绑定，能够为项目开发数据交互功能；通过学习计算属性和侦听器，能够为项目开发高效的数据处理功能；通过学习路由和状态管理，能够为项目开发高效路由功能及状态管理功能。素质目标：培养系统思维，严格遵守行业规范和标准，提高软件质量和可靠性；培养责任感、职业精神和团队精神，遵守职业道德01项目描述

1.项目描述

小白已经熟练掌握了项目后端API接口开发的完整流程，现在，他计划进一步深入研究Vue框架技术，以设计出前端项目的整体架构，并开发“古典文学网”的“首页”“注册页”和“登录页”的路由功能。此外，他还将为项目增添跨域访问功能以及身份验证的Token管理功能。02知识储备

2.知识储备

为了项目的顺利开发，小白需要学习Vue框架技术，包括项目架构、模板语法、响应式基础、事件监听机制、计算属性应用、侦听器原理、路由配置以及状态管理策略等关键技术点。2.1.Vue程序框架解析

我们将选取Vue3.x作为“古典文学网”前端的核心框架技术，并且深入探讨Vue3.x的一些核心技术，以便更好地理解和应用这一强大的前端框架。

2.1.Vue程序框架解析1.Vue项目布局

Vue3的项目布局与Vue2相比，虽然大体上并没有显著的差异，但确实引入了一些全新的特性和建议的最佳实践。以下是一个典型的Vue3项目布局示例。

D:/Projects/hivue├──node_modules/├──public/│└──favicon.ico├──src/│├──assets/│├──components/│├──router/│├──store/│├──views/│├──App.vue│└──main.js├──tests/├──index.html├──jsconfig.json├──package.json├──README.md└──vite.config.js2.1.Vue程序框架解析1.Vue项目布局

该目录中的目录/文件相关说明见表所示。目录/文件说明node_modules/npm加载的项目依赖模块public/公共资源目录，存放了与业务逻辑无关的静态资源public/favicon.ico网站图标src/assets/静态资源目录，用于存放应用程序使用的静态资源文件，例如图片、样式表等src/components/组件目录，按照功能或类别划分存放单文件组件（.vue文件）src/router/路由配置目录，用于定义应用程序的路由配置src/store/状态管理目录，用于管理应用程序的状态src/views/目录用于存放应用程序的页面级组件src/App.vue应用程序的根组件，它包含了应用程序的整体布局和结构src/main.js应用程序入口脚本，用于初始化Vue3应用程序和配置一些全局设置tests/测试相关文件目录，存放单元测试、集成测试等代码index.html应用程序入口HTML文件，Vue应用将挂载于此文件中的特定元素上jsconfig.jsonJavaScript项目的核心配置文件package.json项目的配置文件，包含了项目的元信息、脚本命令、依赖列表等README.md项目的说明文档。vite.config.jsVite构建工具的配置文件，用于Vite的构建行为2.1.Vue程序框架解析1.Vue项目布局

接下来，我们打开在项目1中的“1.3.4.开发‘hivue’前端项目”小节所创建的“hivue”项目。通过对这个项目的分析，我们将探讨在Vue项目中如何创建一个应用实例。我们打开“hivue”项目中的“/src/main.js”文件，从该文件的代码可以看出每个Vue应用都是通过createApp函数创建一个应用实例，该函数传入的App对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。关键代码如下所示：import{createApp}from'vue'//从一个单文件组件中导入根组件importAppfrom'./App.vue'constapp=createApp(App)2.1.Vue程序框架解析1.Vue项目布局

应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的DOM元素或是一个CSS选择器字符串。具体代码可参考/index.html和/src/main.js文件。

index.html的关键代码如下：<divid="app"></div>/src/main.js的关键代码如下：app.mount('#app')

在上述代码中，我们通过.mount()方法将Vue应用实例挂到<divid="app"></div>中，实现Vue的渲染。2.1.Vue程序框架解析2.单文件组件

在大多数Vue项目中，我们采用一种类似HTML格式的文件来编写Vue组件，这就是所谓的单文件组件（通常简称为SFC，即Single-FileComponents，文件扩展名为*.vue）。Vue的单文件组件将组件的逻辑（JavaScript）、模板（HTML）和样式（CSS）整合在同一个文件中。接下来，我们开发一个计数器案例。请在项目的App.vue中输入以下代码：

<scriptsetup>import{ref}from'vue'constcount=ref(0)</script><template><button@click="count++">Countis:{{count}}</button></template><stylescoped>button{font-weight:bold;}</style>

在上述代码中，每单击一次按钮，计数器count将自加1，并在浏览器中显示计数结果。2.1.Vue程序框架解析3.API风格

Vue的组件可以采用选项式API和组合式API风格来编写代码。接下来，我们将分别介绍这两种风格。

（1）选项式API(OptionsAPI)使用选项式API时，我们可以借助一个包含多个选项的对象来清晰地描述组件的逻辑，这些选项包括data、methods和mounted等。这些选项所定义的属性都会自动暴露给函数内部的this关键字，使其能够方便地引用当前组件实例的属性和方法。下面是一个使用选项式API编写的计数器案例，它展示了这种风格的灵活性和实用性。<script>exportdefault{//data()返回的属性将会成为响应式的状态//并且暴露在`this`上data(){return{count:0}},2.1.Vue程序框架解析3.API风格

在上述代码中，我们使用选项式API重新开发了计数器功能。

//methods是一些用来更改状态与触发更新的函数//它们可以在模板中作为事件处理器绑定methods:{increment(){this.count++}},//生命周期钩子会在组件生命周期的各个不同阶段被调用//例如这个函数就会在组件挂载完成后被调用mounted(){console.log(`Theinitialcountis${this.count}.`)}}</script><template><button@click="increment">Countis:{{count}}</button></template>2.1.Vue程序框架解析3.API风格

（2）组合式API(CompositionAPI)通过组合式API，我们可以利用一系列导入的API函数来精确描述组件的逻辑。在单文件组件中，组合式API经常与<scriptsetup>特性结合使用。这里的<scriptsetup>是一个特殊的标记，它告诉Vue在编译时进行相应的处理，以便我们能够更加简洁、高效地利用组合式API。值得一提的是，在<scriptsetup>中导入的模块以及定义的顶层变量和函数，都可以直接在模板中无缝使用，无需额外的引用或绑定。下面展示了一个经过改造的计数器案例，它使用了组合式API与<scriptsetup>进行开发。这个案例充分展示了组合式API的灵活性和强大功能，使得组件的编写更加直观和高效。<scriptsetup>import{ref,onMounted}from'vue'//响应式状态constcount=ref(0)//用来修改状态、触发更新的函数functionincrement(){count.value++}2.1.Vue程序框架解析3.API风格在上述代码中，我们使用组合式API重新开发了计数器功能。这两种API风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。在项目开发过程中，我们强烈推荐采用组合式API与单文件组件相结合的方式，以充分发挥它们的优势，提升开发效率和代码质量。

//生命周期钩子onMounted(()=>{console.log(`Theinitialcountis${count.value}.`)})</script><template><button@click="increment">Countis:{{count}}</button></template>2.2.Vue框架的模板语法和响应式基础接下来，我们将深入解析Vue框架中的模板语法，并探讨其响应式系统的基础知识。

2.2.Vue框架的模板语法和响应式基础1.模板语法

Vue采用了一种基于HTML的模板语法，这种语法允许我们以声明式的方式将组件实例的数据绑定到渲染的DOM上。

（1）文本插值

在Vue框架中，最基本的数据绑定形式是通过文本插值来实现的，它采用了“Mustache”语法，也就是我们常常提到的双大括号（{{}}）。下面是一个简单的示例代码，展示了这种数据绑定的用法：<span>Message:{{msg}}</span>

在上述代码中，双大括号标签（Mustache语法）将会被自动替换为对应组件实例中msg属性的当前值，每当msg属性的值发生变化时，这些标签中的内容也会同步更新，从而确保界面与数据保持实时一致。这种机制使得Vue框架能够轻松实现数据的动态绑定与更新。2.2.Vue框架的模板语法和响应式基础1.模板语法

（2）原始HTML由于双大括号标签默认将数据解释为纯文本，而非HTML代码，因此如果我们希望在Vue模板中插入HTML内容，应当使用v-html指令。下面是一个具体的使用示例：用法：<divv-html="rawHtml"></div>

在上述代码中，rawHtml是Vue组件实例中的一个属性，它包含了需要被解析为HTML的字符串。v-html指令会告诉Vue将rawHtml的内容作为HTML片段插入到<div>元素中。2.2.Vue框架的模板语法和响应式基础1.模板语法

（3）Attribute绑定在Vue框架中，当需要为元素的属性（attribute）绑定一个动态值时，我们则需要使用v-bind指令。下面这一示例展示了如何使用v-bind指令为元素的属性绑定动态值：<imgv-bind:src="imageSrc"alt="VueLogo">

在上述代码中，v-bind:src告诉Vue将imageSrc属性的值绑定到<img>元素的src属性上。每当imageSrc的值发生变化时，<img>元素的src属性也会自动更新，从而确保显示的图片与数据保持同步。

由于v-bind在Vue中的使用频率极高，Vue为它提供了一个专门的简写语法，以便更简洁地绑定元素的属性。下面是一个具体的代码示例：<img:src="imageSrc"alt="VueLogo">2.2.Vue框架的模板语法和响应式基础1.模板语法

接下来，我们来看一个实际案例，该案例将一个动态的class绑定应用于<h1>标签，并通过titleClass的引用（ref）来设定其值。此案例的源代码已详细记录在App.vue文件中，下面是具体的代码实现：<scriptsetup>import{ref}from'vue'consttitleClass=ref('red-text')</script><template>

<h1:class="titleClass">Makemered</h1></template><style>.red-text{color:red;}</style>2.2.Vue框架的模板语法和响应式基础1.模板语法

在上述代码中，我们利用了Vue框架提供的:class绑定语法，将titleClass数据属性的值动态地绑定到<h1>标签的class属性上。titleClass的值为red-text，它对应着一个CSS类名，用于改变文本颜色为红色。当Vue实例被渲染时，它会根据titleClass的值动态地给<h1>标签添加或移除red-text样式，从而实现文本颜色的动态改变。该案例运行效果如图所示。2.2.Vue框架的模板语法和响应式基础2.响应式基础

Vue的声明式渲染机制是一套扩展自标准HTML的模板语法，允许我们根据JavaScript的状态来清晰地描述期望的HTML结构。一旦状态发生变化，Vue会自动触发更新，确保HTML界面与最新状态保持同步。这种能够在状态改变时自动触发更新的特性，我们称之为响应式。在Vue中，我们可以利用reactive()和ref()这两个API来声明响应式状态。以下代码展示了一个计数器功能的示例(App.vue)：<scriptsetup>import{reactive,ref}from'vue'constcounter=reactive({count:0})constmessage=ref('HelloWorld!')</script><template><h1>{{message}}</h1><p>Countis:{{counter.count}}</p></template>2.2.Vue框架的模板语法和响应式基础2.响应式基础

在上述代码中，我们运用了reactive()和ref()这两个API来分别定义counter和message对象，并且直接在模板中进行了使用。该案例运行效果如图4.2所示。在Vue框架中，reactive()函数主要适用于对象类型的数据，包括数组以及诸如Map和Set这样的内置类型。而ref()函数则具有更广泛的适用性，它可以接受任何类型的值。2.3.Vue框架的事件监听和表单绑定接下来，我们将深入剖析Vue框架中的事件监听机制以及表单绑定的技巧。

2.3.Vue框架的事件监听和表单绑定1.事件监听

我们可以利用v-on指令（通常简写为@）来监听DOM事件，并在这些事件被触发时执行相应的JavaScript代码。以下是该指

令的基本语法：v-on:click="handler"或@click="handler"在其语法中，事件处理器(handler)的值可以是内联事件处理器或方法事件处理器。2.3.Vue框架的事件监听和表单绑定1.事件监听

（1）内联事件处理器

内联事件处理器是一种在HTML元素中直接嵌入JavaScript代码的方法，当特定的DOM事件（如单击、提交等）被触发时，这些代码就会被执行。这种方式类似于传统的onclick属性，通常用于处理简单的用户交互场景，例如响应按钮单击或表单提交等动作。以下的计数器案例使用了内联事件处理器进行开发，具体代码实现如下(App.vue)：<scriptsetup>import{ref}from'vue'constcounter=ref(0)</script><template><button@click="counter++">增加1</button><p>按钮被点击了{{counter}}次。</p></template>2.3.Vue框架的事件监听和表单绑定1.事件监听

在上述代码中，我们为button按钮配置了内联事件处理器。当用户单击这个按钮时，counter对象的值每次都会增加1。这一交互效果如下图。2.3.Vue框架的事件监听和表单绑定1.事件监听

（2）方法事件处理器

随着事件处理逻辑日益复杂，内联代码的方式逐渐暴露出灵活性不足的缺点。为此，v-on指令提供了更为灵活的方式，它不仅可以接受一个方法名，还可以调用某个方法。这就是所谓的方法事件处理器，它本质上是一个指向组件上定义的方法的属性名或路径。下面这个计数器案例使用了方法事件处理器进行开发，具体代码实现如下(App.vue)：<scriptsetup>import{ref}from'vue'constcount=ref(0)functionincrement(){count.value++}</script><template><buttonv-on:click="increment">点击增加计数</button><p>当前计数：{{count}}</p></template>2.3.Vue框架的事件监听和表单绑定1.事件监听

在上述代码中，当按钮被单击时，会触发increment方法，而不是直接在模板中执行JavaScript代码。这一交互效果如图4.4所示。2.3.Vue框架的事件监听和表单绑定2.表单绑定

在Vue中，实现表单输入绑定通常依赖于v-model指令。这个指令在表单元素（如<input>、<select>）上建立了双向数据绑定机制。具体来说，当用户在表单中进行输入操作时，数据会自动更新；相应地，当数据发生变化时，表单元素的值也会相应地更新。下面是一个简单的示例，展示了如何在Vue中使用v-model进行表单输入绑定的过程。2.3.Vue框架的事件监听和表单绑定2.表单绑定

具体代码实现如下(App.vue)：<scriptsetup>import{ref}from'vue'constmessage=ref('')</script><template><p>你输入的信息是:{{message}}</p> <inputv-model="message"/></template>在上述代码中，我们创建了一个包含<input>元素的表单。通过v-model="message"将输入框的值与message对象进行了双向绑定。这一交互效果如图所示。2.3.Vue框架的事件监听和表单绑定2.表单绑定

v-model指令的灵活应用使其能够适配不同类型的输入元素，包括<textarea>和<select>。该指令会根据所应用的元素类型自动选择相应的DOM属性和事件组合以实现双向数据绑定。

接下来，我们通过一个案例，该案例演示多行文本、复选框、单选按钮、选择器等常用表单控件的绑定及使用，请参考以下代码实现(App.vue)：<scriptsetup>import{ref}from'vue'

constmessage=ref('')//多行文本绑定constcheckedNames=ref([])//复选框绑定constpicked=ref('One')//单选按钮绑定constselected=ref('')//选择器绑定</script><template>

<div>请输入的多行文本是:{{message}}</div><textareav-model="message"></textarea>…………2.3.Vue框架的事件监听和表单绑定2.表单绑定

在上述代码中，我们详细展示了如何将多行文本、复选框、单选按钮以及选择器等常用的表单控件与v-model指令进行绑定操作。该案例互动效果如图所示。…………<selectv-model="selected">

<optiondisabledvalue="">请选择...</option>

<option>A</option>

<option>B</option>

<option>C</option>

</select></template>

接上页代码2.4.Vue框架的计算属性和侦听器接下来，我们将深入剖析Vue框架中的计算属性以及侦听器的使用。

2.4.Vue框架的计算属性和侦听器1.计算属性

在Vue中，计算属性（computedproperties）是基于它们的依赖进行缓存的。只有在相关依赖发生改变时它们才会重新求值。计算属性在处理复杂逻辑或依赖多个数据属性时非常有用。下面是一个使用计算属性的简单示例，用以显示用户的姓名，其代码如下所示(App.vue)：

<scriptsetup>import{ref,computed}from'vue'constfirstName=ref('')constlastName=ref('')//计算属性constfullName=computed(()=>{returnfirstName.value+''+lastName.value})</script>

<div>

<labelfor="firstName">姓:</label>

<inputtype="text"id="firstName"v-model="firstName">

2.4.Vue框架的计算属性和侦听器1.计算属性

<labelfor="lastName">名:</label>

<inputtype="text"id="lastName"v-model="lastName">

<p>姓名:{{fullName}}</p>

</div></template>

接上页代码

在上述代码中，我们定义了一个计算属性fullName，用于将拼接姓名。computed()方法接收一个getter函数，返回值为一个计算属性ref。和其他一般的ref类似，可以通过fullName.value访问计算结果。计算属性ref也会在模板中自动解包，因此在模板表达式中引用时无需添加.value。运行效果如图所示。2.4.Vue框架的计算属性和侦听器1.计算属性

<labelfor="lastName">名:</label>

<inputtype="text"id="lastName"v-model="lastName">

<p>姓名:{{fullName}}</p>

</div></template>

接上页代码

在上述代码中，我们定义了一个计算属性fullName，用于将拼接姓名。computed()方法接收一个getter函数，返回值为一个计算属性ref。和其他一般的ref类似，可以通过fullName.value访问计算结果。计算属性ref也会在模板中自动解包，因此在模板表达式中引用时无需添加.value。运行效果如图所示。2.4.Vue框架的计算属性和侦听器2.侦听器

在Vue中，侦听器（watchers）用于观察和响应Vue实例上的数据变化。当需要在数据变化时执行异步或开销较大的操作时，侦听器是非常有用的。与计算属性不同，侦听器不会缓存结果，而是每次数据变化时都会执行相应的函数。在组合式API中，我们可以使用watch函数在每次响应式状态发生变化时触发回调函数。下面是一个使用侦听器的简单示例,用以进行数字计算并显示，其代码如下所示(App.vue)：<scriptsetup>import{ref,watch}from'vue'constnumber=ref(0)constsum=ref(0)//侦听器，侦听number的变化watch(number,(newNumber,oldNumber)=>{sum.value=newNumber+oldNumber})</script><template>2.4.Vue框架的计算属性和侦听器2.侦听器

在上述代码中，我们借助watch函数来监测number对象的变化。一旦number对象发生变化，watch函数便会自动触发，并捕获其旧值和新值。随后，我们对这两个值进行求和操作，并将结果输出。案例的运行效果如图所示。<labelfor="input">输入一个数字:</label><inputtype="number"id="input"v-model="number"><p>计算后的数字:{{sum}}</p></div></template>

接上页代码2.5.Vue框架的路由

Vue路由是Vue中一个非常重要的概念，它允许我们在应用程序中创建多个页面并在这些页面之间进行导航。

2.5.Vue框架的路由1.安装路由

本书中所有的Vue项目均采用Vite作为其构建工具。在创建Vue项目的过程中，开发者可根据自身需求选择是否安装VueRouter。若在项目构建过程中遗漏了VueRouter的安装步骤，可在前端项目的目录下，通过以下命令进行补充安装：

cnpminstallvue-router2.5.Vue框架的路由2.配置路由

接下来，我们打开在项目1中的“1.3.4.开发‘hivue’前端项目”小节所创建的“hivue”项目。在“hivue”项目中，我们进入“/src/views”目录，会发现该目录下已经预先定义了两个路由组件：HomeView.vue和AboutView.vue。这两个组件分别负责展示“主页”和“关于页”的页面内容，在这两个文件中输入以下代码。HomeView.vue路由组件的源码：

<template><divclass="about"><h1>欢迎访问“古典文学网”首页</h1></div></template>AboutView.vue路由组件的源码：<template><divclass="about"><h1>关于“古典文学网”</h1></div></template>2.5.Vue框架的路由2.配置路由

接下来，我们将定义HomeView.vue和AboutView.vue路由组件的路由信息。请打开“hivue”项目的“/src/router/index.js”路由配置文件，该文件负责配置项目中所有路由组件的映射信息。我们需要为上述两个组件添加路由配置，具体代码如下所示：

import{createRouter,createWebHistory}from'vue-router'importHomeViewfrom'../views/HomeView.vue'importAboutViewfrom'../views/AboutView.vue'constrouter=createRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[

{path:'/home',name:'home',component:HomeView},2.5.Vue框架的路由2.配置路由

在上述代码中，我们首先导入了HomeView.vue和AboutView.vue这两个路由组件。接着，在routes节点中，我们分别为这两个组件配置了相应的路由信息。以HomeView组件为例，我们将其路由的URL访问路径配置为“/home”，并为其指定了一个路由名称“home”。同时，通过component属性，我们将HomeView组件与这个路由进行了关联，确保当访问“/home”路径时，能够正确展示HomeView组件的内容。

{

path:'/about',

name:'about',

component:AboutView

}

]})exportdefaultrouter接上页代码2.5.Vue框架的路由2.配置路由

最后，我们打开“hivue”项目的“/src/App.vue”文件，开发路由导航功能。在这个文件中，我们将实现主页和关于页的导航链接。以下是具体的代码实现：

<scriptsetup>import{RouterLink,RouterView}from'vue-router'</script><template>

<div>

<RouterLinkto="/home">主页</RouterLink>

<RouterLinkto="/about">关于页</RouterLink>

</div>

<br/>

<RouterView/></template>2.5.Vue框架的路由2.配置路由

当启动“hivue”项目后，我们可以单击页面中的主页或关于页链接，展示对应的组件内容。具体的运行效果如图（a）和图（b）所示。

图（a）主页运行效果图图（b）关于页运行效果图2.5.Vue框架的路由3.动态路由匹配

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个User组件，它应该对所有用户进行渲染，但用户ID不同。在VueRouter中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数（路径参数用冒号:表示）。

接下来，我们在“hivue”项目中开发“用户中心”展示案例，用于展示Vue的动态路由匹配的使用。

2.5.Vue框架的路由3.动态路由匹配

首先，在“hivue”项目中的“/src/views”目录，创建一个名为UserView.vue的路由组件，用于展示个人中心。并在“/src/router/index.js”路由配置文件中，配置UserView.vue的映射信息。其关键的路由配置如下：

......//导入组件importUserViewfrom'../views/UserView.vue'constrouter=createRouter({history:createWebHistory(import.meta.env.BASE_URL),routes:[......

{path:'/users/:id',name:'user',component:UserView}]})......2.5.Vue框架的路由3.动态路由匹配

现在像/users/101和/users/102这样的URL都会映射到同一个路由。当一个路由被匹配时，它的params的值将在UserView.vue中以route.params.id的形式暴露出来。以下为UserView.vue路由组件的代码，用以显示用户的编号。

<scriptsetup>import{useRoute}from'vue-router'//创建路由对象constroute=useRoute()</script><template><divclass="user"><h1>用户中心，用户id={{route.params.id}}</h1></div></template>

上述代码中，我们导入useRoute方法，并通过该方法创建route路由对象，以获取传递过来的用户id。由于在组合式API模式中，我们不能在setup里访问this，所以我们不能再直接访问this.$router或this.$route。作为替代，我们使用useRouter和useRoute函数来访问路由的相关信息。2.5.Vue框架的路由3.动态路由匹配

接下来，我们打开“/src/App.vue”文件，加入用户中心的导航功能，实现页面之间切换。以下是其关键的代码实现：

当运行“hivue”项目时，我们可以单击页面中的用户中心链接，RouterView组件将自动展示对应的组件内容。具体的运行效果如图所示。<RouterLinkto="/users/102">用户中心</RouterLink>2.5.Vue框架的路由3.动态路由匹配

在上面的案例中，当用户使用/users/101和/users/102打开用户中心时，相同的组件实例将被重复使用，也就意味着用户中心不能获得正确的用户编号。解决上面的问题，可以在UserView.vue文件中使用watch()监听路由route参数的变化，并获取正确的用户编号，具体代码如下所示：

<scriptsetup>import{ref,watch}from'vue'import{useRoute}from'vue-router'//创建路由对象constroute=useRoute()varid=ref('')id.value=route.params.id//监听route.params的变化，获取最新的idwatch(

()=>route.params,

(newValue,oldValue)=>{//对路由变化做出响应...

console.log(newValue)

console.log(oldValue)

id.value=newValue.id},2.5.Vue框架的路由3.动态路由匹配

在上述代码中，当我们通过/users/101和/users/102导航到用户中心页面，会显示不同的用户编号，运行效果如图（a）和图（b）所示。

//immediate:true选项来强制侦听器的回调立即执行

{immediate:true})</script><template><divclass="user"><h1>用户中心，用户id={{route.params.id}}-用户id={{id}}</h1></div></template>图（a）用户中心运行效果图图4.11(b)用户中心运行效果图2.5.Vue框架的路由4.编程式导航

在Vue框架中，除了利用<router-link>组件创建类似于<a>标签的导航链接外，我们还可以借助VueRouter的实例方法，通过编程的方式实现导航功能。当需要导航至不同的URL时，可以使用router.push方法。push方法的参数可以是一个表示路径的字符串，或者是一个描述目标地址的对象。以我们上一节提到的用户中心路由为例，以下代码展示了push方法的常见用法：

import{useRouter}from'vue-router'constrouter=useRouter()//字符串路径router.push('/users/102')//带有路径的对象router.push({path:'/users/102'})//命名的路由，并加上参数，让路由建立urlrouter.push({name:'user',params:{id:'102'}})//带查询参数，结果是/register?plan=privaterouter.push({path:'/register',query:{plan:'private'}})//带hash，结果是/about#teamrouter.push({path:'/about',hash:'#team'})2.5.Vue框架的路由4.编程式导航

在实际应用中，如果我们想要使用带有参数的路由，我们需要提供路由的name属性，或者手动编写完整地包含参数的path。以下是具体的代码实现方式：

//如果可能的话，使用`name`和`params`从自动URL编码中获益router.push({name:'user',params:{id}})//->/user/1022.5.Vue框架的路由5.重定向

在Vue框架中，重定向功能是通过routes配置来完成的，它允许我们在不同路由之间进行跳转操作。以下示例展示了如何从/home路由重定向到/about路由：

constroutes=[{path:'/home',redirect:'/about'}]重定向的目标同样可以是一个命名的路由。以下是一个示例，展示了如何从/home路由重定向到名为about的路由配置：constroutes=[{path:'/home',redirect:{name:'about'}}]2.5.Vue框架的路由5.重定向

重定向的目标甚至可以是一个方法，该方法能够动态地返回重定向的目标。以下是一个示例，展示了如何使用方法来实现重定向：

以上我们简要介绍了Vue框架中路由的基本用法。如果我们希望深入学习路由的相关技术，建议参考VueRouter的官方文档，那里提供了更为详细和全面的指导和示例。constroutes=[{///search/screens->/search?q=screenspath:'/search/:searchText',redirect:to=>{//方法接收目标路由作为参数//return重定向的字符串路径/路径对象return{path:'/search',query:{q:to.params.searchText}}},}]2.6.Vue框架的状态管理

Vue框架的状态管理主要指的是在Vue应用中管理和维护组件状态（即数据）的过程与机制。

2.6.Vue框架的状态管理1.安装Pinia

Pinia是一款专为Vue设计的状态管理库，旨在帮助开发者跨组件或页面共享状态。该库由Vue核心团队负责维护，兼容Vue2和Vue3，并作为新的官方推荐工具，为Vue应用的状态管理提供了高效且可靠的解决方案。

本书中所有的Vue项目均采用Vite作为其构建工具。在创建Vue项目的过程中，开发者可根据自身需求选择是否安装Pinia。若在项目构建过程中遗漏了Pinia的安装步骤，可在前端项目的目录下，通过以下命令进行补充安装：

cnpminstallpinia

我们打开“hivue”项目的“/src/main.js”文件，我们可以发现以下关键代码，这段代码负责将pinia挂载到项目中，使其得以生效。import{createPinia}from'pinia'app.use(createPinia())2.6.Vue框架的状态管理2.Pinia的使用

在使用pinia的时候，我们通过defineStore()定义了一个Store，用以进行状态管理。具体代码如下所示：

import{defineStore}from'pinia'

//可以任意命名defineStore()的返回值，建议使用store的名字，同时以use开头且以Store结尾//(例如useUserStore，useCartStore，useProductStore)//第一个参数是我们的应用中Store的唯一ID。exportconstuseAlertsStore=defineStore('alerts',{//其他配置...})在上述代码中，通过defineStore()定义了一个Store，它的第一个参数要求是一个独一无二的名字，Pinia将用它来连接store和devtools。它的第二个参数可接受两类值：Setup函数或Option对象。2.6.Vue框架的状态管理2.Pinia的使用

在本书中，我们使用Setupstore的方式定义Store，我们可以传入一个函数，该函数定义了一些响应式属性和方法，并且返回一个带有我们想暴露出去的属性和方法的对象。请在“hivue”项目的“src/stores/counter.js”文件中（没有则创建该文件），编写计数器功能，其示例代码如下：

exportconstuseCounterStore=defineStore('counter',()=>{constcount=ref(0)constdoubleCount=computed(()=>count.value*2)functionincrement(){count.value++}return{count,doubleCount,increment}})2.6.Vue框架的状态管理2.Pinia的使用

接下来，请打开“hivue”项目的“/src/views/UserView.vue”文件，在该文件中使用该计数器store，获取并输出count的值，具体关键代码如下所示：

<scriptsetup>......import{useCounterStore}from'@/stores/counter'constcounter=useCounterStore()counter.count++//或使用action代替counter.increment()</script><template>......<!--直接从store中访问state--><div>当前计数是:{{counter.count}}</div></template>2.6.Vue框架的状态管理2.Pinia的使用

在上述代码中，我们成功引入了先前在counter.js文件中定义的useCounterStore，并创建了一个名为store的状态管理变量，用于管理count的状态。为了增加计数器的值，我们使用了counter.count++或counter.increment()语句，这些操作能够有效地更新计数器的数值。运行后的效果如图所示。

03项目任务

3.项目任务

在这一阶段，小白需要开发“古典文学网”前端项目框架，并添加跨域访问、身份认证功能，同时设置首页、注册页以及登录页的路由。

3.1.开发项目的前端框架

“古典文学”的前端主要承担着与客户进行交互的重要任务，其核心在于精准调用后端所提供的API接口，从而实现项目的各项功能。

3.1.开发项目的前端框架1.需求描述

我们需要着手开发“古典文学网”项目的前端功能，该项目将基于先进的Vue3.x版本进行构建，同时采用高效的Vite作为构建工具。在项目的构建过程中，我们将为项目集成VueRouter路由和Pinia状态管理库，以提升项目的导航和状态管理能力。

3.1.开发项目的前端框架2.业务功能实现（1）创建cls_clt前端项目

我们可参考项目1中“1.3.4.开发‘hivue’前端项目”小节来创建的“cls_clt”项目。项目的详细创建过程可参照图4.13。

上述代码中，我们配置了项目的数据库访问信息，其中classicsdb为古典文学网的数据库名称。

注意：“cls_clt”项目框架将充当“古典文学网”的前端核心项目，未来前端功能都将在此项目中进行开发与实现。

3.1.开发项目的前端框架2.业务功能实现（2）优化项目结构

在上一节中所创建的“cls_clt”项目中包含大量的Vue演示代码，这对于我们项目的开发工作并不有利。因此，接下来我们需要清除这些演示代码，并优化项目的目录结构。具体的操作步骤如下所示。

首先，我们使用VSCode开发工具来打开“cls_clt”项目。打开后的项目如图所示。

3.1.开发项目的前端框架2.业务功能实现

接下来，我们将删除Vue的演示代码。首先，在“cls_clt”项目中定位到“/src/components/”“/src/stores/”和“/src/views/”这三个目录。随后，我们将这三个目录下的所有文件予以删除，以清除冗余的演示内容。完成删除操作后，项目结构将发生显著变化，前后的对比可参照图（a）和图（b）所示。图（a）删除前的项目结构图（b）删除后的项目结构

3.1.开发项目的前端框架2.业务功能实现

紧接着，我们将对项目中的CSS样式、路由配置、网站名称以及App.vue根组件进行修改。可参考如下步骤。

在“cls_clt”项目中，我们找到“/src/assets/main.css”样式文件。随后，我们将对该样式文件的源码进行修改，以便设置网站的整体样式，确保网站的外观与用户体验符合项目要求。以下是相关的代码参考:/*全局样式表*/html,body{margin:0;padding:0;}#app{height:100%;width:90%;margin:auto;padding:0;text-align:center;}

3.1.开发项目的前端框架2.业务功能实现

在“cls_clt”项目中，我们找到“/src/router/index.js”路由配置文件。接下来，我们将删除原有的示例代码中的路由配置信息，以确保路由设置符合我们项目的实际需求。以下是删除后的代码参考:import{createRouter,createWebHistory}from'vue-router'constrouter=createRouter({

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

routes:[

]})exportdefaultrouter

3.1.开发项目的前端框架2.业务功能实现

在“cls_clt”项目中，我们找到“/src/index.html”HTML文件。接下来，我们在该文件中，修改网站的名称为“古典文学网”。以下是修改后的代码参考:<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><linkrel="icon"href="/favicon.ico"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>古典文学网</title></head><body><divid="app"></div><scripttype="module"src="/src/main.js"></script></body></html>

3.1.开发项目的前端框架2.业务功能实现

在“cls_clt”项目中，我们找到“/src/App.vue”这一根组件文件。随后，我们将对源码进行修改，以满足项目的实际需求。以下是修改后的代码参考:<scriptsetup>import{RouterLink,RouterView}from'vue-router'</script><template>

<RouterView/></template>

3.1.开发项目的前端框架2.业务功能实现

最后，我们启动“cls_clt”项目，在VSCode的Terminal终端将看到如图4.16所示的启动信息。然而，当我们通过浏览器打开并浏览该项目时，发现页面上呈现的是一片空白。这主要是因为目前我们尚未在App.vue根组件中添加任何实质性的内容，所以页面上没有显示任何信息。至此，我们完成了“古典文学网”前端项目框架的开发。

3.2.开发身份验证Token管理功能

接下来，我们将开发“古典文学网”的身份验证Token管理功能。

1.需求描述

当调用后端的登录API接口时，会返回一个用于身份验证的Token。在前端项目需要妥善保存这个Token，以便在后续需要访问具有身份验证功能的API接口时，能够进行用户身份的验证。本功能主要是将登录后返回的Token保存在客户端本地，并提供Token的获取和设置功能。为了实现这一功能，我们采用了Pinia进行Token的全局状态管理，以确保Token的安全性和便捷性。3.2.开发身份验证Token管理功能

2.业务功能实现（1）创建Token状态管理文件在“cls_clt”项目中，我们找到“/src/stores/”这一目录，并在其中创建一个名为“token.js”的Token状态管理文件。随后，我们将在该文件中编写代码，以实现Token的管理功能。以下是具体的代码参考：import{ref}from'vue'import{defineStore}from'pinia'exportconstuseTokenStore=defineStore('token',()=>{

//定义Token

consttoken=ref('')

//设置Token

functionsetToken(token){

this.token=token

//将Token存储至本地存储

localStorage.setItem('token',this.token)

}

3.2.开发身份验证Token管理功能

2.业务功能实现在上述代码中，我们定义了一个变量token用于存储登录时后端返回的Token。在代码中，编写了一个setToken()函数，该函数负责将登录返回的Token赋值给token变量，并将其保存到浏览器的本地存储localStorage中。此外，我们还编写了一个getToken()函数，用于从本地存储中检索并返回之前保存的Token。//获取Token

functiongetToken(){

//从本地存储获取Token

this.token=localStorage.getItem('token')

returnthis.token

}

//暴露变量及方法

return{token,setToken,getToken}})

3.2.开发身份验证Token管理功能

2.业务功能实现（2）测试身份验证Token管理功能为了测试项目的身份验证Token管理功能，我们定位到“/src/App.vue”这一根组件文件，并在其中编写测试代码，测试Token管理功能是否正常。请注意，这段代码仅用于测试目的，在后续正式开发过程中需要将其删除。以下是具体的代码参考：<scriptsetup>import{RouterView}from'vue-router'import{useTokenStore}from'../src/stores/token'//创建Token状态管理Storeconststore=useTokenStore()</script><template>

<RouterView/>

<button@click="store.setToken('ui2365')">设置Token</button>

<p>Tokenis:{{store.getToken()}}</p></template3.2.开发身份验证Token管理功能

2.业务功能实现

在上述代码中，我们引入了之前定义在token.js文件中的useTokenStore，并创建Token的状态管理变量store。在模板中，我们设置了一个按钮，并通过其单击事件来调用store的setToken()函数，以便设置Token。同时，我们还通过store的getToken()函数获取已保存的Token，并将其显示在页面中。

最后，我们运行“cls_clt”项目，并通过浏览器打开并浏览该项目。在页面中，单击按钮来触发Token的设置和获取操作。如图（a）和图（b）所示。3.2.开发身份验证Token管理功能图4.17（a）设置Token前的效果图4.17（b）设置Token后的效果

3.3.开发跨域访问功能

接下来，我们为“古典文学网”前端项目进行跨域功能配置。

3.3.开发跨域访问功能1.需求描述

在“古典文学网”项目的开发过程中，当前端尝试调用后端API接口时，会触发跨域请求（CORS，即跨源资源共享）。在Vue3框架的生产环境中，跨域问题并非由Vue本身直接解决，而是通常在后端服务器或代理服务器上进行处理。在本任务，我们将解决开发环境中的跨域问题，通过配置代理服务器来转发跨域请求。

3.3.开发跨域访问功能2.业务功能实现在“cls_clt”项目中，为了处理跨域请求，我们首先找到“vite.config.js”这一配置文件。接下来，我们需要在该配置文件中配置代理服务，从而实现跨域请求的转发功能。以下是具体的代码参考：import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({server:{proxy:{'/svr':{//代理接口地址。实际请求接口地址可能是：:5000/api/xxx/xxxtarget:':5000',//默认false，是否需要改变原始主机头为目标URLchangeOrigin:true,

}}},

3.3.开发跨域访问功能2.业务功能实现

在上述代码中，我们配置了一个代理服务，其主要功能是将所有以“/svr”开头的请求地址的基础URL替换为“:5000”。这里的target参数用于指定代理接口地址，即后端服务的基础URL；changeOrigin参数则用于决定是否需要将原始的主机头更改为目标URL；而rewrite功能则用于重写请求，其中包括了具体的替换正则表达式设置。plugins:[vue()],resolve:{alias:{'@':fileURLToPath(newURL('./src',import.meta.url))}}})

以“古典文学网”的登录请求为例，当前端项目通过“http://localhost:5173/svr/api/user/login”这一URL发送登录请求时，代理服务器会自动将该请求URL改写为正确的后端接口URL“:5000/api/user/login”。

3.4.开发首页、注册及登录的路由功能接下来，我们着手开发“古典文学网”的首页、注册页及登录页面的路由功能。

3.4.开发首页、注册及登录的路由功能1.需求描述

在本节中，我们需要为“古典文学网”创建首页、注册页及登录页，并且为它们配置路由，以确保用户能够通过浏览器顺利访问并显示这一页面。

3.4.开发首页、注册及登录的路由功能2.业务功能实现

接在“cls_clt”项目中，我们找到“/src/views/”目录。接下来，在此目录下创建三个页面文件，分别是HomeView.vue，RegisterView.vue，LoginView.vue。在这三个页面中，我们将构建导航栏以及显示文字，以便为用户提供直观的界面引导和信息展示。以下是HomeView.vue页面（首页）代码参考：<template><div><RouterLinkto="/">首页|</RouterLink><RouterLinkto="/register">注册页|</RouterLink><RouterLinkto="/login">登录页</RouterLink></div><br/><div>古典文学网首页</div></template>

3.4.开发首页、注册及登录的路由功能2.业务功能实现

以下是RegisterView.vue页面（注册页）代码参考：<template>

<div>

<RouterLinkto="/">首页|</RouterLink>

<RouterLinkto="/register">注册页|</RouterLink>

<RouterLinkto="/login">登录页</RouterLink>

</div>

<br/>

<div>注册页</div></template>

3.4.开发首页、注册及登录的路由功能2.业务功能实现

以下是LoginView.vue页面（登录页）代码参考：<template>