SpringBoot+Vue3校园服务平台全栈开发实战
1. 项目概述
校园服务平台系统是一个典型的现代化Web应用，采用前后端分离架构，整合了Java生态的SpringBoot框架与前端Vue3技术栈。这个系统设计用于解决校园场景下的各类服务需求，可能包含课程管理、活动报名、信息查询等核心功能模块。
作为全栈开发项目，它体现了当前企业级开发的主流技术选型：
- 后端：SpringBoot 2.7.x + MyBatis 3.5.x
- 前端：Vue3 + TypeScript
- 数据库：MySQL 8.0
- 构建工具：Maven + Webpack
这种技术组合既保证了后端服务的稳定性，又提供了前端的灵活交互体验。我在实际开发中发现，这种架构特别适合需要快速迭代的校园应用场景，前后端团队可以并行开发，通过API契约进行协作。
2. 技术架构解析
2.1 后端技术栈设计
SpringBoot作为后端核心框架，其自动配置特性大幅简化了项目初始化工作。我通常会这样组织项目结构：
src/main/java ├── config # 配置类 ├── controller # 接口层 ├── service # 业务逻辑 ├── mapper # MyBatis接口 └── entity # 数据实体MyBatis的XML映射文件建议按模块分包管理：
<!-- 示例：UserMapper.xml --> <mapper namespace="com.campus.mapper.UserMapper"> <select id="selectByStudentId" resultType="User"> SELECT * FROM user WHERE student_id = #{studentId} </select> </mapper>重要提示：避免在MyBatis中使用${}进行动态SQL拼接，这是导致SQL注入的高危操作。建议使用 标签或OGNL表达式构建安全查询。
2.2 前端架构设计
Vue3的组合式API大幅提升了代码组织效率。典型页面结构：
// 活动列表组件 <script setup> const { data: activities } = await useFetch('/api/activities') </script> <template> <el-table :data="activities"> <el-table-column prop="name" label="活动名称" /> </el-table> </template>对于需要缓存查询状态的场景（如列表→详情返回），可以使用keep-alive配合路由meta：
{ path: '/detail/:id', component: () => import('@/views/Detail.vue'), meta: { keepAlive: true } }3. 核心功能实现
3.1 用户认证模块
采用JWT实现无状态认证，Spring Security配置示例：
@Configuration @EnableWebSecurity public class SecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http.csrf().disable() .authorizeRequests() .antMatchers("/api/auth/**").permitAll() .anyRequest().authenticated() .and() .addFilter(new JwtAuthenticationFilter(authenticationManager())); return http.build(); } }前端需要在axios拦截器中处理token：
// 请求拦截器 axios.interceptors.request.use(config => { config.headers.Authorization = `Bearer ${store.state.token}` return config })3.2 数据持久化方案
MySQL表设计建议遵循以下原则：
- 使用InnoDB引擎
- 为高频查询字段添加索引
- 合理设置字段长度（如varchar(255)不一定是最佳选择）
动态字段处理可以使用MyBatis的 标签：
<update id="updateSelective"> UPDATE user <trim prefix="SET" suffixOverrides=","> <if test="name != null">name=#{name},</if> <if test="avatar != null">avatar=#{avatar},</if> </trim> WHERE id=#{id} </update>4. 开发环境搭建
4.1 后端环境准备
- JDK 17+环境配置：
# 验证安装 java -version javac -version- 初始化SpringBoot项目：
- 使用start.spring.io生成基础项目
- 添加依赖：
<dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.2.2</version> </dependency>- 数据库配置application.yml：
spring: datasource: url: jdbc:mysql://localhost:3306/campus?useSSL=false username: root password: 123456 driver-class-name: com.mysql.cj.jdbc.Driver4.2 前端环境配置
- 创建Vue3项目：
npm init vue@latest campus-web- 推荐安装的插件：
npm install element-plus axios vue-router@4 pinia- 开发代理配置（vite.config.js）：
server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }5. 典型问题解决方案
5.1 跨域问题处理
SpringBoot后端配置：
@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST"); } }5.2 接口版本管理
建议在URL路径中体现版本：
@RestController @RequestMapping("/api/v1/users") public class UserController { // 接口实现 }前端可以封装版本化请求方法：
const api = { user: { list: () => request('/api/v1/users') } }5.3 性能优化实践
- MyBatis二级缓存配置：
<settings> <setting name="cacheEnabled" value="true"/> </settings>- Vue3组件懒加载：
const UserCenter = defineAsyncComponent(() => import('./views/UserCenter.vue') )6. 安全防护措施
6.1 SQL注入防护
- 严格使用#{}参数绑定
- 定期使用SQLMap进行漏洞扫描
- 实现MyBatis拦截器进行SQL审计：
@Intercepts({ @Signature(type= StatementHandler.class, method="prepare", args={Connection.class, Integer.class}) }) public class SqlAuditInterceptor implements Interceptor { // 实现逻辑 }6.2 XSS防护方案
前端使用DOMPurify过滤输入：
import DOMPurify from 'dompurify' const clean = DOMPurify.sanitize(userInput)后端统一进行参数过滤：
public String filterXSS(String value) { return HtmlUtils.htmlEscape(value); }7. 项目部署实践
7.1 后端打包与运行
- 生成可执行JAR：
mvn clean package- 生产环境启动：
java -jar -Dspring.profiles.active=prod campus.jar7.2 前端静态资源部署
- 构建生产包：
npm run build- Nginx配置示例：
server { listen 80; location / { root /var/www/campus; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://localhost:8080; } }8. 开发经验分享
- API文档管理：使用Swagger UI时，建议添加版本控制：
@Bean public OpenAPI campusOpenAPI() { return new OpenAPI() .info(new Info().title("校园平台API") .version("v1")); }- 前端状态管理：对于复杂表单，使用Pinia比Vuex更轻量：
// stores/form.js export const useFormStore = defineStore('form', { state: () => ({ values: {} }), actions: { setField(field, value) { this.values[field] = value } } })- 调试技巧：MyBatis打印SQL日志：
logging: level: com.campus.mapper: debug在开发这类校园系统时，我发现最大的挑战不在于技术实现，而在于如何平衡不同用户角色（学生、教师、管理员）的需求差异。建议在项目初期就建立明确的用户故事地图，这能有效避免后期的功能蔓延。