中国版 Cursor”CodeBuddy 初体验：Java 后端轻松上手 Vue3+Node.js，从零打造 AI 工具导航站
<p>本文已收录在Github，<strong>关注我，紧跟本系列专栏文章，咱们下篇再续！</strong></p><ul>
<li>🚀 魔都架构师 | 全网30W技术追随者</li>
<li>🔧 大厂分布式系统/数据中台实战专家</li>
<li>🏆 主导交易系统百万级流量调优 & 车联网平台架构</li>
<li>🧠 AIGC应用开发先行者 | 区块链落地实践者</li>
<li>🌍 以技术驱动创新，我们的征途是改变世界！</li>
<li>👉 实战干货：编程严选网</li>
</ul>
<p>利用 CodeBuddy + Vue3 + Node.js 从零开发一个 AI 工具导航站（面向 Java 后端的实战指南）</p>
<blockquote>
<p>本文总字数约 5200 字，适合希望跨栈开发、借助 AI 提升效率的 Java 工程师阅读。</p>
</blockquote>
<h2 id="1-为什么是你">1 为什么是你？</h2>
<p>作为 Java 后端开发者，你可能早已熟练掌握 Spring、MyBatis、Redis、Kafka 等各类技术栈，对数据库、消息队列、接口设计信手拈来。然而，面对“前后端分离”、“快速搭建”、“AI 工具集成”等新趋势，是否也有点心动又担忧“不是自己擅长的领域”？</p>
<p>别怕，有了 CodeBuddy 这类 AI Flow 编程工具，它就像你身边全天候的全栈搭档，随时补全你不会的部分，帮你快速搭建从 0 到 1 的产品原型。</p>
<p>本文将结合 Vue 3 + Node.js 16.20.2，从架构到开发落地，一步步带你实现一个「AI 工具导航站」。</p>
<hr>
<h2 id="2-我们要做什么">2 我们要做什么？</h2>
<h3 id="-项目目标">🎯 项目目标</h3>
<p>开发一个「AI 工具导航网站」，展示国内外热门 AI 工具（如 ChatGPT、Midjourney、Notion AI 等），支持分类、搜索、收藏等功能，适合日常查找和灵感启发。</p>
<h3 id="-技术选型">🧱 技术选型</h3>
<table>
<thead>
<tr>
<th>技术</th>
<th>理由</th>
</tr>
</thead>
<tbody>
<tr>
<td>CodeBuddy</td>
<td>提高开发效率，支持自动补全和智能回答，节省查文档时间</td>
</tr>
<tr>
<td>Vue 3 + Vite</td>
<td>现代轻量前端框架，支持组合式 API，开发体验佳</td>
</tr>
<tr>
<td>Node.js v16.20.2</td>
<td>稳定版本，支持 ES 模块，适合构建中型服务</td>
</tr>
<tr>
<td>Express</td>
<td>快速构建 REST API</td>
</tr>
<tr>
<td>MongoDB</td>
<td>存储工具数据、分类、标签等，方便扩展</td>
</tr>
<tr>
<td>Tailwind CSS</td>
<td>快速构建响应式 UI</td>
</tr>
<tr>
<td>PM2</td>
<td>后端部署和进程守护</td>
</tr>
</tbody>
</table>
<hr>
<h2 id="3-开发流程总览">3 开发流程总览</h2>
<ol>
<li>需求分析 & 原型设计</li>
<li>使用 CodeBuddy 搭建前端框架</li>
<li>使用 CodeBuddy 生成后端 API 框架</li>
<li>实现数据模型与数据库设计</li>
<li>实现前后端交互</li>
<li>搜索与收藏功能实现</li>
<li>部署上线与优化</li>
</ol>
<hr>
<h3 id="1️⃣-需求分析--原型设计">1️⃣ 需求分析 & 原型设计</h3>
<p>需解决以下核心功能：</p>
<ul>
<li>首页展示：AI 工具的 logo、名称、简介、标签</li>
<li>分类浏览：按“图像生成”、“写作助手”、“编程助手”等标签分类</li>
<li>工具详情页：展示工具介绍、官网链接、使用方法</li>
<li>搜索功能：按名称/标签关键词模糊搜索</li>
<li>收藏功能：本地收藏，无需登录（可扩展）</li>
</ul>
<p>📐 原型工具建议：</p>
<ul>
<li>低保真：用 Figma 或 Whimsical 画一个卡片式 UI 即可</li>
<li>结构草图如下：</li>
</ul>
<pre><code class="language-txt">[搜索框]
[分类导航]
[工具卡片：logo + 名称 + 简介 + 标签 + 收藏按钮]
</code></pre>
<h3 id="2️⃣-快速搭建前端框架vue-3--tailwind">2️⃣ 快速搭建前端框架（Vue 3 + Tailwind）</h3>
<h4 id="步骤一使用-codebuddy-创建-vite-项目">步骤一：使用 CodeBuddy 创建 Vite 项目</h4>
<pre><code class="language-bash">npm create vite@latest ai-toolbox --template vue
cd ai-toolbox
npm install
</code></pre>
<p>然后在 VS Code 中打开项目文件夹，AI 将自动分析项目结构并提供代码建议：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104907145-1504682503.png" class="lazyload"></p>
<blockquote>
<p>我已经初步查看了项目结构，这是一个使用Vue 3、TypeScript和Vite的前端项目。目前项目处于初始状态，只包含基本的示例代码。</p>
<p><strong>当前项目结构</strong></p>
<pre><code class="language-bash">├── src
│ ├── App.vue # 主应用组件
│ ├── assets # 静态资源目录
│ ├── components # Vue组件目录
│ │ └── HelloWorld.vue# 示例组件
│ ├── main.ts # 应用入口文件
│ ├── style.css # 全局样式
│ └── vite-env.d.ts # Vite环境类型声明
</code></pre>
<p><strong>技术栈</strong></p>
<ul>
<li>Vue 3.5.13</li>
<li>TypeScript</li>
<li>Vite (构建工具)</li>
</ul>
</blockquote>
<h4 id="步骤二配置-tailwind-css">步骤二：配置 Tailwind CSS</h4>
<pre><code class="language-bash">npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
</code></pre>
<p>作为多年资深级 Javaer，一开始配置tailwindcss我是不熟悉的，这不就报错了：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104907751-1701342036.png" class="lazyload"></p>
<p>还好有CodeBuddy帮助我们从零开始🚀上手前端开发：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104908533-1285448406.png" class="lazyload"></p>
<p>重新npm run dev 后依旧报错：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104909215-70525076.png" class="lazyload"></p>
<p>继续贴上报错让其优化：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104909872-1984053797.png" class="lazyload"></p>
<p>终于开发环境完全正常：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104911290-2040740201.png" class="lazyload"></p>
<p>看看详细配置：</p>
<h5 id="tailwindconfigjs">tailwind.config.js</h5>
<p>我们来咨询配置文件具体影响：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104912127-747747042.png" class="lazyload"></p>
<pre><code class="language-js">/** @type {import('tailwindcss').Config} */
export default {
content: [ // 该配置对 Tailwind 的 PurgeCSS 功能至关重要，它只会生成你实际在这些文件中使用的 CSS 类，大大减小了最终 CSS 文件的大小
"./index.html", // 扫描项目根目录下的 HTML 文件
"./src/**/*.{vue,js,ts,jsx,tsx}", // 扫描 src 目录及其所有子目录中的 Vue、js、ts、JSX 和 TSX 文件
],
theme: { // 用于自定义 Tailwind 的默认设计系统
extend: {}, // extend 对象允许你扩展 Tailwind 的默认主题，而不是完全替换它。目前这个对象是空的，表示使用 Tailwind 的默认主题设置。可在这里添加自定义颜色、字体、间距、断点等
},
plugins: [], // 允许你注册 Tailwind 插件，这些插件可以添加新的工具类、组件或基础样式。目前空，表示没使用任何插件
}
</code></pre>
<p>如想添加自定义颜色，可以这样做：</p>
<pre><code class="language-json">theme: {
extend: {
colors: {
'brand-blue': '#1992d4',
'brand-red': '#e53e3e',
},
},
},
</code></pre>
<p>如果你想使用官方插件（如表单插件），可以这样添加：</p>
<pre><code class="language-json">plugins: [
require('@tailwindcss/forms'),
],
</code></pre>
<p>在 <code>src/style</code> 中加入：</p>
<pre><code class="language-css">@tailwind base;
@tailwind components;
@tailwind utilities;
</code></pre>
<p>在 <code>main.ts</code> 引入 CSS：</p>
<pre><code class="language-js">import './style.css'
</code></pre>
<h4 id="步骤三开发首页组件">步骤三：开发首页组件</h4>
<p>继续指挥，让CodeBuddy自觉发力，而不用亲手写一行代码：</p>
<blockquote>
<p>提供一个<code>ToolCard.vue</code>组件，然后在合适的位置（如<code>pages/Home.vue</code>）使用这个组件。</p>
</blockquote>
<p>创建一个 <code>components/ToolCard.vue</code>：</p>
<pre><code class="language-vue"><template>
<div class="p-4 border rounded-xl shadow hover:shadow-lg transition">
<img :src="tool.logo" class="w-16 h-16 object-contain" />
<h2 class="font-bold text-lg">{{ tool.name }}</h2>
<p class="text-sm text-gray-500">{{ tool.description }}</p>
<div class="mt-2 flex flex-wrap gap-1">
<span v-for="tag in tool.tags" :key="tag" class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">{{ tag }}</span>
</div>
</div>
</template>
<script setup lang="ts">
interface Tool {
id: number
name: string
description: string
logo: string
tags: string[]
}
defineProps<{
tool: Tool
}>()
</script>
</code></pre>
<p>在 <code>pages/Home.vue</code> 使用：</p>
<pre><code class="language-vue"><ToolCard v-for="item in tools" :tool="item" :key="item.id" />
</code></pre>
<p>CodeBuddy 会自动补全导入语句、类型、props，非常流畅。现在应该能看到一个包含三个工具卡片的页面，每个卡片显示名称、描述、图标和标签：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104912694-769849500.png" class="lazyload"></p>
<blockquote>
<p>我们来调整description在页面左对齐显示：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104913340-1510018922.png" class="lazyload"></p>
</blockquote>
<p>左对齐效果：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104913865-1272550135.png" class="lazyload"></p>
<h3 id="3️⃣-搭建-nodejs--express-后端">3️⃣ 搭建 Node.js + Express 后端</h3>
<p>在根目录下创建 <code>server/</code> 文件夹：</p>
<pre><code class="language-bash">cd server
npm init -y
npm install express mongoose cors
</code></pre>
<p>创建 <code>index.js</code> 并粘贴：</p>
<pre><code class="language-js">import express from 'express'
import cors from 'cors'
import mongoose from 'mongoose'
const app = express()
app.use(cors())
app.use(express.json())
mongoose.connect('mongodb://localhost:27017/aitools')
const toolSchema = new mongoose.Schema({
name: String,
logo: String,
description: String,
tags: ,
link: String,
})
const Tool = mongoose.model('Tool', toolSchema)
app.get('/api/tools', async (req, res) => {
const q = req.query.q
const filter = q ? { name: new RegExp(q, 'i') } : {}
const tools = await Tool.find(filter)
res.json(tools)
})
app.post('/api/tools', async (req, res) => {
const tool = await Tool.create(req.body)
res.json(tool)
})
app.listen(3000, () => console.log('API running on http://localhost:3000'))
</code></pre>
<p>CodeBuddy 会自动补充类型、提示语法错误，代码几乎“写一行成功一行”。</p>
<h3 id="4️⃣-实现数据库与数据初始化">4️⃣ 实现数据库与数据初始化</h3>
<p>docker-desktop 快速拉取一个可用的 MongoDB 镜像开启一个数据库服务：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104914774-174207883.png" class="lazyload"></p>
<p>用 MongoDB Compass 或命令行插入初始数据或用 VS Code 的 MongoDB 插件：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104915698-772766719.png" class="lazyload"></p>
<p>展开显示出 tools 集合并右键：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104916746-1083388835.png" class="lazyload"></p>
<p>新增两条数据：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104917744-2113596700.png" class="lazyload"></p>
<h3 id="5️⃣-前后端对接实现">5️⃣ 前后端对接实现</h3>
<blockquote>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104918404-1356246930.png" class="lazyload"></p>
</blockquote>
<p>启动前后端服务并打开页面：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104919037-594747635.png" class="lazyload"></p>
<h3 id="6️⃣-支持搜索参数">6️⃣ 支持搜索参数</h3>
<blockquote>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104919775-1468926202.png" class="lazyload"></p>
</blockquote>
<p>很快给出搜索框方案：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513104920464-1044128474.png" class="lazyload"></p>
<p>最终源码在ai-toolbox。</p>
<hr>
<h2 id="4--总结与思考">4 🧠 总结与思考</h2>
<p>通过 CodeBuddy + Vue3 + Node.js 快速搭建了一个完整的「AI 工具导航网站」，其中：</p>
<ul>
<li>CodeBuddy 帮我妈补全陌生语法、生成组件、修复 bug</li>
<li>Node.js 快速上手 REST API，适合 Java 程序员扩展新技术栈</li>
<li>Vue 3 与 Tailwind 组合快速构建现代 UI</li>
</ul>
<p>👉 本项目也可自行扩展登录功能、后端收藏同步、每日推荐、爬虫更新等高级功能。即使你不懂前端，不熟悉新的 UI 框架，都不是问题，通过无任何网络和次数访问限制的CodeBuddy，AI时代下的超级程序员个体就是你！</p>
<blockquote>
<p>本文由博客一文多发平台 OpenWrite 发布！</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/JavaEdge/p/18873898
頁:
[1]