【5分钟Web】SpringBoot项目组件和架构流程

1.核 心 出 装

（只有我们五个）
Controller → Service → DAO → Mapper → Entity
//下午好

Entity：如果数据库里面的数据是赛博灵魂的话，entity就是用来承载着灵魂的躯壳

mapper是包分配的中介，分配java方法和sql语句

dao是判官，控制灵魂用的

组件                                             作用                                         示例代码
Entity	数据表的映射对象，代表了这个数据表的一个元素的载体	@Data class user{private String name}
Mapper	数据库操作接口(mybatis)，定义java方法和sql语句的映射，中介	@Mapper interface UserMapper
DAO	数据访问层，调用Mapper操作数据库	@Repository class UserDao { @Autowired private UserMapper mapper; ... }
Service	业务逻辑层，处理复杂业务规则，调用DAO	@Service class UserService { @Autowired private UserDao dao; public User getUser(Long id) { ... } }
Controller	接收HTTP请求，调用Service，返回响应（JSON/页面）	@RestController class UserController { @Autowired private UserService service; @GetMapping("/user/{id}") public User getUser().. }

流程为：

1. HTTP请求进入

   GET /user/123

2. Controller 接收请求

   @GetMapping("/user/{id}")
   public User getUser(@PathVariable Long id) {
       return userService.getUser(id); // 调用Service
   }

3. Service 处理业务逻辑

   public User getUser(Long id) {
       // 参数校验 id是否合法
       // 调用DAO获取数据
       User user = userDao.findById(id);
       // 3. 业务处理（如计算用户积分）
       return user;
   }

4. DAO 访问数据库

   public User findById(Long id) {
       return userMapper.selectById(id); // 调用MyBatis Mapper
   }

5. Mapper 执行SQL

   
   
       SELECT * FROM user WHERE id = #{id}
   

6. Entity 承载数据

   // 数据库查询结果自动映射到User对象
   User{id=123, name='张三', ...}

7. 数据返回客户端

   {"id": 123, "name": "张三", ...}
   
   

我们能够注意到，传入的请求GET的格式 "/user/123" 

实际上当前台调用 userMapper.findUserById(123) 时：

1. 方法调用 → 框架根据方法名findUserById找到对应的SQL。

2. 参数替换 → 将参数123替换SQL中的#{id}。

3. 执行SQL → 在数 据 库执行 SELECT * FROM user WHERE id = 123。

4. 结果映射 → 将查 询 结 果 自 动 封 装 User对象返回。

就像给厨师（MyBatis框架）一张菜谱（SQL），告诉他"当客人点findUserById这道菜时，你就按这个菜谱做"。厨师会自动处理食材（参数）和装盘（结果映射）。

现在到页面

2. Axios 简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它的主要特点包括：

1， 支 持 P r o m is e A P I

2，可 以 拦 截 请 求 和 响 应

3，自 动 转 换  JS ON 数 据

4，客 户 端 支 持 防 御 XSRF（跨 站 请 求 伪 造）

我们使用 Axios 来向后端发送 HTTP 请求并获取用户数据。

         我们注意到mounted()钩子函数调用了fetchUsers()方法，而FetchUsers()方法则是try了一下

const response = await axios.get("/api/users")

此处是异步操作：总所周知走流程很费时间，异步可以帮助你等待时间还能干别的操作，

JS是单线程语言，异步机制通过事件循环实现并发               ----狄克西普

 this.userList = response.data;

这一步就是把回应的得到的哒塔（根据前文会是个Json）扔到userLIst里面，而阴险的