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

一、前言

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

二、技术栈选型

三、后端项目搭建（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