作为一名刚经历过毕业设计的学长我深知从零开始构建一个完整、可交付的全栈项目对新手来说有多难。选题迷茫、技术栈混乱、代码写完却跑不起来、部署上线就崩溃……这些都是我曾踩过的坑。今天我就以“过来人”的身份手把手带你走一遍全流程目标是让你能独立完成一个结构清晰、可稳定运行、能放进简历的毕业设计项目。1. 新手避坑为什么你的项目总是“差点意思”很多同学的项目最终效果不佳往往不是因为技术不够难而是基础工程环节出了问题。下面这几个痛点看看你中了几条功能堆砌缺乏主线为了显得“高大上”把能想到的功能都塞进去比如一个博客系统非要加上在线聊天和游戏模块。结果每个功能都做得很浅核心逻辑反而模糊答辩时老师一问就露馅。毕业设计的核心是展示你解决一个具体问题的完整能力而不是功能的数量。前后端联调失败这是最常见的“卡脖子”环节。前端说接口返回数据不对后端说前端根本没发请求。问题根源往往是沟通协议API文档没对齐或者对跨域CORS等基础概念不熟悉导致开发效率极低。“在我电脑上是好的”项目在本地运行完美一旦部署到服务器就各种报错端口被占用、数据库连接失败、静态资源404。这通常是因为忽略了环境差异比如在代码里硬编码了本地数据库密码或者没有正确处理生产环境的配置。代码即“泥球”所有代码都写在一个或几个文件里没有分层没有注释。过一周自己都看不懂更别说让答辩老师理解了。这种项目即使功能实现了也体现不出任何工程素养。认识到这些问题我们就有了明确的改进目标做一个架构清晰、文档齐全、易于部署和维护的项目。2. 技术栈选择不追新只求稳技术选型不是选最火的而是选最适合毕业设计场景的学习曲线平缓、社区活跃、资料丰富。前端框架Vue 3 vs ReactVue 3推荐。它的组合式APIComposition API逻辑组织更灵活单文件组件.vue把模板、逻辑、样式放一起非常直观。对于从jQuery或原生JS过渡过来的同学尤其友好。生态方面路由有Vue Router状态管理有Pinia比Vuex更简单脚手架Vite构建速度极快。React功能强大生态更庞大但学习成本稍高。你需要同时理解JSX、Hooks、函数式组件等概念。对于时间紧张的毕业设计Vue的上手速度通常更快。后端框架Spring Boot vs Django/ExpressSpring Boot (Java)推荐。它是企业级开发的事实标准之一毕业设计用它非常“稳”。优点在于1) 自动化配置快速启动2) 生态极其完善安全、数据库、缓存等都有成熟方案3) 强大的IDEA工具支持写代码很舒服。虽然Java语法稍显繁琐但结构清晰易于答辩时讲解。Django (Python) “开箱即用”的典范自带Admin后台、ORM、用户认证开发效率高。如果你Python很熟且项目偏重业务逻辑而非复杂并发Django是绝佳选择。Express (Node.js) 轻量灵活全栈JavaScript语言统一。适合对JS/TS非常熟悉追求快速迭代的同学。数据库MySQL无脑选MySQL或PostgreSQL。它们的关系型模型容易理解Spring Boot的JPA或MyBatis框架对它们支持非常好。不要为了“炫技”在毕业设计中引入MongoDB等NoSQL除非你的数据模型确实是非关系型的。我们的选择Vue 3 Pinia Spring Boot MySQL。这套组合在保证功能完整性和技术认可度的同时能将学习成本控制在合理范围。3. 实战构建一个极简待办事项TodoList全栈项目我们以最经典的TodoList为例贯穿前后端。目标是理解数据如何从前端表单经过网络请求抵达后端服务最终存入数据库并返回的完整闭环。3.1 项目结构与初始化首先建立清晰的项目目录。这是工程化的第一步。毕业设计项目/ ├── frontend/ # Vue3前端项目 │ ├── public/ │ ├── src/ │ │ ├── assets/ │ │ ├── components/ # 可复用组件 │ │ ├── router/ # 路由 │ │ ├── stores/ # Pinia状态管理 │ │ ├── views/ # 页面组件 │ │ ├── App.vue │ │ └── main.js │ └── package.json └── backend/ # Spring Boot后端项目 ├── src/main/java/com/yourname/todo/ │ ├── controller/ # REST API控制器 │ ├── service/ # 业务逻辑层 │ ├── repository/ # 数据访问层JPA │ ├── model/ # 数据实体类 │ └── TodoApplication.java # 启动类 ├── src/main/resources/ │ ├── application.properties # 配置文件 │ └── ... └── pom.xml使用IDE或命令行分别初始化Vue项目和Spring Boot项目。3.2 后端实现Spring Boot第一步定义数据模型。在model包下创建Todo.java。import jakarta.persistence.*; import java.time.LocalDateTime; Entity Table(name todos) // 对应数据库表名 public class Todo { Id GeneratedValue(strategy GenerationType.IDENTITY) // 主键自增 private Long id; Column(nullable false) // 标题不能为空 private String title; private String description; private boolean completed false; // 默认未完成 Column(name created_at) private LocalDateTime createdAt LocalDateTime.now(); // 创建时间 // 标准的Getter和Setter方法 (这里省略实际需用Lombok或手动生成) // ... getters and setters }第二步创建数据访问层。在repository包下创建TodoRepository.java。Spring Data JPA会让它自动拥有增删改查的能力。import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; Repository public interface TodoRepository extends JpaRepositoryTodo, Long { // 无需写实现Spring会自动生成基于方法名的查询 // 例如ListTodo findByCompleted(boolean completed); }第三步编写业务逻辑层。在service包下创建TodoService.java。import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; import java.util.Optional; Service public class TodoService { Autowired private TodoRepository todoRepository; // 获取所有待办事项 public ListTodo getAllTodos() { return todoRepository.findAll(); } // 根据ID获取单个事项 public OptionalTodo getTodoById(Long id) { return todoRepository.findById(id); } // 创建新事项 public Todo createTodo(Todo todo) { // 可以在这里添加业务逻辑如验证标题非空 return todoRepository.save(todo); } // 更新事项 public Todo updateTodo(Long id, Todo todoDetails) { return todoRepository.findById(id).map(todo - { todo.setTitle(todoDetails.getTitle()); todo.setDescription(todoDetails.getDescription()); todo.setCompleted(todoDetails.isCompleted()); return todoRepository.save(todo); }).orElseThrow(() - new RuntimeException(Todo not found with id: id)); } // 删除事项 public void deleteTodo(Long id) { todoRepository.deleteById(id); } }第四步暴露REST API。在controller包下创建TodoController.java。这是前后端交互的桥梁。import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.*; import java.util.List; RestController RequestMapping(/api/todos) // 所有接口以 /api/todos 开头 CrossOrigin(origins http://localhost:5173) // 允许Vue前端地址跨域访问 public class TodoController { Autowired private TodoService todoService; // GET /api/todos - 获取所有事项 GetMapping public ListTodo getAllTodos() { return todoService.getAllTodos(); } // GET /api/todos/{id} - 根据ID获取事项 GetMapping(/{id}) public ResponseEntityTodo getTodoById(PathVariable Long id) { return todoService.getTodoById(id) .map(ResponseEntity::ok) .orElse(ResponseEntity.notFound().build()); } // POST /api/todos - 创建新事项 PostMapping public Todo createTodo(RequestBody Todo todo) { // RequestBody 接收JSON数据 return todoService.createTodo(todo); } // PUT /api/todos/{id} - 更新事项 PutMapping(/{id}) public ResponseEntityTodo updateTodo(PathVariable Long id, RequestBody Todo todoDetails) { try { Todo updatedTodo todoService.updateTodo(id, todoDetails); return ResponseEntity.ok(updatedTodo); } catch (RuntimeException e) { return ResponseEntity.notFound().build(); } } // DELETE /api/todos/{id} - 删除事项 DeleteMapping(/{id}) public ResponseEntityVoid deleteTodo(PathVariable Long id) { todoService.deleteTodo(id); return ResponseEntity.noContent().build(); // 返回204状态码 } }在application.properties中配置数据库连接spring.datasource.urljdbc:mysql://localhost:3306/todo_db?useSSLfalseserverTimezoneUTC spring.datasource.usernameroot spring.datasource.passwordyourpassword spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver spring.jpa.hibernate.ddl-autoupdate # 启动时自动更新表结构 spring.jpa.show-sqltrue # 控制台显示SQL语句调试用启动Spring Boot应用访问http://localhost:8080/api/todos你应该能看到一个空数组[]。后端API就准备好了。3.3 前端实现Vue 3 Pinia首先安装必要的依赖axios用于网络请求和pinia状态管理。在前端项目的src/stores目录下创建todoStore.js用于集中管理待办事项的状态和逻辑。import { defineStore } from pinia import { ref } from vue import axios from axios // 创建并导出store export const useTodoStore defineStore(todo, () { // 状态待办事项列表 const todos ref([]) // 状态加载中 const isLoading ref(false) // 创建一个配置好的axios实例统一基础URL const apiClient axios.create({ baseURL: http://localhost:8080/api, // 后端API地址 timeout: 5000 // 超时时间 }) // 动作获取所有待办事项 const fetchTodos async () { isLoading.value true try { const response await apiClient.get(/todos) todos.value response.data } catch (error) { console.error(获取待办事项失败:, error) // 这里可以添加用户提示例如使用Element Plus的Message组件 } finally { isLoading.value false } } // 动作添加新事项 const addTodo async (newTodo) { try { const response await apiClient.post(/todos, newTodo) todos.value.push(response.data) // 将新事项加入列表 return response.data } catch (error) { console.error(添加待办事项失败:, error) throw error // 抛出错误让调用者处理 } } // 动作切换事项完成状态 const toggleTodo async (id, completedStatus) { try { // 这里假设有一个只更新completed状态的接口我们直接用PUT全量更新示例 const todoToUpdate todos.value.find(todo todo.id id) if (todoToUpdate) { const updatedTodo { ...todoToUpdate, completed: completedStatus } const response await apiClient.put(/todos/${id}, updatedTodo) // 更新本地状态 const index todos.value.findIndex(todo todo.id id) if (index ! -1) { todos.value[index] response.data } } } catch (error) { console.error(更新待办事项失败:, error) } } // 动作删除事项 const deleteTodo async (id) { try { await apiClient.delete(/todos/${id}) // 从本地列表中移除 todos.value todos.value.filter(todo todo.id ! id) } catch (error) { console.error(删除待办事项失败:, error) } } // 返回状态和动作供组件使用 return { todos, isLoading, fetchTodos, addTodo, toggleTodo, deleteTodo } })然后在src/views或src/components下创建主组件TodoList.vue。template div classtodo-app h1我的毕业设计待办清单/h1 !-- 添加新事项的表单 -- div classinput-section input v-modelnewTodoTitle keyup.enterhandleAddTodo placeholder请输入待办事项标题... typetext / button clickhandleAddTodo添加/button /div !-- 加载状态提示 -- div v-iftodoStore.isLoading加载中.../div !-- 待办事项列表 -- ul v-else classtodo-list li v-fortodo in todoStore.todos :keytodo.id :class{ completed: todo.completed } input typecheckbox :checkedtodo.completed changetodoStore.toggleTodo(todo.id, !todo.completed) / span{{ todo.title }}/span button clicktodoStore.deleteTodo(todo.id) classdelete-btn删除/button /li /ul !-- 统计信息 -- div classstats 总计: {{ todoStore.todos.length }} | 已完成: {{ completedCount }} | 未完成: {{ todoStore.todos.length - completedCount }} /div /div /template script setup import { ref, computed, onMounted } from vue import { useTodoStore } from /stores/todoStore // 使用Pinia store const todoStore useTodoStore() // 组件内的响应式数据新事项的标题 const newTodoTitle ref() // 计算属性统计已完成数量 const completedCount computed(() { return todoStore.todos.filter(todo todo.completed).length }) // 方法处理添加事项 const handleAddTodo async () { const title newTodoTitle.value.trim() if (!title) { alert(标题不能为空) return } try { await todoStore.addTodo({ title, completed: false }) newTodoTitle.value // 清空输入框 } catch (error) { alert(添加失败请重试) } } // 生命周期钩子组件挂载时获取数据 onMounted(() { todoStore.fetchTodos() }) /script style scoped .todo-app { max-width: 500px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; } .input-section { margin-bottom: 20px; } .input-section input { padding: 8px; width: 70%; margin-right: 10px; } .todo-list { list-style: none; padding: 0; } .todo-list li { padding: 10px; border-bottom: 1px solid #ddd; display: flex; align-items: center; } .todo-list li.completed span { text-decoration: line-through; color: #888; } .delete-btn { margin-left: auto; background-color: #ff6b6b; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; } .stats { margin-top: 20px; color: #666; font-size: 0.9em; } /style最后在main.js中注册Pinia并在App.vue中引入这个组件。分别启动后端端口8080和前端通常是5173访问前端地址一个具备增删改查功能的TodoList就完成了4. 本地测试与云服务器部署4.1 本地测试后端测试使用Postman或Apifox等工具手动测试每个API接口GET/POST/PUT/DELETE确保返回正确的状态码和数据。前端测试在浏览器开发者工具的“网络(Network)”标签页中查看前端发起的请求和接收的响应确认数据流动正常。集成测试操作前端界面添加、完成、删除事项观察列表变化和网络请求。4.2 部署到云服务器以阿里云轻量应用服务器为例准备生产环境在服务器上安装JDK 17、MySQL、Nginx用于反向代理和托管前端静态文件。在MySQL中创建生产数据库如todo_prod并分配专用用户。后端部署在Spring Boot的application-prod.properties文件中配置生产环境的数据库连接信息切记不要提交此文件到Git。使用Maven打包项目mvn clean package -DskipTests会在target目录生成一个.jar文件。将.jar文件上传到服务器。可以使用scp命令。在服务器上运行java -jar your-project.jar --spring.profiles.activeprod。建议使用nohup或systemd让它在后台持续运行。前端部署在前端项目根目录运行npm run build生成dist文件夹包含优化后的静态文件。将dist文件夹内的所有文件上传到服务器例如放到/var/www/todo-frontend。配置Nginx将域名或服务器IP的请求反向代理到后端Spring Boot应用如8080端口并设置根目录指向前端静态文件。# 示例Nginx配置片段 (在 /etc/nginx/conf.d/todo.conf 中) server { listen 80; server_name your-domain.com; # 或你的服务器IP # 前端静态文件 location / { root /var/www/todo-frontend; index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } # 后端API代理 location /api/ { proxy_pass http://localhost:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }重启Nginxsudo systemctl restart nginx。现在通过你的服务器IP或域名就能访问部署好的全栈应用了。5. 安全与性能基础考量毕业设计虽小但体现安全意识是加分项。SQL注入防护我们使用的Spring Data JPA通过预编译语句PreparedStatement已经基本防止了SQL注入。绝对不要用字符串拼接的方式构造SQL。CORS配置如上文在Controller中使用CrossOrigin注解或在Spring Security中全局配置明确允许的前端源地址。生产环境应替换localhost为实际域名。接口响应时间对于简单的CRUD性能通常不是问题。但可以注意数据库查询避免SELECT *只取需要的字段。如果列表数据量大考虑分页Spring Data JPA的Pageable很简单。在后端主启动类或Controller方法上添加EnableMetrics或使用简单日志记录关键接口耗时。6. 生产环境避坑指南这些都是我踩过的雷希望你能绕开。Git分支管理混乱不要所有代码都提交到main分支。至少建立develop开发分支、feature/xxx功能分支、hotfix/xxx紧急修复分支。合并前一定要自己 Review 代码。提交信息要规范如feat: 添加用户登录功能、fix: 修复删除事项后列表不刷新的问题。环境变量硬编码数据库密码、API密钥等敏感信息绝不能直接写在代码里。Spring Boot可以使用application-{profile}.properties或环境变量如SPRING_DATASOURCE_PASSWORD来管理。前端敏感配置如API基础URL也可通过.env文件管理。缺少日志系统出问题时没有日志寸步难行。在Spring Boot中合理使用Slf4j注解记录INFO、WARN、ERROR级别的日志帮助你快速定位是网络问题、数据库问题还是业务逻辑问题。忽略错误处理前端要对网络请求失败如401、404、500做统一处理给用户友好提示而不是控制台一片红。后端也要定义统一的异常处理类ControllerAdvice返回结构化的错误信息而不是暴露堆栈详情给前端。没有备份数据库要定期备份。服务器上的应用部署脚本、Nginx配置等也要有备份。可以使用Git来管理这些配置脚本。写在最后跟着以上步骤你应该已经拥有了一个结构清晰、前后端分离、可部署上线的全栈项目骨架。但这仅仅是开始你的毕业设计需要在这个骨架上生长出血肉。下一步尝试扩展它增加用户认证注册/登录使用Spring Security JWT。为待办事项添加分类、标签、优先级、截止日期。实现数据可视化比如用ECharts展示任务完成趋势。最重要的是在答辩时不要只演示功能。要能清晰地讲出为什么选择这个技术栈权衡学习成本、社区、项目需求你的项目结构是如何组织的分层架构MVC或前后端分离你考虑了哪些安全性和性能问题CORS、SQL注入、日志部署流程是怎样的从代码到线上服务的完整路径如果用户量增加哪里可能成为瓶颈如何优化数据库索引、缓存、异步处理工程能力就体现在这些看似不起眼却决定项目能否稳健运行的选择和细节里。祝你毕业设计顺利做出一个让自己骄傲的作品
计算机毕业设计学长指南：新手如何从零构建一个可交付的全栈项目
发布时间：2026/5/20 9:50:49
作为一名刚经历过毕业设计的学长我深知从零开始构建一个完整、可交付的全栈项目对新手来说有多难。选题迷茫、技术栈混乱、代码写完却跑不起来、部署上线就崩溃……这些都是我曾踩过的坑。今天我就以“过来人”的身份手把手带你走一遍全流程目标是让你能独立完成一个结构清晰、可稳定运行、能放进简历的毕业设计项目。1. 新手避坑为什么你的项目总是“差点意思”很多同学的项目最终效果不佳往往不是因为技术不够难而是基础工程环节出了问题。下面这几个痛点看看你中了几条功能堆砌缺乏主线为了显得“高大上”把能想到的功能都塞进去比如一个博客系统非要加上在线聊天和游戏模块。结果每个功能都做得很浅核心逻辑反而模糊答辩时老师一问就露馅。毕业设计的核心是展示你解决一个具体问题的完整能力而不是功能的数量。前后端联调失败这是最常见的“卡脖子”环节。前端说接口返回数据不对后端说前端根本没发请求。问题根源往往是沟通协议API文档没对齐或者对跨域CORS等基础概念不熟悉导致开发效率极低。“在我电脑上是好的”项目在本地运行完美一旦部署到服务器就各种报错端口被占用、数据库连接失败、静态资源404。这通常是因为忽略了环境差异比如在代码里硬编码了本地数据库密码或者没有正确处理生产环境的配置。代码即“泥球”所有代码都写在一个或几个文件里没有分层没有注释。过一周自己都看不懂更别说让答辩老师理解了。这种项目即使功能实现了也体现不出任何工程素养。认识到这些问题我们就有了明确的改进目标做一个架构清晰、文档齐全、易于部署和维护的项目。2. 技术栈选择不追新只求稳技术选型不是选最火的而是选最适合毕业设计场景的学习曲线平缓、社区活跃、资料丰富。前端框架Vue 3 vs ReactVue 3推荐。它的组合式APIComposition API逻辑组织更灵活单文件组件.vue把模板、逻辑、样式放一起非常直观。对于从jQuery或原生JS过渡过来的同学尤其友好。生态方面路由有Vue Router状态管理有Pinia比Vuex更简单脚手架Vite构建速度极快。React功能强大生态更庞大但学习成本稍高。你需要同时理解JSX、Hooks、函数式组件等概念。对于时间紧张的毕业设计Vue的上手速度通常更快。后端框架Spring Boot vs Django/ExpressSpring Boot (Java)推荐。它是企业级开发的事实标准之一毕业设计用它非常“稳”。优点在于1) 自动化配置快速启动2) 生态极其完善安全、数据库、缓存等都有成熟方案3) 强大的IDEA工具支持写代码很舒服。虽然Java语法稍显繁琐但结构清晰易于答辩时讲解。Django (Python) “开箱即用”的典范自带Admin后台、ORM、用户认证开发效率高。如果你Python很熟且项目偏重业务逻辑而非复杂并发Django是绝佳选择。Express (Node.js) 轻量灵活全栈JavaScript语言统一。适合对JS/TS非常熟悉追求快速迭代的同学。数据库MySQL无脑选MySQL或PostgreSQL。它们的关系型模型容易理解Spring Boot的JPA或MyBatis框架对它们支持非常好。不要为了“炫技”在毕业设计中引入MongoDB等NoSQL除非你的数据模型确实是非关系型的。我们的选择Vue 3 Pinia Spring Boot MySQL。这套组合在保证功能完整性和技术认可度的同时能将学习成本控制在合理范围。3. 实战构建一个极简待办事项TodoList全栈项目我们以最经典的TodoList为例贯穿前后端。目标是理解数据如何从前端表单经过网络请求抵达后端服务最终存入数据库并返回的完整闭环。3.1 项目结构与初始化首先建立清晰的项目目录。这是工程化的第一步。毕业设计项目/ ├── frontend/ # Vue3前端项目 │ ├── public/ │ ├── src/ │ │ ├── assets/ │ │ ├── components/ # 可复用组件 │ │ ├── router/ # 路由 │ │ ├── stores/ # Pinia状态管理 │ │ ├── views/ # 页面组件 │ │ ├── App.vue │ │ └── main.js │ └── package.json └── backend/ # Spring Boot后端项目 ├── src/main/java/com/yourname/todo/ │ ├── controller/ # REST API控制器 │ ├── service/ # 业务逻辑层 │ ├── repository/ # 数据访问层JPA │ ├── model/ # 数据实体类 │ └── TodoApplication.java # 启动类 ├── src/main/resources/ │ ├── application.properties # 配置文件 │ └── ... └── pom.xml使用IDE或命令行分别初始化Vue项目和Spring Boot项目。3.2 后端实现Spring Boot第一步定义数据模型。在model包下创建Todo.java。import jakarta.persistence.*; import java.time.LocalDateTime; Entity Table(name todos) // 对应数据库表名 public class Todo { Id GeneratedValue(strategy GenerationType.IDENTITY) // 主键自增 private Long id; Column(nullable false) // 标题不能为空 private String title; private String description; private boolean completed false; // 默认未完成 Column(name created_at) private LocalDateTime createdAt LocalDateTime.now(); // 创建时间 // 标准的Getter和Setter方法 (这里省略实际需用Lombok或手动生成) // ... getters and setters }第二步创建数据访问层。在repository包下创建TodoRepository.java。Spring Data JPA会让它自动拥有增删改查的能力。import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.stereotype.Repository; Repository public interface TodoRepository extends JpaRepositoryTodo, Long { // 无需写实现Spring会自动生成基于方法名的查询 // 例如ListTodo findByCompleted(boolean completed); }第三步编写业务逻辑层。在service包下创建TodoService.java。import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; import java.util.Optional; Service public class TodoService { Autowired private TodoRepository todoRepository; // 获取所有待办事项 public ListTodo getAllTodos() { return todoRepository.findAll(); } // 根据ID获取单个事项 public OptionalTodo getTodoById(Long id) { return todoRepository.findById(id); } // 创建新事项 public Todo createTodo(Todo todo) { // 可以在这里添加业务逻辑如验证标题非空 return todoRepository.save(todo); } // 更新事项 public Todo updateTodo(Long id, Todo todoDetails) { return todoRepository.findById(id).map(todo - { todo.setTitle(todoDetails.getTitle()); todo.setDescription(todoDetails.getDescription()); todo.setCompleted(todoDetails.isCompleted()); return todoRepository.save(todo); }).orElseThrow(() - new RuntimeException(Todo not found with id: id)); } // 删除事项 public void deleteTodo(Long id) { todoRepository.deleteById(id); } }第四步暴露REST API。在controller包下创建TodoController.java。这是前后端交互的桥梁。import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.*; import java.util.List; RestController RequestMapping(/api/todos) // 所有接口以 /api/todos 开头 CrossOrigin(origins http://localhost:5173) // 允许Vue前端地址跨域访问 public class TodoController { Autowired private TodoService todoService; // GET /api/todos - 获取所有事项 GetMapping public ListTodo getAllTodos() { return todoService.getAllTodos(); } // GET /api/todos/{id} - 根据ID获取事项 GetMapping(/{id}) public ResponseEntityTodo getTodoById(PathVariable Long id) { return todoService.getTodoById(id) .map(ResponseEntity::ok) .orElse(ResponseEntity.notFound().build()); } // POST /api/todos - 创建新事项 PostMapping public Todo createTodo(RequestBody Todo todo) { // RequestBody 接收JSON数据 return todoService.createTodo(todo); } // PUT /api/todos/{id} - 更新事项 PutMapping(/{id}) public ResponseEntityTodo updateTodo(PathVariable Long id, RequestBody Todo todoDetails) { try { Todo updatedTodo todoService.updateTodo(id, todoDetails); return ResponseEntity.ok(updatedTodo); } catch (RuntimeException e) { return ResponseEntity.notFound().build(); } } // DELETE /api/todos/{id} - 删除事项 DeleteMapping(/{id}) public ResponseEntityVoid deleteTodo(PathVariable Long id) { todoService.deleteTodo(id); return ResponseEntity.noContent().build(); // 返回204状态码 } }在application.properties中配置数据库连接spring.datasource.urljdbc:mysql://localhost:3306/todo_db?useSSLfalseserverTimezoneUTC spring.datasource.usernameroot spring.datasource.passwordyourpassword spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver spring.jpa.hibernate.ddl-autoupdate # 启动时自动更新表结构 spring.jpa.show-sqltrue # 控制台显示SQL语句调试用启动Spring Boot应用访问http://localhost:8080/api/todos你应该能看到一个空数组[]。后端API就准备好了。3.3 前端实现Vue 3 Pinia首先安装必要的依赖axios用于网络请求和pinia状态管理。在前端项目的src/stores目录下创建todoStore.js用于集中管理待办事项的状态和逻辑。import { defineStore } from pinia import { ref } from vue import axios from axios // 创建并导出store export const useTodoStore defineStore(todo, () { // 状态待办事项列表 const todos ref([]) // 状态加载中 const isLoading ref(false) // 创建一个配置好的axios实例统一基础URL const apiClient axios.create({ baseURL: http://localhost:8080/api, // 后端API地址 timeout: 5000 // 超时时间 }) // 动作获取所有待办事项 const fetchTodos async () { isLoading.value true try { const response await apiClient.get(/todos) todos.value response.data } catch (error) { console.error(获取待办事项失败:, error) // 这里可以添加用户提示例如使用Element Plus的Message组件 } finally { isLoading.value false } } // 动作添加新事项 const addTodo async (newTodo) { try { const response await apiClient.post(/todos, newTodo) todos.value.push(response.data) // 将新事项加入列表 return response.data } catch (error) { console.error(添加待办事项失败:, error) throw error // 抛出错误让调用者处理 } } // 动作切换事项完成状态 const toggleTodo async (id, completedStatus) { try { // 这里假设有一个只更新completed状态的接口我们直接用PUT全量更新示例 const todoToUpdate todos.value.find(todo todo.id id) if (todoToUpdate) { const updatedTodo { ...todoToUpdate, completed: completedStatus } const response await apiClient.put(/todos/${id}, updatedTodo) // 更新本地状态 const index todos.value.findIndex(todo todo.id id) if (index ! -1) { todos.value[index] response.data } } } catch (error) { console.error(更新待办事项失败:, error) } } // 动作删除事项 const deleteTodo async (id) { try { await apiClient.delete(/todos/${id}) // 从本地列表中移除 todos.value todos.value.filter(todo todo.id ! id) } catch (error) { console.error(删除待办事项失败:, error) } } // 返回状态和动作供组件使用 return { todos, isLoading, fetchTodos, addTodo, toggleTodo, deleteTodo } })然后在src/views或src/components下创建主组件TodoList.vue。template div classtodo-app h1我的毕业设计待办清单/h1 !-- 添加新事项的表单 -- div classinput-section input v-modelnewTodoTitle keyup.enterhandleAddTodo placeholder请输入待办事项标题... typetext / button clickhandleAddTodo添加/button /div !-- 加载状态提示 -- div v-iftodoStore.isLoading加载中.../div !-- 待办事项列表 -- ul v-else classtodo-list li v-fortodo in todoStore.todos :keytodo.id :class{ completed: todo.completed } input typecheckbox :checkedtodo.completed changetodoStore.toggleTodo(todo.id, !todo.completed) / span{{ todo.title }}/span button clicktodoStore.deleteTodo(todo.id) classdelete-btn删除/button /li /ul !-- 统计信息 -- div classstats 总计: {{ todoStore.todos.length }} | 已完成: {{ completedCount }} | 未完成: {{ todoStore.todos.length - completedCount }} /div /div /template script setup import { ref, computed, onMounted } from vue import { useTodoStore } from /stores/todoStore // 使用Pinia store const todoStore useTodoStore() // 组件内的响应式数据新事项的标题 const newTodoTitle ref() // 计算属性统计已完成数量 const completedCount computed(() { return todoStore.todos.filter(todo todo.completed).length }) // 方法处理添加事项 const handleAddTodo async () { const title newTodoTitle.value.trim() if (!title) { alert(标题不能为空) return } try { await todoStore.addTodo({ title, completed: false }) newTodoTitle.value // 清空输入框 } catch (error) { alert(添加失败请重试) } } // 生命周期钩子组件挂载时获取数据 onMounted(() { todoStore.fetchTodos() }) /script style scoped .todo-app { max-width: 500px; margin: 20px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; } .input-section { margin-bottom: 20px; } .input-section input { padding: 8px; width: 70%; margin-right: 10px; } .todo-list { list-style: none; padding: 0; } .todo-list li { padding: 10px; border-bottom: 1px solid #ddd; display: flex; align-items: center; } .todo-list li.completed span { text-decoration: line-through; color: #888; } .delete-btn { margin-left: auto; background-color: #ff6b6b; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; } .stats { margin-top: 20px; color: #666; font-size: 0.9em; } /style最后在main.js中注册Pinia并在App.vue中引入这个组件。分别启动后端端口8080和前端通常是5173访问前端地址一个具备增删改查功能的TodoList就完成了4. 本地测试与云服务器部署4.1 本地测试后端测试使用Postman或Apifox等工具手动测试每个API接口GET/POST/PUT/DELETE确保返回正确的状态码和数据。前端测试在浏览器开发者工具的“网络(Network)”标签页中查看前端发起的请求和接收的响应确认数据流动正常。集成测试操作前端界面添加、完成、删除事项观察列表变化和网络请求。4.2 部署到云服务器以阿里云轻量应用服务器为例准备生产环境在服务器上安装JDK 17、MySQL、Nginx用于反向代理和托管前端静态文件。在MySQL中创建生产数据库如todo_prod并分配专用用户。后端部署在Spring Boot的application-prod.properties文件中配置生产环境的数据库连接信息切记不要提交此文件到Git。使用Maven打包项目mvn clean package -DskipTests会在target目录生成一个.jar文件。将.jar文件上传到服务器。可以使用scp命令。在服务器上运行java -jar your-project.jar --spring.profiles.activeprod。建议使用nohup或systemd让它在后台持续运行。前端部署在前端项目根目录运行npm run build生成dist文件夹包含优化后的静态文件。将dist文件夹内的所有文件上传到服务器例如放到/var/www/todo-frontend。配置Nginx将域名或服务器IP的请求反向代理到后端Spring Boot应用如8080端口并设置根目录指向前端静态文件。# 示例Nginx配置片段 (在 /etc/nginx/conf.d/todo.conf 中) server { listen 80; server_name your-domain.com; # 或你的服务器IP # 前端静态文件 location / { root /var/www/todo-frontend; index index.html; try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } # 后端API代理 location /api/ { proxy_pass http://localhost:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }重启Nginxsudo systemctl restart nginx。现在通过你的服务器IP或域名就能访问部署好的全栈应用了。5. 安全与性能基础考量毕业设计虽小但体现安全意识是加分项。SQL注入防护我们使用的Spring Data JPA通过预编译语句PreparedStatement已经基本防止了SQL注入。绝对不要用字符串拼接的方式构造SQL。CORS配置如上文在Controller中使用CrossOrigin注解或在Spring Security中全局配置明确允许的前端源地址。生产环境应替换localhost为实际域名。接口响应时间对于简单的CRUD性能通常不是问题。但可以注意数据库查询避免SELECT *只取需要的字段。如果列表数据量大考虑分页Spring Data JPA的Pageable很简单。在后端主启动类或Controller方法上添加EnableMetrics或使用简单日志记录关键接口耗时。6. 生产环境避坑指南这些都是我踩过的雷希望你能绕开。Git分支管理混乱不要所有代码都提交到main分支。至少建立develop开发分支、feature/xxx功能分支、hotfix/xxx紧急修复分支。合并前一定要自己 Review 代码。提交信息要规范如feat: 添加用户登录功能、fix: 修复删除事项后列表不刷新的问题。环境变量硬编码数据库密码、API密钥等敏感信息绝不能直接写在代码里。Spring Boot可以使用application-{profile}.properties或环境变量如SPRING_DATASOURCE_PASSWORD来管理。前端敏感配置如API基础URL也可通过.env文件管理。缺少日志系统出问题时没有日志寸步难行。在Spring Boot中合理使用Slf4j注解记录INFO、WARN、ERROR级别的日志帮助你快速定位是网络问题、数据库问题还是业务逻辑问题。忽略错误处理前端要对网络请求失败如401、404、500做统一处理给用户友好提示而不是控制台一片红。后端也要定义统一的异常处理类ControllerAdvice返回结构化的错误信息而不是暴露堆栈详情给前端。没有备份数据库要定期备份。服务器上的应用部署脚本、Nginx配置等也要有备份。可以使用Git来管理这些配置脚本。写在最后跟着以上步骤你应该已经拥有了一个结构清晰、前后端分离、可部署上线的全栈项目骨架。但这仅仅是开始你的毕业设计需要在这个骨架上生长出血肉。下一步尝试扩展它增加用户认证注册/登录使用Spring Security JWT。为待办事项添加分类、标签、优先级、截止日期。实现数据可视化比如用ECharts展示任务完成趋势。最重要的是在答辩时不要只演示功能。要能清晰地讲出为什么选择这个技术栈权衡学习成本、社区、项目需求你的项目结构是如何组织的分层架构MVC或前后端分离你考虑了哪些安全性和性能问题CORS、SQL注入、日志部署流程是怎样的从代码到线上服务的完整路径如果用户量增加哪里可能成为瓶颈如何优化数据库索引、缓存、异步处理工程能力就体现在这些看似不起眼却决定项目能否稳健运行的选择和细节里。祝你毕业设计顺利做出一个让自己骄傲的作品
)
