陆拾贰號1. 项目概述：前后端分离档案管理系统的技术选型与价值
在数字化转型浪潮下，档案管理系统的现代化改造成为各类组织的刚需。传统单体架构的档案系统普遍面临维护困难、扩展性差的问题，而采用SpringBoot+Vue的前后端分离架构，能够有效解决这些痛点。这个开源项目提供了一个企业级档案管理系统的完整实现方案，包含用户权限管理、档案分类存储、检索统计等核心功能模块。
技术栈组合经过精心设计：SpringBoot 3.x作为后端框架提供了自动配置和快速启动能力，Vue 3作为前端框架实现响应式界面，MyBatis-Plus作为ORM层简化数据库操作，MySQL 8.0作为数据存储引擎。这种技术组合既保证了系统性能，又具有良好的开发者体验。项目采用RESTful API规范进行前后端通信，接口文档通过Swagger自动生成，极大降低了前后端协作的沟通成本。
提示：虽然项目使用了MyBatis，但实际采用的是其增强版MyBatis-Plus，这为开发带来了诸多便利，如自动生成CRUD代码、内置分页插件等，后续章节会详细说明其使用技巧。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 环境准备与项目结构解析
2.1 开发环境配置指南
要顺利运行本项目，需要准备以下环境（以Windows为例）：
-
JDK 17：SpringBoot 3.x的最低要求
bash复制java -version # 验证安装 -
Node.js 16+：Vue开发环境
bash复制
node -v npm -v -
MySQL 8.0：建议使用Docker快速部署
bash复制
docker run --name mysql8 -e MYSQL_ROOT_PASSWORD=123456 -p 3306:3306 -d mysql:8.0 -
IDE推荐：
- 后端：IntelliJ IDEA Ultimate（支持SpringBoot智能提示）
- 前端：VS Code + Volar插件（专业Vue支持）
2.2 项目目录结构深度解读
解压源码包后，会看到两个核心目录：
code复制档案管理系统/
├── backend/ # SpringBoot后端工程
│ ├── src/
│ │ ├── main/
│ │ │ ├── java/com/example/
│ │ │ │ ├── config/ # Spring配置类
│ │ │ │ ├── controller/ # REST API层
│ │ │ │ ├── entity/ # 数据库实体
│ │ │ │ ├── mapper/ # MyBatis接口
│ │ │ │ └── service/ # 业务逻辑层
│ │ │ └── resources/
│ │ │ ├── mapper/ # XML映射文件
│ │ │ ├── application.yml # 多环境配置
│ │ │ └── static/ # 静态资源
│ │ └── test/ # 单元测试
│ └── pom.xml # Maven依赖管理
└── frontend/ # Vue前端工程
├── public/ # 静态HTML
├── src/
│ ├── api/ # 接口定义
│ ├── assets/ # 静态资源
│ ├── components/ # 公共组件
│ ├── router/ # 路由配置
│ ├── store/ # Vuex状态管理
│ ├── utils/ # 工具类
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── package.json # 前端依赖
└── vite.config.js # 构建配置
3. 后端核心实现解析
3.1 SpringBoot自动装配的巧妙应用
项目通过自定义starter简化模块集成。以权限认证模块为例，创建security-boot-starter子模块：
- 定义配置属性类：
java复制@ConfigurationProperties(prefix = "archive.security")
public class SecurityProperties {
private String tokenHeader = "Authorization";
private long tokenExpire = 7200;
// getters/setters...
}
- 创建自动配置类：
java复制@Configuration
@EnableConfigurationProperties(SecurityProperties.class)
@ConditionalOnWebApplication
public class SecurityAutoConfiguration {
@Bean
public JwtTokenUtil jwtTokenUtil(SecurityProperties properties) {
return new JwtTokenUtil(properties);
}
}
- 在
META-INF/spring.factories中注册：
code复制org.springframework.boot.autoconfigure.EnableAutoConfiguration=\
com.example.security.boot.SecurityAutoConfiguration
3.2 MyBatis-Plus的高效使用技巧
项目摒弃了传统MyBatis的XML配置方式，采用MyBatis-Plus的ActiveRecord模式：
- 实体类继承Model：
java复制@Data
@TableName("sys_file")
public class ArchiveFile extends Model<ArchiveFile> {
@TableId(type = IdType.AUTO)
private Long id;
private String fileName;
private String filePath;
// 其他字段...
}
- 自定义通用Mapper接口：
java复制public interface BaseMapper<T> extends com.baomidou.mybatisplus.core.mapper.BaseMapper<T> {
default Page<T> selectPage(Page<T> page, @Param("ew") Wrapper<T> wrapper) {
return selectPage(page, wrapper);
}
}
- 分页插件配置：
java复制@Configuration
public class MyBatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
}
注意：MyBatis-Plus的Lambda查询条件构造器能有效预防SQL注入，推荐使用如下方式：
java复制QueryWrapper<User> query = new QueryWrapper<>(); query.lambda().eq(User::getUsername, "admin");
4. 前端架构设计与实现
4.1 Vue 3组合式API实践
项目采用Vue 3的setup语法糖重构组件逻辑。以档案列表页面为例：
vue复制<script setup>
import { ref, onMounted } from 'vue'
import { getFileList } from '@/api/archive'
const tableData = ref([])
const loading = ref(false)
const queryParams = ref({
fileName: '',
fileType: '',
pageNum: 1,
pageSize: 10
})
const fetchData = async () => {
loading.value = true
try {
const res = await getFileList(queryParams.value)
tableData.value = res.data.list
} finally {
loading.value = false
}
}
onMounted(() => {
fetchData()
})
</script>
4.2 权限控制前端实现方案
基于Vue路由的全局守卫实现动态权限：
- 路由配置添加meta信息：
js复制{
path: '/archive',
component: Layout,
meta: { title: '档案管理', icon: 'folder', roles: ['admin', 'archive'] },
children: [
{
path: 'list',
component: () => import('@/views/archive/list'),
meta: { title: '档案列表', roles: ['admin', 'archive:list'] }
}
]
}
- 在路由守卫中校验权限：
js复制router.beforeEach(async (to, from, next) => {
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
next('/')
} else {
const hasRoles = store.getters.roles?.length > 0
if (hasRoles) {
if (hasPermission(store.getters.roles, to.meta?.roles)) {
next()
} else {
next('/401')
}
} else {
try {
const { roles } = await store.dispatch('user/getInfo')
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
accessRoutes.forEach(route => router.addRoute(route))
next({ ...to, replace: true })
} catch (error) {
await store.dispatch('user/resetToken')
next(`/login?redirect=${to.path}`)
}
}
}
} else {
/* 未登录处理 */
}
})
5. 系统部署实战指南
5.1 后端SpringBoot打包与优化
- 使用Maven多环境打包：
bash复制mvn clean package -Pprod -DskipTests
- 调整JVM参数（application-prod.yml）：
yaml复制server:
tomcat:
max-threads: 200
min-spare-threads: 10
compression:
enabled: true
mime-types: application/json,application/xml,text/html,text/xml,text/plain
- 启动脚本（start.sh）：
bash复制#!/bin/bash
nohup java -Xms512m -Xmx1024m -XX:+HeapDumpOnOutOfMemoryError \
-jar archive-backend.jar --spring.profiles.active=prod > backend.log 2>&1 &
5.2 前端Vue项目部署要点
- 生产环境构建：
bash复制npm run build
- Nginx配置示例：
nginx复制server {
listen 80;
server_name archive.example.com;
location / {
root /opt/frontend/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
- 解决路由刷新404问题：
javascript复制// vite.config.js
export default defineConfig({
base: '/',
build: {
outDir: 'dist'
},
server: {
historyApiFallback: true
}
})
6. 常见问题排查手册
6.1 数据库连接池耗尽问题
现象：系统运行一段时间后出现"Timeout waiting for connection from pool"错误。
解决方案：
- 检查连接泄漏：
yaml复制spring:
datasource:
hikari:
leak-detection-threshold: 5000 # 毫秒
- 优化连接池配置：
yaml复制spring:
datasource:
hikari:
maximum-pool-size: 20
idle-timeout: 30000
max-lifetime: 1800000
connection-timeout: 5000
- 在MyBatis的Mapper接口上添加@Transactional注解确保及时释放连接。
6.2 文件上传大小限制问题
SpringBoot默认文件上传限制为1MB，需要调整：
yaml复制spring:
servlet:
multipart:
max-file-size: 50MB
max-request-size: 100MB
前端同时需要修改axios配置：
javascript复制const instance = axios.create({
baseURL: '/api',
timeout: 10000,
headers: { 'Content-Type': 'multipart/form-data' }
})
7. 项目扩展与二次开发建议
7.1 集成全文检索功能
对于档案内容检索需求，可以集成Elasticsearch：
- 添加依赖：
xml复制<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-elasticsearch</artifactId>
</dependency>
- 创建文档实体：
java复制@Document(indexName = "archive")
public class ArchiveDoc {
@Id
private Long id;
@Field(type = FieldType.Text, analyzer = "ik_max_word")
private String content;
// 其他字段...
}
- 实现检索服务：
java复制public interface ArchiveSearchRepository extends ElasticsearchRepository<ArchiveDoc, Long> {
List<ArchiveDoc> findByContent(String keyword);
}
7.2 实现文件预览功能
利用Office Online Server或开源方案实现：
- 集成OnlyOffice：
vue复制<template>
<only-office
:document="documentConfig"
@onSave="handleSave"
/>
</template>
<script setup>
import OnlyOffice from '@/components/OnlyOffice.vue'
const documentConfig = ref({
url: 'https://doc.example.com/file.docx',
key: 'unique_doc_key',
title: '档案文件.docx'
})
</script>
- 后端转换服务：
java复制@PostMapping("/preview")
public String generatePreview(@RequestParam MultipartFile file) {
String pdfPath = officeConverter.convertToPdf(file);
return minioService.uploadPreview(pdfPath);
}
这个档案管理系统项目从技术选型到实现细节都体现了现代Web开发的最佳实践。我在实际部署过程中发现，合理配置连接池参数和线程池参数对系统稳定性至关重要。建议在正式上线前使用JMeter进行压力测试，根据测试结果调整相关参数。