一、介绍

“今宵酒醒何处，杨柳岸晓风残月”，“蓦然回首，那人却在灯火阑珊处”，“试问闲愁都几许？一川烟草，满城风絮，梅子黄时雨” …

宋词可谓是古代文学桂冠上一颗璀璨的明珠，本题将实现一个在搜索框中输入关键字，实时显示符合条件的完整宋词的功能。

二、准备

本题已经内置了初始代码，打开实验环境，目录结构如下：

├── 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 部分。

1. 完成数据请求（数据来源 ./data.json），data.json 是宋词数据，poetry_content 表示词句，title 表示词牌名，author 表示词人。
2. 在输入框输入关键词时在 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>

3. 高亮匹配到的所有词句中的关键词。即使用 <span class="highlight"></span> 标签包裹所有关键词。

例：(关键词：雨)

<li>
  <span class="poet"
    >寒蝉凄切，对长亭晚，骤<span class="highlight">雨</span
    >初歇。都门帐饮无绪，方留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去千里烟波，暮霭沉沉楚天阔。多情自古伤离别，更那堪冷落清秋节。今宵酒醒何处，杨柳岸晓风残月。此去经年，应是良辰美景虚设。便纵有千种风情，更与何人说</span
  >
  <span class="title"><span class="highlight">雨</span>霖铃 - 柳永</span>
</li>

注意：本题要求的是实时显示，即输入完成的同时显示结果，非失去焦点显示。

完成后，最终页面效果如下：

四、代码

data.json

[
  {
    
    
    "poetry_content": "寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，方留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去千里烟波，暮霭沉沉楚天阔。多情自古伤离别，更那堪冷落清秋节。今宵酒醒何处，杨柳岸晓风残月。此去经年，应是良辰美景虚设。便纵有千种风情，更与何人说",
    "title": "雨霖铃",
    "author": "柳永"
  },
  {
    
    
    "poetry_content": "常记溪亭日暮，沉醉不知归路。兴尽晚回舟，误入藕花深处。争渡，争渡，惊起一滩鸥鹭",
    "title": "如梦令",
    "author": "李清照"
  },
  {
    
    
    "poetry_content": "寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他晓来风急？雁过也，正伤心，却是旧时相识。满地黄花堆积。憔悴损，如今有谁堪摘？守著窗儿独自，怎生得黑？梧桐更兼细雨，到黄昏、点点滴滴。",
    "title": "声声慢",
    "author": "李清照"
  },
  {
    
    
    "poetry_content": "纤云弄巧，飞星传恨，银汉迢迢暗渡。金风玉露一相逢，便胜却人间无数。柔情似水，佳期如梦，忍顾鹊桥归路。两情若是久长时，又岂在朝朝暮暮。",
    "title": "鹊桥仙",
    "author": "秦观"
  },
  {
    
    
    "poetry_content": "东风夜放花千树，更吹落，星如雨。宝马雕车香满路，凤箫声动，玉壶光转，一夜鱼龙舞。蛾儿雪柳黄金缕，笑语盈盈暗香去。众里寻他千百度，蓦然回首，那人却在灯火阑珊处",
    "title": "青玉案",
    "author": "辛弃疾"
  },
  {
    
    
    "poetry_content": "红酥手。黄縢酒。满城春色宫墙柳。东风恶。欢情薄。一怀愁绪，几年离索。错错错。春如旧。人空瘦。泪痕红浥鲛绡透。桃花落。闲池阁。山盟虽在，锦书难托。莫莫莫。",
    "title": "钗头凤",
    "author": "陆游 "
  },
  {
    
    
    "poetry_content": "郁孤台下清江水，中间多少行人泪？西北望长安，可怜无数山。青山遮不住，毕竟东流去。江晚正愁余，山深闻鹧鸪。",
    "title": "菩萨蛮",
    "author": "辛弃疾"
  },
  {
    
    
    "poetry_content": "花褪残红青杏小。燕子飞时，绿水人家绕。枝上柳绵吹又少。天涯何处无芳草。墙里秋千墙外道。墙外行人，墙里佳人笑。笑渐不闻声渐悄。多情却被无情恼。",
    "title": "蝶恋花",
    "author": "苏轼"
  },
  {
    
    
    "poetry_content": "伫倚危楼风细细，望极春愁，黯黯生天际。草色烟光残照里，无言谁会凭阑意。拟把疏狂图一醉，对酒当歌，强乐还无味。衣带渐宽终不悔，为伊消得人憔悴",
    "title": "蝶恋花",
    "author": "柳永"
  },
  {
    
    
    "poetry_content": "槛菊愁烟兰泣露，罗幕轻寒，燕子双飞去。明月不谙离恨苦，斜光到晓穿朱户。昨夜西风凋碧树，独上高楼，望尽天涯路。欲寄彩笺兼尺素。山长水阔知何处？",
    "title": "蝶恋花",
    "author": "晏殊"
  },
  {
    
    
    "poetry_content": "世情薄，人情恶，雨送黄昏花易落。晓风干，泪痕残。欲笺心事，独语斜阑。难，难，难！人成各，今非昨，病魂常似秋千索。角声寒，夜阑珊。怕人寻问，咽泪装欢。瞒，瞒，瞒",
    "title": "钗头凤",
    "author": "唐婉 "
  },
  {
    
    
    "poetry_content": "怒发冲冠，凭阑处、潇潇雨歇。抬望眼、仰天长啸，壮怀激烈。三十功名尘与土，八千里路云和月。莫等闲、白了少年头，空悲切。靖康耻，犹未雪；臣子恨，何时灭。驾长车踏破、贺兰山缺。壮志饥餐胡虏肉，笑谈渴饮匈奴血。待从头、收拾旧山河，朝天阙。",
    "title": "满江红",
    "author": "岳飞"
  },
  {
    
    
    "poetry_content": "凌波不过横塘路，但目送、芳尘去。锦瑟华年谁与度？月桥花院，琐窗朱户，只有春知处。飞云冉冉蘅皋暮，彩笔新题断肠句。试问闲愁都几许？一川烟草，满城风絮，梅子黄时雨。",
    "title": "青玉案",
    "author": "贺铸"
  },
  {
    
    
    "poetry_content": "留春不住，费尽莺儿语。满地残红宫锦污，昨夜南园风雨。小怜初上琵琶，晓来思绕天涯。不肯画堂朱户，春风自在杨花。",
    "title": "清平乐",
    "author": "王安国"
  },
  {
    
    
    "poetry_content": "几日行云何处去？忘了归来，不道春将暮。百草千花寒食路，香车系在谁家树？泪眼倚楼频独语。双燕来时，陌上相逢否？撩乱春愁如柳絮，依依梦里无寻处。",
    "title": "蝶恋花",
    "author": "欧阳修"
  },
  {
    
    
    "poetry_content": "一曲新词酒一杯，去年天气旧池台。夕阳西下几时回？无可奈何花落去，似曾相识燕归来，小园香径独徘徊。 ",
    "title": "浣溪沙",
    "author": "晏殊"
  },
  {
    
    
    "poetry_content": "梦后楼台高锁，酒醒帘幕低垂。去年春恨却来时，落花人独立，微雨燕双飞。记得小苹初见，两重心字罗衣。琵琶弦上说相思，当时明月在，曾照彩云归。",
    "title": "临江仙",
    "author": "晏几道"
  }
]

index.html

<!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">
      <input type="text" id="search" class="search" placeholder="词牌名 词句 词人"/>
      <ul class="suggestions">
      </ul>
    </div>
  </div>
  <script>
    let vm = new Vue({
      
      
      el:'#app',
      // TODO：待补充代码
    })
  </script>
</body>

</html>

五、踩坑

1. 高亮替换时 本来想用filters过滤 ， 但filters获取data中的数据时，this指向不再是vm，所以此时可以通过传参的形式获取 比如要获取data中的search，那么可以直接{ {xxx|filterName(search)}}
2. 使用filters过滤时使用replace方法替换高亮词的时候是以字符串的形式，而不是html形式

六、完成

<!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">
        <input
          type="text"
          id="search"
          class="search"
          v-model="search"
          placeholder="词牌名 词句 词人"
        />
        <ul class="suggestions">
          <!-- 每一首完整词句用一个 li 包裹 -->
          <li v-for="item in filterList">
            <span v-html="hightLight(item.poetry_content)" class="poet"></span>
            <span class="title">
              <span v-html="hightLight(item.title)"></span>
              -
              <span v-html="hightLight(item.author)"></span>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <script>
      let vm = new Vue({
      
      
        el: "#app",
        // TODO：待补充代码
        data() {
      
      
          return {
      
      
            list: [],
            search: "",
          };
        },
        mounted() {
      
      
          this.getData();
        },
        computed: {
      
      
          //高亮
          hightLight() {
      
      
            return (text) => {
      
      
              if (this.search) {
      
      
                const reg = new RegExp(this.search, "gi");
                return text.replace(
                  reg,
                  `<span class='highlight'>${ 
        this.search}</span>`
                );
              }
              return text;
            };
          },
          filterList() {
      
      
            let {
      
       search, list } = this;
            // search &&
            //   (list = list.filter((item) => {
      
      
            //     return (
            //       item.title.includes(search) ||
            //       item.author.includes(search) ||
            //       item.poetry_content.includes(search)
            //     );
            //   }));
            // return list;
            //简化版
            return search
              ? list.filter(
                  (item) =>
                    item.title.includes(search) ||
                    item.author.includes(search) ||
                    item.poetry_content.includes(search)
                )
              : [];
          },
        },
        methods: {
      
      
          //获取数据
          async getData() {
      
      
            const res = await axios({
      
       url: "./data.json" });
            this.list = res.data;
          },
        },
      });
    </script>
  </body>
</html>