SpringBoot+Vue企业级管理系统实战开发指南

1. 项目概述

这是一个基于SpringBoot和Vue.js的企业级管理系统实战项目，主要实现了部门管理、员工管理、班级管理、学生管理、数据统计和登录认证六大功能模块。系统采用前后端分离架构，后端使用SpringBoot+MyBatis技术栈，前端采用Vue.js+ElementUI框架，是一个典型的企业级应用开发案例。

我在实际开发过程中发现，这类管理系统有几个关键点需要特别注意：首先是前后端数据交互的规范性和一致性，其次是权限控制的实现方式，最后是复杂查询的性能优化。这个项目完整实现了CRUD操作、分页查询、文件上传等企业开发中的常见需求，特别适合想要学习前后端分离开发的开发者参考。

2. 环境准备与项目搭建

2.1 技术栈选型

后端技术栈：

• Spring Boot 2.7.6：快速构建企业级应用
• MyBatis：持久层框架
• MySQL：关系型数据库
• PageHelper：分页插件
• JWT：认证机制
• Lombok：简化JavaBean开发

前端技术栈：

• Vue.js 2.x：前端框架
• ElementUI：UI组件库
• Axios：HTTP客户端
• Vue-router：路由管理

选择这些技术栈主要基于以下考虑：

1. SpringBoot的自动配置和起步依赖能极大简化项目搭建
2. Vue.js的响应式特性和组件化开发非常适合管理系统类项目
3. ElementUI提供了丰富的现成组件，能快速构建美观的界面

2.2 数据库设计

系统包含5张核心表：

sql复制-- 部门表
CREATE TABLE dept(
    id INT UNSIGNED PRIMARY KEY AUTO_INCREMENT COMMENT '主键ID',
    name VARCHAR(10) NOT NULL UNIQUE COMMENT '部门名称',
    create_time DATETIME NOT NULL COMMENT '创建时间',
    update_time DATETIME NOT NULL COMMENT '修改时间'
) COMMENT '部门表';

-- 员工表
CREATE TABLE emp (
    id INT UNSIGNED PRIMARY KEY AUTO_INCREMENT COMMENT 'ID',
    username VARCHAR(20) NOT NULL UNIQUE COMMENT '用户名',
    password VARCHAR(32) DEFAULT '123456' COMMENT '密码',
    name VARCHAR(10) NOT NULL COMMENT '姓名',
    gender TINYINT UNSIGNED NOT NULL COMMENT '性别, 说明: 1 男, 2 女',
    image VARCHAR(300) COMMENT '图像',
    job TINYINT UNSIGNED COMMENT '职位',
    entrydate DATE COMMENT '入职时间',
    dept_id INT UNSIGNED COMMENT '部门ID',
    create_time DATETIME NOT NULL COMMENT '创建时间',
    update_time DATETIME NOT NULL COMMENT '修改时间'
) COMMENT '员工表';

-- 班级表
CREATE TABLE clazz (
    id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT 'ID',
    name VARCHAR(30) NOT NULL UNIQUE COMMENT '班级名称',
    room VARCHAR(20) DEFAULT NULL COMMENT '班级教室',
    begin_date DATE NOT NULL COMMENT '开课时间',
    end_date DATE NOT NULL COMMENT '结课时间',
    master_id INT UNSIGNED NOT NULL COMMENT '班主任ID',
    create_time DATETIME NOT NULL COMMENT '创建时间',
    update_time DATETIME NOT NULL COMMENT '修改时间'
) COMMENT '班级表';

-- 学生表
CREATE TABLE student (
    id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT 'ID',
    name VARCHAR(10) NOT NULL COMMENT '姓名',
    no CHAR(10) NOT NULL UNIQUE COMMENT '学号',
    gender TINYINT UNSIGNED NOT NULL COMMENT '性别',
    phone VARCHAR(11) NOT NULL UNIQUE COMMENT '手机号',
    degree TINYINT UNSIGNED DEFAULT NULL COMMENT '最高学历',
    violation_count TINYINT UNSIGNED NOT NULL DEFAULT '0' COMMENT '违纪次数',
    violation_score TINYINT UNSIGNED NOT NULL DEFAULT '0' COMMENT '违纪扣分',
    clazz_id INT UNSIGNED NOT NULL COMMENT '班级ID',
    create_time DATETIME NOT NULL COMMENT '创建时间',
    update_time DATETIME NOT NULL COMMENT '修改时间'
) COMMENT '学生表';

数据库设计遵循了以下原则：

1. 每张表都有自增主键
2. 重要字段设置非空约束
3. 用户名、手机号等字段设置唯一约束
4. 包含创建时间和修改时间字段

2.3 后端项目初始化

pom.xml关键依赖：

xml复制<dependencies>
    <!-- Spring Boot Starter Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    
    <!-- MyBatis -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.3.0</version>
    </dependency>
    
    <!-- MySQL驱动 -->
    <dependency>
        <groupId>com.mysql</groupId>
        <artifactId>mysql-connector-j</artifactId>
        <scope>runtime</scope>
    </dependency>
    
    <!-- 分页插件 -->
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.4.2</version>
    </dependency>
    
    <!-- JWT -->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
        <version>0.9.1</version>
    </dependency>
</dependencies>

application.yml配置：

yaml复制server:
  port: 8080

mybatis:
  mapper-locations: classpath:mappers/*xml
  type-aliases-package: com.tlias.entity
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/tlias
    username: root
    password: 123456
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 100MB

pagehelper:
  reasonable: true

项目结构采用标准的Maven多模块结构：

code复制src/main/java
├── com.tlias
│   ├── config       # 配置类
│   ├── controller   # 控制器
│   ├── entity       # 实体类
│   ├── mapper       # Mapper接口
│   ├── service      # 服务层
│   └── WebTliasApplication.java # 启动类
src/main/resources
├── static
├── templates
└── application.yml

2.4 前端项目初始化

使用Vue CLI创建项目：

bash复制vue create web-tlias

添加ElementUI：

bash复制vue add element

项目目录结构：

code复制src/
├── api/          # 接口定义
├── assets/       # 静态资源
├── components/   # 公共组件
├── router/       # 路由配置
├── utils/        # 工具类
├── views/        # 页面组件
└── App.vue       # 根组件

3. 核心功能实现

3.1 部门管理模块

3.1.1 后端实现

实体类：

java复制@Data
@NoArgsConstructor
@AllArgsConstructor
public class Dept {
    private Integer id;
    private String name;
    private LocalDateTime createTime;
    private LocalDateTime updateTime;
}

Controller层：

java复制@RestController
@RequestMapping("depts")
@Slf4j
public class DeptController {
    
    @Autowired
    private DeptService service;

    @GetMapping
    public Result getDept(){
        List<Dept> list = service.getDeptList();
        return Result.success(list);
    }

    @DeleteMapping("/{id}")
    public Result deleteDeptById(@PathVariable("id") Integer id){
        service.deleteDeptById(id);
        return Result.success();
    }

    @PostMapping
    public Result save(@RequestBody Dept dept){
        service.save(dept);
        return Result.success();
    }

    @GetMa