【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

   <!-- MyBatis映射文件 -->
   <select id="selectById" resultType="User">
       SELECT * FROM user WHERE id = #{id}
   </select>

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 请求并获取用户数据。

<template>
  <div>
    <h2>用户列表</h2>
    <el-table :data="userList" style="width: 100%">
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="time" label="注册时间">
        <template #default="{ row }">
          {{ formatTime(row.time) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userList: [] // 存储用户数据
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    // 获取用户数据
    async fetchUsers() {
      try {
        const response = await axios.get('/api/users');
        this.userList = response.data;
      } catch (error) {
        console.error('获取用户列表失败:', error);
      }
    },
    // 格式化时间（根据后端返回的时间类型调整）
    formatTime(time) {
      return new Date(time).toLocaleString(); // 简单格式化
    }
  }
};
</script>

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

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

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

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

 this.userList = response.data;

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

<template>
  <div>
    <h2>用户列表</h2>
    <el-table :data="userList" style="width: 100%">
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="time" label="注册时间">
        <template #default="{ row }">
          {{ formatTime(row.time) }}
        </template>
      </el-table-column>
    </el-table>
  </div>

:data（数据源）会获取到userList
prop会根据返回的JSON字段各取所需，就这样呈现到了页面上。
         根据这个流程，你可以增删改查了。

<!---------------------  -----          分隔符                          ----------------------------->
 

（附加篇）

且慢！为什么这个用户列表看起来只有一行（指的是 id  name time)但实际会显示很多行呢？

这就是通过 Vue 和 Element UI 的以下机制：

(1).:data="userList" 的作用

当 userList 是一个数组时（例如包含 3 个用户对象），<el-table> 会 自动遍历数组的每一项，为每个对象生成一行。相当于隐式执行了类似这样的逻辑：
 

<table>
  <tr v-for="(item, index) in userList" :key="index">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.time }}</td>
  </tr>
</table>

(2) <el-table-column> 的角色

• 每个 <el-table-column> 只是定义 列的规则（如标题、对齐方式等），而非具体数据。

• prop="id" 告诉表格："在渲染每一行时，取当前行对象的 id 属性显示在这一列"。
   

3. 为什么代码看似简单却能渲染多行？

这是 Element UI 的设计哲学：

1. 声明式编程：您只需告诉表格"数据是什么"和"每列显示什么字段"，而无需手动写循环。

2. 隐式遍历：<el-table> 内部已经封装了 v-for 的逻辑，开发者无需关心遍历细节。

3. 数据驱动：表格行数完全由 :data 绑定的数组长度决定。