项目中需要需要高并发操作 所以模糊搜索操作准备拿到前端来做

一、模糊搜索：

模糊搜索使用的是fuse.js
https://fusejs.io/
简单使用demo vue
其他配置项 参考 https://fusejs.io/api/options.html

  1. <template>
  2.   <div class="app-container">
  3.     <div class="hello">
  4.       <el-input v-model="title" placeholder="请输入内容" />
  5.       <el-button type="primary" @click="searchData">搜素</el-button>
  6.       <ul>
  7.         <li v-for="(item,index) in result" :key="index">
  8.           标题： {{ item.item.title }}
  9.           <br>
  10.           作者： {{ item.item.author.firstName }}
  11.           <br>
  12.                <!-- 匹配精准度（0～1） 0 代表完全匹配  分数越大匹配度越低 -->
  13.           分数： {{ item.score }}
  14.         </li>
  15.       </ul>
  16.     </div>
  17.   </div>
  18. </template>
  19. <script>
  20. // 1. 引入Fuse
  21. import Fuse from 'fuse.js'
  22. export default {
  23.   data() {
  24.     return {
  25.       title: '',
  26.       fuse: null,
  27.       result: [],
  28.       books: [
  29.         {
  30.           title: 'Java虚拟机',
  31.           author: {
  32.             firstName: '王浩',
  33.             lastName: 'wanghao'
  34.           }
  35.         },
  36.         {
  37.           title: '人工智能',
  38.           author: {
  39.             firstName: '侯建军',
  40.             lastName: 'marquis'
  41.           }
  42.         }
  43.       ]
  44.     }
  45.   },
  46.   // 自动触发 可以直接 写事件赋值  this.result = this.fuse.search(this.title)
  47.   watch: {
  48.     // 要变量名一致
  49.     title(newName, oldName) {
  50.       // 3. 搜索内容
  51.             this.result = this.fuse.search(this.title)
  52.     }
  53.   },
  54.   created() {
  55.     // 2. 初始化
  56.     this.init()
  57.   },
  58.   methods: {
  59.     // 初始化
  60.     init() {
  61.       var options = {
  62.         shouldSort: true, // 是否按分数对结果列表排序
  63.         includeScore: true, //  是否应将分数包含在结果集中。0分表示完全匹配，1分表示完全不匹配。
  64.         threshold: 0, // 匹配算法阈值。阈值为0.0需要完全匹配（字母和位置），阈值为1.0将匹配任何内容。
  65.         /**
  66.          * 确定匹配与模糊位置（由位置指定）的距离。一个精确的字母匹配，即距离模糊位置很远的字符将被视为完全不匹配。
  67.          *  距离为0要求匹配位于指定的准确位置，距离为1000则要求完全匹配位于使用阈值0.8找到的位置的800个字符以内。
  68.          */
  69.         location: 0, // 确定文本中预期找到的模式的大致位置。
  70.         distance: 100,
  71.         maxPatternLength: 32, // 模式的最大长度
  72.         minMatchCharLength: 1, // 模式的最小字符长度
  73.         // 搜索标题与作者名
  74.         keys: ['title', 'author.firstName']
  75.       }
  76.       // 设置数据与参数
  77.       this.fuse = new Fuse(this.books, options)
  78.     },
  79.     searchData() {
  80.       this.result = this.fuse.search(this.title)
  81.     }
  82.   }
  83. }
  84. </script>