IDEA 集成 AI 插件快速构建 Java 全栈功能实战

此时，Qoder 可以实时查询官方 Vaadin 组件文档。后续的界面生成会依赖这一能力。

步骤三：用一个简短 prompt 发起任务

在 Qoder 的 AI Chat 对话框中输入需求文本。发送后，不需要额外补充复杂描述。Qoder 会在上下文中自动利用当前项目的代码和 MCP 能力。

步骤四：观察 Qoder 的工作过程

Qoder 在后台会执行一系列动作。用户不需要干预，但了解行为有助于今后设计更适合的任务。

大致流程如下：

1. 查询 Vaadin 文档：Qoder 调用 Vaadin MCP，检索合适的组件和布局用法，例如卡片组件、表单组件、表格组件的最佳实践。
2. 阅读当前项目代码：Qoder 会读取 TaskListView.java 和 MainLayout.java 等文件，目的是学习项目风格、命名方式和整体结构，这样生成的新文件可以自然地融入现有项目。
3. 生成并落地代码文件：在理解文档和项目结构后，Qoder 会创建以下文件：
   • Expense.java：消费记录实体
   • ExpenseRepository.java：JPA 仓库
   • ExpenseService.java：业务服务
   • WalletView.java：Vaadin 界面

更重要的是，这些文件不会随意丢在某个包中。Qoder 会根据项目已有结构，把它们放到合理的包路径里。同时注册新的路由 /wallet，并在菜单中增加 My Wallet 入口。

步骤五：运行并验证页面效果

1. 在 JetBrains IDE 中运行 Spring Boot 项目。
2. 浏览器访问 http://localhost:8080/wallet。
3. 页面加载后，检查三个区域：
   • 余额卡片是否正确展示
   • 消费表单是否可以输入内容并提交
   • 表格是否能展示提交后的记录

尝试添加一条消费记录，你会看到表格中马上出现新记录，顶部统计卡片也会立刻更新金额。

至此，第一个功能已经完整贯通。你几乎没有手写任何 Java 或前端代码。

任务二：5 分钟完成登录与权限系统

在第一个任务的基础上，我们再搭建一个完整的登录系统。这个任务更接近真实业务需求，内容也更丰富。

目标说明 本次登录系统的目标包括以下几点：

• 新增 Account 表，使用 bcrypt 加密密码；
• 支持 ADMIN 和 USER 两种角色；
• 自动初始化默认测试账号；
• 在导航栏显示用户头像、用户名和登出按钮；
• 对所有页面加上统一的访问控制。

如果你用传统方式来开发，需要修改 pom.xml 添加 Spring Security 依赖，编写 Entity、Repository、Service 等多个类，完成 SecurityConfig、LoginView 和数据初始化逻辑，同时修改主布局和各个 View 的权限注解，整体时间常常要一到两个小时。

下面用 Qoder JetBrains 插件在 5 分钟内完成这一改造。

步骤一：在 Qoder 中发起登录系统任务

打开 Qoder AI Chat，描述登录功能的需求，可以包含下面这些要点：

• 使用 Spring Security
• 账号表字段要求
• 密码加密方式
• 默认账号和角色
• 页面访问策略
• 登录成功后的导航栏展示内容

你可以参考教程中的截图内容，自行组织一段完整描述。不需要精确记住每一个字段名称，用自然语言表达清楚核心约束即可。

步骤二：Qoder 调用 MCP 并理解项目配置

收到请求后，Qoder 会自动执行两类关键动作：

1. 查询 Spring Security 和 Vaadin LoginForm 的实践：通过 Vaadin MCP Server 获取能与当前 Vaadin 版本配合的方案，避免出现版本不匹配或过时配置。
2. 读取项目依赖和配置文件：重点检查 pom.xml 和关键配置类，包括 Spring Boot 版本、已有依赖和项目结构。在这一阶段，Qoder 会判断哪些文件需要增补，哪些配置需要改动。

步骤三：自动拆解任务并按步骤执行

在理解需求和环境后，Qoder 不会马上生成全部代码。它会先生成一个包含 9 个子任务的 To-do 列表，列表大致覆盖依赖调整、实体设计、安全配置、界面和数据初始化等环节。这一列表不仅用于展示过程，也会真实参与后续决策。

在执行阶段，Qoder 会按步骤修改项目，一次性完成多处变更，覆盖后端和界面层。最终涉及的文件可以在 IDE 的版本管理视图中查看，每个文件都位于恰当的包中，命名也与现有代码保持统一风格。

步骤四：运行项目并验证登录流程

1. 重新启动 Spring Boot 项目。
2. 观察启动日志，确认默认账号已经创建，例如：
   • user / user，角色为 USER
   • admin / admin，角色为 ADMIN
3. 在浏览器访问任意原有页面，如果当前未登录，系统会自动跳转到登录页。
4. 使用 user / user 登录，登录后查看页面右上角，确认导航栏展示了头像、用户名和登出按钮。
5. 分别用不同角色访问原有页面和新页面，确认权限控制已经生效，不同角色用户可以访问的页面范围会有所不同。

此时，示例应用已经完成从'无认证'到'带登录和权限'的升级。钱包管理功能也纳入统一的认证系统中。

能力拆解：Qoder 在这个示例中做了什么

从这两个任务中，可以看到 Qoder JetBrains 插件的几项关键能力：

1. 通过 MCP Server 获取最新框架用法：LLM 内置知识存在时间点限制。Vaadin MCP Server 直接接入 Vaadin 官方文档。Qoder 可以按需查询最新的组件 API、布局建议和结合 Spring 的实践方案。在本示例中，Qoder 多次通过 MCP 查询组件和安全相关内容，这可以减少版本差异带来的踩坑风险。
2. 面向项目级别的上下文理解：Qoder 不只读取单一文件。它会综合项目结构、依赖配置和已有代码风格来决策。在演示中，Qoder 会结合以下信息进行分析：
   • pom.xml 中的 Spring Boot 版本与依赖组合
   • 当前代码中的命名习惯和包结构
   • 各个 View 与布局类之间的关系 这种方式更接近一个新人加入团队后的学习过程，不同之处在于，Qoder 可以在较短时间内完成大量文件的阅读。
3. 从需求描述到自动拆解与执行：在第二个任务中，Qoder 将'登录系统'拆分成 9 个子任务。从依赖修改开始，逐步落实到实体、配置、界面和初始化数据。这个 To-do 列表不仅是展示用的说明，每一步都会驱动后续的读写操作。用户只需要在关键节点确认方向是否正确，不必手动执行每一个细节步骤。
4. 保持原生 JetBrains 体验：所有操作都发生在 JetBrains IDE 里。你不需要在其他 AI 工具和 IDE 之间来回切换。Excalidraw 原型、代码视图、运行配置和 Qoder 面板都集中在一个工作区中。对于后端开发者来说，可以继续依赖熟悉的调试、重构和导航能力。在此基础上，再让 Qoder 负责大部分样板代码和系统改造工作。

操作步骤快速回顾

如果你想在自己的环境中复刻这次演示，可以按下面的顺序执行：

1. 在 JetBrains 插件市场安装 Qoder JetBrains 插件；
2. 安装 Excalidraw 插件；
3. 克隆示例项目 vaadin-demo 并在 JetBrains 中打开；
4. 在 Qoder 插件中配置 Vaadin MCP Server，确认连接状态为绿色；
5. 画出钱包管理页面的 Excalidraw 原型；
6. 在 Qoder AI Chat 中发送钱包功能的 prompt，等待生成代码并运行验证；
7. 在 Qoder AI Chat 中描述登录系统需求，让 Qoder 生成相关改造；
8. 通过浏览器登录和访问各页面，检查登录和权限控制是否符合预期。

完成以上步骤后，你会得到一个带登录、权限和钱包管理功能的完整示例应用，同时对 Qoder JetBrains 插件的工作方式有更直观的认识。

附录：可直接复用的 Prompt 模板

下面给出两组可以复制使用的示例。你可以按自己项目的字段和业务稍作改动。

1. 钱包管理功能 Prompt 模板

适合配合 Excalidraw 原型使用。

根据 excalidraw 文件中的钱包原型图并结合 Vaadin Mcp Server，创建对应的 Vaadin View 和相关的 repo, service 等，包括消费记录添加操作。结合 Vaadin MCP Server 完成以上任务。

2. 登录和权限系统 Prompt 模板

适合已有基础页面后，补充认证授权。

为 Vaadin 应用添加登录支持，只有登录后才能访问该应用，要求如下：
- 创建对应的 account 表，包括 username, email, roles, password 等字段，其中密码采用 bcrypt 加密算法，角色包括 ADMIN 和 USER
- account 相关的代码，请放置在 `org.mvnsearch.account` package 下
- 为 account 表添加默认数据，如 user 和 admin 账号
- 添加顶部导航栏，在右侧显示登录后的用户头像和用户名，同时增加退出登录按钮
结合 Vaadin MCP Server 完成以上任务。

你可以在两个模板基础上继续细化字段和规则，例如增加金额上限校验、增加更多角色，或者补充审计字段。

新手在真实项目中上手的几个建议

1. 从边缘功能开始试用：可以先在非核心模块尝试用 Qoder 改造，例如内部管理页面、报表页面或实验性功能。这样可以更安心地观察生成代码的习惯和质量。
2. 把'项目约定'写在一个固定文件里：在仓库中放一个 AGENTS.md 文件，写清楚命名规则、异常处理习惯和常用工具类。Qoder 会先阅读这份文件，再动手写代码，这样更容易保持风格统一。
3. 把一次性大任务切成两三段：例如先只让 Qoder 补齐实体、仓库和服务，确认表结构正确后，再让 Qoder 写界面和路由，最后才加入权限控制。这样更容易在每一步发现问题并调整方向。
4. 把好的 Prompt 固定下来复用：每次沟通顺畅、结果稳定时，可以把 Prompt 保存到团队文档。以后只需要改动少量字段和业务描述，团队成员也能快速复用同样的模式。