零手写代码！用Cursor 10分钟搭建完整Todo待办网站（SpringBoot+Vue3全流程

2401_82753448

751人浏览 · 2026-04-21 10:27:22

2401_82753448 · 2026-04-21 10:27:22 发布

作为程序员，我们常被重复编码占用大量时间，而Cursor的AI生成能力，能帮我们彻底解放双手——无需手写一行代码，只需创建空文件、输入提示词，就能自动生成完整的前后端代码，快速搭建可直接使用的项目。

今天就带大家实战：用Cursor搭建一个完整的Todo待办网站，技术栈为SpringBoot 3（后端）+ Vue3（前端）+ MySQL（数据库），全程10分钟搞定，步骤清晰可复现，新手也能轻松上手，做完直接就能发布展示！

核心优势：全程无需手写代码，仅需3件事——创建空文件、输入提示词、执行命令，Cursor自动帮我们完成所有编码工作，极大提升开发效率。

一、准备工作（2分钟搞定）

先做好基础准备，确保后续步骤顺畅，全程鼠标操作即可，无需复杂配置。

在电脑桌面上新建一个文件夹，命名为 todo-app（作为整个项目的根目录）；
打开Cursor软件，点击顶部菜单栏 File → Open Folder，选择刚刚新建的 todo-app 文件夹，将其导入Cursor；
确保电脑已安装：JDK 17+（运行SpringBoot后端）、MySQL（存储数据）、Node.js（运行Vue3前端）、Maven（构建后端），未安装的话先简单安装，不影响后续步骤（报错时再补装也可）。

二、第一步：创建后端文件（Cursor自动生成代码）

后端采用SpringBoot 3，需先手动创建指定的空文件夹和空文件，再通过Cursor的 Cmd+K（Mac）/ Ctrl+K（Win） 输入提示词，让AI自动填充代码，全程无需手写。

按以下顺序创建10个空文件，每个文件的创建路径、提示词都已明确，直接照做即可。

1. 创建 backend/pom.xml

在 todo-app 根目录下，右键新建文件夹，命名为 backend（后端项目目录）；
在backend 文件夹下，右键新建文件，命名为 pom.xml；
在Cursor中双击打开 pom.xml 文件；
按Cmd+K（Mac）/ Ctrl+K（Win），输入以下提示词，回车： 生成 SpringBoot 3 的 pom.xml，包含 web、mybatis-plus、mysql驱动、lombok，groupId=com.todo
Cursor会自动生成完整的pom.xml配置文件，按 Cmd+S（Mac）/ Ctrl+S（Win） 保存即可。

2. 创建 backend/src/main/resources/application.yml

在 backend 文件夹下，依次新建文件夹：src → main → resources（层级不要错）；
在 resources 文件夹下，右键新建文件，命名为 application.yml；
打开该文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 生成 application.yml，数据源配置数据库 todo，用户名 root，密码 123456，端口 8080
自动生成后保存（后续可根据自己的MySQL密码修改配置）。

3. 创建 backend/src/main/java/com/todo/TodoApplication.java

在 backend/src/main/java 下，依次新建文件夹：com → todo；
在 todo 文件夹下，新建文件TodoApplication.java；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 生成 SpringBoot 启动类，包名 com.todo
保存自动生成的启动类代码。

4. 创建 backend/src/main/java/com/todo/entity/Todo.java

在 com/todo 文件夹下，新建文件夹 entity；
在 entity 下，新建文件 Todo.java；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 生成实体类 Todo，属性 id Long，title String，completed Boolean，createTime LocalDateTime，用 Lombok
保存代码（Lombok会自动生成getter、setter、构造方法，无需手动写）。

5. 创建 backend/src/main/java/com/todo/mapper/TodoMapper.java

在 com/todo 下，新建文件夹 mapper；
新建文件 TodoMapper.java；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 生成 TodoMapper 接口，继承 BaseMapper<Todo>，添加 @Mapper 注解
保存代码（MyBatis-Plus的BaseMapper会自动提供基础CRUD方法）。

6. 创建 backend/src/main/java/com/todo/service/TodoService.java

在 com/todo 下，新建文件夹 service；
新建文件 TodoService.java；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 生成 TodoService 接口，包含 list、add、updateStatus、delete 方法
保存接口代码。

7. 创建 backend/src/main/java/com/todo/service/impl/TodoServiceImpl.java

在 service 文件夹下，新建文件夹 impl；
在 impl 下，新建文件 TodoServiceImpl.java；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 生成 TodoServiceImpl 实现 TodoService，使用 MyBatis Plus 的 ServiceImpl，实现增删改查
保存实现类代码（ServiceImpl会自动继承MyBatis-Plus的服务层方法，无需手动实现）。

8. 创建 backend/src/main/java/com/todo/controller/TodoController.java

在 com/todo 下，新建文件夹 controller；
新建文件 TodoController.java；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 生成 TodoController，REST 接口：GET /todos 查所有，POST /todos 新增，PUT /todos/{id} 修改状态，DELETE /todos/{id} 删除。返回统一格式 Result {code,message,data}
保存控制器代码（自动生成RESTful接口，无需手动编写接口逻辑）。

9. 创建 backend/src/main/java/com/todo/config/CorsConfig.java

在 com/todo 下，新建文件夹 config；
新建文件 CorsConfig.java；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 生成 SpringBoot 跨域配置类，允许所有来源和方法
保存配置类（解决前后端跨域问题，避免前端调用后端接口报错）。

10. 创建 schema.sql（项目根目录）

回到 todo-app 根目录（和 backend 文件夹平级）；
右键新建文件，命名为 schema.sql；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 根据上面的 Todo 实体生成 MySQL 建表语句，表名 todo
保存SQL文件（用于初始化数据库表）。

三、第二步：初始化数据库（1分钟）

后端代码生成完成后，需先创建数据库和数据表，确保后端能正常连接数据库。

打开你的MySQL客户端（Navicat、MySQL命令行、DataGrip等均可）；
新建一个数据库，命名为 todo（和application.yml中配置的数据库名一致）；
打开 schema.sql 文件，复制里面的建表语句；
在MySQL客户端中，选中 todo 数据库，粘贴建表语句，执行即可（生成todo数据表，用于存储待办事项）。

四、第三步：运行后端（1分钟）

后端代码和数据库都准备好后，启动后端服务，确保接口能正常访问。

打开Cursor的终端：点击顶部菜单栏 Terminal → New Terminal；
在终端中，切换到 todo-app/backend 目录（输入命令 cd backend，Windows系统同样适用）；
输入启动命令，回车： mvn spring-boot:run
等待启动完成，当终端出现 Started TodoApplication 字样，说明后端启动成功；
若报错“mvn不是内部或外部命令”，说明未安装Maven，可直接用IDEA打开 backend 文件夹，找到 TodoApplication.java，点击main方法运行即可。

五、第四步：创建前端文件（Cursor自动生成代码）

前端采用Vue3 + Vite + Axios，同样只需手动创建空文件，用Cursor自动生成代码，步骤和后端类似，按顺序操作即可。

11. 创建 frontend/package.json

在 todo-app 根目录下，新建文件夹 frontend（前端项目目录）；
在 frontend 下，新建文件 package.json；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 生成 Vue 3 项目的 package.json，包含 vue、axios、vue-router、vite
保存文件（自动生成前端项目依赖配置）。

12. 创建 frontend/src/main.js

在 frontend下，新建文件夹 src；
在 src 下，新建文件 main.js；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 生成 Vue 3 的入口文件 main.js，引入 App 和 router，挂载到 #app
保存入口文件代码。

13. 创建 frontend/src/App.vue

在 src 下，新建文件 App.vue（前端核心组件）；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车：生成待办事项的 Vue 3 组件：包含输入框和添加按钮，展示列表，每项有复选框（切换完成状态）和删除按钮。调用后端 API（localhost:8080/todos），使用 axios。样式简洁。
保存组件代码（自动生成前端页面布局和接口调用逻辑）。

14. 创建 frontend/src/router/index.js

在 src 下，新建文件夹 router；
在 router 下，新建文件 index.js；
打开文件，按 Cmd+K/Ctrl+K，输入提示词，回车： 生成 Vue Router 配置文件，路由指向 App 组件
保存路由配置文件。

15. 创建 frontend/vite.config.js

在 frontend 根目录下，新建文件 vite.config.js；
打开文件，按Cmd+K/Ctrl+K，输入提示词，回车： 生成 Vite 配置文件，配置代理解决跨域，将 /api 代理到 http://localhost:8080
保存配置文件（解决前端调用后端接口的跨域问题，和后端CorsConfig双重保障）。

六、第五步：运行前端（1分钟）

前端文件生成完成后，安装依赖并启动前端服务，即可访问Todo网站。

打开一个新的终端（避免和后端终端冲突），切换到 todo-app/frontend目录（输入 cd frontend）；
先安装前端依赖，输入命令，回车（等待安装完成，约1-2分钟）： npm install
依赖安装完成后，启动前端服务，输入命令，回车： npm run dev
启动成功后，终端会显示 Local: http://localhost:5173，复制这个地址，在浏览器中打开即可。

七、第六步：测试Todo网站（1分钟）

前后端都启动成功后，测试网站功能，确保所有操作正常，全程无需修改代码。

在浏览器输入框中，输入待办事项（如“用Cursor搭建Todo网站”），点击添加按钮，列表会自动刷新，显示新增的待办；
勾选待办事项前的复选框，可切换待办的完成状态（已完成/未完成）；
点击待办事项右侧的删除按钮，可删除该待办事项；
若遇到错误（如浏览器控制台报错、后端终端报错），复制错误信息，在Cursor中按 Cmd+K/Ctrl+K，输入 修复这个错误：[粘贴错误信息]，Cursor会自动给出修复方案，按照提示修改即可。