1. 项目概述
前后端分离架构已经成为现代Web开发的标准模式。作为一名有十年全栈开发经验的工程师，我经常被问到如何高效地构建一个完整的Java+Vue前后端分离项目。今天，我将分享一个使用Cursor AI编程助手从零开始构建这类项目的完整指南。
这个项目是一个任务管理系统，包含用户认证、任务创建、分配、跟踪和报告功能。选择这个案例是因为它涵盖了大多数企业应用的核心要素，非常适合作为学习前后端分离开发的范例。
2. 技术选型与架构设计
2.1 为什么选择前后端分离架构？
前后端分离架构的核心优势在于解耦。在传统MVC架构中，前端和后端代码高度耦合，导致开发效率低下。而分离架构让前后端可以：
- 独立开发和部署
- 采用最适合各自领域的技术栈
- 更容易进行性能优化
- 更好地支持多端适配（Web、移动、桌面）
在实际项目中，这种架构显著提高了我们的开发效率。前端团队可以专注于UI交互，后端团队可以专注于业务逻辑和数据处理，两者通过明确定义的API契约进行协作。
2.2 后端技术栈详解
Spring Boot 2.7+：我们选择这个版本是因为它长期支持(LTS)，提供了稳定的API和良好的社区支持。相比早期版本，2.7.x在性能和安全方面都有显著提升。
Java 11：这是目前企业开发的主流版本，提供了var局部变量推断、HTTP Client API等现代特性，同时保持了良好的兼容性。
JWT认证：相比传统的Session认证，JWT更适合前后端分离架构。它无状态、可扩展，且天然支持跨域。我们在项目中实现了完整的JWT流程，包括token刷新机制。
MySQL 8.0：选择这个版本是因为它的窗口函数、CTE(公共表表达式)和JSON支持，这些特性在复杂查询场景下非常有用。
2.3 前端技术栈详解
Vue 3 + TypeScript：组合式API提供了更好的逻辑复用能力，TypeScript则带来了类型安全。我们在项目中大量使用了自定义hook来封装可复用逻辑。
Element Plus：作为成熟的UI组件库，它提供了丰富的预制组件，可以快速构建专业的管理系统界面。
Pinia：相比Vuex，Pinia的API更简洁，TypeScript支持更好。我们在项目中用它管理用户状态、任务列表等全局数据。
Vite：极快的启动速度和热更新，显著提升了开发体验。我们配置了按需加载和代码分割来优化生产构建。
3. 项目结构设计
3.1 后端项目结构
code复制backend/
├── src/main/java/com/taskmanager/
│ ├── config/ # 配置类(安全、Swagger等)
│ ├── controller/ # REST端点
│ ├── service/ # 业务逻辑
│ ├── repository/ # 数据访问
│ ├── model/ # 实体类
│ ├── dto/ # 数据传输对象
│ ├── security/ # 安全相关(JWT、过滤器)
│ └── exception/ # 异常处理
├── src/main/resources/
│ ├── application.yml # 主配置文件
│ ├── application-dev.yml
│ └── application-prod.yml
└── pom.xml
这种分层结构遵循了单一职责原则，每层都有明确的职责边界。例如，Controller只负责HTTP交互，Service处理业务逻辑，Repository负责数据访问。
3.2 前端项目结构
code复制frontend/
├── src/
│ ├── api/ # API请求封装
│ ├── assets/ # 静态资源
│ ├── components/ # 通用组件
│ ├── composables/ # 组合式函数
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia状态
│ ├── types/ # TS类型定义
│ ├── utils/ # 工具函数
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ └── main.ts # 应用入口
├── public/ # 公共资源
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
└── vite.config.ts # 构建配置
这种结构按功能而非类型组织代码，更符合Vue 3的组合式思想。每个功能模块的相关代码（组件、API、状态等）都放在一起，便于维护。
4. 核心功能实现
4.1 用户认证模块
后端实现
我们使用Spring Security + JWT实现认证。关键点包括：
- 配置安全过滤器链：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
return http.build();
}
}
- JWT工具类实现token生成和验证：
java复制public String generateToken(UserDetails userDetails) {
Map<String, Object> claims = new HashMap<>();
return Jwts.builder()
.setClaims(claims)
.setSubject(userDetails.getUsername())
.setIssuedAt(new Date())
.setExpiration(new Date(System.currentTimeMillis() + expiration))
.signWith(SignatureAlgorithm.HS512, secret)
.compact();
}
前端实现
前端使用axios拦截器处理token：
typescript复制service.interceptors.request.use(config => {
const token = userStore.token;
if (token && config.headers) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
登录流程：
- 用户提交凭证
- 前端调用/auth/login接口
- 接收token并存入localStorage
- 跳转到首页
4.2 任务管理模块
后端API设计
我们遵循RESTful规范设计API：
- GET /api/tasks - 获取任务列表
- POST /api/tasks - 创建任务
- GET /api/tasks/{id} - 获取任务详情
- PUT /api/tasks/{id} - 更新任务
- DELETE /api/tasks/{id} - 删除任务
分页查询实现：
java复制@GetMapping
public Page<TaskDTO> getTasks(
@RequestParam(defaultValue = "0") int page,
@RequestParam(defaultValue = "10") int size,
@RequestParam(required = false) String status) {
Specification<Task> spec = (root, query, cb) -> {
List<Predicate> predicates = new ArrayList<>();
if (status != null) {
predicates.add(cb.equal(root.get("status"), status));
}
return cb.and(predicates.toArray(new Predicate[0]));
};
return taskService.getTasks(spec, PageRequest.of(page, size));
}
前端实现
使用Pinia管理任务状态：
typescript复制export const useTaskStore = defineStore('task', {
state: () => ({
tasks: [] as Task[],
pagination: {
page: 1,
pageSize: 10,
total: 0
}
}),
actions: {
async fetchTasks(params: TaskQueryParams) {
const res = await getTasks(params);
this.tasks = res.data;
this.pagination.total = res.total;
}
}
});
任务表单使用Element Plus的Form组件，并添加了验证规则：
vue复制<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" />
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input type="textarea" v-model="form.description" />
</el-form-item>
</el-form>
5. 数据库设计与优化
5.1 表结构设计
用户表设计考虑：
- 用户名和邮箱唯一
- 密码使用BCrypt加密存储
- 使用中间表实现用户-角色多对多关系
任务表设计特点：
- 使用ENUM类型定义状态和优先级
- 添加了创建时间和更新时间
- 外键关联用户表
5.2 查询优化实践
- 添加适当的索引：
sql复制CREATE INDEX idx_task_status ON tasks(status);
CREATE INDEX idx_task_priority ON tasks(priority);
- 使用JPA的@EntityGraph解决N+1问题：
java复制@EntityGraph(attributePaths = {"assignee", "creator"})
Page<Task> findByStatus(String status, Pageable pageable);
- 慢查询监控：
yaml复制spring:
jpa:
properties:
hibernate:
generate_statistics: true
session.events.log: true
6. 部署与运维
6.1 Docker化部署
后端Dockerfile优化：
- 使用多阶段构建减小镜像体积
- 添加健康检查
- 配置JVM参数
dockerfile复制FROM maven:3.8.4-jdk-11 AS build
COPY . .
RUN mvn clean package -DskipTests
FROM openjdk:11-jre-slim
COPY --from=build /target/*.jar app.jar
HEALTHCHECK --interval=30s --timeout=3s \
CMD curl -f http://localhost:8080/actuator/health || exit 1
ENTRYPOINT ["java","-jar","/app.jar"]
6.2 生产环境配置
application-prod.yml关键配置：
yaml复制spring:
datasource:
url: jdbc:mysql://mysql:3306/taskmanager?useSSL=false
username: ${DB_USER}
password: ${DB_PASSWORD}
hikari:
maximum-pool-size: 20
jpa:
show-sql: false
hibernate:
ddl-auto: validate
7. 开发流程优化
7.1 Git分支策略
我们采用Git Flow变种：
- main分支：生产环境代码
- develop分支：集成测试环境
- feature/*：功能开发分支
- release/*：预发布分支
- hotfix/*：紧急修复分支
7.2 CI/CD流水线
GitHub Actions配置要点：
- 代码检查（Checkstyle、PMD）
- 单元测试（覆盖率要求>80%）
- 构建Docker镜像
- 部署到测试环境
- 人工确认后部署生产
8. 使用Cursor的最佳实践
8.1 高效提示技巧
- 提供足够上下文：
code复制我正在开发一个任务管理系统的任务分配功能。后端使用Spring Boot，已有Task实体和User实体。需要实现：
- 分配任务给用户
- 检查用户是否有权限接受任务
- 发送通知邮件
请生成完整的Service层代码，包括必要的验证逻辑。
- 分步骤请求：
- 先要接口设计
- 再要实现代码
- 最后要测试用例
8.2 代码审查要点
即使使用AI生成代码，仍需人工审查：
- 安全检查：SQL注入、XSS防护
- 性能考虑：N+1查询、缓存策略
- 业务逻辑正确性
- 代码风格一致性
9. 项目扩展方向
9.1 功能扩展
- 实时通知：集成WebSocket
- 文件上传：使用MinIO或阿里云OSS
- 数据导出：EasyExcel实现Excel导出
- 工作流引擎：集成Activiti
9.2 性能优化
前端：
- 组件懒加载
- 虚拟滚动长列表
- 图片懒加载
后端：
- 缓存常用数据
- 异步处理耗时操作
- 数据库读写分离
在实际项目中，我们通过这套架构成功支持了日均10万+请求的业务场景。关键在于合理的分层设计和持续的性能优化。记住，没有完美的架构，只有适合当前业务需求的架构。随着业务发展，架构也需要不断演进。