1. 项目概述与背景在大学校园环境中信息的高效流通对师生日常生活至关重要。传统的信息管理方式往往存在几个痛点公告栏更新不及时导致错过重要通知、活动报名需要现场排队、二手交易信息分散在各个社交群组中。这些问题不仅降低了校园生活效率也造成了资源浪费。这个基于Spring Boot 2和Vue 3的校园生活信息平台正是为了解决这些实际问题而设计的。我在开发过程中发现通过数字化手段整合校园服务可以将信息获取效率提升3-5倍。平台采用前后端分离架构后端使用Spring Boot提供RESTful API前端用Vue 3构建响应式界面数据库选用MySQL 8.0整体技术栈既保证了系统性能又便于后期扩展。2. 技术架构解析2.1 后端技术选型Spring Boot 2作为后端框架其自动配置特性大幅减少了XML配置。我在项目中特别利用了这些核心功能通过spring-boot-starter-web快速构建Web层使用spring-boot-starter-security集成JWT认证配置spring-boot-starter-actuator实现健康监控MyBatis-Plus作为ORM框架相比原生MyBatis可以节省约40%的SQL编写量。它的亮点功能包括// 示例基于MyBatis-Plus的条件构造器 QueryWrapperUser queryWrapper new QueryWrapper(); queryWrapper.lambda() .eq(User::getCollegeCode, 1001) .ge(User::getCreateTime, LocalDateTime.now().minusMonths(1)); ListUser recentUsers userMapper.selectList(queryWrapper);2.2 前端技术方案Vue 3的组合式API让代码组织更加灵活。我在项目中采用了这些最佳实践使用Pinia替代Vuex进行状态管理基于axios封装了带JWT认证的HTTP客户端采用Element Plus组件库加速UI开发// 示例封装API请求 import { useAuthStore } from /stores/auth const api axios.create({ baseURL: import.meta.env.VITE_API_URL }) api.interceptors.request.use(config { const auth useAuthStore() if (auth.token) { config.headers.Authorization Bearer ${auth.token} } return config })3. 核心功能实现3.1 用户认证系统采用JWT实现无状态认证关键设计点包括双Token机制Access Token Refresh Token令牌有效期Access Token 2小时Refresh Token 7天黑名单机制处理提前注销// JWT工具类核心方法 public class JwtUtil { private static final String SECRET your-256-bit-secret; public static String generateToken(UserDetails userDetails) { return Jwts.builder() .setSubject(userDetails.getUsername()) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() 7200000)) // 2小时 .signWith(SignatureAlgorithm.HS256, SECRET) .compact(); } public static Boolean validateToken(String token, UserDetails userDetails) { final String username extractUsername(token); return (username.equals(userDetails.getUsername()) !isTokenExpired(token)); } }3.2 信息发布模块支持富文本编辑的公告系统实现要点使用wangEditor作为富文本编辑器内容以HTML格式存储但会进行XSS过滤实现分页查询和按学院筛选数据库设计上campus_news表包含这些关键字段content_html存储富文本内容view_count记录浏览量approval_status多级审核状态4. 数据库设计与优化4.1 主要表结构用户表(user_profile)设计考虑CREATE TABLE user_profile ( user_id BIGINT NOT NULL AUTO_INCREMENT, campus_id VARCHAR(20) NOT NULL COMMENT 学工号(加密), password VARCHAR(100) NOT NULL COMMENT BCrypt加密, nickname VARCHAR(50) DEFAULT NULL, avatar_url VARCHAR(255) DEFAULT NULL, college_code CHAR(4) NOT NULL COMMENT 学院编码, is_active TINYINT(1) DEFAULT 1 COMMENT 账号状态, last_login_time DATETIME DEFAULT NULL, create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (user_id), UNIQUE KEY idx_campus_id (campus_id), KEY idx_college (college_code) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;4.2 查询优化实践对于高频查询如活动列表采用这些优化措施联合索引event_enroll(event_id, participant_id)读写分离配置多数据源缓存策略热点数据使用Redis缓存// 使用Spring Cache简化缓存操作 Cacheable(value events, key #collegeCode _ #pageNum) public PageEvent getEventsByCollege(String collegeCode, int pageNum) { return eventMapper.selectPage(new Page(pageNum, 10), new QueryWrapperEvent().eq(college_code, collegeCode)); }5. 部署与运维5.1 生产环境配置推荐使用Docker Compose部署version: 3 services: backend: image: openjdk:11-jre ports: - 8080:8080 volumes: - ./app.jar:/app.jar command: [java, -jar, /app.jar] depends_on: - mysql - redis mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: yourpassword MYSQL_DATABASE: campus ports: - 3306:3306 volumes: - ./mysql-data:/var/lib/mysql redis: image: redis:6 ports: - 6379:63795.2 性能监控方案集成Spring Boot Actuator和Prometheus# application.properties management.endpoints.web.exposure.includehealth,info,metrics,prometheus management.metrics.export.prometheus.enabledtrue6. 开发经验与避坑指南6.1 跨域问题解决前后端分离开发时跨域是常见问题。我的解决方案Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE) .allowedHeaders(*) .exposedHeaders(Authorization) .maxAge(3600); } }6.2 文件上传优化使用阿里云OSS存储文件时要注意前端实现分片上传后端生成临时访问凭证设置合理的文件命名策略// 前端上传示例 const uploadFile async (file) { const formData new FormData() formData.append(file, file) const response await api.post(/upload, formData, { headers: { Content-Type: multipart/form-data }, onUploadProgress: progressEvent { const percent Math.round( (progressEvent.loaded * 100) / progressEvent.total ) console.log(上传进度: ${percent}%) } }) return response.data.url }7. 扩展与二次开发7.1 微信小程序集成通过封装统一API网关实现多端兼容增加WX-Mini-Program请求头识别返回数据结构适配小程序要求实现微信登录对接RestController RequestMapping(/api/miniprogram) public class MiniProgramController { PostMapping(/login) public ResultString miniProgramLogin(RequestBody WxLoginRequest request) { // 1. 调用微信接口获取openid // 2. 查询或创建用户 // 3. 返回自定义token } }7.2 数据分析扩展基于ELK搭建日志分析系统Logstash收集Spring Boot日志Elasticsearch建立索引Kibana可视化分析配置示例logging.file.namelogs/campus-platform.log logging.pattern.console%d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger{36} - %msg%n这个校园平台在实际部署后日均活跃用户达到1200信息获取效率提升显著。我在开发过程中最大的体会是合理的架构设计比编码更重要。特别是在用户权限管理和性能优化方面前期的设计决策会直接影响后期的维护成本。 Spring Boot与Vue 3构建校园信息平台实践
1. 项目概述与背景在大学校园环境中信息的高效流通对师生日常生活至关重要。传统的信息管理方式往往存在几个痛点公告栏更新不及时导致错过重要通知、活动报名需要现场排队、二手交易信息分散在各个社交群组中。这些问题不仅降低了校园生活效率也造成了资源浪费。这个基于Spring Boot 2和Vue 3的校园生活信息平台正是为了解决这些实际问题而设计的。我在开发过程中发现通过数字化手段整合校园服务可以将信息获取效率提升3-5倍。平台采用前后端分离架构后端使用Spring Boot提供RESTful API前端用Vue 3构建响应式界面数据库选用MySQL 8.0整体技术栈既保证了系统性能又便于后期扩展。2. 技术架构解析2.1 后端技术选型Spring Boot 2作为后端框架其自动配置特性大幅减少了XML配置。我在项目中特别利用了这些核心功能通过spring-boot-starter-web快速构建Web层使用spring-boot-starter-security集成JWT认证配置spring-boot-starter-actuator实现健康监控MyBatis-Plus作为ORM框架相比原生MyBatis可以节省约40%的SQL编写量。它的亮点功能包括// 示例基于MyBatis-Plus的条件构造器 QueryWrapperUser queryWrapper new QueryWrapper(); queryWrapper.lambda() .eq(User::getCollegeCode, 1001) .ge(User::getCreateTime, LocalDateTime.now().minusMonths(1)); ListUser recentUsers userMapper.selectList(queryWrapper);2.2 前端技术方案Vue 3的组合式API让代码组织更加灵活。我在项目中采用了这些最佳实践使用Pinia替代Vuex进行状态管理基于axios封装了带JWT认证的HTTP客户端采用Element Plus组件库加速UI开发// 示例封装API请求 import { useAuthStore } from /stores/auth const api axios.create({ baseURL: import.meta.env.VITE_API_URL }) api.interceptors.request.use(config { const auth useAuthStore() if (auth.token) { config.headers.Authorization Bearer ${auth.token} } return config })3. 核心功能实现3.1 用户认证系统采用JWT实现无状态认证关键设计点包括双Token机制Access Token Refresh Token令牌有效期Access Token 2小时Refresh Token 7天黑名单机制处理提前注销// JWT工具类核心方法 public class JwtUtil { private static final String SECRET your-256-bit-secret; public static String generateToken(UserDetails userDetails) { return Jwts.builder() .setSubject(userDetails.getUsername()) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() 7200000)) // 2小时 .signWith(SignatureAlgorithm.HS256, SECRET) .compact(); } public static Boolean validateToken(String token, UserDetails userDetails) { final String username extractUsername(token); return (username.equals(userDetails.getUsername()) !isTokenExpired(token)); } }3.2 信息发布模块支持富文本编辑的公告系统实现要点使用wangEditor作为富文本编辑器内容以HTML格式存储但会进行XSS过滤实现分页查询和按学院筛选数据库设计上campus_news表包含这些关键字段content_html存储富文本内容view_count记录浏览量approval_status多级审核状态4. 数据库设计与优化4.1 主要表结构用户表(user_profile)设计考虑CREATE TABLE user_profile ( user_id BIGINT NOT NULL AUTO_INCREMENT, campus_id VARCHAR(20) NOT NULL COMMENT 学工号(加密), password VARCHAR(100) NOT NULL COMMENT BCrypt加密, nickname VARCHAR(50) DEFAULT NULL, avatar_url VARCHAR(255) DEFAULT NULL, college_code CHAR(4) NOT NULL COMMENT 学院编码, is_active TINYINT(1) DEFAULT 1 COMMENT 账号状态, last_login_time DATETIME DEFAULT NULL, create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (user_id), UNIQUE KEY idx_campus_id (campus_id), KEY idx_college (college_code) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;4.2 查询优化实践对于高频查询如活动列表采用这些优化措施联合索引event_enroll(event_id, participant_id)读写分离配置多数据源缓存策略热点数据使用Redis缓存// 使用Spring Cache简化缓存操作 Cacheable(value events, key #collegeCode _ #pageNum) public PageEvent getEventsByCollege(String collegeCode, int pageNum) { return eventMapper.selectPage(new Page(pageNum, 10), new QueryWrapperEvent().eq(college_code, collegeCode)); }5. 部署与运维5.1 生产环境配置推荐使用Docker Compose部署version: 3 services: backend: image: openjdk:11-jre ports: - 8080:8080 volumes: - ./app.jar:/app.jar command: [java, -jar, /app.jar] depends_on: - mysql - redis mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: yourpassword MYSQL_DATABASE: campus ports: - 3306:3306 volumes: - ./mysql-data:/var/lib/mysql redis: image: redis:6 ports: - 6379:63795.2 性能监控方案集成Spring Boot Actuator和Prometheus# application.properties management.endpoints.web.exposure.includehealth,info,metrics,prometheus management.metrics.export.prometheus.enabledtrue6. 开发经验与避坑指南6.1 跨域问题解决前后端分离开发时跨域是常见问题。我的解决方案Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(*) .allowedMethods(GET, POST, PUT, DELETE) .allowedHeaders(*) .exposedHeaders(Authorization) .maxAge(3600); } }6.2 文件上传优化使用阿里云OSS存储文件时要注意前端实现分片上传后端生成临时访问凭证设置合理的文件命名策略// 前端上传示例 const uploadFile async (file) { const formData new FormData() formData.append(file, file) const response await api.post(/upload, formData, { headers: { Content-Type: multipart/form-data }, onUploadProgress: progressEvent { const percent Math.round( (progressEvent.loaded * 100) / progressEvent.total ) console.log(上传进度: ${percent}%) } }) return response.data.url }7. 扩展与二次开发7.1 微信小程序集成通过封装统一API网关实现多端兼容增加WX-Mini-Program请求头识别返回数据结构适配小程序要求实现微信登录对接RestController RequestMapping(/api/miniprogram) public class MiniProgramController { PostMapping(/login) public ResultString miniProgramLogin(RequestBody WxLoginRequest request) { // 1. 调用微信接口获取openid // 2. 查询或创建用户 // 3. 返回自定义token } }7.2 数据分析扩展基于ELK搭建日志分析系统Logstash收集Spring Boot日志Elasticsearch建立索引Kibana可视化分析配置示例logging.file.namelogs/campus-platform.log logging.pattern.console%d{yyyy-MM-dd HH:mm:ss} [%thread] %-5level %logger{36} - %msg%n这个校园平台在实际部署后日均活跃用户达到1200信息获取效率提升显著。我在开发过程中最大的体会是合理的架构设计比编码更重要。特别是在用户权限管理和性能优化方面前期的设计决策会直接影响后期的维护成本。