SpringBoot+Vue全栈审批系统开发与优化实践-代码聚汇网

SpringBoot+Vue全栈审批系统开发与优化实践

牛新哲

1. 项目概述：SpringBoot+Vue+MySQL全栈申报审批系统

这个入校申报审批系统是一个典型的现代化前后端分离应用，采用目前企业级开发中最主流的SpringBoot+Vue技术栈。我在实际教育信息化项目实施中发现，传统纸质审批流程平均耗时3-5个工作日，而数字化系统能将审批周期压缩到2小时内。本系统源码经过完整测试，包含用户管理、申报提交、多级审批、数据统计等核心模块，特别适合高校、中小学等教育机构快速部署使用。

系统采用MVC三层架构设计：

前端：Vue 2.x + Element UI组件库
后端：SpringBoot 2.7 + MyBatis Plus
数据库：MySQL 8.0
构建工具：Maven + Node.js

提示：源码包已配置好Maven和npm依赖，导入IDE后只需修改数据库连接配置即可启动，真正实现"开箱即用"。

2. 环境准备与快速部署

2.1 基础环境配置

在Windows/Linux/macOS系统下均测试通过，推荐配置：

JDK 1.8+（实测OpenJDK 11兼容性最佳）
MySQL 8.0（需开启大小写敏感配置）
Node.js 14.x
IDE推荐IntelliJ IDEA + Vue插件

数据库初始化脚本已包含在源码的/sql目录下，执行顺序为：

创建数据库school_approval
执行table_mysql.sql建表
执行data_mysql.sql初始化基础数据

2.2 后端SpringBoot配置要点

修改application.yml关键配置：

yaml复制spring:
  datasource:
    url: jdbc:mysql://localhost:3306/school_approval?useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
  redis:
    host: localhost
    port: 6379
    
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 开发时开启SQL日志

常见启动问题解决方案：

报错Failed to configure a DataSource：检查MySQL服务是否启动
报错java.lang.UnsupportedClassVersionError：确认JDK版本≥1.8
端口冲突：修改server.port=8081

2.3 前端Vue项目启动

进入/frontend目录执行：

bash复制npm install --registry=https://registry.npm.taobao.org
npm run dev

我遇到过npm install卡在sass-loader安装的问题，解决方案是：

先单独安装：npm install node-sass --sass-binary-site=https://npm.taobao.org/mirrors/node-sass
再执行完整install

3. 核心功能模块解析

3.1 多级审批流程设计

系统采用状态机模式管理审批流程：

java复制public enum ApprovalStatus {
    DRAFT(0, "草稿"),
    SUBMITTED(1, "已提交"),
    DEPARTMENT_APPROVED(2, "部门通过"),
    SCHOOL_APPROVED(3, "学校通过"),
    REJECTED(-1, "已驳回");
    // 省略getter/setter
}

审批流程图解：

code复制申报人提交 → 部门管理员审批 → 校领导审批 → 归档
           ↘ 任一环节驳回 → 返回申报人

3.2 动态表单实现方案

采用JSON Schema定义表单结构，前端通过v-for动态渲染：

vue复制<el-form-item 
  v-for="(item, index) in formSchema" 
  :key="index"
  :label="item.label">
  <component 
    :is="item.componentType" 
    v-model="formData[item.field]"
    :options="item.options"/>
</el-form-item>

后端存储使用MySQL的JSON类型字段：

sql复制CREATE TABLE `approval_form` (
  `form_data` json DEFAULT NULL COMMENT '动态表单数据'
);

3.3 权限控制实现

基于RBAC模型设计，核心表关系：

用户表sys_user
角色表sys_role
菜单表sys_menu
用户角色关联表sys_user_role
角色菜单关联表sys_role_menu

Spring Security配置示例：

java复制@Override
protected void configure(HttpSecurity http) {
    http.authorizeRequests()
        .antMatchers("/approval/submit").hasAnyRole("TEACHER","STAFF")
        .antMatchers("/approval/approve").hasRole("DEPARTMENT_ADMIN")
        .anyRequest().authenticated();
}

4. 关键技术深度优化

4.1 审批流引擎优化

原始方案采用硬编码审批逻辑，我改进为可配置化的审批流设计：

java复制public interface ApprovalHandler {
    void handle(ApprovalContext context);
}

@Service
@ApprovalHandlerType(type = "DEPARTMENT")
public class DeptApprovalHandler implements ApprovalHandler {
    @Override
    public void handle(ApprovalContext context) {
        // 部门审批特有逻辑
    }
}

通过策略模式+注解实现处理器自动注册，新增审批环节只需添加新Handler类。

4.2 前后端数据交互规范

定义统一响应体：

java复制public class R<T> implements Serializable {
    private int code;
    private String msg;
    private T data;
    
    public static <T> R<T> ok(T data) {
        return new R<>(200, "success", data);
    }
}

前端封装axios拦截器：

javascript复制service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      Message.error(res.msg || 'Error')
      return Promise.reject(new Error(res.msg || 'Error'))
    }
    return res.data
  }
)

4.3 性能优化实践

接口缓存：对频繁访问的审批统计接口添加Redis缓存

java复制@Cacheable(value = "approvalStats", key = "#deptId")
public ApprovalStatsVO getStatsByDept(String deptId) {
    // 数据库查询逻辑
}

批量操作优化：使用MyBatis Plus的saveBatch方法时，实测每批500条性能最佳
Vue组件异步加载：

javascript复制const ApprovalList = () => import('./views/approval/List.vue')

5. 二次开发指南

5.1 扩展审批类型

数据库新增审批类型表approval_type
后端新增ApprovalTypeController
前端在src/api/approvalType.js添加接口定义
在src/views/approval/type下添加管理页面

5.2 集成短信通知

以阿里云短信为例：

java复制public void sendSms(String phone, String templateCode, Map<String,String> params) {
    SendSmsRequest request = new SendSmsRequest()
        .setPhoneNumbers(phone)
        .setTemplateCode(templateCode)
        .setTemplateParam(JSON.toJSONString(params));
    client.getAcsResponse(request);
}

需在审批状态变更时触发：

java复制@EventListener
public void handleApprovalEvent(ApprovalEvent event) {
    if (event.getStatus() == APPROVED) {
        smsService.sendApproveNotice(event.getApplicantPhone());
    }
}

5.3 数据可视化扩展

集成ECharts实现审批数据统计：

vue复制<template>
  <div ref="chart" style="width:600px;height:400px"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart)
    chart.setOption({
      tooltip: {},
      xAxis: { data: ['通过', '驳回', '待审批'] },
      series: [{ type: 'bar', data: [120, 20, 35] }]
    })
  }
}
</script>

6. 生产环境部署建议

6.1 宝塔面板部署方案

安装Tomcat 9和MySQL
后端打包：

bash复制mvn clean package -DskipTests

将生成的target/*.jar上传至服务器

前端构建：

bash复制npm run build

将dist目录内容部署到Nginx

6.2 Docker容器化部署

编写Dockerfile：

dockerfile复制FROM openjdk:11-jre
COPY target/school-approval.jar /app.jar
ENTRYPOINT ["java","-jar","/app.jar"]

使用docker-compose编排：

yaml复制version: '3'
services:
  app:
    build: .
    ports:
      - "8080:8080"
    depends_on:
      - mysql
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: 123456

6.3 安全加固措施

接口防护：

java复制@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .addFilter(new JwtAuthenticationFilter())
            .sessionManagement()
            .sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }
}

密码加密存储：

java复制public String encryptPassword(String raw) {
    return new BCryptPasswordEncoder().encode(raw);
}

定期备份方案：

bash复制mysqldump -uroot -p school_approval > backup_$(date +%F).sql

这套系统在我参与的三所学校信息化改造项目中均稳定运行超过1年，日均处理审批请求300+。特别提醒：正式上线前务必修改默认管理员账号admin/123456，并做好数据备份策略。对于高并发场景，建议增加Redis缓存层和Nginx负载均衡配置。