SpringBoot+Vue3搭建环保部门档案管理系统实操
一、环境准备与技术栈说明
本系统采用前后端分离架构，旨在解决环保部门对各类环评报告、监测数据、排污许可证等档案的数字化管理需求。后端选用 Spring Boot 3.2 搭配 MyBatis-Plus，前端选用 Vue 3 配合 Element Plus，数据库使用 MySQL 8.0。
开始编码前，请确保本地环境已配置以下基础软件：
- JDK 17：配置好 JAVA_HOME 环境变量。
- Node.js 20：建议配置 npm 淘宝镜像源以加速依赖下载。
- MySQL 8.0：服务处于启动状态，默认端口 3306。
- IDE：后端推荐 IntelliJ IDEA，前端推荐 VS Code。
二、数据库设计与初始化
首先在 MySQL 中执行以下脚本，创建数据库及核心档案表。该表包含了档案名称、类型（如：环评报告、验收报告）、存储路径及上传时间等关键字段。
请在 MySQL 客户端或 Navicat 中执行：
CREATE DATABASE IF NOT EXISTS env_archive_db DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE env_archive_db;
CREATE TABLE t_env_archive (
id BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID',
archive_name VARCHAR(255) NOT NULL COMMENT '档案名称',
archive_type VARCHAR(50) NOT NULL COMMENT '档案类型：环评报告/监测数据/排污许可证',
file_path VARCHAR(500) COMMENT '文件存储路径',
department VARCHAR(100) COMMENT '所属部门',
upload_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '上传时间',
is_deleted TINYINT DEFAULT 0 COMMENT '逻辑删除 0-未删 1-已删'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='环保档案表';
-- 插入初始化测试数据
INSERT INTO t_env_archive (archive_name, archive_type, department, file_path) VALUES
('某化工厂2023年度环评报告', '环评报告', '审批科', '/uploads/2023/report_a.pdf'),
('北区水质监测Q3数据', '监测数据', '监测中心', '/uploads/2023/data_q3.xlsx');
三、后端服务搭建
使用 Spring Initializr 创建项目，勾选依赖：Spring Web、MyBatis Framework、MySQL Driver、Lombok。手动添加 MyBatis-Plus 依赖以简化 CRUD 操作。
1. pom.xml 依赖配置
在
com.baomidou
mybatis-plus-boot-starter
3.5.5
com.mysql
mysql-connector-j
runtime
2. application.yml 配置
配置数据库连接及端口号，避免使用默认的 8080 以防冲突：
server:
port: 8088
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/env_archive_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
&useSSL=false
username: root
password: 123456 请修改为本地数据库密码
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
global-config:
db-config:
logic-delete-field: is_deleted
logic-delete-value: 1
logic-not-delete-value: 0
3. 实体类与接口编写
创建 entity.EnvArchive 实体类：
package com.example.envarchive.entity;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import java.time.LocalDateTime;
@Data
@TableName("t_env_archive")
public class EnvArchive {
@TableId(type = IdType.AUTO)
private Long id;
private String archiveName;
private String archiveType;
private String filePath;
private String department;
private LocalDateTime uploadTime;
}
创建 mapper.EnvArchiveMapper 接口：
package com.example.envarchive.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.envarchive.entity.EnvArchive;
import org.apache.ibatis.annotations.Mapper;
@Mapper
public interface EnvArchiveMapper extends BaseMapper {
}
4. 统一结果封装与业务层
为了规范返回格式，先创建 common.Result 类：
package com.example.envarchive.common;
import lombok.Data;
@Data
public class Result {
private Integer code;
private String msg;
private T data;
public static Result success(T data) {
Result r = new Result<>();
r.setCode(200);
r.setMsg("success");
r.setData(data);
return r;
}
}
编写 service.EnvArchiveService：
package com.example.envarchive.service;
import com.baomidou.mybatisplus.extension.service.IService;
import com.example.envarchive.entity.EnvArchive;
public interface EnvArchiveService extends IService {
}
编写 service.impl.EnvArchiveServiceImpl：
package com.example.envarchive.service.impl;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.envarchive.entity.EnvArchive;
import com.example.envarchive.mapper.EnvArchiveMapper;
import com.example.envarchive.service.EnvArchiveService;
import org.springframework.stereotype.Service;
@Service
public class EnvArchiveServiceImpl extends ServiceImpl implements EnvArchiveService {
}
5. 控制器层实现
创建 controller.EnvArchiveController，实现分页查询、新增和删除功能：
package com.example.envarchive.controller;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.envarchive.common.Result;
import com.example.envarchive.entity.EnvArchive;
import com.example.envarchive.service.EnvArchiveService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.;
@RestController
@RequestMapping("/api/archive")
public class EnvArchiveController {
@Autowired
private EnvArchiveService archiveService;
// 分页查询
@GetMapping("/page")
public Result> page(@RequestParam(defaultValue = "1") Integer pageNum,
@RequestParam(defaultValue = "10") Integer pageSize,
@RequestParam(required = false) String name) {
Page page = new Page<>(pageNum, pageSize);
QueryWrapper wrapper = new QueryWrapper<>();
if (name != null && !name.isEmpty()) {
wrapper.like("archive_name", name);
}
wrapper.orderByDesc("upload_time");
return Result.success(archiveService.page(page, wrapper));
}
// 新增或更新
@PostMapping
public Result save(@RequestBody EnvArchive archive) {
return Result.success(archiveService.saveOrUpdate(archive));
}
// 删除
@DeleteMapping("/{id}")
public Result delete(@PathVariable Long id) {
return Result.success(archiveService.removeById(id));
}
}
四、前端页面开发
在终端执行以下命令创建 Vue 3 项目并安装依赖：
npm create vite@latest env-archive-web -- --template vue
cd env-archive-web
npm install
npm install element-plus axios
1. main.js 入口配置
引入 Element Plus 组件库及样式：
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('app')
2. 封装 Axios 请求工具
创建 utils/request.js：
import axios from 'axios'
const request = axios.create({
baseURL: 'http://localhost:8088',
timeout: 5000
})
// 响应拦截器
request.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) {
console.error('接口异常', res.msg)
return Promise.reject(new Error(res.msg || 'Error'))
}
return res
},
error => {
console.log('请求失败', error)
return Promise.reject(error)
}
)
export default request
3. 编写主页面 App.vue
这是一个单页面应用，包含搜索栏、数据表格、分页器和新增/编辑弹窗。将以下代码完整覆盖 App.vue：
查询
重置
新增档案
删除
五、系统运行与验证
至此，所有代码已编写完毕。按照以下步骤启动系统：
- 启动后端：在 IDEA 中找到包含
@SpringBootApplication的主类，运行main方法。看到控制台输出 "Started EnvArchiveApplication" 即表示启动成功。 - 启动前端：在终端进入
env-archive-web目录，执行npm run dev。终端会显示本地访问地址，通常是http://localhost:5173。 - 功能测试：
- 打开浏览器访问前端地址，应能看到初始化的测试数据。
- 点击“新增档案”，输入信息并保存，列表应自动刷新并显示新数据。
- 在搜索框输入“环评”，点击查询，验证过滤功能。
- 点击“删除”，确认后数据应从列表中移除。
此时，一个基础的环保部门档案管理系统已经完全跑通，具备了核心的增删改查与分页能力。后续可在此基础上添加文件上传下载（MinIO/OSS）及用户权限控制（Spring Security）模块。
相关文章
