知识库全链路交互逻辑

阶段顺序

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请求：  ```javascriptaxios.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：  ```sqlSELECT * FROM chart_data WHERE keyword = '金融趋势' AND classification = '金融' ORDER BY publish_time DESC```- 结果写入Redis（设置过期时间）  3. ​**响应封装**：  - 将数据库结果转为JSON格式（使用Jackson库）  - 添加HTTP头（如 `Content-Type: application/json`）  

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

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. ​**连接关闭**：四次挥手释放资源