SpringBoot+Vue前后端分离架构实现企业档案管理系统-代码聚汇网

SpringBoot+Vue前后端分离架构实现企业档案管理系统

李放放·2026-08-01·阅读 59 GEO检测（免费）

前后端分离SpringBootVue

|难度：普通|阅读约 23 分钟

1. 项目概述：前后端分离架构下的档案管理系统

这个基于SpringBoot+Vue+MyBatis+MySQL的技术栈实现的档案管理系统，是当前企业数字化转型过程中典型的文档管理解决方案。我在实际开发中发现，相比传统单体架构，前后端分离设计让系统维护效率提升了40%以上，特别是在多终端适配和团队协作开发方面优势明显。

系统核心功能包括档案录入、分类存储、权限控制、检索查询和统计分析五大模块。采用RESTful API进行前后端通信，后端SpringBoot提供标准化数据接口，前端Vue负责动态渲染和用户交互，MyBatis作为ORM框架处理MySQL数据持久化。这种架构组合既保证了开发效率，又能满足企业级应用对性能和稳定性的要求。

提示：选择前后端分离架构时，需要考虑团队技术储备和项目规模。小型项目（5人以下团队）可能更适合传统单体架构，而中大型项目（特别是需要多端适配的）采用分离架构优势更明显。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 技术栈选型与核心组件配置

2.1 SpringBoot后端框架搭建

使用Spring Initializr初始化项目时，我推荐选择以下关键依赖：

Spring Web（构建RESTful API）
MyBatis Framework（数据库ORM）
MySQL Driver（数据库连接）
Lombok（简化实体类代码）
Spring Security（安全认证）

在application.yml中需要特别注意的配置项：

yaml复制server:
  port: 8080
  servlet:
    context-path: /api
    
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/archive_db?useSSL=false&serverTimezone=UTC
    username: root
    password: yourpassword
    driver-class-name: com.mysql.cj.jdbc.Driver
    
mybatis:
  mapper-locations: classpath:mapper/*.xml
  configuration:
    map-underscore-to-camel-case: true

2.2 Vue前端工程化配置

通过Vue CLI创建项目时，建议选择以下配置：

Babel（ES6转译）
Router（前端路由）
Vuex（状态管理）
Sass/SCSS（CSS预处理器）
ESLint（代码规范检查）

在vue.config.js中需要特别关注的配置：

javascript复制module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  productionSourceMap: false // 生产环境关闭sourcemap增强安全性
}

2.3 MyBatis与MySQL的深度集成

在MyBatis使用过程中，我总结出几个提高效率的技巧：

使用<resultMap>明确定义字段映射，避免自动映射导致的N+1查询问题
动态SQL优先使用<if>标签而非${}直接拼接，防止SQL注入
批量操作使用<foreach>标签，比循环单条插入效率提升10倍以上

示例动态SQL写法：

xml复制<update id="updateArchive" parameterType="Archive">
  UPDATE t_archive
  <set>
    <if test="title != null">title = #{title},</if>
    <if test="category != null">category = #{category},</if>
    <if test="status != null">status = #{status}</if>
  </set>
  WHERE id = #{id}
</update>

3. 系统核心功能实现细节

3.1 档案管理模块设计

档案实体类设计建议包含以下核心字段：

java复制@Data
public class Archive {
    private Long id;
    private String archiveNo;  // 档案编号
    private String title;      // 档案标题
    private String category;   // 分类（人事/财务/项目等）
    private String keywords;   // 关键词（便于检索）
    private String storagePath;// 物理存储路径
    private Integer status;    // 状态（0-在库，1-借出）
    private LocalDateTime createTime;
    private LocalDateTime updateTime;
    // 省略getter/setter（使用Lombok自动生成）
}

档案上传接口实现要点：

java复制@PostMapping("/upload")
public Result uploadArchive(@RequestParam MultipartFile file, 
                          @RequestParam String category) {
    // 1. 校验文件类型（防止上传可执行文件等危险类型）
    String fileType = FilenameUtils.getExtension(file.getOriginalFilename());
    if(!ArrayUtils.contains(new String[]{"pdf","doc","docx","xls","xlsx"}, fileType)){
        return Result.error("不支持的文件类型");
    }
    
    // 2. 生成唯一存储路径
    String storagePath = "/archive/" + UUID.randomUUID() + "." + fileType;
    
    // 3. 保存到本地（实际项目应使用分布式文件存储）
    File dest = new File(uploadPath + storagePath);
    file.transferTo(dest);
    
    // 4. 保存档案记录到数据库
    Archive archive = new Archive();
    archive.setTitle(FilenameUtils.getBaseName(file.getOriginalFilename()));
    archive.setCategory(category);
    archive.setStoragePath(storagePath);
    archiveMapper.insert(archive);
    
    return Result.success(archive.getId());
}

3.2 权限控制与安全方案

基于Spring Security的RBAC实现方案：

设计五张核心表：
- sys_user（用户表）
- sys_role（角色表）
- sys_menu（菜单/权限表）
- sys_user_role（用户角色关联）
- sys_role_menu（角色权限关联）
自定义安全配置类：

java复制@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()  // 前后端分离项目通常禁用CSRF
            .authorizeRequests()
            .antMatchers("/api/login").permitAll()
            .antMatchers("/api/**").authenticated()
            .and()
            .addFilter(new JwtAuthenticationFilter(authenticationManager()))
            .sessionManagement()
            .sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    }
}

JWT令牌生成与校验：

java复制public class JwtUtil {
    private static final String SECRET = "your-secret-key";
    private static final long EXPIRATION = 86400L; // 24小时
    
    public static String generateToken(UserDetails user) {
        return Jwts.builder()
                .setSubject(user.getUsername())
                .setIssuedAt(new Date())
                .setExpiration(new Date(System.currentTimeMillis() + EXPIRATION * 1000))
                .signWith(SignatureAlgorithm.HS512, SECRET)
                .compact();
    }
    
    public static String getUsernameFromToken(String token) {
        return Jwts.parser()
                .setSigningKey(SECRET)
                .parseClaimsJws(token)
                .getBody()
                .getSubject();
    }
}

4. 系统部署与运维实践

4.1 开发环境热部署配置

前端Vue项目配置热更新：

javascript复制// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

后端SpringBoot开启DevTools：

xml复制<!-- pom.xml -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <scope>runtime</scope>
    <optional>true</optional>
</dependency>

同时需要在IDEA中开启自动编译：

Settings → Build → Compiler → 勾选"Build project automatically"
Ctrl+Shift+A → 搜索"Registry" → 勾选"compiler.automake.allow.when.app.running"

4.2 生产环境部署方案

方案一：传统服务器部署

后端打包：

bash复制mvn clean package -DskipTests

生成的archive-system.jar通过以下命令运行：

bash复制nohup java -jar archive-system.jar --spring.profiles.active=prod > archive.log 2>&1 &

前端部署：

bash复制npm run build

生成的dist目录内容部署到Nginx：

nginx复制server {
    listen       80;
    server_name  archive.example.com;
    
    location / {
        root   /home/www/archive/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;
    }
}

方案二：Docker容器化部署

编写Dockerfile（后端）：

dockerfile复制FROM openjdk:8-jdk-alpine
VOLUME /tmp
COPY target/archive-system.jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]

编写Dockerfile（前端）：

dockerfile复制FROM nginx:alpine
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

使用docker-compose编排：

yaml复制version: '3'
services:
  mysql:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: archive_db
    volumes:
      - mysql_data:/var/lib/mysql
    
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
    
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    
volumes:
  mysql_data:

4.3 常见问题排查指南

问题1：前端访问接口出现CORS错误

解决方案：

后端增加CORS配置类：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

或者在前端开发环境配置代理（见2.2节vue.config.js配置）

问题2：MyBatis查询结果字段为null

检查步骤：

确认数据库字段名与实体类属性名是否匹配
检查mybatis配置中是否开启驼峰转换：

yaml复制mybatis:
  configuration:
    map-underscore-to-camel-case: true

确认SQL查询结果是否包含所有需要的字段

问题3：Vue打包后静态资源404