知识库全链路交互逻辑

阶段顺序

URL输入 → 网络连接 → 前端请求 → 后端处理 → 数据库交互 → 数据返回 → 前端渲染 → 连接关闭

阶段1：用户输入URL

1. 用户行为 ：在浏览器地址栏输入 https://knowledge.com/search?keyword=金融趋势
2. ​浏览器动作 ：

• “浏览器解析URL：

​协议补全：若用户省略协议，浏览器自动添加 https://（若网站支持HTTPS）
​字符转义：对中文、空格等特殊字符编码（如 金融趋势 → %E9%87%91...），防止服务器解析错误。
​拆解结构：分离出协议、域名、路径、参数，例如将 knowledge.com/search?keyword=xxx 拆解后，域名用于DNS解析，路径和参数用于服务端处理。

• ​缓存决策：

1.​强缓存：浏览器先检查 Cache-Control（优先看 max-age）和 Expires，若时间未过期 → ​直接返回200（from cache）​；若过期则进入协商缓存。
​2.协商缓存：浏览器携带 If-None-Match（对应上次的 ETag）或 If-Modified-Since（对应 Last-Modified）请求服务器 → 资源未修改返回 ​304​（用旧缓存），否则返回 ​200​（新资源）。
3.​完全失效：若 Cache-Control: no-store 或首次请求 → 直接返回 ​200​（全新资源），不缓存或按响应头存储。

阶段2： 网络连接

1. ​**DNS解析**：  
   - 查询浏览器缓存 → 系统缓存 → 本地DNS服务器 → 最终获取服务器IP（如 `192.168.1.100`）
   - 将域名（如 www.example.com）转换为IP地址（如 93.184.216.34）  

2. ​**TCP三次握手**​（建立可靠传输通道）：  
   - 客户端发送 SYN（同步序列号）
   - 服务端返回 SYN-ACK（确认+同步）
   - 客户端发送 ACK（最终确认）

3. ​**HTTPS安全连接**​（加密数据传输）：  
   - 客户端验证SSL证书（确保访问的是真实的知识库服务器）  
   - 协商加密算法（如RSA+AES） → 生成会话密钥  

阶段3：前端发起请求（Vue技术栈）

1. ​**页面初始化**：  
   - Vue Router根据URL路径 `/search` 加载对应组件（SearchComponent.vue）  
   - 调用 `created()` 生命周期钩子，触发Axios请求：  
     ```javascript
     axios.get('/api/search', { params: { keyword: '金融趋势' } })
     ```

2. ​**请求优化**：  
   - 防抖处理（避免用户快速输入时频繁请求）  
   - 显示Loading动画（提升用户体验）  

阶段4：后端处理请求（数据库增删改查、Spring Boot技术栈）

1. ​**请求路由**：  
   - Nginx反向代理将请求转发到Spring Boot服务（负载均衡）  
   - Spring MVC的 `@GetMapping("/api/search")` 匹配到对应Controller  

2. ​**业务逻辑处理**：  
   - ​**权限校验**：Spring Security检查用户Token是否有效  
   - ​**参数校验**：验证 `keyword` 合法性（防SQL注入）  
   - ​**缓存查询**：  
     - 生成Redis Key（如 `search:金融趋势`）  
     - 若缓存存在 → 直接返回结果（减少数据库压力）  
   - ​**数据库查询**​（若缓存未命中）：  
     - MyBatis执行SQL：  
       ```sql
       SELECT * FROM chart_data 
       WHERE keyword = '金融趋势' 
       AND classification = '金融' 
       ORDER BY publish_time DESC
       ```
     - 结果写入Redis（设置过期时间）  

3. ​**响应封装**：  
   - 将数据库结果转为JSON格式（使用Jackson库）  
   - 添加HTTP头（如 `Content-Type: application/json`）  

(2) 数据库操作

​ 操作类型	​ 触发场景	​ 数据来源	​ 示例
​ 查（Read）​	GET请求获取数据	用户生成数据、第三方数据	SELECT * FROM docs WHERE id=123
​ 增（Create）​	POST请求提交新数据	用户上传、运营批量导入	INSERT INTO docs (title, content) VALUES ('金融报告', '...')
​ 改（Update）​	PUT请求修改数据	用户编辑、系统自动更新	UPDATE docs SET content='新内容' WHERE id=123
​ 删（Delete）​	DELETE请求删除数据	用户删除、系统定时清理	DELETE FROM docs WHERE id=123

阶段5：数据库交互（MySQL与Redis）

数据库交互（落库与查询）​

• ​ 数据来源与操作对应 ：

  ​ 操作类型	​ 数据来源示例	​ 链路中的体现
  增（Create）	用户上传文档、运营批量导入	用户提交表单 → 后端校验 → 插入数据库 → 返回成功
  删（Delete）	用户删除文档、系统定时清理过期数据	用户点击删除 → 后端鉴权 → 删除数据库 → 返回成功
  改（Update）	用户编辑文档、系统自动修正数据	用户修改内容 → 后端校验 → 更新数据库 → 返回新数据
  查（Read）	用户浏览文档、搜索、筛选	用户请求数据 → 后端查询数据库 → 返回结果

  1. ​**索引优化**：  
     - MySQL的 `chart_data` 表对 `keyword` 和 `classification` 字段建立联合索引  
     - 避免全表扫描，加速查询  
  
  2. ​**事务与锁**：  
     - 更新知识库访问计数时使用乐观锁（避免并发冲突）  

阶段6：前端渲染页面（Vue + ECharts）

1. ​**数据接收**：  
   - Axios拦截响应 → 错误统一处理（如401未授权跳转登录页）  
   - 数据存储到Vuex的 `searchResults` 状态  

2. ​**动态渲染**：  
   - 列表渲染：`v-for="item in results"` 循环生成卡片  
   - 图表渲染：ECharts根据 `chart_type` 初始化柱状图/折线图  
   - 交互功能：点击收藏按钮 → 调用 `/api/favorite` 接口  

3. ​**性能优化**：  
   - 图片懒加载（`<img v-lazy="item.image">`）  
   - 虚拟滚动（长列表优化）  

阶段7：连接关闭（四次挥手）

1. ​**四次挥手触发时机**：  
   - 用户离开页面或浏览器标签关闭时触发  
   - 若为HTTP/1.1 Keep-Alive，连接会保持复用  

2. ​**挥手过程**：  
   - 客户端发送FIN → 服务端ACK → 服务端发送FIN → 客户端ACK  
   - ​**技术问题**：若第四次ACK丢失，服务端会重发FIN  

三、关键流程串联（以搜索功能为例）

1. ​**用户侧**：输入关键词 → 点击搜索按钮  
2. ​**网络层**：DNS → 三次握手 → HTTPS加密 → 发送HTTP GET请求  
3. ​**服务端侧**：Nginx → Spring Boot → Redis缓存 → MySQL增、删、改、查  
4. ​**数据侧**：MySQL返回数据 → Redis缓存结果 → JSON序列化  
5. ​**前端侧**：接收JSON → Vuex更新 → ECharts渲染图表  
6. ​**连接关闭**：四次挥手释放资源  

1. ​ URL输入 ：用户访问 https://example.com/upload 。
2. ​ TCP握手 ：建立连接。
3. ​ 前端请求 ：提交表单（POST请求，含文档文件）。
4. ​ 后端处理 ：
   • 校验文件格式 → 调用内容安全API → ​ 插入数据库（增操作）​ → 更新缓存。
5. ​ 数据返回 ：返回 { "code": 200, "doc_id": 456 } 。
6. ​ 前端渲染 ：跳转到文档详情页 https://example.com/docs/456 （触发查操作）。
7. ​ TCP挥手 ：释放连接。