介紹
“今宵酒醒何處，楊柳岸曉風殘月”，“驀然回首，那人卻在燈火闌珊處”，“試問閑愁都幾許？一川煙草，滿城風絮，梅子黃時雨” ......
宋詞可謂是古代文學桂冠上一顆璀璨的明珠，本題將實現一個在搜索框中輸入關鍵字，實時顯示符合條件的完整宋詞的功能。
準備
本題已經內置了初始代碼，打開實驗環境，目錄結構如下：
├── css
│ └── style.css
├── data.json
├── index.html
└── js├── axios.min.js└── vue.min.js
其中：
index.html?是主頁面。js/vue.min.js?是項目用到的 vue2.x 版本文件。js/axios.min.js?是 axios 文件。data.json?是項目中需要用到宋詞數據。css/style.css?是樣式文件。
選中?index.html?右鍵啟動 Web Server 服務（Open with Live Server），讓項目運行起來。
接著，打開環境右側的【Web 服務】，就可以在瀏覽器中看到如下效果：
目標
請使用 Vue ，完成?index.html?文件中的 TODO 部分。
- 完成數據請求（數據來源?
./data.json），data.json?是宋詞數據，poetry_content?表示詞句，title?表示詞牌名，author?表示詞人。 - 在輸入框輸入關鍵詞時在?
ul（class = suggestions）的元素中實時顯示詞牌名、詞句、詞人中包含關鍵詞的完整詞句（包含詞牌名、詞人）列表，當關鍵詞為空或者匹配不到時?ul（class = suggestions）元素的子節點為空。完整詞句的 DOM 結構按照如下規定顯示：
<!-- 每一首完整詞句用一個 li 包裹 -->
<li><span class="poet">詞句</span><span class="title">詞牌名 - 詞人</span>
</li>
例：
<li><span class="poet">常記溪亭日暮，沉醉不知歸路。興盡晚回舟，誤入藕花深處。爭渡，爭渡，驚起一灘鷗鷺</span><span class="title">如夢令 - 李清照</span>
</li>
- 高亮匹配到的所有詞句中的關鍵詞。即使用?
<span class="highlight"></span>?標簽包裹所有關鍵詞。
例：(關鍵詞：雨)
<li><span class="poet">寒蟬凄切，對長亭晚，驟<span class="highlight">雨</span>初歇。都門帳飲無緒，方留戀處，蘭舟催發。執手相看淚眼，竟無語凝噎。念去去千里煙波，暮靄沉沉楚天闊。多情自古傷離別，更那堪冷落清秋節。今宵酒醒何處，楊柳岸曉風殘月。此去經年，應是良辰美景虛設。便縱有千種風情，更與何人說</span><span class="title"><span class="highlight">雨</span>霖鈴 - 柳永</span>
</li>
注意：本題要求的是實時顯示，即輸入完成的同時顯示結果，非失去焦點顯示。
規定
- 請勿修改已經提供的代碼，以免造成判題無法通過。
- 請嚴格按照考試步驟操作，切勿修改考試默認提供項目中的文件名稱、文件夾路徑等。
- 滿足題目需求后，保持 Web 服務處于可以正常訪問狀態，點擊「提交檢測」系統會自動判分
代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>絕美宋詞</title><link rel="stylesheet" href="css/style.css" /><script src="./js/vue.min.js"></script><script src="./js/axios.min.js"></script></head><body><div id="app"><h1 style="text-align: center">輸入關鍵字，找一首詞</h1><!-- TODO：待補充代碼 --><div class="search-form"><inputtype="text"id="search"class="search"placeholder="詞牌名 詞句 詞人"v-model="searchValue"/><ul class="suggestions" v-for="item in setSearchData"><!-- 每一首完整詞句用一個 li 包裹 --><li><span class="poet" v-html="highlight(item.poetry_content)">{{item.poetry_content}}</span><span class="title"><span v-html="highlight(item.title)">{{item.title}}</span>-<span v-html="highlight(item.author)">{{item.author}}</span></span></li></ul></div></div><script>let vm = new Vue({el: "#app",// TODO：待補充代碼data: {dataList: [],searchValue: "",},mounted() {axios.get("./data.json").then((res) => {this.dataList = res.data;console.log(res.data);});},computed: {setSearchData() {// 當搜索值為空時返回空數組if (!this.searchValue) return [];// 正確過濾包含搜索詞的項return this.dataList.filter((item) => {return (item.poetry_content.includes(this.searchValue) ||item.title.includes(this.searchValue) ||item.author.includes(this.searchValue));});},},methods: {highlight(it) {// 替換搜索詞并高亮顯示return it.replaceAll(this.searchValue,`<span class="highlight">$&</span>`);},},});</script></body>
</html>
v-html="highlight(...)：使用?v-html?指令渲染 HTML 內容，highlight?方法會將匹配搜索詞的部分用?<span class="highlight">?包裹，實現高亮效果。
computed: {setSearchData() {if (!this.searchValue) return [];return this.dataList.filter((item) => {return (item.poetry_content.includes(this.searchValue) ||item.title.includes(this.searchValue) ||item.author.includes(this.searchValue));});},
},- 作用：根據?
searchValue?的值動態過濾?dataList，返回包含搜索詞的詩詞數據。 - 工作原理：
- 當?
searchValue?為空時，返回空數組，隱藏所有結果。 - 當?
searchValue?有值時，使用?filter?方法遍歷?dataList，篩選出?poetry_content（詩詞內容）、title（詞牌名）或?author（詞人）包含搜索詞的項。
- 當?
- 響應式：計算屬性會自動追蹤依賴的響應式數據（
searchValue?和?dataList），當它們變化時，重新計算并更新視圖。
methods: {highlight(it) {return it.replaceAll(this.searchValue, `<span class="highlight">$&</span>`);},
},highlight?方法：- 接收一個字符串?
it（如詩詞內容、詞牌名或詞人）。 - 使用?
replaceAll?方法將?it?中所有匹配?searchValue?的部分替換為?<span class="highlight">$&</span>，其中?$&?表示匹配的子字符串。 - 最終返回帶有高亮樣式的 HTML 字符串，通過?
v-html?渲染到頁面上，實現搜索詞高亮效果。
- 接收一個字符串?
、DriveManager、Connection、Statement、自建JDBC工具類、占位符)
