文章搜索

使用路由的文章搜索页面

• 使用 vant-search 来画页面

总体三部分功能的文章搜索

• 搜索历史
• 联想建议
• 搜索结果

三部分的显示有一个逻辑，实现这个逻辑合理显示三个页面

画出简单的三组件页面

联想建议组件

• 事件监听 ， 组件通信 ，一旦搜到父组件传来的数据，监听到进行处理
• 封装网络请求 请求得到数据 循环铺设数据

loadsh.js 第三方包工具库 ，里面有防抖函数 ，对网络请求作优化防止请求太快

• 读联想建议设置高亮

  v-html 将字符串解析为 html

  使用 正则表达式 筛选需要高亮的字符串

• 点击搜索，获取搜索结果 组件通信，将联想建议传递给父组件 在传递给搜索结果组件

  • 封装网络请求
  • 发送请求完成 页面，文章数等逻辑 vant-list

搜索历史组件

简单的画出 css 界面

要求

• 不要有重复历史记录
• 最新的历史记录排在前面

//简单实现
this.searchText = val
const index = this.searchHistories.indexOf(val)
if(index!=-1){
    this.searchHistories.splice(index,1)//如果存在就删除
}
this.searchHistories.unshift(val)//添加或覆盖

• 循环铺设历史记录数据

删除和搜索逻辑点击完成

可以对父组件的数据进行引用类型值操作，但是不能直接赋值，即点击全部删除之后，需要组件通信 让父组件去清空搜索历史数据

而当个历史记录的点击可以引用类型值删除

非删除状态的点击事件

组件通信，让父组件去搜索关键词

本地持久化

利用封装好的本地存储，对搜索历史记录来进行存取操作