初识别三层架构

三层架构理解：

当客户端发送请求GET /users/list时，完整流程如下：

1. 客户端请求
   浏览器或其他客户端发送 HTTP 请求到服务器。
2. DispatcherServlet 接收请求
   Spring MVC 的前端控制器DispatcherServlet捕获请求，根据@RequestMapping注解找到对应的UserController#findAll()方法。
3. Controller 调用 Service
   UserController注入了UserService，调用其getAllUsers()方法。
4. Service 调用 Dao
   UserService注入了UserDao，调用其getAllUsers()方法获取数据。
5. Dao 访问文件
   UserDao通过类加载器读取user.txt文件并解析为User对象列表。

如何与前端界面进行交互的

浏览器请求index.html → 服务器返回HTML → 浏览器解析Vue代码 →
Vue mounted钩子触发axios请求 → 请求到达Spring Controller →
Controller调用Service → Service调用Dao → Dao读取文件 →
数据返回Service → Service返回Controller → Controller返回JSON →
axios接收响应 → Vue更新数据 → 表格渲染完成

服务器返回HTML

"服务器返回 HTML" 是 Web 应用的起点，浏览器先加载 HTML 骨架，再通过 JS 与后端 API 交互获取数据，最终完成页面渲染。这种模式使前后端分离更加彻底，提升了开发效率和可维护性。

在没有index.html文件时就需要显示调用

Spring Boot 不会自动将user.html视为默认首页，需显式访问

为什么最终访问的是user.html(前端页面的名字)而不是请求的/list

1. 前后端分离的请求流程

当你在浏览器中输入 URL 并访问时，完整的流程如下：

步骤 1：浏览器请求 HTML 页面

1. 用户在浏览器输入：http://localhost:8080/user.html（或根路径/）
2. 浏览器发送 HTTP 请求到服务器：GET /user.html
3. 服务器查找static目录下的user.html文件并返回

步骤 2：浏览器解析 HTML 并执行 JS

1. 浏览器接收 HTML 内容并开始解析
2. 遇到 JS 引用（如 Vue、axios），发送请求获取这些资源
3. 执行 Vue 初始化代码，创建 Vue 实例

步骤 3：前端 JS 发送 API 请求

1. Vue 实例在mounted钩子中调用search()方法
2. search()方法使用 axios 发送请求：GET /list
3. 该请求指向后端的 Controller 接口

步骤 4：后端处理 API 请求

1. 后端 Controller 接收/list请求
2. 调用 Service 和 Dao 获取数据
3. 将数据序列化为 JSON 返回给前端

步骤 5：前端渲染数据

1. 前端接收 JSON 数据并赋值给userList
2. Vue 检测数据变化，自动更新 DOM（表格）

2. 关键区别：页面请求 vs API 请求

3. 为什么不能直接请求 /list？

如果你直接在浏览器地址栏输入/list，会发生以下情况：

1. 浏览器发送请求：GET /list
2. 后端返回 JSON 数据（如[{id:1,username:"admin"}]）
3. 浏览器将 JSON 数据作为纯文本显示在页面上（而非 HTML 表格）

这是因为：

• 浏览器默认发送页面请求，期望接收 HTML 内容
• /list是 API 接口，只返回数据，不返回 HTML
• 数据渲染逻辑（如表格生成）在前端 JS 中，而非后端

为什么原来的vue可以直接渲染（学习vue可以直接渲染）原因：

因为原来提供的是json格式的文件，不需要用Java后端进行解析

Vue 可以直接渲染 JSON 数据，但对于其他格式的数据：

1. 简单场景：可以在前端使用 JavaScript 解析。
2. 复杂场景：推荐通过后端 API 中转，将数据转换为 JSON 后再返回给前端。