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

一、模糊搜索:

模糊搜索使用的是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>