聚合搜索平台简介

技术栈介绍

全栈

前端

  • Vue
  • Ant Design Vue
  • Lodash

后端

  • Spring Boot
  • MySQL
  • Elasticsearch (Elastic Stack) 搜索引擎
  • 数据抓取
  • 数据同步
    • 4种
    • logstash
    • Canal
  • Guava Retrying
  • 怎么保证 API 的稳定性

业务流程

  1. 先得到各种不同分类的数据
  2. 提供一个搜索页面（单一搜索、聚合搜索），支持搜索

可以去做一些优化，比如关键词高亮、防抖节流

image-20230321215555548

项目计划

第一期

  • 前端后端项目初始化
  • 前端搜索页面开发完成
  • 后端基本搜索接口开发完成

第二期

  • 数据抓取
  • 聚合搜索接口的开发
    • 适配器
    • 门面模式
  • Elasticsearch 搭建及热门

第三期

  • Elasticsearch 的使用（建表、读写数据、调 API 、和 Java 整合）

  • 数据同步（四种同步方式）

第四期

  • 接口稳定性保障
  • 项目优化（关键词高亮、搜索建议、防抖节流）

时间安排

  1. 前端初始化 10 min
  2. 后端项目初始化 10 min
  3. 前端搜索页面开发 20 min
  4. 整合 Axios 10 min
  5. 后端搜索接口开发 10 min

前端初始化

  1. 参考 Ant Design 组件库的官方文档来搭建初始化项目
    （https://2x.antdv.com/docs/vue/getting-started-cn），并整合组件库
  2. 删减不需要的页面和路由

后端初始化

  1. 使用星球 springboot-init 万用项目模板即可
  2. 直接使用 Swagger 文档在线测试接口

前端开发

记录搜索状态

目标：用 url 记录页面搜索状态，当用户刷新页面时，能够从 url 还原之前的搜索状态需要双向同步：url <=> 页面状态

核心小技巧：把同步状态该为单向，即只允许 url 来改变页面状态，不允许反向

分步骤来实现，思路更清晰：

  1. 让用户在操作的时候，改变 url 地址（点击搜索框，搜索内容填充到 url 上，切换 tab 时，也要填充）
  2. 当 url 改变的时候，去改变页面状态（监听 url 的改变）

前后端联调

前端整合 Axios，并自定义 Axios 实例，完成请求：https://www.axios-http.cn/docs/intro