中国版 Cursor”CodeBuddy 初体验：Java 后端轻松上手 Vue3+Node.js，从零打造 AI 工具导航站

本文已收录在Github，关注我，紧跟本系列专栏文章，咱们下篇再续！

• 🚀 魔都架构师 | 全网30W技术追随者
• 🔧 大厂分布式系统/数据中台实战专家
• 🏆 主导交易系统百万级流量调优 & 车联网平台架构
• 🧠 AIGC应用开发先行者 | 区块链落地实践者
• 🌍 以技术驱动创新，我们的征途是改变世界！
• 👉 实战干货：编程严选网

利用 CodeBuddy + Vue3 + Node.js 从零开发一个 AI 工具导航站（面向 Java 后端的实战指南）

本文总字数约 5200 字，适合希望跨栈开发、借助 AI 提升效率的 Java 工程师阅读。

1 为什么是你？

作为 Java 后端开发者，你可能早已熟练掌握 Spring、MyBatis、Redis、Kafka 等各类技术栈，对数据库、消息队列、接口设计信手拈来。然而，面对“前后端分离”、“快速搭建”、“AI 工具集成”等新趋势，是否也有点心动又担忧“不是自己擅长的领域”？

别怕，有了 CodeBuddy 这类 AI Flow 编程工具，它就像你身边全天候的全栈搭档，随时补全你不会的部分，帮你快速搭建从 0 到 1 的产品原型。

本文将结合 Vue 3 + Node.js 16.20.2，从架构到开发落地，一步步带你实现一个「AI 工具导航站」。

---

2 我们要做什么？

🎯 项目目标

开发一个「AI 工具导航网站」，展示国内外热门 AI 工具（如 ChatGPT、Midjourney、Notion AI 等），支持分类、搜索、收藏等功能，适合日常查找和灵感启发。

🧱 技术选型

技术	理由
CodeBuddy	提高开发效率，支持自动补全和智能回答，节省查文档时间
Vue 3 + Vite	现代轻量前端框架，支持组合式 API，开发体验佳
Node.js v16.20.2	稳定版本，支持 ES 模块，适合构建中型服务
Express	快速构建 REST API
MongoDB	存储工具数据、分类、标签等，方便扩展
Tailwind CSS	快速构建响应式 UI
PM2	后端部署和进程守护

---

3 开发流程总览

1. 需求分析 & 原型设计
2. 使用 CodeBuddy 搭建前端框架
3. 使用 CodeBuddy 生成后端 API 框架
4. 实现数据模型与数据库设计
5. 实现前后端交互
6. 搜索与收藏功能实现
7. 部署上线与优化

---

1️⃣ 需求分析 & 原型设计

需解决以下核心功能：

• 首页展示：AI 工具的 logo、名称、简介、标签
• 分类浏览：按“图像生成”、“写作助手”、“编程助手”等标签分类
• 工具详情页：展示工具介绍、官网链接、使用方法
• 搜索功能：按名称/标签关键词模糊搜索
• 收藏功能：本地收藏，无需登录（可扩展）

📐 原型工具建议：

• 低保真：用 Figma 或 Whimsical 画一个卡片式 UI 即可
• 结构草图如下：

[搜索框]
[分类导航]
[工具卡片：logo + 名称 + 简介 + 标签 + 收藏按钮]

2️⃣ 快速搭建前端框架（Vue 3 + Tailwind）

步骤一：使用 CodeBuddy 创建 Vite 项目

npm create vite@latest ai-toolbox --template vue
cd ai-toolbox
npm install

然后在 VS Code 中打开项目文件夹，AI 将自动分析项目结构并提供代码建议：

我已经初步查看了项目结构，这是一个使用Vue 3、TypeScript和Vite的前端项目。目前项目处于初始状态，只包含基本的示例代码。

当前项目结构

├── src
│   ├── App.vue          # 主应用组件
│   ├── assets           # 静态资源目录
│   ├── components       # Vue组件目录
│   │   └── HelloWorld.vue  # 示例组件
│   ├── main.ts          # 应用入口文件
│   ├── style.css        # 全局样式
│   └── vite-env.d.ts    # Vite环境类型声明

技术栈

• Vue 3.5.13
• TypeScript
• Vite (构建工具)

步骤二：配置 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

作为多年资深级 Javaer，一开始配置tailwindcss我是不熟悉的，这不就报错了：

还好有CodeBuddy帮助我们从零开始🚀上手前端开发：

重新npm run dev 后依旧报错：

继续贴上报错让其优化：

终于开发环境完全正常：

看看详细配置：

tailwind.config.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 插件，这些插件可以添加新的工具类、组件或基础样式。目前空，表示没使用任何插件
}

如想添加自定义颜色，可以这样做：

theme: {
  extend: {
    colors: {
      'brand-blue': '#1992d4',
      'brand-red': '#e53e3e',
    },
  },
},

如果你想使用官方插件（如表单插件），可以这样添加：

plugins: [
  require('@tailwindcss/forms'),
],

在 src/style 中加入：

@tailwind base;
@tailwind components;
@tailwind utilities;

在 main.ts 引入 CSS：

import './style.css'

步骤三：开发首页组件

继续指挥，让CodeBuddy自觉发力，而不用亲手写一行代码：

提供一个ToolCard.vue组件，然后在合适的位置（如pages/Home.vue）使用这个组件。

创建一个 components/ToolCard.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>

在 pages/Home.vue 使用：

<ToolCard v-for="item in tools" :tool="item" :key="item.id" />

CodeBuddy 会自动补全导入语句、类型、props，非常流畅。现在应该能看到一个包含三个工具卡片的页面，每个卡片显示名称、描述、图标和标签：

我们来调整description在页面左对齐显示：

左对齐效果：

3️⃣ 搭建 Node.js + Express 后端

在根目录下创建 server/ 文件夹：

cd server
npm init -y
npm install express mongoose cors

创建 index.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: [String],
  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'))

CodeBuddy 会自动补充类型、提示语法错误，代码几乎“写一行成功一行”。

4️⃣ 实现数据库与数据初始化

docker-desktop 快速拉取一个可用的 MongoDB 镜像开启一个数据库服务：

用 MongoDB Compass 或命令行插入初始数据或用 VS Code 的 MongoDB 插件：

展开显示出 tools 集合并右键：

新增两条数据：

5️⃣ 前后端对接实现

启动前后端服务并打开页面：

6️⃣ 支持搜索参数

很快给出搜索框方案：

最终源码在ai-toolbox。

---

4 🧠 总结与思考

通过 CodeBuddy + Vue3 + Node.js 快速搭建了一个完整的「AI 工具导航网站」，其中：

• CodeBuddy 帮我们补全陌生语法、生成组件、修复 bug
• Node.js 快速上手 REST API，适合 Java 程序员扩展新技术栈
• Vue 3 与 Tailwind 组合快速构建现代 UI

👉 本项目也可自行扩展登录功能、后端收藏同步、每日推荐、爬虫更新等高级功能。即使你不懂前端，不熟悉新的 UI 框架，都不是问题，通过无任何网络和次数访问限制的CodeBuddy，AI时代下的超级程序员个体就是你！

本文由博客一文多发平台 OpenWrite 发布！