作为后端开发者,你可能每天都在几种工具之间来回切换。
在ChatGPT 里问问题,然后拷贝生成的代码,或者在 Cursor 中调用Agent生成代码, 再回到 IntelliJ IDEA 里编译,排错,重构和调试等上下文一断,思路也跟着断,节奏很难保持稳定。
即便 AI 编码能力已经很厉害了,但很多后端开发还是离不开 JetBrains IDEs,在重构和调试场景中,JetBrains 的体验依然非常扎实。这篇教程介绍一条更顺畅的路径。
把 AI 编码能力直接接进 JetBrains,用一个插件完成从数据库到前端界面的一整套开发工作。主角是 Qoder JetBrains 插件。它把 Qoder 领先的上下文引擎打包带进了 JetBrains 全家桶。 你在熟悉的 IDE 里,就能使用补全、问答和编程智能体等能力。
下面通过一个完整示例,演示如何用 Qoder 配合 Vaadin MCP,7 分钟内完成两个 Java 全栈功能。
场景说明与准备工作
适用读者
- 已经在使用IntelliJ IDEA 或其他JetBrains IDEs
- 熟悉Spring Boot 和基础Java Web 开发
- 想在本地项目中使用 AI 进行端到端改造,而不是只生成零散片段
示例项目信息
- 技术栈:Spring Boot + Vaadin Flow
- 包结构:org.vaadin.spring.tutorial
- 示例仓库:https://github.com/agentic-coding-durability-evalset/vaadin-demo
需要准备的工具
- 已安装 JetBrains IDE
- 已安装 Qoder JetBrains 插件
- 建议安装 Excalidraw 插件,用于在 IDE 中画简单原型图
- 访问 Vaadin MCP Server:
https://mcp.vaadin.com/docs
本教程分成两个任务:
第一个任务侧重界面和 CRUD;
第二个任务侧重认证、授权和系统改造。
实战概览:7 分钟完成两个全栈功能
在这个示例项目中,我们希望在项目基础上完成两件事。
- 任务一:钱包管理功能
包含余额卡片、消费表单和消费记录表格
从原型到可运行页面 - 任务二:登录和权限系统
包含账号表、加密密码、角色管理、登录界面和权限控制
让所有页面都纳入统一的访问控制
下面从第一个任务开始,按步骤演示在 JetBrains 中的完整操作。
任务一:
2 分钟完成钱包管理功能
先从一个典型的企业应用功能入手。 你需要一个"钱包管理"页面,用来展示当前余额、输入消费记录、查看消费列表。 如果手写代码,需要创建 Entity、Repository、Service 和 View,还要配置路由和菜单,一般会花掉半小时。用 Qoder JetBrains 插件,可以把这个过程压缩到 2 分钟左右。
步骤一:在 IDE 中画出界面原型
- 打开 JetBrains IDE,对示例项目执行导入或打开操作;
- 在 IDE 中安装并启用 Excalidraw 插件;
- 新建一个 Excalidraw 画板;
- 用简单图形画出页面原型,例如:
- 顶部放一张余额卡片
- 中间放一个输入消费记录的表单
- 底部放一个消费记录表格
界面原型只需要表达结构,不追求美观。
Qoder 会根据原型推断布局和组件。

步骤二:在 Qoder 中配置 Vaadin MCP Server
- 打开 Qoder JetBrains 插件侧边栏;
- 点击右上角的用户头像,进入「个人设置」;
- 在「MCP 服务」区域添加一个新服务:
- 名称:vaadin
- 类型:SSE 或 Streamable HTTP
- URL:https://mcp.vaadin.com/docs
- 保存后,查看 MCP 列表中的连接图标。
当图标变成绿色,说明已经成功连接 Vaadin MCP Server。
此时,Qoder 可以实时查询官方 Vaadin 组件文档。后续的界面生成会依赖这一能力。


步骤三:用一个简短 prompt 发起任务
在 Qoder 的 AI Chat 对话框中输入下面这段文本:
发送后,不需要额外补充复杂描述。
Qoder 会在上下文中自动利用当前项目的代码和 MCP 能力。

步骤四:观察 Qoder 的工作过程
Qoder 在后台会执行一系列动作。
用户不需要干预,但了解行为有助于今后设计更适合的任务。
大致流程如下:
- 查询 Vaadin 文档
Qoder 调用 Vaadin MCP,检索合适的组件和布局用法。
例如卡片组件、表单组件、表格组件的最佳实践。

- 阅读当前项目代码
Qoder 会读取 TaskListView.java 和 MainLayout.java 等文件。
目的是学习项目风格、命名方式和整体结构。
这样生成的新文件可以自然地融入现有项目。 - 生成并落地代码文件
在理解文档和项目结构后,Qoder 会创建以下文件:
- Expense.java:消费记录实体
- ExpenseRepository.java:JPA 仓库
- ExpenseService.java:业务服务
- WalletView.java:Vaadin 界面
更重要的一点是,这些文件不会随意丢在某个包中。 Qoder 会根据项目已有结构,把它们放到合理的包路径里。同时注册新的路由 /wallet,并在菜单中增加 My Wallet 入口。

步骤五:运行并验证页面效果
- 在 JetBrains IDE 中运行 Spring Boot 项目;
- 浏览器访问 http://localhost:8080/wallet;
- 页面加载后,检查三个区域:
- 余额卡片是否正确展示
- 消费表单是否可以输入内容并提交
- 表格是否能展示提交后的记录
尝试添加一条消费记录,你会看到表格中马上出现新记录,顶部统计卡片也会立刻更新金额。

至此,第一个功能已经完整贯通。 你几乎没有手写任何 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 会自动执行两类关键动作:
- 查询 Spring Security 和 Vaadin LoginForm 的实践
通过 Vaadin MCP Server 获取能与当前 Vaadin 版本配合的方案。
避免出现版本不匹配或过时配置。

- 读取项目依赖和配置文件
重点检查 pom.xml 和关键配置类。
包括 Spring Boot 版本、已有依赖和项目结构。在这一阶段,Qoder 会判断哪些文件需要增补,哪些配置需要改动。
步骤三:自动拆解任务并按步骤执行
在理解需求和环境后,Qoder 不会马上生成全部代码。它会先生成一个包含 9 个子任务的 To-do 列表。 列表大致覆盖依赖调整、实体设计、安全配置、界面和数据初始化等环节。
这一列表不仅用于展示过程,也会真实参与后续决策。

在执行阶段,Qoder 会按步骤修改项目。
一次性完成多处变更,覆盖后端和界面层。
最终涉及的文件如下:

你可以在 IDE 的版本管理视图中查看这些变更。
每个文件都位于恰当的包中,命名也与现有代码保持统一风格。

步骤四:运行项目并验证登录流程
- 重新启动 Spring Boot 项目
- 观察启动日志,确认默认账号已经创建,例如:
- user / user,角色为 USER
- admin / admin,角色为 ADMIN

- 在浏览器访问任意原有页面
如果当前未登录,系统会自动跳转到登录页。

- 使用 user / user 登录登录成功后,查看页面右上角。确认导航栏展示了头像、用户名和登出按钮。

- 分别用不同角色访问原有页面和新页面
确认权限控制已经生效。
不同角色用户可以访问的页面范围会有所不同。
此时,示例应用已经完成从"无认证"到"带登录和权限"的升级。钱包管理功能也纳入统一的认证系统中。
能力拆解:
Qoder 在这个示例中做了什么
从这两个任务中,可以看到 Qoder JetBrains 插件的几项关键能力:
- 通过 MCP Server 获取最新框架用法
LLM 内置知识存在时间点限制。Vaadin MCP Server 直接接入 Vaadin 官方文档。Qoder 可以按需查询最新的组件 API、布局建议和结合 Spring 的实践方案。在本示例中,Qoder 多次通过 MCP 查询组件和安全相关内容。 这可以减少版本差异带来的踩坑风险。

- 面向项目级别的上下文理解
Qoder 不只读取单一文件。它会综合项目结构、依赖配置和已有代码风格来决策。在演示中,Qoder 会结合以下信息进行分析:
- pom.xml 中的 Spring Boot 版本与依赖组合
- 当前代码中的命名习惯和包结构
- 各个 View 与布局类之间的关系
这种方式更接近一个新人加入团队后的学习过程。
不同之处在于,Qoder 可以在较短时间内完成大量文件的阅读。

- 从需求描述到自动拆解与执行
在第二个任务中,Qoder 将"登录系统"拆分成 9 个子任务。 从依赖修改开始,逐步落实到实体、配置、界面和初始化数据。这个 To‑do 列表不仅是展示用的说明。 每一步都会驱动后续的读写操作。 用户只需要在关键节点确认方向是否正确,不必手动执行每一个细节步骤。

- 保持原生 JetBrains 体验
所有操作都发生在 JetBrains IDE 里。 你不需要在其他 AI 工具和 IDE 之间来回切换。 Excalidraw 原型、代码视图、运行配置和 Qoder 面板都集中在一个工作区中。对于后端开发者来说,可以继续依赖熟悉的调试、重构和导航能力。 在此基础上,再让 Qoder 负责大部分样板代码和系统改造工作。

操作步骤快速回顾
如果你想在自己的环境中复刻这次演示,可以按下面的顺序执行。
- 在 JetBrains 插件市场安装 Qoder JetBrains 插件;
- 安装 Excalidraw 插件;
- 克隆示例项目 vaadin-demo 并在 JetBrains 中打开;
- 在 Qoder 插件中配置 Vaadin MCP Server,确认连接状态为绿色;
- 画出钱包管理页面的 Excalidraw 原型;
- 在 Qoder AI Chat 中发送钱包功能的 prompt,等待生成代码并运行验证;
- 在 Qoder AI Chat 中描述登录系统需求,让 Qoder 生成相关改造;
- 通过浏览器登录和访问各页面,检查登录和权限控制是否符合预期。
完成以上步骤后,你会得到一个带登录、权限和钱包管理功能的完整示例应用。
同时也会对 Qoder JetBrains 插件的工作方式有更直观的认识。
立即上手 Qoder JetBrains 插件
如果你是 JetBrains 用户,又经常负责后端开发工作,可以直接在本地尝试这套流程。
从日常 Bug 修复到功能开发,再到系统级改造,都可以逐步交给 Qoder 来协助完成。
你可以从以下入口获取相关资源:
- Qoder JetBrains 插件:
https://plugins.jetbrains.com/plugin/28926-qoder--think-deeper-build-better- - Excalidraw 插件:
https://plugins.jetbrains.com/plugin/17096-excalidraw-integration - 示例仓库:
https://github.com/agentic-coding-durability-evalset/vaadin-demo - Vaadin MCP Server:
https://mcp.vaadin.com/docs - Qoder 官网:
https://qoder.com
你可以先在示例项目中完整走一遍本文的两个任务。
熟悉流程后,再把同样的能力应用到自己的核心项目中。
附录一:
可直接复用的 Prompt 模板
下面给出两组可以复制使用的示例。
你可以按自己项目的字段和业务稍作改动。
- 钱包管理功能 Prompt 模板
适合配合 Excalidraw 原型使用。
根据excalidraw文件中的钱包原型图并结合 Vaadin Mcp Server,创建对应的 Vaadin View 和相关的 repo, service等,包括消费记录添加操作。结合 Vaadin MCP Server 完成以上任务。
根据excalidraw文件中的钱包原型图并结合 Vaadin Mcp Server,创建对应的 Vaadin View 和相关的 repo, service等,包括消费记录添加操作。结合 Vaadin MCP Server 完成以上任务。
- 登录和权限系统 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 保存到团队文档。
以后只需要改动少量字段和业务描述。
团队成员也能快速复用同样的模式。

关注我,掌握Qoder最新动态
