Spring Boot + Vue + MyBatis 前后端分离开发实战指南

一、前言

前后端分离架构通过将前端页面展示与后端业务逻辑解耦，显著提升开发效率和系统可维护性。本文将以 用户管理系统 为例，详细演示如何使用 Spring Boot（后端）+ Vue（前端）+ MyBatis（持久层） 实现一个完整的前后端分离项目。

二、技术栈选型

技术模块	工具 / 框架	说明
后端框架	Spring Boot 3.x	快速构建 RESTful API，内置 Tomcat 服务器
持久层	MyBatis + MyBatis-Plus	简化数据库操作，支持代码生成和分页查询
数据库	MySQL 8.0	关系型数据库，存储业务数据
前端框架	Vue 3.x + Vue Router + Pinia	构建单页应用（SPA），实现组件化开发和状态管理
状态管理	Pinia	替代 Vuex，更简洁的状态管理方案
接口调用	Axios	前端发起 HTTP 请求与后端交互
跨域处理	Spring Boot CORS	解决前后端跨域问题
开发工具	IDEA（后端）、VSCode（前端）	主流开发工具，支持插件扩展和调试

三、后端项目搭建（Spring Boot + MyBatis）

3.1 创建 Spring Boot 项目

1. 通过 Spring Initializr 生成项目

   • 访问 https://start.spring.io/
   • 选择依赖：Spring Web、MyBatis Framework、MySQL Driver、Lombok
   • 项目结构如下：

backend/
├── src/main/java/com/example/backend/
│   ├── BackendApplication.java   # 启动类
│   ├── controller/               # 控制器层
│   ├── service/                  # 服务层
│   ├── mapper/                   # MyBatis映射层
│   └── entity/                   # 实体类
├── src/main/resources/
│   ├── application.yml           # 配置文件
│   └── mapper/                   # MyBatis SQL映射文件
└── pom.xml                       # Maven依赖

     2. 配置文件（application.yml）

server:
  port: 8080                       # 后端端口
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/user_db?useSSL=false&serverTimezone=UTC
    username: root                 # MySQL用户名
    password: 123456               # MySQL密码
  mybatis:
    mapper-locations: classpath:mapper/*.xml  # SQL映射文件路径
    type-aliases-package: com.example.backend.entity  # 实体类别名

3.2 定义实体类（Entity）

// User.java
package com.example.backend.entity;

import lombok.Data;

@Data
public class User {
    private Long id;
    private String username;
    private String password;
    private String email;
    private Integer age;
}

3.2 定义实体类（Entity）

// User.java
package com.example.backend.entity;

import lombok.Data;

@Data
public class User {
    private Long id;
    private String username;
    private String password;
    private String email;
    private Integer age;
}

3.3 实现 MyBatis