項目5：“古典文學(xué)網(wǎng)”后端框架解析與開發(fā)

項目5：“古典文學(xué)網(wǎng)”首頁功能開發(fā)

目錄01.06.拓展任務(wù)02.知識儲備04.技能拓展項目描述03.項目任務(wù)05.項目總結(jié)

學(xué)習(xí)目標(biāo)知識目標(biāo)：了解Vue框架的條件渲染與列表渲染機制，并熟練掌握其應(yīng)用方法；了解Vue框架的生命周期，掌握其各個階段的運作原理與特性；了解Vue框架的組件化思想，熟練掌握組件的使用及其通信機制；了解Axios網(wǎng)絡(luò)框架，掌握其使用方法和核心特性；了解ElementPlus前端框架的組件，掌握常用組件的配置和使用。能力目標(biāo)：通過學(xué)習(xí)Vue框架的條件與列表渲染，能夠?qū)崿F(xiàn)動態(tài)的界面展示和交互效果；通過學(xué)習(xí)Vue框架的生命周期，能夠精準(zhǔn)地控制組件的行為和狀態(tài)通過學(xué)習(xí)Vue框架的組件，能夠在項目中提升開發(fā)效率和代碼質(zhì)量；通過學(xué)習(xí)Axios網(wǎng)絡(luò)框架，能夠在前端開發(fā)中高效地進行數(shù)據(jù)交互；通過學(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.項目描述

小白已經(jīng)初步掌握了Vue框架的基礎(chǔ)知識，并成功搭建起了項目的前端開發(fā)框架。現(xiàn)在，他需要開發(fā)“古典文學(xué)網(wǎng)”項目的多個核心功能，包括首頁導(dǎo)航、輪播圖展示、搜索功能、文學(xué)推薦列表，以及用戶注冊和登錄系統(tǒng)等功能的開發(fā)。02知識儲備

2.知識儲備

為了項目的順利開發(fā)，小白不僅需要掌握Vue框架的關(guān)鍵技術(shù)，如條件與列表渲染、生命周期與模板引用、組件等，還需深入了解Axios網(wǎng)絡(luò)框架以及ElementPlus框架。

2.1.Vue框架的條件與列表渲染1.條件渲染

在Vue框架中，條件渲染允許我們根據(jù)特定的條件來決定是否渲染某個元素或組件。為實現(xiàn)這一功能，Vue提供了v-if指令，通過它我們可以輕松地根據(jù)條件來動態(tài)地控制元素的渲染。以下是使用v-if指令在頁面中控制<div>元素的顯示和隱藏，具體代碼如下：<scriptsetup>import{ref}from'vue'

constcondition=ref(true)</script><template><divv-if="condition">這個元素會在condition為true時渲染</div></template>

1.條件渲染

在上述代碼中，<div>標(biāo)簽的渲染是受到condition這個條件變量的嚴(yán)格控制的。只有當(dāng)condition的值為真（true）時，該標(biāo)簽才會被渲染至DOM中。反之，一旦condition的值變?yōu)榧伲╢alse），該標(biāo)簽就會從DOM中自動移除，不再顯示在頁面上。當(dāng)需要處理更復(fù)雜的條件邏輯時，我們可以使用v-else和v-else-if指令來表示其他的條件分支，從而使代碼更加靈活和易于理解。2.1.Vue框架的條件與列表渲染

2.列表渲染

在Vue框架中，列表渲染的核心在于v-for指令的運用。v-for允許我們基于一個數(shù)組或?qū)ο髞韯討B(tài)生成一組DOM元素。無論是數(shù)組的每個元素，還是對象的每個屬性，都可以被v-for捕捉并轉(zhuǎn)化為可視化的列表項。當(dāng)創(chuàng)建了一個數(shù)組，并希望基于其內(nèi)容來渲染一個列表時，v-for指令將成為我們的得力助手。以下是使用v-for指令進行顯示數(shù)組元素的案例，具體代碼如下：<scriptsetup>import{ref}from'vue'//數(shù)組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的數(shù)組，該數(shù)組包含三個對象。在Vue組件的模板中，我們通過v-for="(item,index)intodos"的語法對todos數(shù)組進行迭代。其中，item代表當(dāng)前正在迭代的元素，而index則是該元素在數(shù)組中的索引；:key="item.id"為每個列表項提供了一個唯一的標(biāo)識符。todos數(shù)組渲染效果如圖所示。2.1.Vue框架的條件與列表渲染

2.2.Vue框架的生命周期

Vue框架的生命周期是指Vue實例從誕生到消亡所經(jīng)歷的一系列完整流程。這個過程被精心劃分為多個關(guān)鍵階段，每個階段都配備了特定的鉤子函數(shù)，使得開發(fā)者能夠在特定的時間節(jié)點上執(zhí)行相應(yīng)的操作。

下面我們介紹下Vue生命周期對應(yīng)的常用鉤子函數(shù)，具體可參見表Vue框架中的常見鉤子函數(shù)鉤子函數(shù)應(yīng)用場景onMounted()注冊一個回調(diào)函數(shù)，在組件掛載完成后執(zhí)行onUpdated()樹之后調(diào)用onUnmounted()注冊一個回調(diào)函數(shù)，在組件實例被卸載之后調(diào)用onBeforeMount()注冊一個鉤子，在組件被掛載之前被調(diào)用onBeforeUpdate()樹之前調(diào)用onBeforeUnmount()注冊一個鉤子，在組件實例被卸載之前調(diào)用2.2.Vue框架的生命周期

我們通過一個案例來理解onMounted鉤子函數(shù)的用法。具體代碼如下所示：<scriptsetup>import{onMounted}from'vue'onMounted(()=>{console.log('這個組件已經(jīng)掛載完成。')})</script>在上述代碼中，我們注冊了onMounted鉤子函數(shù)。當(dāng)Vue組件完成了其初始渲染且DOM節(jié)點成功創(chuàng)建后，該函數(shù)將被觸發(fā)，并在控制臺輸出一段日志信息。2.2.Vue框架的生命周期

2.3.Vue框架的組件

在Vue框架中，組件構(gòu)成了應(yīng)用程序構(gòu)建的基石。它作為可復(fù)用的Vue實例，帶有預(yù)先定義的選項集，使得代碼組織更為高效。

2.3.Vue框架的組件1.定義組件

當(dāng)我們定義Vue組件時，通常會采用單文件組件（SingleFileComponents，簡稱SFC）的形式，即將組件的模板、邏輯和樣式定義在同一個.vue文件中。這樣做的好處是使得組件的結(jié)構(gòu)更加清晰、易于管理。

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

你點擊了{(lán){count}}次。</button></template>

下面我們使用“項目4”中開發(fā)過的“hivue”項目進行演示如何定義和使用組件。請打開“hivue”項目，在“/src/components/”目錄下，我們創(chuàng)建一個名為ButtonCounter.vue的組件文件，該文件封裝了一個計數(shù)器案例，以下是該組件的示例代碼：

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

在上述代碼中，我們在父組件中導(dǎo)入了ButtonCounter.vue組件，隨后，通過使用<ButtonCounter/>的語法標(biāo)簽，我們將ButtonCounter組件的內(nèi)容嵌入到模板中。當(dāng)這段代碼運行時，其效果將如圖所示。

2.3.Vue框架的組件3.傳遞props

當(dāng)需要向組件中傳遞數(shù)據(jù)時，我們可以利用Props這一特性。Props是組件的一種特殊屬性，可以在組件上進行聲明和注冊。例如，如果我們想要向計數(shù)組件傳遞一個起始值，那么就需要在組件的props列表中明確聲明它。請打開前一小節(jié)在“hivue”項目的

ButtonCounter.vue組件，使用Props接收傳遞的參數(shù)。以下是具體的關(guān)鍵代碼實現(xiàn)：<scriptsetup>//定義Props，接收傳遞的計數(shù)起始值constprops=defineProps(['initCount'])constcount=ref(props.initCount)</script>

在上述代碼中，我們在ButtonCounter.vue組件中，使用了defineProps()宏來定義props，以便接收外部傳遞的起始值。這個起始值變量被命名為initCount。接著，我們通過props.initCount獲取傳遞過來的起始值，并將其賦值給組件內(nèi)部的count變量，從而實現(xiàn)了數(shù)據(jù)的初始化和傳遞。

2.3.Vue框架的組件3.傳遞props

在ButtonCounterView.vue這個父組件中，我們向ButtonCounter.vue子組件傳遞了計數(shù)器的起始值。以下是其關(guān)鍵代碼實現(xiàn)：<template>

<h1>顯示計數(shù)組件</h1>

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

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

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

在上述代碼中，我們在使用ButtonCounter組件時，通過:init-count="4"設(shè)置傳遞給組件的計數(shù)起始值，其運行效果如圖所示。

2.3.Vue框架的組件3.傳遞props

注意：當(dāng)prop的名字較長時，推薦采用camelCase的命名方式。在上述例子中，我們將prop命名為initCount。而在HTML模板中，為了與HTMLattribute的命名習(xí)慣保持一致，我們通常會將camelCase形式的prop名轉(zhuǎn)換為kebab-case（短橫線分隔）形式。例如，在上述例子中，在向子組件傳遞props時，會使用init-count="4"這樣的形式。

2.4.vue-axios網(wǎng)絡(luò)框架

在前后端分離的項目架構(gòu)中，與后端API接口進行高效且安全地通信是一項至關(guān)重要的任務(wù)。下面我們將介紹如何運用vue-axios網(wǎng)絡(luò)框架來實現(xiàn)與后端API接口的通信。

2.4.vue-axios網(wǎng)絡(luò)框架1.安裝vue-axios

vue-axios是一個集成了axios庫的Vue插件，使得Vue開發(fā)者能夠輕松發(fā)起HTTP請求，從而與后端服務(wù)進行數(shù)據(jù)的交互。請參照如下步驟安裝vue-axios庫和axios庫。

首先，請先使用VSCode打開前端項目“hivue”，并在VSCode的內(nèi)置Terminal終端中執(zhí)行以下安裝命令：cnpminstall--saveaxiosvue-axios執(zhí)行上述命令后，將為前端項目“hivue”安裝所需的axios和vue-axios庫。安裝過程的成功狀態(tài)如圖所示。

2.4.vue-axios網(wǎng)絡(luò)框架2.配置vue-axios

接下來，在“hivue”項目中，我們找到“/src/main.js”配置文件。在該文件中，我們將集成上一節(jié)安裝的vue-axios庫和axios庫。以下是其關(guān)鍵代碼示例：//引入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網(wǎng)絡(luò)框架3.使用vue-axios

鑒于vue-axios實質(zhì)上是Vue對axios庫的封裝，因此，當(dāng)我們在Vue項目中與后端API接口進行通信時，實際上是利用了axios庫的功能。接下來，我們將探討axios庫的使用方法，以便更好地理解和利用其在項目中的強大功能。

在axios庫中，我們可以通過傳遞相關(guān)的配置參數(shù)來創(chuàng)建請求，進而與后端API接口進行通信。以下是訪問登錄API接口的示例（請確保配置Vue的跨域訪問）：import{inject}from"vue";constaxios=inject("axios");//注入一下不然不能用//發(fā)起一個post請求axios({method:'post',url:'/svr/api/user/login',data:{uname:'xiaobai',upwd:'123456'},headers:{'Content-Type':'application/json'}

2.4.vue-axios網(wǎng)絡(luò)框架3.使用vue-axios接上頁代碼}).then(function(response){//請求成功console.log(response.data)}).catch(function(error){console.log(error)})

在上述代碼中，我們利用axios并通過傳遞一個配置對象來創(chuàng)建HTTP請求。這個配置對象包含了多個屬性，其中method指定了請求的HTTP方法（如GET、POST等），url則是請求的URL。此外，data屬性用于存放請求體發(fā)送的數(shù)據(jù)，而headers則允許我們自定義請求頭信息。如需了解更多配置選項，建議查閱axios的官方文檔。

一旦請求被發(fā)送，我們可以使用then()方法來指定請求成功時的回調(diào)函數(shù)，該函數(shù)將在請求成功時被執(zhí)行。相反，catch()方法則用于指定請求失敗時的回調(diào)函數(shù)，以便在請求出現(xiàn)問題時能夠進行相應(yīng)的處理。

2.5.ElementPlus框架常用組件接下來，我們將針對ElementPlus框架中的常用組件進行介紹。

2.5.ElementPlus框架常用組件1.安裝ElementPlus框架在前端項目開發(fā)過程中，我們采用適配Vue3.x的ElementPlus框架進行功能開發(fā)。首先需要安裝ElementPlus框架及其Icon圖標(biāo)集合。以下是詳細(xì)的安裝步驟，請參照執(zhí)行：

首先，請先使用VSCode打開前端項目“hivue”，并在VSCode的內(nèi)置Terminal終端中執(zhí)行以下命令：cnpminstallelement-plus--savecnpminstall@element-plus/icons-vue執(zhí)行上述命令后，將為前端項目“hivue”安裝所需的ElementPlus框架及其Icon圖標(biāo)集合。安裝過程的成功狀態(tài)如圖所示。圖ElementPlus安裝結(jié)果圖ElementPlusIcon圖標(biāo)安裝結(jié)果

2.5.ElementPlus框架常用組件2.配置ElementPlus框架接下來，在“hivue”項目中，我們找到“/src/main.js”配置文件。在該文件中，我們將集成ElementPlus框架及其Icon圖標(biāo)集合。以下是關(guān)鍵代碼的參考：//引入ElementPlusimportElementPlusfrom'element-plus'import'element-plus/dist/index.css'//引入ElementPlus的圖標(biāo)import*asElementPlusIconsVuefrom'@element-plus/icons-vue'//掛載ElementPlusapp.use(ElementPlus)//注冊ElementPlus的所有圖標(biāo)for(const[key,component]ofObject.entries(ElementPlusIconsVue)){ponent(key,component)}

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件（1）Container布局容器Container是一個高效的布局容器組件，旨在簡化頁面基本結(jié)構(gòu)的搭建過程。其中，<el-container>作為外層容器，其內(nèi)部包含了以下幾個子容器組件：<el-header>：頂欄容器。<el-aside>：側(cè)邊欄容器。<el-main>：主要區(qū)域容器。<el-footer>：底欄容器。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件接下來，我們利用Container布局容器來開發(fā)一個常見的網(wǎng)頁布局，該頁面被劃分為上、中、下三個區(qū)域，以滿足不同內(nèi)容的展示需求。設(shè)計效果如圖所示。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<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框架的組件的詳細(xì)使用方法和指南，可以參考ElementPlus的官方文檔，以獲得最準(zhǔn)確和全面的信息。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件（2）Icon圖標(biāo)ElementPlus提供了一套豐富多樣的圖標(biāo)集合，這些圖標(biāo)能夠極大地豐富我們網(wǎng)頁的布局和視覺效果。使用Icon圖標(biāo)集合前，先要安裝Icon圖標(biāo)集合，并通過el-icon標(biāo)簽來便捷地調(diào)用和使用這些圖標(biāo)。接下來，我們運用el-icon標(biāo)簽在網(wǎng)頁中呈現(xiàn)兩個圖標(biāo)。設(shè)計效果如圖所示。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<template><el-icon><CirclePlus/></el-icon><el-icon><Search/></el-icon></template>

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件（3）Form表單ElementPlus提供豐富的Form表單組件，包含輸入框、單選框、下拉選擇、多選框等用戶輸入的組件。通過表單組件，我們可以收集、驗證和提交數(shù)據(jù)。接下來，我使用Form表單的組件來開發(fā)一個注冊頁面，包含了常見的注冊信息。設(shè)計效果如圖所示。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<scriptlang="ts"setup>import{ref,reactive}from'vue'importtype{FormInstance,FormRules}from'element-plus'//定義表單數(shù)據(jù)的類型interfaceDataForm{uname:stringupwd:stringnikename:stringsex:stringphone:string}construleFormRef=ref<FormInstance>()//定義表單數(shù)據(jù)constdataForm=reactive<DataForm>({uname:'',upwd:'',nikename:'',sex:'男',phone:''})

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件接上頁代碼//定義表單規(guī)則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標(biāo)簽來顯示按鈕，并通過使用type、plain、round和circle來定義按鈕的樣式。接下來，我們將利用Button組件來開發(fā)一組按鈕，這些按鈕通過type屬性的設(shè)置呈現(xiàn)出不同的按鈕風(fēng)格。設(shè)計效果如圖所示。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<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組件可以用來代表人物或?qū)ο螅С质褂脠D片、圖標(biāo)或者文字作為Avatar。它使用shape和size屬性來設(shè)置Avatar的形狀和大小。接下來，我們將利用Avatar組件來開發(fā)一個用戶頭像標(biāo)志。設(shè)計效果如圖所示。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<template><!--circleUrl是頭像圖片的URL--><el-avatar:size="50":src="circleUrl"/></template>

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件（6）Card卡片Card組件用于將信息聚合在卡片容器中展示，它包含標(biāo)題，內(nèi)容以及操作區(qū)域。Card組件由header、body和footer組成。header和footer是可選的。接下來，我們將利用Card組件來開發(fā)一個展示文學(xué)作品的網(wǎng)頁布局。設(shè)計效果如圖所示。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<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組件是在有限空間內(nèi)，循環(huán)播放同一類型的圖片、文字等內(nèi)容，它使用el-carousel和el-carousel-item標(biāo)簽就得到了一個走馬燈。每一個頁面的內(nèi)容是完全可定制的，把我們想要展示的內(nèi)容放在el-carousel-item標(biāo)簽內(nèi)。接下來，我們將利用Carousel組件來開發(fā)一個網(wǎng)頁走馬燈的效果。設(shè)計效果如圖所示。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<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組件為網(wǎng)站提供導(dǎo)航功能的菜單。在這里，我們主要用它來進行網(wǎng)站頂部欄菜單的布局。導(dǎo)航菜單默認(rèn)為垂直模式，通過將mode屬性設(shè)置為horizontal來使導(dǎo)航菜單變更為水平模式。另外，在菜單中通過sub-menu組件可以生成二級菜單。Menu還提供了background-color、text-color和active-text-color，分別用于設(shè)置菜單的背景色、菜單的文字顏色和當(dāng)前激活菜單的文字顏色。接下來，我們將利用Menu組件來開發(fā)“古典文學(xué)網(wǎng)”的頂部導(dǎo)航布局，該導(dǎo)航欄包含了首頁、文學(xué)類型導(dǎo)航、注冊、登錄、用戶中心菜單等元素。設(shè)計效果如圖所示。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<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組件主要用于構(gòu)建頁面的頭部區(qū)域。它通常包含頁面的標(biāo)題、返回按鈕等常用元素，用于快速展示頁面的主要信息和提供導(dǎo)航功能。接下來，我們將利用PageHeader組件來開發(fā)“古典文學(xué)網(wǎng)”的文學(xué)推薦布局，該布局用于呈現(xiàn)文學(xué)作品推薦列表。設(shè)計效果如圖所示。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<template><elheader><template#icon><el-icon><DArrowRight/></el-icon></template><template#title>查看更多</template><template#content><divclass="flexitems-center"><!--iconUrl是圖標(biāo)的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組件來開發(fā)操作成功提示和操作錯誤提示。運行效果如圖所示。

2.5.ElementPlus框架常用組件3.ElementPlus框架的組件上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<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組件主要用于區(qū)隔內(nèi)容的分割線，我們可以在分割線上自定義文本內(nèi)容。接下來，我們將利用Divider組件來開發(fā)“古典文學(xué)網(wǎng)”注冊頁面的分割線。設(shè)計效果如圖所示。上圖所展示的網(wǎng)頁布局所對應(yīng)的源代碼詳情如下：<template><el-divider>用戶注冊</el-divider></template>03項目任務(wù)

3.項目任務(wù)

小白已經(jīng)精通了Vue框架的關(guān)鍵開發(fā)技術(shù)，并熟練掌握了Axios網(wǎng)絡(luò)框架和ElementPlus前端框架的實用技巧?；谶@些技術(shù)積累，小白將開發(fā)“古典文學(xué)網(wǎng)”前端項目中“首頁”模塊及注冊和登錄功能。注意：在進行前端開發(fā)之前，請確保后端項目“cls_svr”已經(jīng)啟動并處于運行狀態(tài)。

3.1.開發(fā)導(dǎo)航欄功能

接下來，我們將著手開發(fā)“古典文學(xué)網(wǎng)”的導(dǎo)航欄功能。

3.1.開發(fā)導(dǎo)航欄功能1.需求描述

我們需要為"古典文學(xué)網(wǎng)"設(shè)計的導(dǎo)航欄功能，該功能由頂部和底部兩個導(dǎo)航欄組成，共同構(gòu)成了網(wǎng)站的全局導(dǎo)航體系。頂部導(dǎo)航欄展示了項目的logo，以及指向首頁、文學(xué)類型分類、注冊、登錄和用戶中心等關(guān)鍵頁面的鏈接。而底部導(dǎo)航欄則展示項目的其他重要導(dǎo)航信息，為用戶提供了更多元化的訪問選擇。導(dǎo)航欄的運行效果如圖所示。

3.1.開發(fā)導(dǎo)航欄功能1.需求描述

在開發(fā)該功能時，我們需要調(diào)用后端項目的API接口，具體API接口信息見表5.2。本項目涉及的圖片，可以從本項目素材中獲取，并按“項目2的2.3.5.開發(fā)圖片顯示API接口”小節(jié)的配置圖片路徑。項目導(dǎo)航功能所調(diào)用的API接口表接口調(diào)用方式說明文學(xué)導(dǎo)航API接口http://ip地址:端口/api/classics/get-classictypes請參考項目3中的“3.3.4.開發(fā)文學(xué)導(dǎo)航API接口”小節(jié)圖片顯示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>請參考項目2中的“2.3.5.開發(fā)圖片顯示API接口”小節(jié)

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)（1）安裝項目擴展庫我們以前端項目“cls_clt”為基礎(chǔ)，安裝項目所需的擴展庫。

①安裝項目擴展庫在本節(jié)的功能開發(fā)中，首要任務(wù)是在前端項目“cls_clt”中安裝并集成一系列擴展庫，包括axios、vue-axios、ElementPlus和Icon圖標(biāo)集合。以下是詳細(xì)的安裝步驟，請參照執(zhí)行：請先使用VSCode打開前端項目“cls_clt”，并在VSCode的內(nèi)置Terminal終端中執(zhí)行以下命令：cnpminstall--saveaxiosvue-axioscnpminstallelement-plus--savecnpminstall@element-plus/icons-vue執(zhí)行上述命令后，將為前端項目“cls_clt”安裝所需的axios、vue-axios、ElementPlus和Icon圖標(biāo)集合等關(guān)鍵擴展庫。

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)②配置擴展庫接下來，在“cls_clt”項目中，我們找到“/src/main.js”配置文件。在該文件中，我們將集成上一節(jié)安裝的擴展庫。以下是關(guān)鍵代碼的參考示例：//引入axios和vue-axiosimportaxiosfrom'axios'importVueAxiosfrom'vue-axios'//引入ElementPlusimportElementPlusfrom'element-plus'import'element-plus/dist/index.css'//引入ElementPlus的圖標(biāo)import*asElementPlusIconsVuefrom'@element-plus/icons-vue'

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)注意：請確?！癱ls_clt”項目的跨域請求代理配置正確并可用（參考項目4中的“4.3.3.開發(fā)跨域訪問功能”小節(jié)）。//掛載axios和vue-axios，然而只是這樣全局并不能用app.use(VueAxios,axios)//將axios組件注入全局axios,這樣才能全局使用vide('axios',app.config.globalProperties.axios)//掛載ElementPlusapp.use(ElementPlus)//注冊ElementPlus的所有圖標(biāo)for(const[key,component]ofObject.entries(ElementPlusIconsVue)){ponent(key,component)}接上頁代碼

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)（2）開發(fā)項目導(dǎo)航組件接下來，我們將采用組件化的開發(fā)方式，來精心構(gòu)建項目的頂部和底部導(dǎo)航欄。這一做法旨在提升代碼的可復(fù)用性，使得整個項目的其他頁面能夠輕松引入并應(yīng)用這些導(dǎo)航欄組件，從而實現(xiàn)高效、一致的界面設(shè)計。①頂部導(dǎo)航組件在“cls_clt”項目中，我們首先定位到“/src/components”這一組件目錄，并在其中新建一個名為HeaderComp.vue的頂部導(dǎo)航組件。這個組件將承擔(dān)起項目中重要的導(dǎo)航功能。為實現(xiàn)該功能，我們采用了ElementPlus中的Menu菜單組件，并通過相應(yīng)的配置，將其整合至HeaderComp.vue中。該導(dǎo)航組件調(diào)用API接口，并將接口返回的數(shù)據(jù)進行存儲，以便后續(xù)調(diào)用，以下提供了該組件的具體代碼實現(xiàn)：

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)<scriptlang="ts"setup>import{ref,inject,onMounted}from'vue'//構(gòu)建logo圖片及用戶中心默認(rèn)圖片的URLconstlogo_url=ref('/svr/api/image/display/head/logo.png')constuser_url=ref('/svr/api/image/display/head/tx.png')constaxios=inject('axios')//注入axios//用于接收傳遞給組件的數(shù)據(jù)，此處傳遞的是選中的菜單索引constprops=defineProps({activeIndex:String})//設(shè)置菜單選中索引constactiveIndex=props.activeIndex//導(dǎo)航欄數(shù)據(jù)列表varnavDatas=ref([])//調(diào)用API接口，獲取文學(xué)類型列表，用于初始化導(dǎo)航欄functioninitNav(){

axios({

method:'get',

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

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

})}

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)//完成初始渲染并創(chuàng)建DOM節(jié)點后，進行頁面加載onMounted(()=>{

initNav()//初始化導(dǎo)航欄})</script><template>

<!--導(dǎo)航標(biāo)簽開始-->

<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="古典文學(xué)"/>

</el-menu-item>

<el-menu-itemindex="/">首頁</el-menu-item>接上頁代碼

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)

<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>

<!--導(dǎo)航標(biāo)簽結(jié)束--></template><style>.flex-grow{

flex-grow:1;}</style>接上頁代碼

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)

在上述代碼中，我們運用了ElementPlus中的Menu組件，為項目精心構(gòu)建了一個功能豐富的頂部導(dǎo)航欄。該導(dǎo)航欄包含了多個關(guān)鍵菜單項，如主頁、注冊、登錄、用戶中心，以及一個動態(tài)顯示數(shù)據(jù)庫中文學(xué)類型的導(dǎo)航菜單。在頂部導(dǎo)航欄中，項目的logo圖片和用戶頭像的顯示，我們通過使用之前開發(fā)的圖片顯示API接口，動態(tài)地構(gòu)建圖片顯示的接口URL，從而確保圖片能夠準(zhǔn)確無誤地展示給用戶。在導(dǎo)航菜單的URL設(shè)置上，我們利用了el-menu-item標(biāo)簽的index屬性，為每一個菜單項設(shè)置了相應(yīng)的導(dǎo)航路由。

文學(xué)類型導(dǎo)航菜單通過initNav()函數(shù)，使用axios庫來調(diào)用后端提供的“首頁”文學(xué)導(dǎo)航API接口，從而獲取項目中所有的文學(xué)類型數(shù)據(jù)。這個initNav()函數(shù)被封裝在onMounted()這個Vue組件生命周期鉤子中，確保在組件掛載到DOM后立即執(zhí)行，將獲取到的數(shù)據(jù)通過循環(huán)處理，動態(tài)地添加到菜單欄中。同時，為了提供用戶友好的導(dǎo)航體驗，網(wǎng)站導(dǎo)航欄菜單還通過activeIndex變量來接收傳遞過來的菜單選中索引。這一機制確保了當(dāng)用戶單擊某個菜單項時，能夠立即更新并高亮顯示當(dāng)前被選中的菜單項，從而為用戶提供了直觀且便捷的導(dǎo)航指引。

注意：在采用ElementPlus框架進行開發(fā)時，請務(wù)必在<scriptsetup>標(biāo)簽中明確指定lang="ts"屬性，否則可能會導(dǎo)致編譯錯誤。為確保項目的順利進行，后續(xù)的所有開發(fā)工作都應(yīng)遵循這一規(guī)范。

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)②底部導(dǎo)航組件在“cls_clt”項目中，我們首先定位到“/src/components”這一組件目錄，并在其中新建一個名為FooterComp.vue的底部導(dǎo)航組件。這個組件將顯示項目底部的導(dǎo)航信息。以下提供了該組件的具體代碼實現(xiàn)：<template><div>關(guān)于我們|招賢納士|商務(wù)合作|在線客服|工作時間8:30-22:00</div></template>

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)（3）開發(fā)首頁導(dǎo)航功能在完成項目導(dǎo)航組件的開發(fā)后，下一步是在首頁中集成并使用這些組件，以開發(fā)首頁的導(dǎo)航功能。在“cls_clt”項目中，請定位到“/src/views/HomeView.vue”這一首頁文件。在該文件中，我們將利用ElementPlus中的Container布局容器來構(gòu)建頁面的基本框架和結(jié)構(gòu)，整個首頁分為頂部、中部、底部三個部分，并在頂部和底部分別嵌入對應(yīng)的導(dǎo)航菜單組件。以下是具體的代碼實現(xiàn)示例：<scriptlang="ts"setup>import{ref,inject,onMounted}from'vue'//引入頂部導(dǎo)航組件importHeaderCompfrom'@/components/HeaderComp.vue'//引入底部組件importFooterCompfrom'@/components/FooterComp.vue'//導(dǎo)航欄菜單選中索引，默認(rèn)選中首頁constactiveIndex=ref('/')</script>

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)在上述代碼中，我們導(dǎo)入了頂部導(dǎo)航欄組件（HeaderComp.vue）和底部導(dǎo)航欄組件（FooterComp.vue），并運用了ElementPlus框架的el-container布局容器來結(jié)構(gòu)化頁面。頁面被明確分割為頂部el-header、中部el-main以及底部el-footer三個部分。<template>

<el-container>

<!--頂部導(dǎo)航欄-->

<el-header>

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

</el-header>

<!--主要區(qū)域容器-->

<el-main></el-main>

<!--底部導(dǎo)航欄-->

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

</el-container></template>

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)在頂部區(qū)域，我們通過<HeaderComp:active-index="activeIndex"/>標(biāo)簽來展示頂部導(dǎo)航欄組件，并動態(tài)地將activeIndex（菜單選中索引）作為屬性傳遞給該組件，以實現(xiàn)菜單項的高亮顯示。而在底部區(qū)域，我們則通過<FooterComp/>標(biāo)簽來展示底部導(dǎo)航信息。中部區(qū)域作為首頁的主要內(nèi)容展示區(qū)，將用于呈現(xiàn)頁面的核心內(nèi)容和功能。后續(xù)的開發(fā)工作將進一步完善這一區(qū)域，以滿足項目的具體需求。

3.1.開發(fā)導(dǎo)航欄功能2.業(yè)務(wù)功能實現(xiàn)（4）測試首頁導(dǎo)航功能最后，我們運行“cls_clt”項目，并通過瀏覽器順利地打開并瀏覽了該項目的首頁。在首頁上，我們可以清晰地看到頂部導(dǎo)航欄以及底部的導(dǎo)航信息。我們可以單擊不同菜單輕松實現(xiàn)不同菜單項之間的切換。整個運行效果如圖所示。

3.2.開發(fā)輪播圖功能接下來，我們著手開發(fā)“古典文學(xué)網(wǎng)”的首頁輪播圖功能。

3.2.開發(fā)輪播圖功能1.需求描述

在“古典文學(xué)網(wǎng)”項目的首頁中，我們需要開發(fā)一個輪播圖功能，該功能通過循環(huán)展示的方式，呈現(xiàn)六個精選的古典文學(xué)信息，同時實現(xiàn)自動定時切換。輪播圖的運行效果如圖所示。

2.業(yè)務(wù)功能實現(xiàn)（1）開發(fā)業(yè)務(wù)邏輯在“cls_clt”項目中，請找到“/src/views/HomeView.vue”首頁文件。在該文件中，將調(diào)用“首頁輪播圖API接口”以獲取輪播圖的數(shù)據(jù)列表，以便后續(xù)使用。以下是實現(xiàn)此功能的關(guān)鍵代碼：<scriptlang="ts"setup>import{ref,inject,onMounted}from'vue'import{RouterLink}from'vue-router'constaxios=inject('axios')//注入axios//輪播圖數(shù)據(jù)列表varcarouselDatas=ref([])//調(diào)用API接口，獲取輪播圖列表，用于初始化首頁輪播圖functioninitCarousel(){

axios({

method:'get',

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

})3.2.開發(fā)輪播圖功能

3.2.開發(fā)輪播圖功能1.需求描述

在開發(fā)該功能時，我們需要使用后端項目的API接口，具體API接口信息見表項目導(dǎo)航功能所調(diào)用的API接口表接口調(diào)用方式說明首頁輪播圖API接口http://ip地址:端口/api/classics/seach-carousels/<int:num>請參考項目3中的“3.3.7.開發(fā)輪播圖API接口”小節(jié)圖片顯示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>開發(fā)圖片顯示API接口”小節(jié)

2.業(yè)務(wù)功能實現(xiàn)在上述代碼中，我們集成了axios庫以處理HTTP請求。隨后，我們定義了initCarousel()函數(shù)，該函數(shù)的主要職責(zé)是調(diào)用API接口，從后端獲取輪播圖的數(shù)據(jù)列表，并將這些數(shù)據(jù)存儲在carouselDatas變量中以供后續(xù)使用。這個initCarousel()函數(shù)被封裝在onMounted()這個Vue組件生命周期鉤子中，確保在組件掛載到DOM后立即執(zhí)行，從而實現(xiàn)了輪播圖數(shù)據(jù)的初始化加載。

.then(function(response){

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

carouselDatas.value=response.data.data

}

})

</script>接上頁代碼3.2.開發(fā)輪播圖功能

2.業(yè)務(wù)功能實現(xiàn)（2）開發(fā)頁面邏輯為了將輪播圖數(shù)據(jù)展示給客戶，我們采用了ElementPlus框架中的Carousel走馬燈組件。該組件將輪播的文學(xué)數(shù)據(jù)以跑馬燈的效果進行呈現(xiàn)，能夠循環(huán)播放文學(xué)的封面等關(guān)鍵內(nèi)容，為用戶提供直觀且流暢的瀏覽體驗。以下是實現(xiàn)這一功能的關(guān)鍵代碼示例：<!--主要區(qū)域容器--><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.開發(fā)輪播圖功能

2.業(yè)務(wù)功能實現(xiàn)在上述代碼中，我們利用el-carousel組件實現(xiàn)了輪播圖功能。在el-carousel組件內(nèi)部，我們借助v-for指令循環(huán)遍歷carouselDatas輪播圖列表的數(shù)據(jù)，使得每一個el-carousel-item都能展示一張獨特的文學(xué)封面圖片。為了動態(tài)地加載這些圖片，我們調(diào)用了先前開發(fā)的圖片顯示API接口，并據(jù)此構(gòu)建了圖片顯示的接口URL。</el-carousel-item>

</el-carousel>

<!--輪播圖結(jié)束-->

<el-dividerborder-style="dashed"/></el-main>接上頁代碼3.2.開發(fā)輪播圖功能

2.業(yè)務(wù)功能實現(xiàn)（3）測試首頁輪播圖功能最后，我們運行“cls_clt”項目，并通過瀏覽器順利地打開首頁。在首頁上，我們可以看到輪播圖的展示。運行效果如圖所示。3.2.開發(fā)輪播圖功能

接下來，我們著手開發(fā)“古典文學(xué)網(wǎng)”的文學(xué)搜索功能。。3.3.開發(fā)文學(xué)搜索功能

3.3.開發(fā)文學(xué)搜索功能1.需求描述

在首頁設(shè)計中，我們需要開發(fā)一個文學(xué)搜索功能，該功能將為用戶提供搜索和瀏覽體驗。當(dāng)用戶從首頁的搜索框中輸入關(guān)鍵詞并單擊搜索按鈕后，系統(tǒng)將引導(dǎo)用戶跳轉(zhuǎn)至搜索結(jié)果展示頁面。在這一頁面中，搜索結(jié)果將以列表形式展現(xiàn)，同時頁面仍保留搜索框，以便用戶繼續(xù)深化或拓展搜索。如圖（a）及圖（b）所示。圖（a）首頁搜索框圖（b）搜索結(jié)果頁

3.3.開發(fā)文學(xué)搜索功能1.需求描述

在開發(fā)該功能時，我們需要使用后端項目的API接口，具體API接口信息見表所示。項目導(dǎo)航功能所調(diào)用的API接口表接口調(diào)用方式說明文學(xué)搜索API接口http://ip地址:端口/api/classics/seach-classics請參考項目3中的“3.3.6.開發(fā)文學(xué)搜索API接口”小節(jié)圖片顯示API接口http://ip地址:端口/api/image/display/<string:type>/<string:filename>請參考項目2中的“2.3.5.開發(fā)圖片顯示API接口”小節(jié)

3.3.開發(fā)文學(xué)搜索功能2.業(yè)務(wù)功能實現(xiàn)（1）開發(fā)首頁搜索框

①開發(fā)業(yè)務(wù)邏輯

在“cls_clt”項目中，找到“/src/views/HomeView.vue”首頁文件。在該文件中，我們將獲取用戶輸入的搜索關(guān)鍵字，并跳轉(zhuǎn)至搜索結(jié)果展示頁面。以下是實現(xiàn)此功能的關(guān)鍵代碼：<scriptlang="ts"setup>import{ref,inject,onMounted}from'vue'import{useRoute,useRouter,RouterLink}from'vue-router'//創(chuàng)建路由對象，用于編程式導(dǎo)航constrouter=useRouter()//搜索欄的關(guān)鍵字constkeyword=ref('')//搜索跳轉(zhuǎn)方法，跳轉(zhuǎn)至搜索頁functionseach(){

//獲取輸入的搜索關(guān)鍵字

varmykeyword=keyword.value

3.3.開發(fā)文學(xué)搜索功能2.業(yè)務(wù)功能實現(xiàn)

在上述代碼中，我們首先定義了一個變量keyword，用于存儲從搜索關(guān)鍵字。接著，我們定義了一個search的函數(shù)，該函數(shù)的主要作用是處理搜索跳轉(zhuǎn)邏輯。在函數(shù)內(nèi)部，我們獲取了用戶輸入的關(guān)鍵字keyword，并進行了空字符的判斷，以確保用戶輸入的有效性。最后，我們使用編程式導(dǎo)航的方式，通過router.push方法，將用戶導(dǎo)航至搜索頁面。這里，我們指定了搜索頁面的路由名稱為“search”。

//當(dāng)搜索關(guān)鍵字為空時，設(shè)置值為：all(搜索所有內(nèi)容)

if(keyword.value==''){

mykeyword='all'

}

//跳轉(zhuǎn)至搜索頁面，并傳遞關(guān)鍵字

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

3.3.開發(fā)文學(xué)搜索功能2.業(yè)務(wù)功能實現(xiàn)②開發(fā)頁面邏輯

在首頁的布局中，我們使用ElementPlus框架的組件構(gòu)建了搜索輸入框界面，當(dāng)用戶單擊搜索按鈕后，將跳轉(zhuǎn)至搜索結(jié)果頁面。以下便是實現(xiàn)這一功能的關(guān)鍵代碼示例：

<el-main>

<!--搜索欄開始-->

<divclass="mt-4">

<el-input

style="max-width:600px"

v-model="keyword"

placeholder="請輸入搜索關(guān)鍵字"

clearable>

3.3.開發(fā)文學(xué)搜索功能2.業(yè)務(wù)功能實現(xiàn)

在上述代碼中，我們使用ElementPlus框架的Input輸入框組件以及Button按鈕組件，共同構(gòu)建了一個搜索輸入框界面，當(dāng)用戶單擊搜索按鈕后，將調(diào)用seach()方法，從而跳轉(zhuǎn)至搜索結(jié)果頁面。<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"/>

<!--搜索欄結(jié)束--></el-main>

3.3.開發(fā)文學(xué)搜索功能2.業(yè)務(wù)功能實現(xiàn)（2）開發(fā)搜索結(jié)果頁面

①開發(fā)業(yè)務(wù)邏輯

在“cls_clt”項目中，我們找到“/src/views/”目錄。接下來，在此目錄下創(chuàng)建名為“SeachView.vue”的頁面文件，該頁面用于搜索及搜索結(jié)果展示。在“SeachView.vue”頁面中，我們將接收傳遞過來的搜索關(guān)鍵字keyword，調(diào)用文學(xué)搜索API接口，獲取搜索結(jié)果。以下是具體的代碼參考：<scriptlan