1. 项目概述与技术选型这个前后端分离的档案管理系统采用了当前主流的技术栈组合SpringBootVueMyBatisMySQL。这种架构模式已经成为现代Web应用开发的事实标准特别适合需要快速迭代的中小型项目。为什么选择这个技术组合从我的实际开发经验来看SpringBoot提供了约定优于配置的开发体验内置Tomcat服务器可以快速搭建RESTful API服务Vue.js的响应式特性和组件化开发模式让前端开发变得高效且易于维护MyBatis作为轻量级ORM框架既保留了SQL的灵活性又简化了数据库操作MySQL作为成熟稳定的关系型数据库完全能满足档案管理这类结构化数据存储需求这套技术栈最大的优势在于各组件都提供了良好的开发体验和丰富的社区支持。比如SpringBoot的自动配置可以省去大量XML配置Vue的CLI工具能快速搭建项目骨架MyBatis-Generator可以自动生成基础CRUD代码。2. 系统架构设计2.1 前后端分离架构传统的单体应用将前后端代码耦合在一起而本系统采用前后端完全分离的架构前端(Vue) -- HTTP/HTTPS -- 后端(SpringBoot) ↑ ↓ 数据库(MySQL)这种架构带来了几个显著优势开发解耦前后端团队可以并行开发只需约定好API接口部署独立前端可以部署在Nginx等静态服务器后端部署在应用服务器技术栈灵活前后端可以分别选择最适合的技术2.2 后端分层设计后端采用经典的三层架构Controller层处理HTTP请求参数校验返回JSON数据Service层业务逻辑实现事务控制DAO层通过MyBatis与数据库交互这种分层设计使得代码职责清晰便于维护和单元测试。例如档案管理模块的Controller只关心接收请求和返回结果具体的档案增删改查逻辑都在Service层实现。3. 核心功能实现3.1 档案管理模块档案管理是系统的核心功能主要包含档案录入支持多种格式文件上传档案查询支持多条件组合查询档案借阅记录借阅状态和归还时间档案统计按类别、部门等维度统计在实现上我们使用了MyBatis的动态SQL特性来构建灵活的查询条件。例如档案查询接口可以根据前端传入的不同参数组合生成不同的SQLselect idselectByCondition resultMapBaseResultMap SELECT * FROM archive where if testcategory ! null AND category #{category} /if if testdepartment ! null AND department #{department} /if if testkeywords ! null AND title LIKE CONCAT(%,#{keywords},%) /if /where ORDER BY create_time DESC /select3.2 用户权限控制系统采用基于角色的访问控制(RBAC)模型角色管理员、档案管理员、普通用户权限细粒度到每个接口的访问控制后端使用Spring Security实现权限控制核心配置如下Configuration EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers(/api/admin/**).hasRole(ADMIN) .antMatchers(/api/archive/**).hasAnyRole(ADMIN, ARCHIVE_MANAGER) .anyRequest().authenticated() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())) .addFilter(new JwtAuthorizationFilter(authenticationManager())); } }前端则根据用户角色动态渲染菜单和操作按钮避免显示无权限的功能。4. 关键技术实现细节4.1 文件上传与存储档案管理系统需要处理各种文件的上传和存储我们采用了以下方案前端使用Vue的axios上传文件显示上传进度后端接收文件后生成唯一文件名保存到指定目录文件元信息名称、类型、大小等存入数据库核心上传代码示例PostMapping(/upload) public Result upload(RequestParam(file) MultipartFile file) { if (file.isEmpty()) { return Result.error(请选择文件); } String originalFilename file.getOriginalFilename(); String fileExt originalFilename.substring(originalFilename.lastIndexOf(.)); String newFilename UUID.randomUUID().toString() fileExt; try { File dest new File(uploadPath newFilename); file.transferTo(dest); ArchiveFile archiveFile new ArchiveFile(); archiveFile.setOriginalName(originalFilename); archiveFile.setStorageName(newFilename); archiveFile.setFileSize(file.getSize()); archiveFile.setFileType(file.getContentType()); fileService.save(archiveFile); return Result.ok(上传成功, archiveFile); } catch (IOException e) { return Result.error(上传失败); } }4.2 前后端数据交互前后端通过RESTful API进行数据交互遵循以下规范使用JSON作为数据格式统一的响应结构包含code、message、data字段合理的HTTP状态码200成功400参数错误401未授权等前端封装了统一的请求处理import axios from axios const service axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 }) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { Message.error(res.message || Error) return Promise.reject(new Error(res.message || Error)) } else { return res } }, error { Message.error(error.message) return Promise.reject(error) } ) export default service5. 系统部署指南5.1 后端部署后端采用SpringBoot内置的Tomcat服务器部署非常简单打包应用mvn clean package运行jar包java -jar archive-system.jar --spring.profiles.activeprod生产环境建议使用Nginx作为反向代理配置SSL证书使用PM2等工具管理进程实现自动重启配置JVM参数优化性能5.2 前端部署前端使用Vue CLI构建生产环境代码安装依赖npm install构建静态文件npm run build部署到Nginxserver { listen 80; server_name archive.example.com; location / { root /path/to/dist; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }5.3 数据库配置MySQL数据库配置建议创建专用数据库用户限制权限根据数据量合理配置innodb_buffer_pool_size定期备份重要数据初始化SQL示例CREATE DATABASE archive_system CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; CREATE USER archive% IDENTIFIED BY StrongPassword123!; GRANT ALL PRIVILEGES ON archive_system.* TO archive%; FLUSH PRIVILEGES;6. 开发环境搭建6.1 后端开发环境JDK 1.8Maven 3.6IDE推荐IntelliJ IDEA安装Lombok插件关键Maven依赖dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.mybatis.spring.boot/groupId artifactIdmybatis-spring-boot-starter/artifactId version2.2.0/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies6.2 前端开发环境Node.js 14Vue CLI 4.5IDE推荐VS Code项目初始化npm install -g vue/cli vue create archive-frontend cd archive-frontend npm install axios element-ui --save6.3 数据库开发环境MySQL 5.7推荐使用MySQL Workbench管理数据库初始化表结构使用Flyway或Liquibase管理7. 常见问题与解决方案7.1 跨域问题开发环境下常见跨域问题解决方案后端配置CORSConfiguration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowedHeaders(*) .maxAge(3600); } }或者通过Nginx配置代理location /api { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; add_header Access-Control-Expose-Headers Content-Length,Content-Range; }7.2 文件上传大小限制SpringBoot默认文件上传大小为1MB需要调整# application.properties spring.servlet.multipart.max-file-size10MB spring.servlet.multipart.max-request-size10MB7.3 MyBatis常见问题字段名与属性名不一致使用Result注解或resultMap解决SQL注入风险永远不要拼接SQL使用#{}占位符分页查询集成PageHelper插件分页配置示例Configuration public class MyBatisConfig { Bean public PageInterceptor pageInterceptor() { PageInterceptor pageInterceptor new PageInterceptor(); Properties properties new Properties(); properties.setProperty(helperDialect, mysql); pageInterceptor.setProperties(properties); return pageInterceptor; } }8. 性能优化建议8.1 数据库优化为常用查询字段建立索引避免SELECT *只查询需要的字段大数据量表考虑分表分库合理使用MyBatis的二级缓存索引创建示例CREATE INDEX idx_archive_category ON archive(category); CREATE INDEX idx_archive_create_time ON archive(create_time);8.2 前端性能优化路由懒加载组件按需引入使用Webpack分包策略启用Gzip压缩路由懒加载配置const ArchiveList () import(./views/ArchiveList.vue) const ArchiveDetail () import(./views/ArchiveDetail.vue)8.3 后端性能优化启用SpringBoot的Actuator监控端点合理使用缓存Redis异步处理耗时操作连接池配置优化Redis缓存配置示例Configuration EnableCaching public class RedisConfig extends CachingConfigurerSupport { Bean public RedisTemplateString, Object redisTemplate(RedisConnectionFactory factory) { RedisTemplateString, Object template new RedisTemplate(); template.setConnectionFactory(factory); template.setKeySerializer(new StringRedisSerializer()); template.setValueSerializer(new GenericJackson2JsonRedisSerializer()); return template; } }9. 安全防护措施9.1 认证与授权使用JWT进行无状态认证密码加密存储BCrypt接口权限细粒度控制定期更换加密密钥JWT工具类示例public class JwtUtil { private static final String SECRET your-secret-key; private static final long EXPIRATION 86400L; // 24小时 public static String generateToken(UserDetails userDetails) { return Jwts.builder() .setSubject(userDetails.getUsername()) .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(); } }9.2 数据安全敏感数据加密存储日志脱敏处理SQL注入防护XSS攻击防护XSS防护过滤器public class XssFilter implements Filter { Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { XssHttpServletRequestWrapper xssRequest new XssHttpServletRequestWrapper((HttpServletRequest) request); chain.doFilter(xssRequest, response); } }10. 项目扩展方向10.1 功能扩展档案版本控制记录档案修改历史全文检索集成Elasticsearch工作流引擎集成Activiti消息通知站内信、邮件提醒Elasticsearch集成示例Document(indexName archive) public class ArchiveDocument { Id private Long id; Field(type FieldType.Text, analyzer ik_max_word) private String title; Field(type FieldType.Text, analyzer ik_max_word) private String content; // getters and setters }10.2 技术升级升级到SpringBoot 3.x使用Vue 3组合式API尝试MyBatis-Plus简化开发迁移到云原生架构DockerK8sDocker部署示例# 后端Dockerfile FROM openjdk:8-jdk-alpine VOLUME /tmp COPY target/archive-system.jar app.jar ENTRYPOINT [java,-jar,/app.jar]# 前端Dockerfile FROM nginx:alpine COPY dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80在实际开发中我发现这套技术栈组合非常灵活高效。特别是SpringBoot的自动配置特性可以省去大量样板代码让开发者更专注于业务逻辑实现。Vue的组件化开发也让前端代码更易于维护和复用。