357-基于Java的大型商场应急预案管理系统

大型商场应急预案管理系统技术文档

1. 项目概述

本项目是一个面向大型商场应急管理场景的后台管理系统，核心目标是将"应急预案、事件类型、预案类型、应急培训、应急演练、考核评分、统计分析、对应预案"等业务统一管理起来，形成从预案维护到培训演练、再到考核评价和数据看板的闭环。

项目采用前后端分离结构：

• 后端目录：springbootwk338
• 前端目录：admin
• 数据库脚本：design_357_shop.sql
• 后端默认上下文路径：/springbootwk338
• 后端默认端口：8080
• 前端开发端口：8081
• 数据库名称：design_357_shop

系统主要角色包括：

• 管理员：拥有后台管理能力，可维护员工、预案、培训、演练、考核、统计、类型字典等数据。
• 员工：可登录后台查看预案、培训、演练、考核和统计信息，部分模块仅具备查看权限。

2. 总体架构

项目整体采用典型的三层架构和前后端分离模式。
浏览器 / 管理后台
Vue 2 + Element UI
Axios HTTP Client
Spring Boot REST API
Controller 控制层
Service 业务层
DAO / Mapper 数据访问层
MySQL design_357_shop
Token 拦截器
静态资源 / 文件上传目录

2.1 后端分层

• controller：接收 HTTP 请求，完成参数接收、角色判断、调用 Service、返回统一 JSON。
• service：定义业务服务接口。
• service.impl：基于 MyBatis-Plus 的 ServiceImpl 实现分页、查询、保存、更新、删除等操作。
• dao：MyBatis-Plus Mapper 接口。
• mapper：XML SQL 映射文件，包含通用统计、联动查询和视图查询 SQL。
• entity：数据库表对应的实体类。
• entity.vo、entity.view、entity.model：用于不同接口或页面的数据视图、模型传输。
• config：MyBatis-Plus 分页插件、拦截器、静态资源映射配置。
• interceptor：Token 权限验证拦截器。
• utils：分页、返回结构、SQL 过滤、文件、MD5、百度工具类等。

2.2 前端分层

• src/views：页面组件，包括登录、首页、个人中心、修改密码、业务模块列表页。
• src/views/modules：各业务模块页面，如员工、预案、培训、演练、考核、统计等。
• src/router/router-static.js：静态路由配置。
• src/utils/http.js：Axios 实例，请求自动携带 Token。
• src/utils/menu.js：角色菜单与按钮权限配置。
• src/utils/storage.js：本地缓存封装。
• src/components：通用组件，如文件上传、富文本编辑、面包屑、首页组件等。
• src/assets：样式、图片资源。

3. 技术栈

3.1 后端技术栈

技术	版本 / 配置	作用
Java	1.8	后端运行环境
Spring Boot	2.2.2.RELEASE	Web 应用基础框架
Spring MVC	随 Spring Boot 引入	REST API 接口
MyBatis	2.1.1 starter	ORM / SQL 映射
MyBatis-Plus	2.3 / starter 1.0.5	通用 CRUD、分页、Wrapper 条件构造
MySQL Connector	Maven 默认解析版本	MySQL 数据库连接
Shiro Spring	1.3.2	项目依赖中引入，但当前主要使用自定义 Token 拦截器
FastJSON	1.2.8	JSON 序列化和响应处理
Commons IO	2.5	文件读取、复制、下载
Commons Lang3	3.0	字符串工具
Hutool	4.0.12	Bean 转 Map 等工具
Baidu AIP SDK	4.4.1	人脸比对扩展能力
Maven	pom.xml	依赖管理和构建

3.2 前端技术栈

技术	版本 / 配置	作用
Vue	2.6.10	前端视图框架
Vue Router	3.1.5	页面路由
Vue CLI	4.1.0	开发、构建脚手架
Element UI	2.13.0	后台管理 UI 组件
Axios	0.19.2	HTTP 请求
ECharts	4.6.0	首页和统计分析图表
Sass / SCSS	sass-loader 8	样式预处理
vue-quill-editor	3.0.6	富文本编辑
vue-json-excel	0.3.0	Excel 导出
print-js	1.5.0	打印能力
js-md5	0.7.3	前端 MD5 工具
vue-amap	0.5.10	地图能力扩展

3.3 数据库

• 数据库类型：MySQL
• 字符集：utf8
• 排序规则：utf8_general_ci
• 默认连接地址：jdbc:mysql://127.0.0.1:3306/design_357_shop
• 默认账号：root
• 默认密码：123456
• 初始化脚本：design_357_shop.sql

4. 项目目录说明

springboot_shop
├── admin/                         # Vue 后台管理前端
│   ├── src/
│   │   ├── views/                 # 页面组件
│   │   ├── views/modules/         # 业务模块页面
│   │   ├── utils/                 # http、菜单、缓存、工具
│   │   ├── router/                # 路由配置
│   │   ├── components/            # 通用组件
│   │   └── assets/                # 静态资源与样式
│   ├── package.json               # 前端依赖与脚本
│   └── vue.config.js              # Vue CLI 配置与代理
├── springbootwk338/               # Spring Boot 后端
│   ├── src/main/java/com/
│   │   ├── controller/            # REST 控制器
│   │   ├── service/               # 业务接口
│   │   ├── service/impl/          # 业务实现
│   │   ├── dao/                   # Mapper 接口
│   │   ├── entity/                # 实体、VO、View、Model
│   │   ├── interceptor/           # Token 拦截器
│   │   ├── config/                # Web 和 MyBatis 配置
│   │   └── utils/                 # 公共工具
│   ├── src/main/resources/
│   │   ├── mapper/                # MyBatis XML
│   │   ├── static/upload/         # 内置静态上传资源
│   │   └── application.yml        # 应用配置
│   ├── static/upload/             # 运行期上传资源目录
│   ├── pom.xml                    # Jar 构建配置
│   └── pom-war.xml                # War 构建配置
├── design_357_shop.sql            # 数据库建表和初始化数据
├── 项目设计文档.doc               # 原始设计文档
└── 技术文档.md                    # 当前技术文档

5. 功能模块

5.1 登录与角色权限

系统支持管理员和员工两类登录入口。

管理员登录：

• 接口：POST /springbootwk338/users/login
• 登录字段：username、password
• 默认演示账号：admin / 123456
• 数据表：users
• 登录成功后生成 Token，前端保存到 localStorage.Token

员工登录：

• 接口：POST /springbootwk338/yuangong/login
• 登录字段：username、password
• 其中 username 对应员工工号 yuangonggonghao
• 默认演示账号：user / 123456
• 数据表：yuangong
• 员工支持注册，注册接口为 /yuangong/register

权限控制分为两层：

• 前端按钮权限：由 admin/src/utils/menu.js 配置，不同角色看到不同菜单和按钮。
• 后端访问控制：由 AuthorizationInterceptor 校验请求头 Token，部分业务接口额外判断 Session 中的 role。

5.2 首页数据看板

首页页面：admin/src/views/home.vue

后端接口：GET /springbootwk338/dashboard/overview

首页展示内容：

• 应急预案总数
• 在职员工总数
• 预案类型总数
• 事件类型总数
• 预案类型数量柱状图
• 事件类型占比环形图
• 近 7 天预案新增趋势折线图

后端实现：DashboardController.overview()

该接口通过多个 Service 查询数据库：

• yuanxinxiService.selectCount() 统计预案数量。
• yuangongService.selectCount() 统计员工数量。
• yuanleixingService.selectCount() 统计预案类型数量。
• shijianleixingService.selectCount() 统计事件类型数量。
• yuanleixingtongjiService 查询预案类型统计表并按数量降序取前 4。
• shijianleixingtongjiService 查询事件类型统计表并按数量降序取前 5。
• 通过 yuanxinxi.addtime 计算近 7 天新增趋势。

5.3 员工管理

页面路径：/yuangong

后端接口前缀：/springbootwk338/yuangong

数据表：yuangong

主要功能：

• 员工登录
• 员工注册
• 员工信息分页查询
• 员工信息新增、修改、删除
• 员工详情查看
• 员工头像上传
• 员工密码重置

主要字段：

• 员工工号：yuangonggonghao
• 密码：mima
• 员工姓名：yuangongxingming
• 性别：xingbie
• 年龄：nianling
• 联系电话：lianxidianhua
• 图片：tupian

数据库对 yuangonggonghao 设置唯一索引，后端保存和注册时会校验工号是否重复。

5.4 预案信息管理

页面路径：/yuanxinxi

后端接口前缀：/springbootwk338/yuanxinxi

数据表：yuanxinxi

主要功能：

• 预案信息分页查询
• 预案新增、修改、删除
• 预案详情查看
• 预案类型、事件类型、处理部门、预案文本维护
• 从预案信息进入"对应预案"管理

主要字段：

• 预案名称：yuanmingcheng
• 预案类型：yuanleixing
• 事件类型：shijianleixing
• 处理部门：chulibumen
• 预案文本：yuanwenben

数据库对 yuanmingcheng 设置唯一索引，确保预案名称不重复。

5.5 预案类型管理

页面路径：/yuanleixing

后端接口前缀：/springbootwk338/yuanleixing

数据表：yuanleixing

主要功能：

• 预案类型新增、修改、删除、查询
• 为预案信息、培训、演练、考核、统计提供基础分类

示例数据：

• 火灾预案
• 踩踏预案
• 电梯故障预案
• 燃气泄漏预案
• 公共卫生预案
• 极端天气预案

5.6 事件类型管理

页面路径：/shijianleixing

后端接口前缀：/springbootwk338/shijianleixing

数据表：shijianleixing

主要功能：

• 事件类型新增、修改、删除、查询
• 为预案信息和事件统计提供分类基础

示例数据：

• 火灾事件
• 踩踏事件
• 设备故障
• 公共卫生
• 气象灾害
• 治安事件

5.7 应急培训管理

页面路径：/yingjipeixun

后端接口前缀：/springbootwk338/yingjipeixun

数据表：yingjipeixun

主要功能：

• 培训列表查询
• 培训新增、修改、删除
• 培训详情查看
• 关联预案后自动带出预案名称和预案类型
• 支持培训内容和课件附件维护

主要字段：

• 关联预案 ID：yuanxinxiid
• 培训标题：peixunbiaoti
• 关联预案：yuanmingcheng
• 预案类型：yuanleixing
• 培训内容：peixunneirong
• 培训时间：peixunshijian
• 培训讲师：peixunjiangshi
• 课件附件：kejianfujian

后端实现重点：

• YingjipeixunController.save() 和 update() 会先判断当前角色是否为管理员。
• fillPlanInfo() 根据 yuanxinxiid 查询 yuanxinxi 表，自动补齐 yuanmingcheng 和 yuanleixing。
• 查询条件支持按培训标题、预案名称、预案类型、讲师模糊搜索。
• 默认按 peixunshijian 和 id 倒序展示。

5.8 应急演练管理

页面路径：/yingjiyanlian

后端接口前缀：/springbootwk338/yingjiyanlian

数据表：yingjiyanlian

主要功能：

• 演练列表查询
• 演练新增、修改、删除
• 演练详情查看
• 关联预案和绑定培训
• 维护演练时间、地点、参与人员、演练内容、演练照片、总结附件

主要字段：

• 关联预案 ID：yuanxinxiid
• 绑定培训 ID：peixunid
• 演练名称：yanlianmingcheng
• 关联预案：yuanmingcheng
• 预案类型：yuanleixing
• 绑定培训：peixunbiaoti
• 演练时间：yanlianshijian
• 地点：didian
• 参与人员：canyurenyuan
• 演练内容：yanlianneirong
• 演练照片：yanlianzhaopian
• 总结附件：zongjiefujian

后端实现重点：

• 只有管理员能新增、修改、删除。
• fillRelatedInfo() 会根据 peixunid 自动补齐培训标题、预案 ID、预案名称和预案类型。
• 如果同时选择预案，会以 yuanxinxi 表中的最新预案信息覆盖展示字段。
• 查询条件支持演练名称、预案名称、预案类型、地点模糊搜索。

5.9 考核评分管理

页面路径：/yingjikaohe

后端接口前缀：/springbootwk338/yingjikaohe

数据表：yingjikaohe

主要功能：

• 考核记录列表查询
• 考核记录新增、修改、删除
• 考核详情查看
• 选择员工、选择演练后自动带出员工和预案演练信息
• 根据评分项自动计算综合分和考核等级
• 员工只能查看自己的考核记录

主要字段：

• 考核编号：kaohebianhao
• 员工 ID：yuangongid
• 员工工号：yuangonggonghao
• 员工姓名：yuangongxingming
• 关联预案 ID：yuanxinxiid
• 关联预案：yuanmingcheng
• 预案类型：yuanleixing
• 关联演练 ID：yanlianid
• 关联演练：yanlianmingcheng
• 响应速度：xiangyingsudu
• 流程规范：liuchengguifan
• 人员配合：renyuanpeihe
• 处置效果：chuzhixiaoguo
• 综合总分：zongfen
• 考核等级：kaohedengji
• 考核评语：kaohepingyu
• 评分日期：pingfenriqi

评分规则：

• zongfen = (响应速度 + 流程规范 + 人员配合 + 处置效果) / 4
• 分数保留 2 位小数。
• >= 90：优秀
• >= 70 且 < 90：合格
• < 70：不合格

后端实现重点：

• fillRelatedInfo() 根据员工 ID 查询 yuangong，自动填充员工工号和姓名。
• fillRelatedInfo() 根据演练 ID 查询 yingjiyanlian，自动填充演练名称、预案 ID、预案名称和预案类型。
• 如果未传考核编号，自动生成格式为 KHyyyyMMddHHmmss + 两位随机数 的编号。
• 如果未传评分日期，默认使用当前日期。
• 员工角色查询列表时自动增加 yuangonggonghao = 当前登录用户名 条件。
• 员工访问非本人考核详情时返回"无查看权限"。

5.10 统计分析

页面路径：/yingjitongji

后端接口：GET /springbootwk338/dashboard/emergencyStats

主要功能：

• 培训次数统计
• 演练次数统计
• 考核记录总数
• 考核平均分
• 按预案类型统计平均分柱状图
• 考核等级占比饼图
• 按预案类型统计培训 / 演练数量对比图

后端实现：

• 统计培训表 yingjipeixun
• 统计演练表 yingjiyanlian
• 统计考核表 yingjikaohe
• calcAverageScore() 计算总体平均分。
• buildScoreBar() 按预案类型计算平均分。
• buildGradePie() 统计优秀、合格、不合格数量。
• buildActivityBar() 按预案类型统计培训数量与演练数量。

权限说明：

• 当前接口要求 Session 中角色为"管理员"。
• 如果员工访问该接口，后端返回"无查看权限"。

5.11 预案类型统计管理

页面路径：/yuanleixingtongji

后端接口前缀：/springbootwk338/yuanleixingtongji

数据表：yuanleixingtongji

主要功能：

• 维护各预案类型的统计编号、数量、登记日期、备注。
• 支持报表按钮，用于前端图表或表格统计展示。
• 首页预案类型数量柱状图也读取该表。

主要字段：

• 统计编号：tongjibianhao
• 预案类型：yuanleixing
• 数量：shuliang
• 登记日期：dengjiriqi
• 备注：beizhu

数据库对 tongjibianhao 设置唯一索引。

5.12 事件类型统计管理

页面路径：/shijianleixingtongji

后端接口前缀：/springbootwk338/shijianleixingtongji

数据表：shijianleixingtongji

主要功能：

• 维护各事件类型的统计编号、数量、登记日期、备注。
• 支持报表展示。
• 首页事件类型占比图读取该表。

主要字段：

• 统计编号：tongjibianhao
• 事件类型：shijianleixing
• 数量：shuliang
• 登记日期：dengjiriqi
• 备注：beizhu

数据库对 tongjibianhao 设置唯一索引。

5.13 对应预案管理

页面路径：/duiyingyuan

后端接口前缀：/springbootwk338/duiyingyuan

数据表：duiyingyuan

主要功能：

• 记录受灾事件与对应预案的匹配关系。
• 支持查看、修改、删除。
• 管理员可从预案信息模块进入对应预案操作。

主要字段：

• 预案名称：yuanmingcheng
• 受灾类型：shouzaileixing
• 受灾范围：shouzaifanwei
• 受灾时间：shouzaishijian
• 受灾人员数目：shouzairenyuanshumu
• 登记时间：dengjishijian

6. 数据库设计

6.1 数据表清单

表名	中文含义	说明
users	用户表	管理员账号
token	Token 表	登录 Token、角色、过期时间
yuangong	员工	员工账号和基础信息
yuanxinxi	预案信息	应急预案主数据
yuanleixing	预案类型	预案分类字典
shijianleixing	事件类型	事件分类字典
yuanleixingtongji	预案类型统计	按预案类型维护统计数量
shijianleixingtongji	事件类型统计	按事件类型维护统计数量
duiyingyuan	对应预案	受灾情况与预案对应记录
yingjipeixun	应急培训	预案关联培训记录
yingjiyanlian	应急演练	培训、预案关联演练记录
yingjikaohe	考核评分	员工参与演练后的评分记录
config	配置文件	图片、地图、人脸识别等配置项

6.2 核心表关系

系统没有在数据库层面创建外键约束，业务关系主要由字段约定和后端逻辑维护。
yuanxinxiid
yuanxinxiid
peixunid
yanlianid
yuangongid
yuanleixing
shijianleixing
YUANXINXI
YINGJIPEIXUN
YINGJIYANLIAN
YINGJIKAOHE
YUANGONG
YUANLEIXING
SHIJIANLEIXING

主要关系说明：

• 一个预案可以对应多条培训记录。
• 一个培训可以绑定多条演练记录。
• 一个演练可以产生多条员工考核记录。
• 员工与考核记录通过 yuangongid 和 yuangonggonghao 关联。
• 预案类型、事件类型以文本字段关联，没有外键限制。

6.3 关键唯一约束

表名	唯一字段	作用
yuangong	yuangonggonghao	保证员工工号唯一
yuanxinxi	yuanmingcheng	保证预案名称唯一
yuanleixingtongji	tongjibianhao	保证预案类型统计编号唯一
shijianleixingtongji	tongjibianhao	保证事件类型统计编号唯一
yingjikaohe	kaohebianhao	保证考核编号唯一

6.4 初始数据

初始化 SQL 中包含以下示例数据：

• 管理员账号：admin / 123456
• 员工账号：user / 123456
• 多条商场应急预案，例如火灾疏散、大客流踩踏、电梯故障、燃气泄漏、公共卫生、极端天气。
• 应急培训、应急演练、考核评分样例。
• 预案类型统计和事件类型统计样例。
• 首页轮播图配置 picture1、picture2、picture3。

7. 后端核心实现

7.1 启动类

后端启动类：

springbootwk338/src/main/java/com/SpringbootSchemaApplication.java

Spring Boot 启动后加载 Controller、Service、Mapper、拦截器、配置类，并读取 application.yml。

7.2 应用配置

配置文件：

springbootwk338/src/main/resources/application.yml

关键配置：

server:
  port: 8080
  servlet:
    context-path: /springbootwk338

spring:
  datasource:
    driverClassName: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/design_357_shop?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8
    username: root
    password: 123456
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB

MyBatis-Plus 配置：

• Mapper XML 路径：classpath*:mapper/*.xml
• 实体别名包：com.entity
• 开启驼峰下划线转换：map-underscore-to-camel-case: true
• 关闭二级缓存：cache-enabled: false
• 配置逻辑删除值，但当前主要表未显式使用逻辑删除字段。

7.3 统一返回结构

统一响应类：com.utils.R

成功响应默认格式：

{
  "code": 0,
  "data": {}
}

失败响应格式：

{
  "code": 500,
  "msg": "错误信息"
}

未登录响应：

{
  "code": 401,
  "msg": "请先登录"
}

7.4 Token 登录机制

核心类：

• TokenServiceImpl
• AuthorizationInterceptor
• TokenEntity
• token 数据表

登录流程：

1. 用户提交用户名、密码。
2. 登录接口查询对应用户表。
3. 校验成功后调用 tokenService.generateToken()。
4. 后端生成 32 位随机字符串作为 Token。
5. Token 写入或更新到 token 表。
6. Token 有效期为当前时间后 1 小时。
7. 前端将 Token 保存到 localStorage。
8. 后续请求通过请求头 Token 携带。
9. 拦截器根据 Token 查询 token 表并校验过期时间。
10. 校验成功后写入 Session：userId、role、tableName、username。

7.5 权限拦截器

核心类：AuthorizationInterceptor

主要职责：

• 设置跨域响应头。
• 放行 OPTIONS 预检请求。
• 对标记 @IgnoreAuth 的方法跳过登录校验。
• 从请求头读取 Token。
• 调用 TokenService.getTokenEntity() 校验 Token。
• 校验成功后将登录用户信息写入 Session。
• 校验失败返回 401 请先登录。

InterceptorConfig 将拦截器注册到所有路径：

registry.addInterceptor(getAuthorizationInterceptor())
        .addPathPatterns("/**")
        .excludePathPatterns("/static/**");

7.6 分页与查询

分页工具：

• Query
• PageUtils
• MPUtil

接口一般接收以下分页参数：

• page：当前页码
• limit：每页条数
• sort：排序字段
• order：排序方向，asc 或 desc

典型实现：

EntityWrapper<YuanxinxiEntity> ew = new EntityWrapper<YuanxinxiEntity>();
PageUtils page = yuanxinxiService.queryPage(
    params,
    MPUtil.sort(MPUtil.between(MPUtil.likeOrEq(ew, yuanxinxi), params), params)
);
return R.ok().put("data", page);

说明：

• MPUtil.likeOrEq() 根据字段值是否包含 % 判断模糊查询或等值查询。
• MPUtil.between() 处理 _start、_end 结尾的范围查询参数。
• MPUtil.sort() 根据 sort、order 添加排序。
• Query 会对 sidx、order 做 SQL 关键词过滤。

7.7 文件上传与下载

核心类：FileController

上传接口：

POST /springbootwk338/file/upload

下载接口：

GET /springbootwk338/file/download?fileName=xxx

实现逻辑：

• 上传文件不能为空。
• 根据原文件扩展名生成 时间戳.扩展名 文件名。
• 主上传目录为项目运行目录下的 static/upload。
• 同步复制到可用的 classpath 静态目录和源码静态目录，方便开发和运行环境访问。
• 下载时从多个上传目录中查找可读文件。

文件大小限制：

• 单文件最大：10MB
• 单请求最大：10MB

7.8 通用接口

核心类：CommonController

通用接口包括：

接口	功能
/option/{tableName}/{columnName}	获取某表某列去重列表，常用于下拉联动
/follow/{tableName}/{columnName}	根据某列值获取一条关联记录
/remind/{tableName}/{columnName}/{type}	数字或日期提醒数量统计
/cal/{tableName}/{columnName}	对某列求和、最大、最小、平均
/group/{tableName}/{columnName}	按某列分组统计
/value/{tableName}/{xColumnName}/{yColumnName}	按 X 轴分组汇总 Y 轴值
/location	根据经纬度调用百度地图获取城市信息
/matchFace	调用百度人脸比对能力

通用 SQL 位于：

springbootwk338/src/main/resources/mapper/CommonDao.xml

注意：这些接口中存在 ${table}、${column} 形式的动态 SQL 拼接，适合受控后台场景使用。若对外开放，需要增加表名和字段白名单校验。

7.9 统计看板实现

核心类：DashboardController

接口：

• /dashboard/overview
• /dashboard/emergencyStats

实现特点：

• 不依赖复杂 SQL，主要通过 Service 查询列表后在 Java 内存中组装图表数据。
• 图表返回结构贴近 ECharts 使用方式，例如 labels、values、items。
• emergencyStats 对管理员角色做额外校验。

8. 前端核心实现

8.1 HTTP 请求封装

文件：admin/src/utils/http.js

核心配置：

const http = axios.create({
  timeout: 1000 * 86400,
  withCredentials: true,
  baseURL: '/springbootwk338',
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})

请求拦截器：

• 从 localStorage 读取 Token。
• 写入请求头 Token。

响应拦截器：

• 如果响应 code === 401，跳转登录页。

8.2 前端代理

文件：admin/vue.config.js

开发服务器配置：

• 前端端口：8081
• API 前缀：/springbootwk338
• 代理目标：http://localhost:8080/springbootwk338/
• pathRewrite 将前缀重写为空，由后端上下文路径承接。

8.3 路由配置

文件：admin/src/router/router-static.js

主要路由：

路由	页面
/login	登录
/register	注册
/index	后台框架
/	首页看板
/yuangong	员工
/yuanxinxi	预案信息
/yuanleixing	预案类型
/shijianleixing	事件类型
/yuanleixingtongji	预案类型统计
/shijianleixingtongji	事件类型统计
/duiyingyuan	对应预案
/yingjipeixun	应急培训
/yingjiyanlian	应急演练
/yingjikaohe	考核评分
/yingjitongji	统计分析
/center	个人信息
/updatePassword	修改密码

8.4 菜单和按钮权限

文件：admin/src/utils/menu.js

管理员权限：

• 员工管理：查看、删除
• 预案信息管理：新增、查看、修改、删除、对应预案
• 应急演练管理：应急培训、应急演练、考核评分新增、查看、修改、删除；统计分析查看
• 预案类型管理：新增、查看、修改、删除
• 事件类型管理：新增、查看、修改、删除
• 预案类型统计管理：新增、查看、修改、删除、报表
• 事件类型统计管理：新增、查看、修改、删除、报表
• 对应预案管理：查看、删除、修改

员工权限：

• 应急培训：查看
• 应急演练：查看
• 考核评分：查看
• 预案信息：查看
• 预案类型：查看
• 事件类型：查看
• 预案类型统计：查看
• 事件类型统计：查看
• 对应预案：查看

前端权限判断函数：

admin/src/utils/utils.js -> isAuth(tableName, key)

8.5 登录页实现

文件：admin/src/views/login.vue

实现逻辑：

• 从 menu.js 获取可登录角色。
• 用户选择管理员或员工角色。
• 根据角色表名拼接登录接口：${tableName}/login。
• 登录成功后写入：
  • Token
  • role
  • sessionTable
  • adminName
  • lastRole
• 登录成功跳转 /index/。

8.6 图表实现

首页图表：

• 文件：admin/src/views/home.vue
• 接口：dashboard/overview
• 图表：预案类型柱状图、事件类型环形图、近 7 天趋势折线图。

统计分析图表：

• 文件：admin/src/views/modules/yingjitongji/list.vue
• 接口：dashboard/emergencyStats
• 图表：考核平均分柱状图、考核等级占比图、培训 / 演练对比图。

图表技术：

• 使用 ECharts 4.6.0。
• 使用 macarons 主题。
• 页面监听 resize，窗口变化时调用图表 resize()。
• 页面销毁时调用 dispose() 释放图表实例。

9. 主要接口说明

后端接口统一带上下文路径：

http://localhost:8080/springbootwk338

9.1 登录接口

方法	路径	说明
POST	/users/login	管理员登录
POST	/yuangong/login	员工登录
POST	/users/register	管理员注册接口，当前菜单不开放
POST	/yuangong/register	员工注册
GET	/users/logout	管理员退出
GET / POST	/yuangong/logout	员工退出
GET / POST	/users/resetPass	管理员密码重置为 123456
GET / POST	/yuangong/resetPass	员工密码重置为 123456
GET / POST	/users/session	获取当前管理员信息
GET / POST	/yuangong/session	获取当前员工信息

9.2 通用 CRUD 接口模式

多数业务模块遵循同一套接口模式：

方法	路径	说明
GET / POST	/{module}/page	后台分页列表
GET / POST	/{module}/list	前端分页列表
GET / POST	/{module}/lists	不分页列表
GET / POST	/{module}/query	条件查询单条视图
GET / POST	/{module}/info/{id}	后台详情
GET / POST	/{module}/detail/{id}	前端详情
POST	/{module}/save	后台新增
POST	/{module}/add	前端新增
POST	/{module}/update	修改
POST	/{module}/delete	批量删除
GET / POST	/{module}/remind/{columnName}/{type}	模块提醒数量

适用模块：

• yuangong
• yuanxinxi
• yuanleixing
• shijianleixing
• yuanleixingtongji
• shijianleixingtongji
• duiyingyuan

9.3 应急业务接口

模块	接口前缀	说明
应急培训	/yingjipeixun	培训查询、新增、修改、删除、详情
应急演练	/yingjiyanlian	演练查询、新增、修改、删除、详情
考核评分	/yingjikaohe	考核查询、新增、修改、删除、详情
首页看板	/dashboard/overview	首页汇总数据
统计分析	/dashboard/emergencyStats	培训、演练、考核统计分析

9.4 文件接口

方法	路径	说明
POST	/file/upload	上传文件，表单字段名为 file
GET	/file/download?fileName=xxx	下载文件

10. 运行与部署

10.1 环境要求

建议环境：

• JDK 1.8
• Maven 3.x
• MySQL 5.7 或 8.x
• Node.js 14.x
• npm 6.x 或匹配 Node 14 的 npm 版本

10.2 初始化数据库

1. 创建数据库：

CREATE DATABASE design_357_shop DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

2. 导入 SQL：

mysql -uroot -p design_357_shop < design_357_shop.sql

3. 检查后端配置：

springbootwk338/src/main/resources/application.yml

确认数据库连接：

url: jdbc:mysql://127.0.0.1:3306/design_357_shop?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8
username: root
password: 123456

10.3 启动后端

进入后端目录：

cd springbootwk338

启动：

mvn spring-boot:run

访问地址：

http://localhost:8080/springbootwk338

10.4 启动前端

进入前端目录：

cd admin

安装依赖：

npm install

启动开发服务：

npm run serve

访问地址：

http://localhost:8081/

10.5 打包部署

前端打包：

cd admin
npm run build

后端 Jar 打包：

cd springbootwk338
mvn clean package

后端 War 打包：

cd springbootwk338
mvn clean package -f pom-war.xml

说明：

• pom.xml 用于常规 Spring Boot Jar 构建。
• pom-war.xml 声明了 <packaging>war</packaging>，并将 Tomcat 设置为 provided，适合部署到外部 Tomcat。

11. 业务数据流说明

11.1 预案到考核的闭环流程

维护预案类型 / 事件类型
新增预案信息
创建应急培训
创建应急演练
员工参与演练
管理员录入考核评分
自动计算总分和等级
统计分析与看板展示

11.2 登录鉴权流程

token 表 Spring Boot 后端 Vue 前端 用户 token 表 Spring Boot 后端 Vue 前端 用户 输入账号、密码、角色 POST /users/login 或 /yuangong/login 校验账号密码 生成或更新 Token 返回 token 保存 Token 到 localStorage 后续请求头携带 Token 拦截器校验 Token 和过期时间 返回业务数据或 401

11.3 考核评分流程

选择员工
自动带出工号和姓名
选择演练
自动带出演练、预案、预案类型
录入四项评分
计算综合总分
生成优秀 / 合格 / 不合格等级
保存考核记录

12. 安全与权限说明

12.1 当前已有安全机制

• 所有非 @IgnoreAuth 接口均经过 Token 拦截器。
• Token 存储在数据库，包含用户 ID、用户名、角色、表名、过期时间。
• Token 默认 1 小时过期。
• 前端请求统一携带 Token。
• 后端部分核心接口检查管理员角色，例如培训、演练、考核的写操作。
• 员工查看考核详情时，后端校验当前员工是否为记录所属员工。
• 排序参数 sidx、order 经过 SQLFilter 过滤。

12.2 需要注意的点

• 数据库中的密码当前为明文保存，生产环境建议改为 BCrypt、PBKDF2 或其他不可逆哈希。
• 前端菜单权限只用于界面控制，不应作为安全边界；关键接口必须以后端权限校验为准。
• CommonDao.xml 使用 ${table}、${column} 动态拼接 SQL，建议增加表名和字段白名单。
• 当前业务关系主要靠 ID 和文本字段维护，数据库未加外键，删除数据时需要注意关联数据一致性。
• Shiro 依赖已引入，但当前鉴权主流程是自定义 Token 拦截器，并未完整配置 Shiro Realm。
• Token 写入 Session 后依赖请求携带 Cookie 和前端 withCredentials，跨域部署时需要正确配置域名、Cookie 和 CORS。

13. 扩展开发建议

13.1 新增业务模块

新增模块建议按照以下步骤：

1. 新增数据库表。
2. 新增 Entity、VO、View、Model。
3. 新增 Dao 接口和 mapper XML。
4. 新增 Service 和 ServiceImpl。
5. 新增 Controller，复用统一 CRUD 模式。
6. 前端新增 views/modules/{module}/list.vue 和 add-or-update.vue。
7. 在 router-static.js 注册路由。
8. 在 menu.js 为不同角色配置菜单和按钮权限。

13.2 优化权限控制

建议逐步将权限从前端菜单迁移到后端统一控制：

• 建立角色表、菜单表、按钮权限表。
• 后端接口根据 Token 解析角色并校验接口权限。
• 前端登录后从后端获取菜单树，而不是写死在 menu.js。
• 对新增、修改、删除接口统一增加角色注解或拦截器判断。

13.3 优化统计能力

当前统计主要基于已有统计表和 Java 内存聚合。后续可以优化为：

• 使用 SQL 聚合实时统计培训、演练、考核数据。
• 按月、季度、年度统计预案更新、演练覆盖和考核结果。
• 增加部门维度、区域维度、事件严重程度维度。
• 增加导出统计报表功能。

13.4 优化文件管理

建议增加：

• 文件类型白名单。
• 文件大小和文件名安全校验。
• 独立附件表，记录原文件名、存储文件名、模块、业务 ID、上传人、上传时间。
• 生产环境使用对象存储或统一文件服务器。

14. 常见问题

14.1 前端请求 404

检查项：

• 后端是否启动在 8080。
• 后端上下文路径是否为 /springbootwk338。
• 前端 http.js 的 baseURL 是否为 /springbootwk338。
• vue.config.js 代理目标是否正确。

14.2 登录后提示"请先登录"

检查项：

• 浏览器 localStorage 中是否存在 Token。
• 请求头是否携带 Token。
• token 表中的 Token 是否过期。
• 后端和前端是否跨域导致 Cookie 或 Header 异常。

14.3 数据库连接失败

检查项：

• MySQL 服务是否启动。
• 数据库 design_357_shop 是否存在。
• application.yml 中用户名和密码是否正确。
• MySQL 8 环境下时区参数是否正确。

14.4 文件上传后无法访问

检查项：

• 上传目录 static/upload 是否存在。
• 文件是否同步到 src/main/resources/static/upload 或运行期 classpath 目录。
• 静态资源映射是否包含 classpath:/static/。
• 前端拼接的文件访问地址是否包含 /springbootwk338/upload/。

15. 关键源码索引

文件	说明
springbootwk338/src/main/resources/application.yml	后端端口、上下文、数据库、上传配置
springbootwk338/src/main/java/com/SpringbootSchemaApplication.java	后端启动类
springbootwk338/src/main/java/com/interceptor/AuthorizationInterceptor.java	Token 权限拦截器
springbootwk338/src/main/java/com/config/InterceptorConfig.java	拦截器和静态资源配置
springbootwk338/src/main/java/com/config/MybatisPlusConfig.java	MyBatis-Plus 分页插件
springbootwk338/src/main/java/com/controller/DashboardController.java	首页和统计分析接口
springbootwk338/src/main/java/com/controller/YingjipeixunController.java	应急培训业务
springbootwk338/src/main/java/com/controller/YingjiyanlianController.java	应急演练业务
springbootwk338/src/main/java/com/controller/YingjikaoheController.java	考核评分业务
springbootwk338/src/main/java/com/controller/FileController.java	文件上传下载
springbootwk338/src/main/java/com/controller/CommonController.java	通用联动、统计、提醒接口
springbootwk338/src/main/java/com/utils/R.java	统一响应结构
springbootwk338/src/main/java/com/utils/Query.java	分页参数处理
springbootwk338/src/main/java/com/utils/MPUtil.java	MyBatis-Plus 查询工具
springbootwk338/src/main/resources/mapper/CommonDao.xml	通用动态统计 SQL
admin/src/utils/http.js	Axios 封装
admin/src/utils/menu.js	角色菜单和按钮权限
admin/src/router/router-static.js	前端路由
admin/src/views/login.vue	登录页
admin/src/views/home.vue	首页看板
admin/src/views/modules/yingjitongji/list.vue	应急演练统计分析
design_357_shop.sql	数据库结构和初始化数据