绝美宋词

GTK / 2023-06-04 / 原文

习题链接

绝美宋词

课程列表

我有唐诗三百首，但是我想查找某一首诗，总不能一首一首查吧
所以我们要完成一个搜索功能模块，无论是诗句，还词牌，或者作者一并查出
并且要对查出来的数据进行高亮显示

关键点

在mounted生命周期中完成数据请求
1. axios请求数据的
2. axios中最常用的就是get与psot，axios是基于promise的异步操作，所以是可以是使用then,catch方法来处理结果的，在本题里面就是一个简单请求
3. axios.get(地址)
  .then(res=>{当请求成功，返回的结果在此处操作})
  .catch(err=>{执行失败的操作})
  .finally(()=>{成功或失败都将执行的操作})
正则表达式和eval的共同使用
1. 在正则表达式的简写中想插入变量是不可能的，但是配合eval就可以了
2. eval可以将字符串当成JS代码进行执行
3. 一个句子里面可能存在多个匹配的字符所以用正则比较合适（本次解决方案使用的正则），再提供一种方案自己实现使用indexOf与while进行实现
使用replace方法
1. 此方法不会修改原数组
2. 匹配到的字符，可以使用$&字符进行实用，比如说你要匹配的"柳",再替换的字符串中使用$&就是对应的"柳"
v-html指令，因为存在高亮标签，所以需要使用v-html对字符串进行html渲染
watch使用监听器
1. 因为每当查询条件发送变化的时候，需要触发一次查询
2. 每次查询的结果基本上是不一致的所以不使用计算属性进行缓存

代码实现 && 完整的代码

data中存在的数据

 data(){
     return {
       listdata:[],     // 所有的数据
       searchText:"",   // 查询字符串
       active:[]        // 查询结果
     }
 },

请求数据编写

mounted(){
    axios.get("./data.json").then(res=> this.listdata = res.data )
}

进行查询结果并拼接高亮标签

watch:{
    searchText(){ 
      console.log(this.searchText);
      let arr = this.listdata.filter(item=>{
        let b = false;
        for (const key in item) { 
          let index = item[key].indexOf(this.searchText);
          if(index != -1){
            b = true; 
            item[key] = item[key].replace(eval(`/${this.searchText}/gi`),`<span class="highlight">$&</span>`)
          }
        } 
        return b;
      })
      // active是在data中进行声明的
      this.active = arr;
    }
},

对查询结果进行渲染

 <div class="search-form">
   <input v-model="searchText" type="text" id="search" class="search" placeholder="词牌名 词句 词人"/>
   <ul class="suggestions">
     <li v-for="item,index in active">
       <span class="poet" v-html="item.poetry_content"></span>
       <span class="title"><span v-html="item.title"></span> - <span v-html="item.author"></span></span>
     </li>
   </ul> 
 </div>