<?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>Posts on 码工瑞瑞的博客</title><link>https://blog.137027.xyz/posts/</link><description>Recent content in Posts 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/posts/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><item><title>博客功能全测试</title><link>https://blog.137027.xyz/posts/full-feature-test/</link><pubDate>Sun, 19 Jul 2026 20:00:00 +0800</pubDate><guid>https://blog.137027.xyz/posts/full-feature-test/</guid><description>一篇文章测试博客所有功能：Markdown 排版、代码高亮、数学公式、图表、短视频、加密内容等。</description><content:encoded><![CDATA[<h2 id="基础排版">基础排版</h2>
<h3 id="文字样式">文字样式</h3>
<p>这是一段普通文字。<strong>这是粗体</strong>，<em>这是斜体</em>，<del>这是删除线</del>，<code>这是行内代码</code>。</p>
<p>还可以使用 <strong><em>粗斜体</em></strong> 来同时强调。</p>
<h3 id="无序列表">无序列表</h3>
<ul>
<li>第一项</li>
<li>第二项
<ul>
<li>子项目 A</li>
<li>子项目 B</li>
</ul>
</li>
<li>第三项</li>
</ul>
<h3 id="有序列表">有序列表</h3>
<ol>
<li>安装 Hugo</li>
<li>创建站点</li>
<li>选择主题</li>
<li>开始写作</li>
</ol>
<h3 id="任务列表">任务列表</h3>
<ul>
<li><input checked="" disabled="" type="checkbox"> 搭建博客框架</li>
<li><input checked="" disabled="" type="checkbox"> 配置主题</li>
<li><input checked="" disabled="" type="checkbox"> 添加自定义功能</li>
<li><input disabled="" type="checkbox"> 持续更新文章</li>
</ul>
<h3 id="引用">引用</h3>
<blockquote>
<p>代码是写给人看的，附带能在机器上运行。</p>
<p>— Harold Abelson</p></blockquote>
<p>嵌套引用：</p>
<blockquote>
<p>第一层引用</p>
<blockquote>
<p>第二层嵌套引用</p>
<blockquote>
<p>第三层，兔子洞到底有多深？</p></blockquote></blockquote></blockquote>
<h3 id="分割线">分割线</h3>
<hr>
<h2 id="代码高亮">代码高亮</h2>
<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-python" data-lang="python"><span style="display:flex;"><span><span style="color:#66d9ef">def</span> <span style="color:#a6e22e">fibonacci</span>(n: int) <span style="color:#f92672">-&gt;</span> list[int]:
</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">&#34;&#34;&#34;生成斐波那契数列&#34;&#34;&#34;</span>
</span></span><span style="display:flex;"><span>    fib <span style="color:#f92672">=</span> [<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">1</span>]
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">for</span> i <span style="color:#f92672">in</span> range(<span style="color:#ae81ff">2</span>, n):
</span></span><span style="display:flex;"><span>        fib<span style="color:#f92672">.</span>append(fib[i<span style="color:#f92672">-</span><span style="color:#ae81ff">1</span>] <span style="color:#f92672">+</span> fib[i<span style="color:#f92672">-</span><span style="color:#ae81ff">2</span>])
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">return</span> fib[:n]
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>print(fibonacci(<span style="color:#ae81ff">10</span>))</span></span></code></pre></div>
<h3 id="带文件名的代码块">带文件名的代码块</h3>

<div class="code-block-with-title">
  <div class="code-block-title">
    <span>📄 app.js</span>
  </div><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-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">express</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#34;express&#34;</span>);
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">app</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">express</span>();
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#34;/&#34;</span>, (<span style="color:#a6e22e">req</span>, <span style="color:#a6e22e">res</span>) =&gt; {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">json</span>({ <span style="color:#a6e22e">message</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;Hello, Hugo Blog!&#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:#a6e22e">app</span>.<span style="color:#a6e22e">listen</span>(<span style="color:#ae81ff">3000</span>, () =&gt; {
</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">&#34;Server running on port 3000&#34;</span>);
</span></span><span style="display:flex;"><span>});</span></span></code></pre></div>
</div>

<div class="code-block-with-title">
  <div class="code-block-title">
    <span>📄 index.html</span>
  </div><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-html" data-lang="html"><span style="display:flex;"><span><span style="color:#75715e">&lt;!DOCTYPE html&gt;</span>
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">html</span> <span style="color:#a6e22e">lang</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;zh-CN&#34;</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">head</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">meta</span> <span style="color:#a6e22e">charset</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;UTF-8&#34;</span> /&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">title</span>&gt;我的博客&lt;/<span style="color:#f92672">title</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;/<span style="color:#f92672">head</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;<span style="color:#f92672">body</span>&gt;
</span></span><span style="display:flex;"><span>    &lt;<span style="color:#f92672">h1</span>&gt;Hello World&lt;/<span style="color:#f92672">h1</span>&gt;
</span></span><span style="display:flex;"><span>  &lt;/<span style="color:#f92672">body</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">html</span>&gt;</span></span></code></pre></div>
</div>

<div class="code-block-with-title">
  <div class="code-block-title">
    <span>📄 deploy.sh</span>
  </div><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><span style="color:#75715e">#!/bin/bash
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>hugo --minify
</span></span><span style="display:flex;"><span>git add -A
</span></span><span style="display:flex;"><span>git commit -m <span style="color:#e6db74">&#34;deploy: </span><span style="color:#66d9ef">$(</span>date <span style="color:#e6db74">&#39;+%Y-%m-%d %H:%M&#39;</span><span style="color:#66d9ef">)</span><span style="color:#e6db74">&#34;</span>
</span></span><span style="display:flex;"><span>git push origin master</span></span></code></pre></div>
</div>
<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-go" data-lang="go"><span style="display:flex;"><span><span style="color:#f92672">package</span> <span style="color:#a6e22e">main</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">import</span> <span style="color:#e6db74">&#34;fmt&#34;</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">func</span> <span style="color:#a6e22e">main</span>() {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">fmt</span>.<span style="color:#a6e22e">Println</span>(<span style="color:#e6db74">&#34;Hello, 世界!&#34;</span>)
</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
<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-css" data-lang="css"><span style="display:flex;"><span>:<span style="color:#a6e22e">root</span> {
</span></span><span style="display:flex;"><span>  --primary: <span style="color:#ae81ff">#2563eb</span>;
</span></span><span style="display:flex;"><span>  --radius: <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</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:#a6e22e">card</span> {
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">border-radius</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>radius);
</span></span><span style="display:flex;"><span>  <span style="color:#66d9ef">box-shadow</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span> rgba(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0.1</span>);
</span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
<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-sql" data-lang="sql"><span style="display:flex;"><span><span style="color:#66d9ef">SELECT</span> p.title, p.date, <span style="color:#66d9ef">COUNT</span>(<span style="color:#66d9ef">c</span>.id) <span style="color:#66d9ef">AS</span> comment_count
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">FROM</span> posts p
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">LEFT</span> <span style="color:#66d9ef">JOIN</span> comments <span style="color:#66d9ef">c</span> <span style="color:#66d9ef">ON</span> p.id <span style="color:#f92672">=</span> <span style="color:#66d9ef">c</span>.post_id
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">WHERE</span> p.date <span style="color:#f92672">&gt;=</span> <span style="color:#e6db74">&#39;2026-01-01&#39;</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">GROUP</span> <span style="color:#66d9ef">BY</span> p.id
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">ORDER</span> <span style="color:#66d9ef">BY</span> comment_count <span style="color:#66d9ef">DESC</span>
</span></span><span style="display:flex;"><span><span style="color:#66d9ef">LIMIT</span> <span style="color:#ae81ff">10</span>;</span></span></code></pre></div>
<h2 id="数学公式katex">数学公式（KaTeX）</h2>
<h3 id="行内公式">行内公式</h3>
<p>质能方程 $E = mc^2$，欧拉公式 $e^{i\pi} + 1 = 0$，勾股定理 $a^2 + b^2 = c^2$。</p>
<h3 id="块级公式">块级公式</h3>
<p>二次方程求根公式：</p>
<p>$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$</p>
<p>高斯积分：</p>
<p>$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$</p>
<p>矩阵：</p>
<p>$$
\begin{pmatrix} a_{11} &amp; a_{12} \ a_{21} &amp; a_{22} \end{pmatrix} \begin{pmatrix} x_1 \ x_2 \end{pmatrix} = \begin{pmatrix} b_1 \ b_2 \end{pmatrix}
$$</p>
<p>求和与连乘：</p>
<p>$$
\sum_{k=1}^{n} k = \frac{n(n+1)}{2}, \quad \prod_{k=1}^{n} k = n!
$$</p>
<h2 id="表格">表格</h2>
<h3 id="基础表格">基础表格</h3>
<table>
  <thead>
      <tr>
          <th>功能</th>
          <th style="text-align: center">状态</th>
          <th>说明</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Markdown 渲染</td>
          <td style="text-align: center">✅</td>
          <td>支持 GFM 扩展语法</td>
      </tr>
      <tr>
          <td>代码高亮</td>
          <td style="text-align: center">✅</td>
          <td>Chroma 引擎，Monokai 主题</td>
      </tr>
      <tr>
          <td>数学公式</td>
          <td style="text-align: center">✅</td>
          <td>KaTeX 渲染</td>
      </tr>
      <tr>
          <td>Mermaid 图表</td>
          <td style="text-align: center">✅</td>
          <td>流程图/时序图/甘特图</td>
      </tr>
      <tr>
          <td>图片灯箱</td>
          <td style="text-align: center">✅</td>
          <td>GLightbox 点击放大</td>
      </tr>
      <tr>
          <td>加密内容</td>
          <td style="text-align: center">✅</td>
          <td>SHA-256 前端验证</td>
      </tr>
  </tbody>
</table>
<h3 id="对齐方式">对齐方式</h3>
<table>
  <thead>
      <tr>
          <th style="text-align: left">左对齐</th>
          <th style="text-align: center">居中对齐</th>
          <th style="text-align: right">右对齐</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td style="text-align: left">Hugo</td>
          <td style="text-align: center">静态生成器</td>
          <td style="text-align: right">Go</td>
      </tr>
      <tr>
          <td style="text-align: left">Vite</td>
          <td style="text-align: center">构建工具</td>
          <td style="text-align: right">JavaScript</td>
      </tr>
      <tr>
          <td style="text-align: left">Tailwind</td>
          <td style="text-align: center">CSS 框架</td>
          <td style="text-align: right">Utility-first</td>
      </tr>
  </tbody>
</table>
<h2 id="提示框alert">提示框（Alert）</h2>
<div class="alert alert-info">
  <div class="alert-title">💡 提示</div> 这是一条<strong>信息提示</strong>，用于展示补充说明或小贴士。
</div>

<div class="alert alert-success">
  <div class="alert-title">✅ 成功</div> 操作已成功完成！你的博客已部署上线。
</div>

<div class="alert alert-warning">
  <div class="alert-title">⚠️ 注意</div> 修改 <code>hugo.toml</code> 后需要<strong>重启服务</strong>才能生效。
</div>

<div class="alert alert-danger">
  <div class="alert-title">🚫 危险</div> 请勿在生产环境使用 <code>--disableLiveReload</code> 以外的调试参数！
</div>

<h2 id="折叠面板details">折叠面板（Details）</h2>
<details class="custom-details">
  <summary>点击展开：什么是 Hugo？</summary>
  <div class="details-content"><p>Hugo 是世界上最快的静态网站生成器，使用 Go 语言编写。它能在几毫秒内将 Markdown 文件转换为完整的 HTML 网站，无需数据库或运行时依赖。</p>
<p><strong>核心优势：</strong></p>
<ul>
<li>构建速度极快（每秒 1000+ 页面）</li>
<li>丰富的模板系统</li>
<li>内置 Sass/SCSS 处理</li>
<li>多语言支持</li>
</ul>
</div>
</details>

<details class="custom-details">
  <summary>点击展开：常用 Hugo 命令</summary>
  <div class="details-content"><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>hugo new posts/my-post.md    <span style="color:#75715e"># 创建新文章</span>
</span></span><span style="display:flex;"><span>hugo server -D               <span style="color:#75715e"># 启动开发服务器（含草稿）</span>
</span></span><span style="display:flex;"><span>hugo --minify                <span style="color:#75715e"># 生产构建（压缩输出）</span>
</span></span><span style="display:flex;"><span>hugo gen doc                 <span style="color:#75715e"># 生成文档</span></span></span></code></pre></div>
</div>
</details>

<h2 id="mermaid-图表">Mermaid 图表</h2>
<h3 id="流程图">流程图</h3>

<pre class="mermaid">graph TD
    A[开始写作] --&gt; B{文章完成?}
    B --&gt;|是| C[git add &amp; commit]
    B --&gt;|否| A
    C --&gt; D[git push]
    D --&gt; E[自动部署]
    E --&gt; F[网站更新完成]</pre>
<h3 id="时序图">时序图</h3>

<pre class="mermaid">sequenceDiagram
    participant 用户
    participant 浏览器
    participant 服务器
    用户-&gt;&gt;浏览器: 输入网址
    浏览器-&gt;&gt;服务器: HTTP 请求
    服务器--&gt;&gt;浏览器: 返回 HTML
    浏览器--&gt;&gt;用户: 渲染页面</pre>
<h3 id="甘特图">甘特图</h3>

<pre class="mermaid">gantt
    title 博客开发计划
    dateFormat  YYYY-MM-DD
    section 基础搭建
    安装 Hugo           :done, a1, 2026-01-01, 1d
    配置主题            :done, a2, after a1, 2d
    section 功能开发
    评论系统            :done, b1, 2026-01-05, 3d
    搜索功能            :done, b2, after b1, 2d
    自定义短代码        :active, b3, 2026-01-10, 5d
    section 部署上线
    配置域名            :c1, 2026-01-20, 2d
    正式上线            :milestone, c2, 2026-01-22, 0d</pre>
<h2 id="时间线history">时间线（History）</h2>
<div
  class="history-item"
  style="display: flex; gap: 1rem; margin: 0.5rem 0; align-items: flex-start"
>
  <div
    class="history-dot"
    style="
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #2563eb;
      flex-shrink: 0;
      margin-top: 5px;
      position: relative;
    "
  >
    <div
      style="
        position: absolute;
        top: 12px;
        left: 5px;
        width: 2px;
        height: calc(100% + 1rem);
        background: rgba(37, 99, 235, 0.2);
      "
    ></div>
  </div>
  <div>
    <span style="font-size: 0.8rem; color: #888; font-weight: 500"
      >2026-01-01</span
    >
    <div style="margin-top: 0.25rem; font-size: 0.9rem">
      🎉 博客项目启动，完成 Hugo 安装与基础配置。
    </div>
  </div>
</div>

<div
  class="history-item"
  style="display: flex; gap: 1rem; margin: 0.5rem 0; align-items: flex-start"
>
  <div
    class="history-dot"
    style="
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #2563eb;
      flex-shrink: 0;
      margin-top: 5px;
      position: relative;
    "
  >
    <div
      style="
        position: absolute;
        top: 12px;
        left: 5px;
        width: 2px;
        height: calc(100% + 1rem);
        background: rgba(37, 99, 235, 0.2);
      "
    ></div>
  </div>
  <div>
    <span style="font-size: 0.8rem; color: #888; font-weight: 500"
      >2026-01-05</span
    >
    <div style="margin-top: 0.25rem; font-size: 0.9rem">
      集成 PaperMod 主题，配置暗色模式与多语言支持。
    </div>
  </div>
</div>

<div
  class="history-item"
  style="display: flex; gap: 1rem; margin: 0.5rem 0; align-items: flex-start"
>
  <div
    class="history-dot"
    style="
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #2563eb;
      flex-shrink: 0;
      margin-top: 5px;
      position: relative;
    "
  >
    <div
      style="
        position: absolute;
        top: 12px;
        left: 5px;
        width: 2px;
        height: calc(100% + 1rem);
        background: rgba(37, 99, 235, 0.2);
      "
    ></div>
  </div>
  <div>
    <span style="font-size: 0.8rem; color: #888; font-weight: 500"
      >2026-01-10</span
    >
    <div style="margin-top: 0.25rem; font-size: 0.9rem">
      添加 Giscus 评论系统、搜索功能、阅读进度条等高级特性。
    </div>
  </div>
</div>

<div
  class="history-item"
  style="display: flex; gap: 1rem; margin: 0.5rem 0; align-items: flex-start"
>
  <div
    class="history-dot"
    style="
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #2563eb;
      flex-shrink: 0;
      margin-top: 5px;
      position: relative;
    "
  >
    <div
      style="
        position: absolute;
        top: 12px;
        left: 5px;
        width: 2px;
        height: calc(100% + 1rem);
        background: rgba(37, 99, 235, 0.2);
      "
    ></div>
  </div>
  <div>
    <span style="font-size: 0.8rem; color: #888; font-weight: 500"
      >2026-07-19</span
    >
    <div style="margin-top: 0.25rem; font-size: 0.9rem">
      完成全部功能集成，发布本篇全功能测试文章。
    </div>
  </div>
</div>

<h2 id="加密内容">加密内容</h2>
<div class="encrypted-content" data-hash="81dc9bdb52d04dc20036dbd8313ed055">
  <div class="encrypt-lock">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
    </svg>
    <p>此内容已加密，请输入密码查看</p>
    <div class="encrypt-form">
      <input
        type="password"
        class="encrypt-input"
        placeholder="请输入密码..."
        style="
          padding: 0.5rem 0.75rem;
          border: 1px solid #d0d7de;
          border-radius: 6px;
          font-size: 0.9rem;
          width: 200px;
        "
      />
      <button
        class="encrypt-btn"
        style="
          padding: 0.5rem 1rem;
          background: #2563eb;
          color: white;
          border: none;
          border-radius: 6px;
          cursor: pointer;
          margin-left: 0.5rem;
        "
      >
        确认
      </button>
    </div>
    <p
      class="encrypt-error"
      style="
        display: none;
        color: #dc2626;
        font-size: 0.85rem;
        margin-top: 0.5rem;
      "
    >
      密码错误，请重试
    </p>
  </div>
  <div class="encrypt-body" style="display: none">
    <p>🎊 <strong>恭喜你解锁了隐藏内容！</strong></p>
<p>这是一段加密文字，只有输入正确密码（1234）才能查看。</p>
<p>适用于：</p>
<ul>
<li>付费内容预览</li>
<li>答案揭晓</li>
<li>私密笔记</li>
</ul>

  </div>
</div>

<h2 id="b-站视频嵌入">B 站视频嵌入</h2>

<div class="bilibili-video">
  <iframe
    src="https://player.bilibili.com/player.html?bvid=BV1GJ411x7h7&high_quality=1&danmaku=0"
    scrolling="no"
    allowfullscreen="true"
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
  >
  </iframe>
</div>

<h2 id="图片与灯箱">图片与灯箱</h2>
<p>点击下图可以放大查看（GLightbox 灯箱效果）：</p>
<p><figure style="text-align: center; margin: 1.5rem 0">
  <img alt="博客头像" loading="lazy" src="/logo_circle.png">
  <figcaption style="font-size: 0.85rem; color: #888; margin-top: 0.5rem">
    博客头像
  </figcaption>
</figure></p>
<h2 id="链接测试">链接测试</h2>
<h3 id="内部链接">内部链接</h3>
<ul>
<li><a href="/posts/markdown-guide/">Markdown 写作指南</a></li>
<li><a href="/about/">关于页面</a></li>
<li><a href="/archives/">归档</a></li>
</ul>
<h3 id="外部链接">外部链接</h3>
<ul>
<li><a href="https://gohugo.io/">Hugo 官方文档</a></li>
<li><a href="https://github.com/adityatelange/hugo-PaperMod">PaperMod 主题</a></li>
<li><a href="https://gitee.com/chensanzang/HUGO">Gitee 仓库</a></li>
</ul>
<h2 id="脚注测试">脚注测试</h2>
<p>Hugo 使用 Go 模板引擎<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>，支持短代码<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>扩展。</p>
<h2 id="定义列表">定义列表</h2>
<dl>
<dt>Hugo</dt>
<dd>静态网站生成器，用 Go 编写</dd>
<dt>PaperMod</dt>
<dd>Hugo 的极简响应式主题</dd>
<dt>KaTeX</dt>
<dd>快速数学公式渲染库</dd>
</dl>
<h2 id="特殊字符与转义">特殊字符与转义</h2>
<p>星号转义：*不是斜体*</p>
<p>反引号转义：`不是代码`</p>
<p>HTML 实体：&amp; &lt; &gt; ©</p>
<h2 id="长段落测试阅读进度条">长段落测试（阅读进度条）</h2>
<p>这是一段较长的文字，用于测试阅读进度条的效果。当你向下滚动页面时，顶部应该会出现一个蓝紫渐变的进度条，显示当前的阅读进度。这个功能通过监听 scroll 事件，计算当前滚动位置与页面总高度的比例来实现。进度条使用了 CSS transition 来保证动画流畅，同时设置了较高的 z-index 确保始终显示在最顶层。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h2 id="总结">总结</h2>
<p>本文测试了以下功能：</p>
<table>
  <thead>
      <tr>
          <th>#</th>
          <th>功能</th>
          <th>测试方式</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>1</td>
          <td>基础 Markdown</td>
          <td>标题/粗体/斜体/列表/引用</td>
      </tr>
      <tr>
          <td>2</td>
          <td>代码高亮</td>
          <td>多语言 + 带文件名</td>
      </tr>
      <tr>
          <td>3</td>
          <td>数学公式</td>
          <td>行内 + 块级 + 矩阵</td>
      </tr>
      <tr>
          <td>4</td>
          <td>表格</td>
          <td>基础 + 对齐方式</td>
      </tr>
      <tr>
          <td>5</td>
          <td>提示框</td>
          <td>4 种类型全覆盖</td>
      </tr>
      <tr>
          <td>6</td>
          <td>折叠面板</td>
          <td>2 个示例</td>
      </tr>
      <tr>
          <td>7</td>
          <td>Mermaid</td>
          <td>流程图/时序图/甘特图</td>
      </tr>
      <tr>
          <td>8</td>
          <td>时间线</td>
          <td>4 个节点</td>
      </tr>
      <tr>
          <td>9</td>
          <td>加密内容</td>
          <td>密码 1234</td>
      </tr>
      <tr>
          <td>10</td>
          <td>B 站视频</td>
          <td>嵌入播放器</td>
      </tr>
      <tr>
          <td>11</td>
          <td>图片灯箱</td>
          <td>点击放大</td>
      </tr>
      <tr>
          <td>12</td>
          <td>内/外链接</td>
          <td>跳转测试</td>
      </tr>
      <tr>
          <td>13</td>
          <td>脚注</td>
          <td>2 个引用</td>
      </tr>
      <tr>
          <td>14</td>
          <td>阅读进度条</td>
          <td>滚动页面观察顶部</td>
      </tr>
      <tr>
          <td>15</td>
          <td>目录 TOC</td>
          <td>右侧浮动 + 文内</td>
      </tr>
      <tr>
          <td>16</td>
          <td>版权声明</td>
          <td>文末自动显示</td>
      </tr>
      <tr>
          <td>17</td>
          <td>相关文章</td>
          <td>文末推荐</td>
      </tr>
  </tbody>
</table>
<p>如果以上所有功能都正常显示，说明博客系统运行良好！</p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>Go Template 是 Go 标准库中的模板系统。&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:2">
<p>Shortcodes 是 Hugo 中用于在 Markdown 中插入复杂内容的占位符。&#160;<a href="#fnref:2" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
]]></content:encoded></item></channel></rss>