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

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

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

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

/** @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'),
],

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

import './style.css'

<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>

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

cd server
npm init -y
npm install express mongoose cors

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'))