【SpringBoot】20 - SpringBoot中的Ajax和MyBatis究竟是什么？

文章目录

- 前言
- 一、Ajax：前端的异步通信引擎
- - [1、Ajax 是什么？](#1、Ajax 是什么？)
  - [2、Ajax 在 Spring Boot 前端中的体现](#2、Ajax 在 Spring Boot 前端中的体现)
  - [3、Ajax 的作用总结](#3、Ajax 的作用总结)
- 二、MyBatis：后端的数据库桥梁
- - [1、MyBatis 是什么？](#1、MyBatis 是什么？)
  - [2、MyBatis 在 Spring Boot 后端中的体现](#2、MyBatis 在 Spring Boot 后端中的体现)
  - - [（1）Controller 层：接收前端请求](#（1）Controller 层：接收前端请求)
    - [（2）Service 层：处理业务逻辑](#（2）Service 层：处理业务逻辑)
    - [（3）Mapper 层：MyBatis 的核心接口](#（3）Mapper 层：MyBatis 的核心接口)
    - [（4）SQL 映射：定义数据库查询](#（4）SQL 映射：定义数据库查询)
  - [3、MyBatis 的作用总结](#3、MyBatis 的作用总结)
- [三、Ajax 与 MyBatis 的协作流程](#三、Ajax 与 MyBatis 的协作流程)
- 四、总结

前言

在现代Web开发中，前后端分离架构已经成为主流。Spring Boot作为后端开发的热门框架，常与前端技术Ajax和持久层框架MyBatis配合使用，构建高效、灵活的Web应用。那么，Ajax和MyBatis在Spring Boot项目中究竟是什么角色？它们如何协同工作？本文将带你深入理解它们的本质与协作流程。

一、Ajax：前端的异步通信引擎

1、Ajax 是什么？

Ajax（Asynchronous JavaScript and XML）是一种前端技术，用于在不刷新整个页面的情况下，与服务器进行异步数据交互。它使得网页能够动态更新内容，提升用户体验。

虽然名字中有"XML"，但现代开发中更多使用 JSON 格式传输数据。Ajax 的核心是通过 JavaScript 发起 HTTP 请求，获取数据后局部更新页面。

2、Ajax 在 Spring Boot 前端中的体现

在基于 Vue、React 等前端框架的 Spring Boot 项目中，Ajax 通常通过 axios 或 fetch 等库封装实现。

例如，在 Vue 中调用后端接口：

javascript 复制代码

axios.get('/api/attendance/stats')
  .then(response => {
    console.log(response.data);
  });

前端接口：

或者使用封装的方法：

javascript 复制代码

D.getAttendanceStats().then(response => {
    attendPersonnel.value = response.data.attendCount;
    totalPersonnel.value = response.data.totalCount;
});

这里的 D.getAttendanceStats() 本质上就是封装了一个 Ajax 请求，向 Spring Boot 后端发送 GET 请求，获取出勤统计数据。

后端controller体现：

3、Ajax 的作用总结

异步通信：无需刷新页面即可获取数据。
动态更新：根据返回数据动态更新页面内容。
前后端解耦：前端通过 API 与后端交互，不依赖服务器端渲染。

✅ 简单说：Ajax 是前端向后端"要数据"的工具。

二、MyBatis：后端的数据库桥梁

1、MyBatis 是什么？

MyBatis 是一个优秀的持久层框架，它简化了 Java 应用与数据库的交互。它通过 XML 或注解的方式，将 SQL 语句与 Java 方法进行映射，避免了传统 JDBC 的繁琐代码。

MyBatis 的核心思想是：让开发者专注于 SQL，而不是数据库连接和结果集处理。

2、MyBatis 在 Spring Boot 后端中的体现

在 Spring Boot 项目中，MyBatis 通常与 Spring Boot Starter MyBatis 集成，通过以下几层协作完成数据库操作：

（1）Controller 层：接收前端请求

java 复制代码

@RestController
@RequestMapping("/api")
public class AttendanceController {

    @Autowired
    private AttendanceService attendanceService;

    @GetMapping("/attendance/stats")
    public Result getAttendanceStats() {
        Map<String, Object> stats = attendanceService.getAttendanceStats();
        return Result.success(stats);
    }
}

Controller 接收来自前端的 Ajax 请求，调用 Service 层处理业务逻辑。

（2）Service 层：处理业务逻辑

java 复制代码

@Service
public class AttendanceService {
    @Autowired
    private AttendanceMapper attendanceMapper;

    public Map<String, Object> getAttendanceStats() {
        return attendanceMapper.selectStats();
    }
}

Service 层负责协调数据获取，调用 MyBatis 的 Mapper 接口。

（3）Mapper 层：MyBatis 的核心接口

java 复制代码

@Mapper
public interface AttendanceMapper {
    Map<String, Object> selectStats();
}

这是一个接口，MyBatis 会根据方法名找到对应的 SQL 语句。

（4）SQL 映射：定义数据库查询

xml 复制代码

<select id="selectStats" resultType="map">
    SELECT 
        COUNT(*) AS totalCount,
        SUM(CASE WHEN status = 'PRESENT' THEN 1 ELSE 0 END) AS attendCount,
        MAX(checkin_time) AS latestDate
    FROM attendance_record
</select>

MyBatis 将这条 SQL 的执行结果自动映射为 Java 的 Map 对象，返回给前端。

3、MyBatis 的作用总结

SQL 映射：将 Java 方法与 SQL 语句绑定。
结果映射：自动将数据库记录转换为 Java 对象。
简化开发：无需手动处理 Connection、Statement、ResultSet。

✅ 简单说：MyBatis 是后端从数据库"查数据"的桥梁。

三、Ajax 与 MyBatis 的协作流程

Ajax 和 MyBatis 虽然分别位于前后端，但它们通过 HTTP API 紧密协作，完成数据的完整流转。以下是典型的数据请求流程：

复制代码

用户浏览器（前端）
       ↓
[Vue 页面] → 调用 D.getAttendanceStats() 
       ↓
Ajax 发起请求 → GET /api/attendance/stats
       ↓
Spring Boot 后端 Controller 接收请求
       ↓
Controller 调用 Service 层
       ↓
Service 调用 MyBatis Mapper
       ↓
MyBatis 执行 SQL 查询数据库
       ↓
数据库返回数据（如 totalCount=28, attendCount=20）
       ↓
MyBatis 将结果映射为 Java Map
       ↓
后端返回 JSON 响应：{ "code": 200, "data": { ... } }
       ↓
Ajax 收到响应，执行 .then() 回调
       ↓
Vue 更新页面数据：attendPersonnel.value = response.data.attendCount
       ↓
页面动态显示最新出勤信息 ✅

四、总结

技术	所在位置	核心作用	关键特点
Ajax	前端	向后端发起异步请求	无需刷新页面，动态更新数据
MyBatis	后端	执行 SQL 查询数据库	简化数据库操作，自动映射结果

Ajax 是前端的"手"，负责发起请求、获取数据。
MyBatis 是后端的"脚"，负责连接数据库、查询数据。
它们通过 RESTful API 连接，共同实现前后端数据交互。

在 Spring Boot 项目中，理解 Ajax 和 MyBatis 的分工与协作，是掌握全栈开发的关键一步。只有前后端高效配合，才能构建出响应迅速、体验流畅的现代 Web 应用。