<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>AI on 码工瑞瑞的博客</title><link>https://blog.137027.xyz/tags/ai/</link><description>Recent content in AI on 码工瑞瑞的博客</description><generator>Hugo</generator><language>zh-cn</language><lastBuildDate>Thu, 27 Aug 2026 20:00:00 +0800</lastBuildDate><atom:link href="https://blog.137027.xyz/tags/ai/index.xml" rel="self" type="application/rss+xml"/><item><title>零基础快速无脑搭建后台管理系统（第二期）：AI 帮你测试与修 Bug</title><link>https://blog.137027.xyz/posts/vibcoding-ruoyi-tutorial-2/</link><pubDate>Thu, 27 Aug 2026 20:00:00 +0800</pubDate><guid>https://blog.137027.xyz/posts/vibcoding-ruoyi-tutorial-2/</guid><description>零基础快速无脑搭建后台管理系统（第二期）：TraeCode / TraeWork 测试和 Bug 修复完整教程。</description><content:encoded><![CDATA[<h1 id="零基础快速无脑搭建后台管理系统-vibcoding_我帮你第二期">零基础快速无脑搭建后台管理系统 Vibcoding_我帮你第二期</h1>
<blockquote>
<p><strong>导读</strong>：上一篇博客教大家怎么样无脑快速搭建一个后台管理系统，这篇继续教大家怎么样使用 <strong>Trae</strong>（已更名为 <strong>TraeCode</strong>）或者 <strong>TraeWork</strong> 进行<strong>测试和 Bug 修复</strong>。全程不需要懂代码，让 AI 自己操作！</p></blockquote>
<hr>
<h2 id="一工具下载">一、工具下载</h2>
<h3 id="谷歌浏览器">谷歌浏览器</h3>
<p>网上的在线安装包都很慢，如果访问谷歌浏览器官网（https://www.google.cn/chrome）下载，安装需要等待很久。<strong>这里推荐使用离线版安装包</strong>，下载更快。</p>
<blockquote>
<p><strong>下载地址（光鸭云盘）</strong></p>
<ul>
<li>需要登录保存，无限速，登录送 2T</li>
<li>光鸭云盘用户给你分享了：「ChromeStanda…up64.exe」，点击链接或复制整段内容，打开「光鸭APP」即可获取。
链接：https://www.guangyapan.com/s/1939717744297246725_afdKmntd6DRoD0OP</li>
</ul></blockquote>
<h3 id="trae更名为-traecode和-traework-谷歌插件安装">Trae（更名为 TraeCode）和 TraeWork 谷歌插件安装</h3>
<h4 id="第一步开启外部浏览器控制">第一步：开启外部浏览器控制</h4>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="开启AI控制外部浏览器设置" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/chrome-extension-settings.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    开启AI控制外部浏览器设置
  </figcaption>
</figure></p>
<p>点击 <strong>设置 -&gt; 左侧浏览器 -&gt; 右侧打开&quot;允许AI控制外部浏览器&quot;</strong>，然后点击 <strong>&ldquo;无法访问商店？尝试手动安装&rdquo;</strong>。</p>
<h4 id="第二步手动安装插件">第二步：手动安装插件</h4>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="手动安装插件页面" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/chrome-manual-install.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    手动安装插件页面
  </figcaption>
</figure></p>
<p>点击<strong>下载</strong>，会马上下载完成，然后点击<strong>前往安装</strong>。在浏览器输入 <code>chrome://extensions/</code>，按照要求<strong>拖拽安装</strong>。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="插件拖拽安装过程" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/chrome-drag-install.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    插件拖拽安装过程
  </figcaption>
</figure></p>
<h4 id="第三步安装完成">第三步：安装完成</h4>
<p>安装好之后是这样，图中<strong>第一个</strong>就是 TraeCode 的插件。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="已安装的浏览器扩展列表" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/chrome-extensions-installed.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    已安装的浏览器扩展列表
  </figcaption>
</figure></p>
<blockquote>
<p><strong>提示：</strong> TraeWork 的插件安装方式与 TraeCode 完全一样，这里不再演示，搜索安装即可。</p></blockquote>
<hr>
<h2 id="二测试和-bug-修复">二、测试和 Bug 修复</h2>
<blockquote>
<p><strong>版本说明：</strong> 2026 年 8 月之后推荐使用 <strong>TraeWork</strong> 进行测试和 Bug 修复。</p></blockquote>
<h3 id="traecode-使用">TraeCode 使用</h3>
<h4 id="步骤-1配置完全访问权限">步骤 1：配置完全访问权限</h4>
<p>Trae 更新到最新版 TraeCode，点击 <strong>&ldquo;如何批准 agent 操作&quot;的设置，选择&quot;完全访问&rdquo;</strong>。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="TraeCode的agent操作设置" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/trae-agent-settings.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    TraeCode的agent操作设置
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="选择完全访问权限" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/trae-full-access.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    选择完全访问权限
  </figcaption>
</figure></p>
<h4 id="步骤-2配置多模态模型">步骤 2：配置多模态模型</h4>
<p>一定要配置支持图片输入的模型，或者不配置直接选择 <strong>Auto Mode</strong>。这里配置了 <strong>Seed-Code</strong>，这个模型多模态在 Trae 里最实惠，可以使用很久。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="TraeCode模型配置" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/trae-model-config.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    TraeCode模型配置
  </figcaption>
</figure></p>
<h4 id="步骤-3输入测试提示词">步骤 3：输入测试提示词</h4>
<p>测试演示，直接输入这个提示词：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>用户名称 admin  密码 admin123  登录地址 http://localhost  帮我对整个项目酒店客房管理进行一次测试，确保每一个按钮点击都有响应，使用浏览器</span></span></code></pre></div>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="输入测试提示词" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/trae-test-prompt.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    输入测试提示词
  </figcaption>
</figure></p>
<h4 id="步骤-4修复-bug">步骤 4：修复 Bug</h4>
<p>Bug 修复同上：直接<strong>截图</strong>让 TraeCode 修复 bug 即可，修复完成之后让 Trae 使用浏览器测试，全程不需要懂代码，让 <strong>AI</strong> 自己操作。</p>
<h3 id="traework-使用">TraeWork 使用</h3>
<h4 id="步骤-1打开并选择项目">步骤 1：打开并选择项目</h4>
<p>打开软件登录后点击 <strong>Code</strong>，文件夹选择之前的 <strong>ry2</strong>（上一期项目文件夹），点击 <strong>&ldquo;如何批准 agent 操作&quot;的设置，选择&quot;完全访问&rdquo;</strong>。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="TraeWork登录后点击Code" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/traework-login.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    TraeWork登录后点击Code
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="选择上一期项目文件夹" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/traework-project-settings.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    选择上一期项目文件夹
  </figcaption>
</figure></p>
<h4 id="步骤-2配置模型">步骤 2：配置模型</h4>
<p>模型配置 <strong>DeepSeek-V4-flash 正式版</strong>（最经济），思考强度选择<strong>极高</strong>，打开<strong>更大上下文 MAX</strong>。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="TraeWork模型配置" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/traework-model-config.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    TraeWork模型配置
  </figcaption>
</figure></p>
<h4 id="步骤-3让-ai-理解项目">步骤 3：让 AI 理解项目</h4>
<p>点击<strong>项目理解</strong>，然后发送，先让 TraeWork 了解整个项目。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="点击项目理解并发送" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/traework-project-understanding.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    点击项目理解并发送
  </figcaption>
</figure></p>
<h4 id="步骤-4查看测试结果">步骤 4：查看测试结果</h4>
<p>本次测试完成，任务耗时 <strong>3 分 43 秒</strong>。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="测试完成结果" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/traework-test-complete.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    测试完成结果
  </figcaption>
</figure></p>
<p>本次使用积分 <strong>10.51</strong>。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="积分使用情况" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/traework-points-used.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    积分使用情况
  </figcaption>
</figure></p>
<h4 id="步骤-5多模态浏览器测试">步骤 5：多模态浏览器测试</h4>
<p>配置多模态模型并发送提示词进行测试（&quot;/&quot; 选择 <strong>Browser</strong> 可以调用之前安装的浏览器插件，让 AI 使用浏览器），这里思考强度选择<strong>高</strong>。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="多模态模型配置" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/traework-multimodal-config.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    多模态模型配置
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="浏览器测试过程" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/traework-browser-test.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    浏览器测试过程
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="浏览器测试结果" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/traework-browser-result.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    浏览器测试结果
  </figcaption>
</figure></p>
<h4 id="步骤-6发现-bug-直接修复">步骤 6：发现 Bug 直接修复</h4>
<p>测试完成后如果发现 bug，直接截图让 AI 修复即可。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="Bug修复操作" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial-2/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E7%AC%AC%E4%BA%8C%E6%9C%9F-images/traework-bug-fix.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    Bug修复操作
  </figcaption>
</figure></p>
<hr>
<h2 id="总结">总结</h2>
<p>通过 <strong>TraeCode</strong> 或 <strong>TraeWork</strong>，即使完全不懂代码，也能轻松完成项目的<strong>测试和 Bug 修复</strong>：</p>
<ol>
<li>配置好<strong>完全访问权限</strong>和<strong>多模态模型</strong></li>
<li>安装并启用<strong>浏览器插件</strong></li>
<li>输入测试提示词，让 AI 自动测试</li>
<li>发现 Bug 直接截图让 AI 修复</li>
</ol>
]]></content:encoded></item><item><title>零基础快速无脑搭建后台管理系统 Vibcoding_我帮你</title><link>https://blog.137027.xyz/posts/vibcoding-ruoyi-tutorial/</link><pubDate>Tue, 04 Aug 2026 20:00:00 +0800</pubDate><guid>https://blog.137027.xyz/posts/vibcoding-ruoyi-tutorial/</guid><description>零基础快速无脑搭建后台管理系统：RuoYi 4.8.3 单体 + Trae AI 完整教程。</description><content:encoded><![CDATA[<h2 id="-开始前必读演示工具说明">⚠️ 开始前必读：演示工具说明</h2>
<blockquote>
<p>本教程演示所用的 AI IDE 是 <strong>Trae</strong>。文中涉及「本地环境配置 / 直连数据库」的步骤，必须使用<strong>Trae</strong>——因为有些工具会运行在沙箱环境中，无法操作你本机的真实环境。</p></blockquote>
<blockquote>
<p>💡 <strong>小白科普</strong>：<strong>Trae</strong> 是个 AI 编程助手（智能编辑器），你用大白话提需求，它就帮你写代码、配环境；<strong>沙箱</strong>是 AI 临时隔出来的「虚拟房间」，里面碰不到你电脑上的真实文件和数据库，所以涉及本机操作的步骤得用 Trae 才靠谱。</p></blockquote>
<hr>
<h2 id="第一步--项目环境准备">第一步 · 项目环境准备</h2>
<p>任何项目的运行环境永远是最重要的。本次我们使用的是<strong>若依（RuoYi）单体项目</strong>。</p>
<p><strong>为什么选若依？</strong></p>
<ul>
<li>Java 是国内后台管理系统使用最多的开发语言，若依使用 Java 开发；</li>
<li>若依是使用最广的系统开发框架，许多企业都在用，自带用户管理与权限管理；</li>
<li>若依单体依赖最少，只需要 <strong>JDK + MySQL</strong> 即可一键运行，依赖少、项目经过充分验证。</li>
</ul>
<h3 id="必装系统环境">必装系统环境</h3>
<table>
  <thead>
      <tr>
          <th>名称</th>
          <th>版本</th>
          <th>是干嘛的</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>JDK</td>
          <td>= 8</td>
          <td>跑后端 Java 程序的发动机，Java 语言必须</td>
      </tr>
      <tr>
          <td>MySQL</td>
          <td>≥ 5.7</td>
          <td>存数据（用户、菜单、业务）的仓库，即数据库</td>
      </tr>
      <tr>
          <td>Maven</td>
          <td>≥ 3</td>
          <td>后端的「快递员」，包管理工具，需要什么装什么</td>
      </tr>
      <tr>
          <td>Node.js（MCP 用）</td>
          <td>≥ 18</td>
          <td>本项目代码不涉及，仅 MCP 用于插件下载</td>
      </tr>
      <tr>
          <td>Git（可选）</td>
          <td>无要求</td>
          <td>记录每次内容变更的工具，项目版本管理</td>
      </tr>
  </tbody>
</table>
<h3 id="软件下载windows">软件下载（Windows）</h3>
<p>由于网络或其他原因，这些软件对新手来说都不太好下载。这里提供 <strong>Windows 10/11 x64</strong> 的网盘目录直链，无需登录即可下载。</p>
<blockquote>
<p>博主没有 Mac / Linux 电脑，使用 Mac 或 Linux 的同学请自行搜索对应下载方式。</p></blockquote>
<table>
  <thead>
      <tr>
          <th>名称</th>
          <th>下载链接</th>
          <th>备注（新手必看）</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>JDK 8</td>
          <td><a href="https://wwbis.lanzn.com/iPmS426im1wh">https://wwbis.lanzn.com/iPmS426im1wh</a></td>
          <td>运行 Java 程序必需的环境。双击安装包一路「下一步」即可，装不对后面项目跑不起来</td>
      </tr>
      <tr>
          <td>MySQL</td>
          <td><a href="https://wwbis.lanzn.com/ix3tc2lttm0j">https://wwbis.lanzn.com/ix3tc2lttm0j</a></td>
          <td>数据仓库，存用户/菜单/业务数据。推荐集成工具包（自带 MySQL 多版本和客户端），装好后点一下就能启动，适合新手</td>
      </tr>
      <tr>
          <td>Maven 3.6</td>
          <td><a href="https://wwbis.lanzn.com/iStsE2eb3hha">https://wwbis.lanzn.com/iStsE2eb3hha</a></td>
          <td>后端的「包管理工具」，自动下载项目依赖。下载后是压缩包，解压到英文路径，再按教程配置本地仓库和国内镜像，否则下载依赖会很慢</td>
      </tr>
      <tr>
          <td>Node.js</td>
          <td><a href="https://nodejs.org/dist/v24.18.1/node-v24.18.1-x64.msi">https://nodejs.org/dist/v24.18.1/node-v24.18.1-x64.msi</a></td>
          <td>本项目代码用不到，仅给 Trae 装 MCP 插件时需要。双击安装包一路「下一步」即可</td>
      </tr>
      <tr>
          <td>Git 2.36</td>
          <td><a href="https://wwbis.lanzn.com/iNsZF2eb3ned">https://wwbis.lanzn.com/iNsZF2eb3ned</a></td>
          <td>记录代码修改历史的版本管理工具（可选）。双击安装包一路「下一步」即可，不用也能完成本教程</td>
      </tr>
  </tbody>
</table>
<blockquote>
<p><strong>提示</strong>：JDK 8、MySQL、Node.js、Git 2.36都是直接安装即可，一路默认下一步。如果遇到环境问题，可百度解决，也可以用 AI 辅助。</p></blockquote>
<h3 id="mysql-配置">MySQL 配置</h3>
<p>安装好集成工具包后，点击 <strong>软件管理 → 数据库</strong>，下载需要的版本（建议 <strong>5.7.26</strong>）。</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="软件管理-数据库下载" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801000622356.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    软件管理-数据库下载
  </figcaption>
</figure></p>
<p>点击 <strong>数据库工具（客户端）</strong>，下载：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="数据库工具-客户端下载" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801001253299.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    数据库工具-客户端下载
  </figcaption>
</figure></p>
<p>会默认附带下载一些其他软件，多余的软件在「全部」里直接卸载即可：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="卸载多余附带软件" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801001026124.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    卸载多余附带软件
  </figcaption>
</figure></p>
<p>点击数据库，鼠标悬浮到<strong>密码</strong>处可以查看密码（使用 SQL_Front 连接工具时要一一对应）：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="悬浮查看账号密码" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801000737726.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    悬浮查看账号密码
  </figcaption>
</figure></p>
<p>数据库下载完成后，在首页可以打开工具连接，选择 <strong>SQL_Front</strong>（打开前一定要先启动 MySQL 服务）：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="首页打开 SQL_Front 连接" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801001621307.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    首页打开 SQL_Front 连接
  </figcaption>
</figure></p>
<p>启动端口在此处查看，默认是 <strong>3306</strong>，可修改，连接时要一一对应：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="查看启动端口（默认 3306）" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801002130525.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    查看启动端口（默认 3306）
  </figcaption>
</figure></p>
<p>点击 <strong>属性</strong>：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="点击属性" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801001858283.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    点击属性
  </figcaption>
</figure></p>
<p>端口、用户、密码要和前边查到的对上：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="确认端口用户密码一致" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801001932691.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    确认端口用户密码一致
  </figcaption>
</figure></p>
<p>配置完点击 <strong>打开</strong>：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="点击打开连接" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801002403278.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    点击打开连接
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="连接成功" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801002426635.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    连接成功
  </figcaption>
</figure></p>
<blockquote>
<p>✅ <strong>MySQL 环境完全配置完成。</strong></p></blockquote>
<h3 id="maven-配置请先配置好-jdk">Maven 配置（请先配置好 JDK）</h3>
<p>可以百度后手工配置，也可以用 AI。但这里<strong>建议用百度</strong>——因为 AI 有可能会把系统环境变量搞乱。</p>
<p>如果你要用 AI 工具（<strong>建议用 Trae</strong>），下面提供一份 Windows 版提示词：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>AI Maven 环境配置提示词
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>使用说明
</span></span><span style="display:flex;"><span>1. 将下方&#34;提示词正文&#34;完整复制粘贴给 AI
</span></span><span style="display:flex;"><span>2. 将所有 {{占位符}} 替换为你的实际值（下方有占位符清单参考）
</span></span><span style="display:flex;"><span>3. Maven 压缩包请自行准备并放到指定目录
</span></span><span style="display:flex;"><span>4. 本提示词假设 JDK 已安装并配置好 JAVA_HOME，Maven 依赖 JDK 运行
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>占位符清单
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>  [1] {{WORK_DIR}}
</span></span><span style="display:flex;"><span>      含义: 工作目录（解压目标目录）
</span></span><span style="display:flex;"><span>      示例: C:\Program Files\ENV
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>  [2] {{MAVEN_ZIP}}
</span></span><span style="display:flex;"><span>      含义: Maven 压缩包完整路径
</span></span><span style="display:flex;"><span>      示例: C:\Program Files\ENV\apache-maven-3.6.0-bin.zip
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>  [3] {{MAVEN_VERSION}}
</span></span><span style="display:flex;"><span>      含义: Maven 版本号
</span></span><span style="display:flex;"><span>      示例: 3.6.0
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>  [4] {{LOCAL_REPO}}
</span></span><span style="display:flex;"><span>      含义: Maven 本地仓库路径
</span></span><span style="display:flex;"><span>      示例: E:\localMaven
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>  [5] {{JAVA_VERSION}}
</span></span><span style="display:flex;"><span>      含义: Java 目标编译版本（对应已安装的 JDK）
</span></span><span style="display:flex;"><span>      示例: 1.8
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>================================================================================
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>提示词正文
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>你是一位资深的 Windows 系统环境配置专家。请帮我配置 Maven 开发环境。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>前提条件：JDK 已安装且 JAVA_HOME 已正确配置，Maven 依赖 JDK 运行。
</span></span><span style="display:flex;"><span>请严格按照以下约束执行，每一条约束都是为了防止环境配置错误导致系统故障。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>一、安装包来源
</span></span><span style="display:flex;"><span>- Maven 压缩包（我已提供）：{{MAVEN_ZIP}}
</span></span><span style="display:flex;"><span>- 解压目标目录：{{WORK_DIR}}（禁止解压到其他目录）
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>二、配置要求
</span></span><span style="display:flex;"><span>1. Maven 本地仓库路径：{{LOCAL_REPO}}（如目录不存在则创建）
</span></span><span style="display:flex;"><span>2. Maven 国内镜像：必须配置阿里云公共仓库 https://maven.aliyun.com/repository/public
</span></span><span style="display:flex;"><span>3. JDK 编译版本：默认使用 JDK {{JAVA_VERSION}} 编译
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>三、严格操作约束（违反任何一条都可能导致系统故障）
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>约束 1：操作前必须先备份环境变量（最重要！）
</span></span><span style="display:flex;"><span>在修改任何环境变量之前，必须先执行完整备份：
</span></span><span style="display:flex;"><span>- 读取并保存 Machine 级别所有环境变量（JAVA_HOME、MAVEN_HOME、M2_HOME、PATH 等）到备份文件
</span></span><span style="display:flex;"><span>- 读取并保存 User 级别所有环境变量到备份文件
</span></span><span style="display:flex;"><span>- 读取并保存注册表原始值（HKLM\SYSTEM\CurrentControlSet\Control\Session Manager\Environment）
</span></span><span style="display:flex;"><span>- 备份文件保存到：{{WORK_DIR}}\env_backup_YYYYMMDD_HHmmss.txt
</span></span><span style="display:flex;"><span>- 备份文件中必须记录每个变量的注册表值类型（String 或 ExpandString）
</span></span><span style="display:flex;"><span>- 未完成备份前，禁止进行任何修改操作
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>约束 2：解压位置必须精确
</span></span><span style="display:flex;"><span>- Maven 必须解压到工作目录 {{WORK_DIR}}\
</span></span><span style="display:flex;"><span>- 禁止解压到其他任意目录
</span></span><span style="display:flex;"><span>- 解压后必须验证关键文件存在：
</span></span><span style="display:flex;"><span>  - {{WORK_DIR}}\apache-maven-{{MAVEN_VERSION}}\bin\mvn.cmd
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>约束 3：修改 PATH 前必须逐一验证每个现有路径
</span></span><span style="display:flex;"><span>- 读取当前 Machine PATH 和 User PATH 的所有条目
</span></span><span style="display:flex;"><span>- 对每一个已存在的路径条目，必须用 Test-Path 验证目录是否真实存在
</span></span><span style="display:flex;"><span>- 只有确认目录不存在的路径才允许移除
</span></span><span style="display:flex;"><span>- 禁止移除任何目录真实存在的路径条目，即使看起来像是&#34;旧的&#34;或&#34;失效的&#34;
</span></span><span style="display:flex;"><span>- 移除操作必须列出清单并逐条说明移除原因，供人工确认
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>约束 4：PATH 注册表值类型必须正确
</span></span><span style="display:flex;"><span>- 写入 PATH 时必须使用 REG_EXPAND_SZ（ExpandString）类型，不能使用 REG_SZ（String）类型
</span></span><span style="display:flex;"><span>- 如果 PATH 中使用了 %MAVEN_HOME% 变量引用，注册表类型必须是 ExpandString，否则变量不会被展开
</span></span><span style="display:flex;"><span>- 推荐使用绝对路径写入 PATH，避免依赖变量展开（更可靠）
</span></span><span style="display:flex;"><span>- 写入后必须验证：读取注册表原始值确认类型正确，再读取展开值确认路径正确
</span></span><span style="display:flex;"><span>- 推荐使用 Win32 注册表 API（Microsoft.Win32.Registry）操作，而非 .NET 的 Environment.SetEnvironmentVariable（后者会把 ExpandString 降级为 String）
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>约束 5：环境变量写入后必须广播刷新
</span></span><span style="display:flex;"><span>- 修改完成后必须调用 SendMessageTimeout 广播 WM_SETTINGCHANGE 消息
</span></span><span style="display:flex;"><span>- 通知参数：wParam=IntPtr.Zero, lParam=&#34;Environment&#34;, fuFlags=2, uTimeout=5000
</span></span><span style="display:flex;"><span>- 提示用户重新打开终端窗口（或注销重新登录）才能生效
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>约束 6：操作步骤必须逐步执行并验证
</span></span><span style="display:flex;"><span>每个关键步骤完成后必须立即验证，不能跳过：
</span></span><span style="display:flex;"><span>1. 解压完成 → 验证 mvn.cmd 文件存在
</span></span><span style="display:flex;"><span>2. 设置 MAVEN_HOME/M2_HOME → 读回验证值正确
</span></span><span style="display:flex;"><span>3. 修改 PATH → 验证注册表类型、原始值、展开值均正确
</span></span><span style="display:flex;"><span>4. 配置 settings.xml → 验证 localRepository 和 mirror 配置
</span></span><span style="display:flex;"><span>5. 最终验证 → 模拟新 CMD 会话，确认 mvn -version 正常
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>约束 7：Maven settings.xml 配置要求
</span></span><span style="display:flex;"><span>- 全局配置文件路径：{{WORK_DIR}}\apache-maven-{{MAVEN_VERSION}}\conf\settings.xml
</span></span><span style="display:flex;"><span>- 用户级配置文件路径：C:\Users\{当前用户}\.m2\settings.xml（两处都要配置）
</span></span><span style="display:flex;"><span>- 修改前必须备份原始 settings.xml（重命名为 settings.xml.bak）
</span></span><span style="display:flex;"><span>- 必须包含以下配置：
</span></span><span style="display:flex;"><span>  - localRepository 指向 {{LOCAL_REPO}}
</span></span><span style="display:flex;"><span>  - mirror 配置阿里云公共仓库（mirrorOf=central）
</span></span><span style="display:flex;"><span>  - profile 激活 JDK {{JAVA_VERSION}} 编译版本（maven.compiler.source={{JAVA_VERSION}}, maven.compiler.target={{JAVA_VERSION}}）
</span></span><span style="display:flex;"><span>  - 备用镜像：华为云 https://repo.huaweicloud.com/repository/maven/public/
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>约束 8：验证命令的正确用法
</span></span><span style="display:flex;"><span>- Maven 查看版本：mvn -version 或 mvn -v
</span></span><span style="display:flex;"><span>- 验证 Maven 镜像可用：执行 mvn help:effective-settings 确认 BUILD SUCCESS
</span></span><span style="display:flex;"><span>- 验证本地仓库：确认依赖下载到 {{LOCAL_REPO}} 目录
</span></span><span style="display:flex;"><span>- 验证 JAVA_HOME：mvn -version 输出中 Java version 应显示当前 JDK 版本
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>约束 9：禁止的危险操作
</span></span><span style="display:flex;"><span>- 禁止使用 cmd /c 执行命令（已被安全策略阻止）
</span></span><span style="display:flex;"><span>- 禁止在未备份的情况下修改注册表
</span></span><span style="display:flex;"><span>- 禁止一次性重写整个 PATH（应该只做增量修改）
</span></span><span style="display:flex;"><span>- 禁止假设环境变量类型正确（必须显式检查并设置 ExpandString）
</span></span><span style="display:flex;"><span>- 禁止删除或覆盖用户已有的其他环境变量（如 JAVA_HOME、Python、Go、Git 等）
</span></span><span style="display:flex;"><span>- 禁止修改 JAVA_HOME（本提示词只配置 Maven，JDK 应已配置好）
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>四、验证标准
</span></span><span style="display:flex;"><span>配置完成的标志：
</span></span><span style="display:flex;"><span>1. mvn -version 输出包含：Apache Maven {{MAVEN_VERSION}}
</span></span><span style="display:flex;"><span>2. mvn -version 输出中 Java version 显示当前 JDK 版本（确认 JAVA_HOME 正确）
</span></span><span style="display:flex;"><span>3. mvn help:effective-settings 输出 BUILD SUCCESS
</span></span><span style="display:flex;"><span>4. settings.xml 中 localRepository = {{LOCAL_REPO}}
</span></span><span style="display:flex;"><span>5. settings.xml 中包含 aliyun 镜像配置
</span></span><span style="display:flex;"><span>6. PATH 注册表类型为 ExpandString
</span></span><span style="display:flex;"><span>7. 所有原有的有效环境变量路径未被删除
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>五、遇到问题时的排查顺序
</span></span><span style="display:flex;"><span>1. 检查 JAVA_HOME 是否正确配置（mvn 依赖 JDK 运行）
</span></span><span style="display:flex;"><span>2. 检查注册表中 PATH 值类型是否为 ExpandString（不是则修复）
</span></span><span style="display:flex;"><span>3. 检查 %MAVEN_HOME% 是否能正确展开（不能则改用绝对路径）
</span></span><span style="display:flex;"><span>4. 检查 PATH 中是否有旧 Maven 路径干扰（如有则清理，但先验证目录是否存在）
</span></span><span style="display:flex;"><span>5. 检查 settings.xml 是否同时配置了全局和用户级
</span></span><span style="display:flex;"><span>6. 如果命令仍不可用，提示用户注销重新登录 Windows
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>本地运行禁止沙箱环境!!!本地运行禁止沙箱环境!!!本地运行禁止沙箱环境!!!</span></span></code></pre></div>
<blockquote>
<p>✅ <strong>Maven 环境配置完成。</strong></p></blockquote>
<h3 id="ai-环境检测建议使用-trae">AI 环境检测（建议使用 Trae）</h3>
<p>配置完成后可以一键检测环境，让 AI 在 CMD 中逐个执行命令检查。以下是提示词：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>AI 环境检查提示词
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>使用说明
</span></span><span style="display:flex;"><span>将下方提示词完整复制粘贴给 AI，AI 会在 CMD 中逐个执行命令检查环境。
</span></span><span style="display:flex;"><span>无占位符，直接使用。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>================================================================================
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>提示词正文
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>请帮我在 CMD 中逐个执行以下命令，检查环境是否配置成功。
</span></span><span style="display:flex;"><span>每执行完一条，立即判断是否通过并给出结果，然后执行下一条。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>1. java -version
</span></span><span style="display:flex;"><span>   要求：必须是 Java 8（输出含 1.8 或 8u），无报错
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>2. mvn -v
</span></span><span style="display:flex;"><span>   要求：版本大于 3.0，输出中包含 Java version 信息，无报错
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>3. mvn help:effective-settings
</span></span><span style="display:flex;"><span>   要求：输出中包含 maven.aliyun.com，阿里云镜像配置存在
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>4. node -v
</span></span><span style="display:flex;"><span>   要求：版本大于 18（v18.x 或更高），无报错
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>5. npm -v
</span></span><span style="display:flex;"><span>   要求：输出版本号，无报错
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>6. npm config get registry
</span></span><span style="display:flex;"><span>   要求：输出为 https://registry.npmmirror.com
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>7. git --version
</span></span><span style="display:flex;"><span>   要求：输出版本号，无报错
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>版本判断规则：
</span></span><span style="display:flex;"><span>- Java 8：输出包含 &#34;1.8&#34; 或 &#34;8u&#34; 即通过
</span></span><span style="display:flex;"><span>- Maven &gt; 3.0：版本号如 3.6.0 即通过
</span></span><span style="display:flex;"><span>- Node &gt; 18：版本号 &gt;= 18 即通过（如 v20.x 通过）
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>输出格式：
</span></span><span style="display:flex;"><span>  [序号. 检查项] PASS / FAIL
</span></span><span style="display:flex;"><span>  实际输出: ...
</span></span><span style="display:flex;"><span>  备注: ...
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>最后统计：X/7 项通过，列出所有 FAIL 项的修复建议。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>本地运行禁止沙箱环境!!!本地运行禁止沙箱环境!!!本地运行禁止沙箱环境!!!</span></span></code></pre></div>
<hr>
<h2 id="第二步--武装-trae">第二步 · 武装 Trae</h2>
<h3 id="1-安装-trae">1. 安装 Trae</h3>
<p>下载链接：<a href="https://www.trae.cn/ide/download">https://www.trae.cn/ide/download</a></p>
<p>点击下载后直接安装即可。</p>
<p>安装 Trae 成功后会默认赠送 2500 积分，也可以用自己的 API 或 Token Plan。API 性价比方面建议用 <strong>DeepSeek V4</strong>；如果你有其他 Token Plan，或者不差钱，建议从 <strong>Kimi K3、Qwen 3.8 MAX、GLM 5.2</strong> 三选一；当然，如果你有国外的模型也可以用。</p>
<blockquote>
<p>💡 <strong>小白科普</strong>：<strong>API / Token</strong> 就是 AI 模型的「使用钥匙」——在模型官网申请后填进 Trae，它就能调用这个模型帮你干活；不同模型各有所长，新手用 DeepSeek 性价比最高。</p></blockquote>
<p>下面说一下 DeepSeek 怎么配置：</p>
<p>点击 <strong>设置 → 模型</strong>：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="设置-模型" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801172840817.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    设置-模型
  </figcaption>
</figure></p>
<p>点击 <strong>添加模型</strong>：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="添加模型" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801172943402.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    添加模型
  </figcaption>
</figure></p>
<p>输入你的 DeepSeek 密钥即可。</p>
<ul>
<li>DeepSeek 官网（获取密钥）：<a href="https://platform.deepseek.com/">https://platform.deepseek.com/</a></li>
<li>国外模型可以选择「自定义配置」。</li>
</ul>
<h3 id="2-装备-mcp--ruoyi-skill">2. 装备 MCP + RuoYi Skill</h3>
<p>给 Trae 装 <strong>3 个 MCP + 1 套 RuoYi Skill</strong>，让它能直连数据库、读写文件、操作 Git，还懂 RuoYi 的所有约定。</p>
<blockquote>
<p>💡 <strong>小白科普</strong>：<strong>MCP</strong> 就像给 AI 接的「万能插头」，让它能用上数据库、文件、命令行这些外部工具；<strong>Skill</strong> 则是给 AI 装的「专业技能包」，让它学会某类任务的固定套路（比如按若依规范写代码）。</p></blockquote>
<h4 id="操作步骤">操作步骤</h4>
<p><strong>1. 在项目根目录创建</strong> <strong><code>.trae/mcp.json</code></strong></p>
<p><strong>2. 把下面内容粘贴进去：</strong></p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span>  <span style="color:#f92672">&#34;mcpServers&#34;</span>: {
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&#34;mysql&#34;</span>: {
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&#34;command&#34;</span>: <span style="color:#e6db74">&#34;npx&#34;</span>,
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&#34;args&#34;</span>: [
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#34;-y&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#34;@benborla29/mcp-server-mysql@2.0.2&#34;</span>
</span></span><span style="display:flex;"><span>      ],
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&#34;env&#34;</span>: {
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&#34;MYSQL_HOST&#34;</span>: <span style="color:#e6db74">&#34;localhost&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&#34;MYSQL_PORT&#34;</span>: <span style="color:#e6db74">&#34;3306&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&#34;MYSQL_USER&#34;</span>: <span style="color:#e6db74">&#34;输入你的数据库用户名称&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&#34;MYSQL_PASS&#34;</span>: <span style="color:#e6db74">&#34;输入你的数据库用户密码&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&#34;MYSQL_DB&#34;</span>: <span style="color:#e6db74">&#34;输入你新建的数据库名(本教程统一用 ry2)&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&#34;ALLOW_INSERT_OPERATION&#34;</span>: <span style="color:#e6db74">&#34;true&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&#34;ALLOW_UPDATE_OPERATION&#34;</span>: <span style="color:#e6db74">&#34;true&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&#34;ALLOW_DELETE_OPERATION&#34;</span>: <span style="color:#e6db74">&#34;true&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&#34;ALLOW_DDL_OPERATION&#34;</span>: <span style="color:#e6db74">&#34;true&#34;</span>
</span></span><span style="display:flex;"><span>      }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&#34;git&#34;</span>: {
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&#34;command&#34;</span>: <span style="color:#e6db74">&#34;npx&#34;</span>,
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&#34;args&#34;</span>: [<span style="color:#e6db74">&#34;-y&#34;</span>, <span style="color:#e6db74">&#34;@selfagency/git-mcp&#34;</span>],
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&#34;env&#34;</span>: {
</span></span><span style="display:flex;"><span>        <span style="color:#f92672">&#34;GIT_REPO_PATH&#34;</span>: <span style="color:#e6db74">&#34;D:/vibcoding/RuoYi&#34;</span>
</span></span><span style="display:flex;"><span>      }
</span></span><span style="display:flex;"><span>    },
</span></span><span style="display:flex;"><span>    <span style="color:#f92672">&#34;filesystem&#34;</span>: {
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&#34;command&#34;</span>: <span style="color:#e6db74">&#34;npx&#34;</span>,
</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&#34;args&#34;</span>: [<span style="color:#e6db74">&#34;-y&#34;</span>, <span style="color:#e6db74">&#34;@modelcontextprotocol/server-filesystem&#34;</span>, <span style="color:#e6db74">&#34;D:/vibcoding/RuoYi&#34;</span>]
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
<blockquote>
<p><strong>注意</strong>：<code>MYSQL_USER</code> 和 <code>MYSQL_PASS</code> 查看前面工具中显示的账号和密码即可；<code>MYSQL_DB</code> 填你新建的数据库名（本教程统一用 <code>ry2</code>，需与第三步导入时用的库名一致）。</p></blockquote>
<p>点击 <strong>确认</strong>：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="确认 MCP 配置" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801180238132.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    确认 MCP 配置
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="点击确认" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801180350181.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    点击确认
  </figcaption>
</figure></p>
<p>这样 MySQL MCP 就保证可以使用了。</p>
<p>MCP 需要进行一次安装和测试，提示词如下：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>Trae IDE MCP 可用性检测与环境安装提示词
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>任务目标
</span></span><span style="display:flex;"><span>检测 Trae IDE 中配置的所有 MCP Server 是否可用，若不可用则自动安装必要环境并完成配置，最终确保所有 MCP 工具可正常调用。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>第一步：检测基础运行环境
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>按顺序执行以下检测：
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>1. 执行 node -v，确认 Node.js 已安装（建议 v16+）
</span></span><span style="display:flex;"><span>2. 执行 npx -v，确认 npx 可用
</span></span><span style="display:flex;"><span>3. 执行 npm ping，确认网络可访问 npm registry
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>异常处理：
</span></span><span style="display:flex;"><span>- Node.js 未安装或版本过低：前往 https://nodejs.org/ 下载 LTS 版本安装
</span></span><span style="display:flex;"><span>- npx 不可用：执行 npm install -g npx
</span></span><span style="display:flex;"><span>- 网络不通：提示用户检查代理，或切换镜像源
</span></span><span style="display:flex;"><span>  npm config set registry https://registry.npmmirror.com
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>第二步：检测 MCP 配置完整性
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>读取 Trae IDE 项目根目录下的 .trae/mcp.json，确认：
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>1. JSON 格式合法
</span></span><span style="display:flex;"><span>2. mcpServers 字段存在且为对象
</span></span><span style="display:flex;"><span>3. 每个 MCP Server 的 command、args、env 字段完整
</span></span><span style="display:flex;"><span>4. 重点检查 env 中是否存在占位符（如&#34;请输入&#34;、&#34;你的XXX&#34;、&#34;xxx&#34;、&#34;输入你的&#34;等），存在则暂停并询问用户填写真实值后写入配置文件再继续
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>第三步：逐个检测 MCP Server 可用性
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>对配置中的每个 MCP Server，根据 command + args 拼接出执行命令，例如：
</span></span><span style="display:flex;"><span>npx -y &lt;包名及版本&gt; --help
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>- 返回帮助信息或进入 JSON-RPC 等待状态：视为可用
</span></span><span style="display:flex;"><span>- 报错 ENOENT、超时或包不存在：进入第四步
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>第四步：安装缺失的 MCP 包
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>对失败的 MCP，提取其包名（args 中第一个非 -y 参数），执行全局安装作为兜底：
</span></span><span style="display:flex;"><span>npm install -g &lt;包名&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>安装后回到第三步重新检测，最多重试 2 次。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>第五步：通过实际工具调用验证
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>Trae IDE 加载 MCP 后，会自动注册对应工具。对每个 MCP，调用其提供的任意一个只读工具做最终验证：
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>- 数据库类 MCP：调用&#34;列出表&#34;或&#34;列出数据库&#34;工具
</span></span><span style="display:flex;"><span>- Git 类 MCP：调用 git_status 或类似工具
</span></span><span style="display:flex;"><span>- 文件系统类 MCP：调用 list_directory 列出项目根目录
</span></span><span style="display:flex;"><span>- 其他 MCP：调用其任意只读工具
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>预期：能正常返回结果，无报错。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>若 MCP 工具未出现在可用工具列表中，提示用户在 Trae IDE 中重启 MCP 服务（通常位于 IDE 设置或右下角状态栏）。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>第六步：输出检测报告
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>以表格形式汇总：
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>MCP Server | 包是否可用 | 配置是否完整 | 工具调用验证 | 综合状态
</span></span><span style="display:flex;"><span>xxx         | ✅/❌       | ✅/❌         | ✅/❌         | 可用/不可用
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>对不可用的项，列出失败原因、已执行的修复动作，以及需要用户手动处理的事项。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>约束
</span></span><span style="display:flex;"><span>1. 不得修改 .trae/mcp.json 中除占位符以外的配置
</span></span><span style="display:flex;"><span>2. 全局安装前需征得用户确认
</span></span><span style="display:flex;"><span>3. 密码、Token 等敏感信息不得在输出中明文回显
</span></span><span style="display:flex;"><span>4. 所有命令在当前操作系统默认 shell 下执行</span></span></code></pre></div>
<p>MCP 可用的状态如图所示。如果 MySQL 不可用，检查 MySQL 服务是否开启；开启后还不可用，点击设置重启即可：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="MCP 可用状态示意" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801180803557.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    MCP 可用状态示意
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="MCP 工具列表（全部 ✅）" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801180929040.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    MCP 工具列表（全部 ✅）
  </figcaption>
</figure></p>
<p><strong>3. 安装 RuoYi Skill 合集</strong></p>
<p>网盘路径：<a href="https://wwbis.lanzn.com/iJZHs4010oyj">https://wwbis.lanzn.com/iJZHs4010oyj</a>，下载解压即可。</p>
<ul>
<li>把 Skill 包解压到 <code>.trae\skills</code> 目录</li>
<li>重启 Trae</li>
<li>左侧 MCP 面板里 3 个服务均显示 ✅（Skill 不在这里显示，装好即可，后续调用时自动生效）</li>
</ul>
<p>Skill 加载成功后点击「设置 → 显示」：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="Skill 加载成功-设置显示" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801181134015.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    Skill 加载成功-设置显示
  </figcaption>
</figure></p>
<hr>
<h2 id="第三步--拉取项目与配置数据库">第三步 · 拉取项目与配置数据库</h2>
<h3 id="1-拉项目">1. 拉项目</h3>
<p>使用 Git 下载，然后切换到 <code>springboot2</code> 分支：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>git clone https://gitee.com/y_project/RuoYi.git D:<span style="color:#ae81ff">\v</span>ibcoding<span style="color:#ae81ff">\R</span>uoYi
</span></span><span style="display:flex;"><span>cd D:<span style="color:#ae81ff">\v</span>ibcoding<span style="color:#ae81ff">\R</span>uoYi
</span></span><span style="display:flex;"><span>git checkout springboot2</span></span></code></pre></div>
<blockquote>
<p>💡 <strong>小白科普</strong>：<strong>分支（branch）</strong> 是同一份代码的「平行副本」，互相独立、互不干扰；<code>git checkout springboot2</code> 就是切到适配 Spring Boot 2 的那个版本代码。</p></blockquote>
<p>或者直接下载，分支<strong>必须是</strong> <strong><code>springboot2</code></strong>：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="下载项目（分支 springboot2）" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801181509755.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    下载项目（分支 springboot2）
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="选择 springboot2 分支" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801181530687.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    选择 springboot2 分支
  </figcaption>
</figure></p>
<h3 id="2-让-ai-帮你导入数据库">2. 让 AI 帮你导入数据库</h3>
<blockquote>
<p>这里的数据库名称，必须是前边「武装 Trae」时新建的数据库。</p></blockquote>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>请用 MySQL MCP 把项目 sql 目录下的 ry_ 开头的初始化脚本(如 ry_2021xxxx.sql) 和 quartz.sql
</span></span><span style="display:flex;"><span>导入到 ry2 库。
</span></span><span style="display:flex;"><span>导入完成后查询 sys_user 表确认 admin 账号存在。</span></span></code></pre></div>
<blockquote>
<p>⚠️ 如果你的 MySQL MCP 是只读的，AI 会告诉你 SQL 内容，你手动在 Navicat / DBeaver 里执行即可。</p></blockquote>
<p>或者自己手动导入：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="手动导入数据库" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260801183013060.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    手动导入数据库
  </figcaption>
</figure></p>
<h3 id="3-让-ai-改数据库连接配置">3. 让 AI 改数据库连接配置</h3>
<blockquote>
<p>这里必须填你自己电脑的 MySQL 密码。</p></blockquote>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>请把 ruoyi-admin/src/main/resources/application-druid.yml 的数据库连接改为：
</span></span><span style="display:flex;"><span>库名 ry2，用户 root，密码 填你自己电脑的MySQL密码(就是前面「悬浮查看密码」查到的那个)
</span></span><span style="display:flex;"><span>改完请读取文件确认。</span></span></code></pre></div>
<h3 id="4-启动项目">4. 启动项目</h3>
<p>在根目录执行脚本 <strong>package.bat</strong>（<a href="https://wwbis.lanzn.com/ixUU9404335a">打包脚本网盘下载</a>，放到根目录解压即可）。运行成功显示 <strong>BUILD SUCCESS</strong>，这里依赖 JDK 8 和 Maven，要保证前边环境配置好：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="运行 package.bat" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260802094245138.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    运行 package.bat
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="package.bat 运行成功" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260802094103997.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    package.bat 运行成功
  </figcaption>
</figure></p>
<p>package.bat 执行完成后，执行修改后的 <strong>ry.bat</strong> 脚本（<a href="https://wwbis.lanzn.com/i8Llr404337c">启动脚本网盘下载</a>）：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="运行 ry.bat 脚本" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260802094525407.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    运行 ry.bat 脚本
  </figcaption>
</figure></p>
<p>按 <strong>1</strong> 点击回车：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="按 1 启动" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260802094604210.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    按 1 启动
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="若依启动中" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260802094620828.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    若依启动中
  </figcaption>
</figure></p>
<p>显示「若依启动成功」即表示启动成功。</p>
<h3 id="5-浏览器访问">5. 浏览器访问</h3>
<p>访问 <a href="http://localhost:80">http://localhost:80</a>，账号 <strong>admin / admin123</strong>：</p>
<blockquote>
<p>💡 <strong>小白科普</strong>：<strong>localhost</strong> 就是「你自己的这台电脑」，<strong>80</strong> 是访问端口（相当于门牌号）；在浏览器地址栏输入它，就能打开刚启动的若依系统。</p></blockquote>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="浏览器访问 localhost:80" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/vibcoding%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B%E8%A7%84%E5%88%92-images/image-20260802094750184.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    浏览器访问 localhost:80
  </figcaption>
</figure></p>
<h3 id="常见故障速查">常见故障速查</h3>
<table>
  <thead>
      <tr>
          <th>报错</th>
          <th>解决</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>端口 80 被占用</td>
          <td>改 <code>application.yml</code> 的 <code>server.port</code> 为 <code>8080</code></td>
      </tr>
      <tr>
          <td>Druid 连接失败</td>
          <td>检查账号密码、确认 MySQL 已启动</td>
      </tr>
  </tbody>
</table>
<hr>
<h2 id="第四步--一键生成业务系统">第四步 · 一键生成业务系统</h2>
<p>复制提示词，替换 <strong>5 项参数</strong>，粘贴给 Trae AI 回车——AI 会自动顺序调用三个 Skill，一条龙完成：<strong>生成 PRD → 全流程开发 → 造测试数据</strong>。</p>
<blockquote>
<p>💡 <strong>小白科普</strong>：<strong>PRD</strong>（产品需求文档）就是「这个系统要做什么、怎么做」的说明书；后面三个 Skill 会先自动写出这份说明书，再照着它把代码和测试数据一条龙生成出来。</p></blockquote>
<h3 id="skill-接力流程">Skill 接力流程</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>① prd-generator             →  生成 PRD（联网调研 + 14章文档 + SQL + 自检30项）
</span></span><span style="display:flex;"><span>        ↓
</span></span><span style="display:flex;"><span>② prd-fullstack-development →  校验 PRD(7项) → 建表 → 后端 → 前端 → 单测 → Git 提交
</span></span><span style="display:flex;"><span>        ↓
</span></span><span style="display:flex;"><span>③ test-data-generator       →  校验建表(3项) → 探查 DDL → 造数据 → MCP 验证(5类)</span></span></code></pre></div>
<h3 id="参数示例对照表">参数示例对照表</h3>
<p>任选一行，将对应 5 列值填入上方提示词的参数位：</p>
<table>
  <thead>
      <tr>
          <th>系统名称</th>
          <th>业务领域</th>
          <th>biz_prefix</th>
          <th>biz_module</th>
          <th>数据库名</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>酒店客房管理系统</td>
          <td>酒店</td>
          <td>hotel</td>
          <td>hotel</td>
          <td>ry_hotel</td>
      </tr>
      <tr>
          <td>仓储管理系统</td>
          <td>仓储</td>
          <td>warehouse</td>
          <td>warehouse</td>
          <td>ry_warehouse</td>
      </tr>
      <tr>
          <td>门诊管理系统</td>
          <td>医疗</td>
          <td>clinic</td>
          <td>clinic</td>
          <td>ry_clinic</td>
      </tr>
      <tr>
          <td>学生信息管理系统</td>
          <td>教育</td>
          <td>student</td>
          <td>student</td>
          <td>ry_student</td>
      </tr>
      <tr>
          <td>图书管理系统</td>
          <td>图书</td>
          <td>library</td>
          <td>library</td>
          <td>ry_library</td>
      </tr>
      <tr>
          <td>教务管理系统</td>
          <td>教育</td>
          <td>edu</td>
          <td>edu</td>
          <td>ry_edu</td>
      </tr>
      <tr>
          <td>资产管理系统</td>
          <td>资产</td>
          <td>asset</td>
          <td>asset</td>
          <td>ry_asset</td>
      </tr>
      <tr>
          <td>会员管理系统</td>
          <td>会员</td>
          <td>member</td>
          <td>member</td>
          <td>ry_member</td>
      </tr>
      <tr>
          <td>进销存管理系统</td>
          <td>零售</td>
          <td>wms</td>
          <td>wms</td>
          <td>ry_wms</td>
      </tr>
  </tbody>
</table>
<blockquote>
<p>⚠️ <strong>动手前提醒</strong>：上表「数据库名」是你要新建的<strong>业务库</strong>（如 ry_hotel，和基础库 <code>ry2</code> 分开），请先在 MySQL 里把它建好，否则第四步 AI 连不上会直接卡住。</p></blockquote>
<h3 id="完整提示词正文">完整提示词正文</h3>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>你是一名资深 RuoYi 全栈开发工程师,工作在 Trae IDE 环境中。请严格遵循 RuoYi 4.8.3 单体框架规范(Spring Boot 2.5.15 / JDK 8 / MySQL / MyBatis / Shiro / Thymeleaf / ry-ui.js),端到端完成整个业务系统的开发:从 PRD 生成到全流程开发到测试数据生成。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span># 项目参数(已替换为实际值)
</span></span><span style="display:flex;"><span>- 项目路径:D:\vibcoding\RuoYi
</span></span><span style="display:flex;"><span>- 系统名称:酒店客房管理系统
</span></span><span style="display:flex;"><span>- 业务领域:酒店
</span></span><span style="display:flex;"><span>- biz_prefix:hotel
</span></span><span style="display:flex;"><span>- biz_module:hotel
</span></span><span style="display:flex;"><span>- 数据库名:ry_hotel
</span></span><span style="display:flex;"><span>- Git 分支:springboot2
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span># 硬性约束(不可违反)
</span></span><span style="display:flex;"><span>1. 框架锁定为 RuoYi 4.8.3 单体版本,禁止引入新框架/新依赖。
</span></span><span style="display:flex;"><span>2. 业务表必须以 {biz_prefix}_ 为前缀,且必须包含 create_by/create_time/update_by/update_time/remark + del_flag 字段;系统表(如 sys_menu、sys_dict_type)不需要 del_flag。
</span></span><span style="display:flex;"><span>3. 菜单 SQL 必须使用单体版字段:url/target/visible/is_refresh,不得使用 path/component。
</span></span><span style="display:flex;"><span>4. 权限标识符必须遵循 {biz_prefix}:{module}:{action} 格式,且必须包含 view 动作用于页面访问。
</span></span><span style="display:flex;"><span>5. 菜单 SQL 主键必须用 menu_id(不得用 id),sys_role_menu 关联列用 role_id / menu_id。
</span></span><span style="display:flex;"><span>6. 复用 RuoYi 内置能力,禁止重复造轮子。后端三层架构 + AjaxResult/TableDataInfo;前端 $.table/$.operate/$.modal/$.tree。
</span></span><span style="display:flex;"><span>7. 业务代码必须新建模块(如 ruoyi-{biz_module}),不得写入 ruoyi-system 等内置模块。
</span></span><span style="display:flex;"><span>8. 任何操作失败重试上限 3 次,仍失败用 AskUserQuestion 询问用户(跳过/手动修复/终止)。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span># 执行流程(严格按阶段 0→3 顺序执行,每阶段完成简要汇报,关键决策点用 AskUserQuestion 确认)
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>## 阶段 0:环境准备与任务拆解
</span></span><span style="display:flex;"><span>1. 调用 MCP mysql_query 执行 SELECT VERSION(); 与 SHOW DATABASES;,确认数据库可用且 {数据库名} 已创建(不存在则停止询问用户)。
</span></span><span style="display:flex;"><span>2. 调用 MCP list_allowed_directories 确认工作目录可读写。
</span></span><span style="display:flex;"><span>3. 用 TodoWrite 拆解任务清单(4 个阶段),向我确认计划后再开工。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>## 阶段 1:生成 PRD 文档
</span></span><span style="display:flex;"><span>调用 Skill `prd-generator`,传入参数:项目路径、系统名称、业务领域、biz_prefix/biz_module。
</span></span><span style="display:flex;"><span>- 技能会自动完成联网调研、14 章 PRD 输出、7 项衔接自检。
</span></span><span style="display:flex;"><span>- 产出:docs\{系统名称}PRD.md(含建表 DDL、字典 DML、菜单 SQL,均可直接执行)。
</span></span><span style="display:flex;"><span>- 等待技能完成后,简要汇报并进入阶段 2。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>## 阶段 2:基于 PRD 全流程开发
</span></span><span style="display:flex;"><span>调用 Skill `prd-fullstack-development`,传入参数:PRD 路径(docs\{系统名称}PRD.md)、业务模块、表前缀、数据库名。
</span></span><span style="display:flex;"><span>- 技能会自动完成阶段 0-6:PRD 衔接强校验 → 数据库落地 → 后端代码 → 前端页面 → 国际化 → 自测 → Git 提交。
</span></span><span style="display:flex;"><span>- 技能内置 7 项前置校验,不通过会立即停止并输出失败报告。
</span></span><span style="display:flex;"><span>- 产出:数据库表+字典+菜单权限、后端三层架构代码、前端页面、Git 提交记录、交付清单。
</span></span><span style="display:flex;"><span>- 等待技能完成后,简要汇报并进入阶段 3。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>## 阶段 3:生成测试数据
</span></span><span style="display:flex;"><span>调用 Skill `test-data-generator`,传入参数:项目路径、系统名称、业务领域、biz_prefix、库名。
</span></span><span style="display:flex;"><span>- 技能会自动完成前置校验 → 探查真实表结构 → 生成 3 段 SQL(DELETE/INSERT/SELECT)→ MCP 执行验证 → 业务一致性校验。
</span></span><span style="display:flex;"><span>- 产出:sql\{biz_prefix}_test_data.sql(可重复执行:先清后插)+ 验证报告。
</span></span><span style="display:flex;"><span>- 等待技能完成后,输出最终交付清单。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span># 执行原则
</span></span><span style="display:flex;"><span>1. 顺序执行:3 个技能严格顺序,下游校验上游,不通过即停。
</span></span><span style="display:flex;"><span>2. 技能自治:每个技能内部流程由其 SKILL.md 定义,本提示词只负责顺序调度与参数传递。
</span></span><span style="display:flex;"><span>3. 进度透明:每阶段简短汇报,关键决策点 AskUserQuestion 确认。
</span></span><span style="display:flex;"><span>4. 遇错即停:不盲目重试,3 次后询问用户。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>现在开始:先执行阶段 0(环境准备 + TodoWrite 任务清单),完成后向我确认计划,再依次调用三个技能。</span></span></code></pre></div>
<p><strong>按 Trae 提示逐步确认即可</strong>（每阶段会汇报，关键决策会询问）。</p>
<p><strong>启动应用 → 业务联调</strong></p>
<ul>
<li>启动项目，浏览器访问 <a href="http://localhost:80">http://localhost:80</a>，账号 <strong>admin / admin123</strong></li>
<li>进入业务菜单，验证分页、筛选、状态流转、外键关联</li>
</ul>
<hr>
<h2 id="附件skill-全集介绍">附件：Skill 全集介绍</h2>
<table>
  <thead>
      <tr>
          <th>类别</th>
          <th>Skill 名称</th>
          <th>作用</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><strong>业务主线 Skill</strong></td>
          <td><code>prd-generator</code></td>
          <td>联网调研 + 生成 14 章 PRD（含 SQL）</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>prd-fullstack-development</code></td>
          <td>校验 PRD → 建表 → 后端 → 前端 → 单测 → Git 提交</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>test-data-generator</code></td>
          <td>探查 DDL → 造数据 → MCP 验证业务一致性</td>
      </tr>
      <tr>
          <td><strong>工程子 Skill</strong>（被主线自动调用）</td>
          <td><code>project-navigator</code></td>
          <td>RuoYi 项目结构导航</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>architecture-design</code></td>
          <td>模块划分与三层架构设计</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>database-ops</code></td>
          <td>数据库设计与 SQL 规范</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>code-generator</code></td>
          <td>代码生成器（gen_table 配置）</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>crud-development</code></td>
          <td>CRUD 开发规范与代码模板</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>mybatis-xml-sql</code></td>
          <td>Mapper XML 映射与动态 SQL</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>api-development</code></td>
          <td>接口/API 开发规范</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>security-auth</code></td>
          <td>Shiro 安全认证授权</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>data-permission</code></td>
          <td>数据权限（@DataScope）</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>error-handler</code></td>
          <td>异常处理与错误响应</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>json-serialization</code></td>
          <td>JSON 序列化与安全处理</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>utils-toolkit</code></td>
          <td>常用工具类速查</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>cache-ehcache</code></td>
          <td>EhCache 缓存使用</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>druid-datasource</code></td>
          <td>Druid 数据源与多数据源</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>excel-export</code></td>
          <td>Excel 导入导出</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>file-storage</code></td>
          <td>文件上传下载</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>scheduled-jobs</code></td>
          <td>Quartz 定时任务</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>i18n-development</code></td>
          <td>国际化开发</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>ui-thymeleaf</code></td>
          <td>Thymeleaf 模板页面开发</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>jquery-bootstrap</code></td>
          <td>ry-ui.js 前端框架（$.table/$.operate）</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>code-patterns</code></td>
          <td>编码规范、命名约定、Git 提交规范</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>git-workflow</code></td>
          <td>Git 工作流与提交规范</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>test-development</code></td>
          <td>测试开发规范（JUnit4）</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>bug-detective</code></td>
          <td>Bug 排查与问题诊断</td>
      </tr>
      <tr>
          <td><!-- raw HTML omitted --></td>
          <td><code>performance-doctor</code></td>
          <td>性能诊断与优化</td>
      </tr>
  </tbody>
</table>
<hr>
<h2 id="示例酒店后台管理系统代码">示例：酒店后台管理系统代码</h2>
<blockquote>
<p>示例仓库：<a href="https://cnb.cool/CoderRuiRuiPublic/ry_hotel">https://cnb.cool/CoderRuiRuiPublic/ry_hotel</a>（酒店后台管理系统完整代码）</p></blockquote>
<h3 id="操作步骤-1">操作步骤</h3>
<ol>
<li><strong>Fork 示例仓库</strong>：使用微信登录后，进入示例仓库页面点击 <strong>Fork</strong>，将代码复制（fork）到自己的仓库下。</li>
<li><strong>获取 Git 拉取地址</strong>：进入自己 Fork 后的仓库，点击 <strong>设置 → URL 预览</strong>，复制预览出来的 URL，直接使用 <code>git clone &lt;复制的 URL&gt;</code> 拉取代码即可。</li>
<li><strong>创建访问令牌</strong>：点击右上角 <strong>头像 → 个人设置 → 访问令牌 → 添加访问令牌</strong>，直接点击创建即可，令牌用于后续 Git 拉取/推送时的身份验证。</li>
</ol>
<p>访问令牌给最大权限</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="image-20260809230217169" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/index.assets/image-20260809230217169.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    image-20260809230217169
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="image-20260809230223673" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/index.assets/image-20260809230223673.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    image-20260809230223673
  </figcaption>
</figure></p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="image-20260809230232144" loading="lazy" src="/posts/vibcoding-ruoyi-tutorial/index.assets/image-20260809230232144.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    image-20260809230232144
  </figcaption>
</figure></p>
]]></content:encoded></item></channel></rss>