Qoder 开发实战：完成 Spring Boot 与 Vue 3 前后端项目

让 Agent 参与开发时，要把环境、接口约定、文件位置和验收方式一起交代。这篇围绕一个完整的问候项目，依次完成 Spring Boot 后端与 Vue 3 前端，保留实际报错、修复、测试与浏览器检查的过程。

Qoder 使用指南

总览 · 入门实操 · 进阶使用 · 开发实战 · 选型比较

开始前：明确项目与验收顺序

这次练习围绕一个中文“问候接口演示”项目展开：先创建 Spring Boot 后端，再创建 Vue 3 前端，通过实际 HTTP 请求连接两者。两个项目使用独立工作区，运行在同一个 Windows 沙箱中。

先完成后端的测试、启动和浏览器核对，再接入前端；后端需要继续运行。首次使用 Qoder 时，可以先完成入门实操；审批、版本保存和任务边界的说明见进阶使用篇。

开发环境与终端准备

理解 IDE 和集成终端

IDE 是集成开发环境，把代码编辑、项目文件管理、搜索、调试和终端等入口放在同一个工作台里。Agent 可以在其中修改文件、调用命令，并展示改动。版本控制面板通常调用 Git；集成终端则运行 Bash、PowerShell 等 Shell，Shell 是解释和执行命令的程序。

有终端入口不代表开发工具已经装齐。部分 Agent 会附带 Git、Git Bash 或某些运行时，另一些使用系统中已有的程序；还可能只在自身的执行环境中提供这些工具。安装后，应从 Agent 实际使用的终端确认版本和路径。Qoder IDE 终端排查

Git 与 Git Bash 是不同的工具：Git 负责版本控制，Git Bash 提供命令环境。在 PowerShell 中同样可以调用 Git。Windows 上缺少它们时，可安装 Git for Windows。Agent 附带的工具未必加入系统 PATH，遇到“找不到命令”时先确认调用路径，避免重复安装。

Windows 上选择 Git Bash 或 PowerShell 7

开发教程和 Agent 给出的命令可能采用 Bash 写法。实践中可以优先准备 Git Bash，方便复用这类命令；使用 PowerShell 时，在任务中明确要求 PowerShell 语法，尤其注意变量、引号、管道和路径写法，避免混用两个 Shell 的命令。

Qoder IDE 官方终端排查列出了 Windows 上的 Git Bash 和 pwsh，并要求使用 PowerShell 时确认版本为 7 或以上。IDE 中可通过命令面板的 Terminal: Select Default Profile 选择默认终端，随后重启 IDE。官方终端配置

使用 PowerShell 7 时，建议从微软官方页面选择独立 MSI 或 ZIP 安装包，按所选版本提供的格式安装。它与 Windows 自带的 PowerShell 5.1 可以并存；PowerShell 7 使用 pwsh.exe，旧版使用 powershell.exe。ZIP 方式需要自行配置启动入口和 PATH。微软安装说明

商店/MSIX 版有具体限制，例如应用安装目录不可修改，部分系统级配置和远程会话配置受限，因此开发环境优先考虑上述独立包。微软也说明 PowerShell 在受支持的 Windows 版本上享有文件与注册表虚拟化豁免，普通文件操作不能笼统归为“商店版都没权限”。手动下载 MSIX 仍属于同一种打包方式；安装渠道和包格式都要确认。MSIX 限制

在 PowerShell 中可以用以下只读命令检查：

git --version
$PSVersionTable.PSVersion
Get-Command git, bash, pwsh -ErrorAction SilentlyContinue | Select-Object Name, Source

版本检查针对当前终端，查找结果针对当前 PATH；产品内部提供的工具可能另有位置。安装或调整 PATH 后重启 Agent，再确认实际任务使用的程序。交代任务时可以补一句：“当前是 Windows，使用 PowerShell 7，请用 PowerShell 语法执行命令。”

后端：用 Spring Boot 提供问候接口

这一阶段在 Windows 沙箱中的 Qoder CN 桌面版完成一个 Java 开发任务：下载安装 JDK、生成 Spring Boot 项目、编写接口与测试、打包并实际启动。以下操作与截图记录于 2026-10-07，使用 Qwen3.8-Flash。

新建工作区，写清交付与验收要求

在编程模式中新建工作区 qoder-spring-demo，本次目录为沙箱内的 C:\Users\WDAGUtilityAccount\Downloads\qoder-spring-demo。将环境准备也写进任务，明确要求实际执行：

先检查 Java、javac、Git 和构建工具；缺少 JDK 时，从 Eclipse Adoptium 官方来源下载 JDK 21 x64 ZIP，解压到工作区 .tools 中使用。
用 Java 21、Spring Boot 4.1.1、Maven Wrapper 和 Spring Web 创建项目。
提供 GET /api/hello：默认返回 {"message":"Hello, World!"}，name=Qoder 时返回 {"message":"Hello, Qoder!"}。
监听 127.0.0.1:24024，编写并实际运行测试，完成打包和启动，访问两个地址验证 HTTP 状态与响应。
保存中文 README 和运行日志，用 Git 保存源码；不能执行的步骤如实说明。

这里把工具来源、文件位置、接口行为和验收方式一起交代，方便检查 Agent 有没有完成每一步。

下载 JDK，生成项目并检查源码

Qoder 的实际环境检查发现沙箱已有 Git，但没有可用的 JDK 和 Maven。随后从 Eclipse Adoptium 官方来源下载 Temurin JDK 21 ZIP，核对 SHA-256，并解压到 .tools/jdk-21.0.12.1+1/。ZIP 解压是本工作区使用的安装方式，后续命令通过 JAVA_HOME 与路径选择它。Temurin 下载、官方安装说明

项目骨架来自 Spring Initializr。Maven Wrapper 随项目保存，首次运行时下载指定的 Maven；JDK 与构建缓存都放在工作区内。版本记录可在实际生成的 README中查看：

打开工作区文件列表，按职责检查这些入口：

源码中 @GetMapping("/api/hello") 声明接口路径，@RequestParam 的默认值为 World，返回对象由 Spring 转换为 JSON。新手可以先检查这些值是否与自己的任务要求一致。

读取测试报告，确认打包成功

构建过程中遇到了 Spring Boot 4 的测试类包路径与上下文配置问题。Qoder 读取报错与 Surefire 报告后，改用 MockMvc 测试接口，再重新运行。打开测试源码，可以看到两种请求都检查了 HTTP 200、JSON 类型和完整响应内容。

HelloControllerTests 的 2 个接口测试通过；另有应用上下文测试报告，1 个测试通过。合计 3 个测试，0 失败、0 错误、0 跳过。

在项目目录中，按 README 设置 JAVA_HOME 和 Maven 缓存后，可使用项目自带的命令入口：

.\mvnw.cmd test
.\mvnw.cmd package -DskipTests

本次先单独运行测试，成功后再跳过重复测试进行打包。实际打包日志显示 BUILD SUCCESS，生成 target/qoder-spring-demo-0.0.1-SNAPSHOT.jar。检查这份日志时，要把打包成功和前面的测试结果分别核对。

用浏览器复核，并让服务保持运行

Qoder 最初报告两个地址返回 200，但我们在沙箱 Edge 中独立打开时，出现了连接被拒绝。把具体地址和 ERR_CONNECTION_REFUSED 反馈给它，要求检查进程、保持服务运行并间隔复查：

Qoder 查到自己在验证 README 的停止方法后停掉了服务，随后重新启动独立的后台 Java 进程，更新 README。我们再次在沙箱 Edge 中访问，两个接口均成功返回；Qoder 也打开了内置浏览器预览，并在间隔数分钟后复查进程与 HTTP 状态。

这些 127.0.0.1 地址指向运行项目的 Windows 沙箱。在宿主机打开同一地址，会访问宿主机自身；复现时应进入对应环境。后续启动与停止按工作区 README 操作，源码通过 Git 保存，.tools/、target/ 和日志不纳入提交。

保存源码，在其他环境中继续使用

本次实际生成的源码 ZIP已从沙箱复制到文章目录，方便下载复现。沙箱文件列表展示了这个压缩包；其中包含 14 个源码、测试与构建配置文件，JDK、Maven 缓存、target/、日志和 .git 不随包分发。

解压后进入 qoder-spring-demo/，先准备 JDK 21，再按包内 README 设置环境、运行测试和打包。Maven Wrapper 会下载所需的 Maven；启动前确认 24024 端口可用。包内保存了本次验收记录的说明，实际日志仍留在沙箱工作区。

这次练习也说明了验收为什么需要多一步：查看生成的文件和测试报告，再亲自打开接口；遇到问题，把实际错误和期望行为交给 Agent 继续修复。交付前还要检查 README，确保换一个目录解压后能按说明操作。

前端：用 Vue 3 连接已有接口

后端通过验收后，在同一个 Windows 沙箱中创建独立的 Vue 前端工作区 qoder-vue-demo。这次做一个中文“问候接口演示”页面：输入名字，向已有的 Spring Boot 服务发送请求，显示返回结果和最近请求记录。操作记录于 2026-10-07，仍使用 Qoder CN 桌面版的 Qwen3.8-Flash。

开始前，确认后端 http://127.0.0.1:24024/api/hello 能返回 JSON；前端将使用 24025 端口。下面的组件检查、测试和浏览器操作接着上面的后端验收进行。

创建工作区，说明页面行为

从“新建任务”的工作区菜单创建新的工作区，选择沙箱下载目录中的 qoder-vue-demo/。这次把前后端约定与页面验收一起交给 Qoder：

检查 Node.js、npm 和 Git；缺少 Node 时，从官方来源下载兼容的 LTS Windows x64 ZIP，校验后解压到 .tools。
用 Vue 3、Vite 和 TypeScript 创建中文问候页面，保存依赖锁文件。
提供名字输入、发送问候、默认问候、加载状态、失败提示、结果和最近请求记录。
请求相对路径 /api/hello，通过 Vite 代理连接已有的 127.0.0.1:24024 后端；中文和特殊字符须正确编码。
实际运行测试、类型检查与生产构建，在 127.0.0.1:24025 启动并保持服务运行，再用浏览器验证。
保存 README 与日志，用 Git 保存源码并导出源码 ZIP，保持现有后端运行。

任务输入截图记录了交付与验收要求。页面上的问候必须来自实际 HTTP 响应；输入框、按钮和展示结果分别对应用户操作、请求过程和后端返回的数据。

准备 Node，检查组件与代理配置

Qoder 的环境检查发现没有 Node.js 和 npm，已有的后端接口正常。随后从 Node.js 官方来源下载 Node 24 LTS 的 Windows x64 ZIP，核对 SHA-256，解压到工作区 .tools/。下载校验截图和初始化记录保留了实际过程。

Vue 官方快速上手使用 Vite 构建项目；单文件组件可以把模板、逻辑和样式放在同一个 .vue 文件中。本次使用 TypeScript 与 Composition API，打开工作区文件列表，先检查以下入口。Vue 官方快速上手

浏览器请求前端的 /api/hello，Vite 开发服务再转发到 http://127.0.0.1:24024，因此无需为这次演示修改后端的跨域配置。strictPort: true 使端口占用时直接报告错误，便于按固定地址验收。Vite 服务配置

请求源码截图中，空名字使用默认接口，其他名字经 URLSearchParams 编码；fetch 取得响应后检查 HTTP 状态和 message 字段，再更新 Vue 的状态。模板随状态更新结果、按钮和记录，组成一次完整的页面交互。

运行测试，再用浏览器验收

本次实际安装 Node.js 24.21.0、npm 11.19.0，锁文件中的 Vue 为 3.5.43、Vite 为 8.3.3、TypeScript 为 6.0.3。复现这个项目建议使用 Node 24 LTS 的 24.15.0 或更新的 24.x 版本，兼顾 Vite、Vitest 和 jsdom 的版本要求。

在解压后的项目根目录执行以下命令；先保证 Node 与 npm 可用，并启动上面已验收的 Spring Boot 后端：

npm ci          # 根据锁文件安装依赖
npm run test    # 一次性运行 Vitest 测试
npm run build   # Vue/TypeScript 类型检查，再生成 dist/
npm run dev     # 在 127.0.0.1:24025 启动开发服务

实际测试日志显示 8 项测试通过，覆盖默认请求、名字编码、HTTP 503、网络异常、响应内容、记录顺序与清空、加载时禁用按钮。构建日志显示 vue-tsc -b && vite build 成功。单元测试用模拟响应检查这些行为；前后端是否真正连通，还要在浏览器中操作确认。

在沙箱内的 Edge 打开 http://127.0.0.1:24025/。这里的回环地址指沙箱本身，宿主机浏览器访问同一地址不会自动进入沙箱服务。

默认与名字请求都通过页面按钮完成，记录展示了三次操作。失败与加载状态在单元测试中验证；本次截图记录的是桌面浏览器操作，源码虽然包含窄屏样式，尚未作为移动端实测结果。

保存源码，区分本地预览与部署

Qoder 生成了中文 README，记录目录、版本、Node 临时 PATH 设置、启动方式和验收结果。检查时发现 CMD 路径、Node 最低版本和预览代理说明有误，再让 Qoder 修正说明并重新导出。核对说明时还要检查命令的工作目录与版本要求，不能只看“完成”总结。

生产构建生成的 dist/ 是静态文件，不会自带 Vite 的接口转发服务。部署时应让站点的 /api/ 由反向代理连接后端。npm run preview 用于本地预览构建产物，Vite 的 preview.proxy 默认继承 server.proxy；它与把 dist/ 上传到静态托管平台是不同的运行环境。Vite 预览配置

完整项目已通过 Git 在沙箱内保存，说明修正后的提交为 89b000a，并导出源码 ZIP：下载 Vue 3 演示源码。最终包内有 15 个文件，包含组件、请求逻辑、测试、配置、中文 README 和依赖锁文件；Node 运行时、node_modules/、构建产物与日志不在源码包中。复现时先解压到独立目录，再按 README 准备 Node、安装依赖和启动后端。

完成后检查什么

按前面的记录分别检查后端测试、前端测试与构建，再打开页面操作默认问候、名字请求、特殊字符和清空记录。下载源码到其他目录复现时，分别按两个项目的 README 准备环境；本地开发代理与静态文件部署的运行条件也要分开确认。