在实际项目中我们经常需要收集和整理来自不同渠道的技术工具、框架和资源比如 GitHub 上的开源项目、AI 模型的最佳提示词、各种 Builder 工具链等。这些零散的信息散落在浏览器书签、笔记软件或聊天记录里查找和使用效率很低。一个更高效的做法是建立一个私有的、可搜索的、可管理的“主站”或知识库将这些资源集中管理并能快速检索和应用。本文将围绕如何构建这样一个技术资源聚合主站展开。我们将使用一个轻量级的技术栈实现从数据采集、存储、检索到前端展示的完整流程。整个过程不涉及复杂的部署适合个人开发者或小团队用于管理自己的技术资产。你将学会如何搭建一个服务将你关注的 Builder 工具、AI 提示词、GitHub 项目链接等信息结构化地存储起来并通过 Web 界面进行管理和使用。1. 理解核心概念Builder、提示词与资源聚合在开始构建之前我们需要明确几个核心概念这有助于我们设计合理的数据结构和功能。1.1 什么是 Builder在软件开发领域Builder 通常指一种用于简化复杂对象创建过程的设计模式或者指一系列用于构建、编译、打包项目的工具。从输入的网络热词来看其含义更加广泛可能包括开发工具链如C BuilderIDE、Form Builder表单构建器、Stack BuilderPostgreSQL 的扩展安装工具。硬件/嵌入式工具如GD32 Embedded Builder。库/包管理工具如Orcad Library Builder。新兴概念如Snap Graph Builder可能指某种可视化构建工具、Trae Builder with MCP可能涉及模型上下文协议。对于我们的主站可以将任何用于“构建”某物的工具、框架或平台都视为一个Builder资源。其核心属性包括名称、类别如“前端构建”、“嵌入式”、官方链接、描述、以及可能的使用命令或配置片段。1.2 什么是提示词Prompt提示词是用户与大语言模型如 ChatGPT、DeepSeek、Minimax 等交互时输入的指令或问题。高质量的提示词能显著提升 AI 输出的准确性和实用性。提示词工程已成为一项重要技能。通用提示词适用于多种场景的提问模板。领域特定提示词如“AI 编程提示词”、“数学建模 AI 提示词”。角色扮演提示词如让 AI 扮演特定专家。结构化提示词包含系统指令、用户输入、上下文示例的复杂模板如Minimax H3提示词模板。在我们的主站里一个提示词资源需要包含标题、适用的 AI 模型/平台、具体的提示词内容、分类如“代码生成”、“文案润色”、以及效果示例。1.3 资源聚合主站的设计目标我们的主站不是一个简单的收藏夹。它应该具备以下能力结构化存储为不同类型的资源Builder、提示词、GitHub 项目定义清晰的数据模型。便捷录入提供表单或 API方便快速添加新资源。高效检索支持按名称、标签、分类、描述进行全文搜索。快速应用对于提示词能一键复制对于命令行工具能快速查看常用命令。知识关联可以给资源打标签形成知识网络。明确了目标后我们就可以开始技术选型和环境搭建。2. 环境准备与技术栈选型我们将选择一个全栈 JavaScript 方案这样前后端可以使用同一种语言降低学习成本。项目将分为前端、后端和数据库三层。2.1 开发环境要求请确保你的本地开发环境满足以下要求组件要求检查命令备注Node.jsLTS 版本 (如 18.x, 20.x)node --version运行 JavaScript 后端和前端构建工具npm通常随 Node.js 安装npm --versionNode.js 包管理器Git最新稳定版git --version版本控制和克隆项目模板代码编辑器VS Code, WebStorm 等-推荐 VS Code 并安装相关插件浏览器Chrome, Firefox, Edge 最新版-用于前端调试2.2 技术栈说明我们选择以下具体技术它们在生态、学习和开发效率上都有不错的表现后端框架Express.js一个极简的 Node.js Web 框架足够轻量适合快速构建 RESTful API。数据库SQLite无需安装和配置数据库服务数据存储在单个文件中非常适合个人项目或小型应用。我们将使用better-sqlite3驱动它性能较好且同步 API 更易于理解。对象关系映射ORM无为了保持简单和直接控制 SQL本项目不引入 ORM。我们将直接编写 SQL 语句来操作数据库。前端框架Vite Vue 3Vite 提供极速的开发服务器和构建体验。Vue 3 的 Composition API 让逻辑组织更灵活。我们将使用script setup语法。UI 组件库Element Plus基于 Vue 3 的桌面端组件库提供了丰富的表格、表单、对话框等组件能极大加快前端开发。HTTP 客户端Axios用于前端向后端 API 发送请求。这个技术栈的依赖清晰搭建步骤明确接下来我们初始化项目。3. 项目初始化与结构搭建我们将创建一个标准的 Node.js 全栈项目结构。首先创建项目根目录。# 创建项目目录并进入 mkdir my-tech-hub cd my-tech-hub3.1 初始化后端项目在根目录下创建server文件夹作为后端项目。# 创建后端目录 mkdir server cd server # 初始化 npm 项目一路回车即可 npm init -y安装后端所需的依赖包npm install express better-sqlite3 cors npm install --save-dev nodemonexpress: Web 框架。better-sqlite3: SQLite 数据库驱动。cors: 处理跨域资源共享方便前后端分离开发。nodemon: 开发工具监听文件变化自动重启服务。修改server/package.json中的scripts部分方便启动{ name: server, version: 1.0.0, description: , main: index.js, scripts: { start: node index.js, dev: nodemon index.js }, keywords: [], author: , license: ISC, dependencies: { better-sqlite3: ^9.0.0, cors: ^2.8.5, express: ^4.18.2 }, devDependencies: { nodemon: ^3.0.1 } }3.2 初始化前端项目回到项目根目录使用 Vite 官方脚手架快速创建 Vue 项目。# 回到根目录 cd .. # 使用 npm 创建 Vite 项目选择 Vue 模板 npm create vitelatest client -- --template vue # 进入前端目录并安装依赖 cd client npm install安装前端额外的依赖Element Plus 和 Axios。npm install element-plus axios为了方便使用 Element Plus我们需要在client/src/main.js中进行全局引入import { createApp } from vue import App from ./App.vue import ElementPlus from element-plus import element-plus/dist/index.css const app createApp(App) app.use(ElementPlus) app.mount(#app)3.3 项目最终结构预览完成以上步骤后你的项目结构应该大致如下my-tech-hub/ ├── server/ # 后端服务 │ ├── node_modules/ │ ├── database.db # SQLite 数据库文件稍后生成 │ ├── index.js # 后端主入口文件 │ └── package.json └── client/ # 前端应用 ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.js ├── index.html ├── package.json └── vite.config.js现在基础骨架已经搭建完毕接下来我们将从数据库开始实现核心功能。4. 数据库设计与后端 API 实现数据模型是整个应用的核心。我们需要设计两张表来存储Builder和Prompt资源。4.1 数据库表设计在server/index.js中我们初始化数据库并创建表。// server/index.js const express require(express); const Database require(better-sqlite3); const cors require(cors); const app express(); const port 3000; // 使用中间件 app.use(cors()); // 允许前端跨域请求 app.use(express.json()); // 解析 JSON 请求体 // 连接数据库如果不存在则创建 const db new Database(./database.db); // 创建资源表 db.exec( CREATE TABLE IF NOT EXISTS builders ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, category TEXT, description TEXT, official_url TEXT, command_example TEXT, tags TEXT, -- 用逗号分隔的标签字符串如 前端,构建,工具 created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE IF NOT EXISTS prompts ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, model TEXT, -- 适用模型如 ChatGPT-4, DeepSeek, 通用 content TEXT NOT NULL, -- 提示词具体内容 category TEXT, -- 分类如 编程, 写作, 分析 example_output TEXT, tags TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); ); console.log(Database and tables initialized.);设计说明builders表存储 Builder 工具。command_example字段用于存放常用的安装或使用命令。prompts表存储 AI 提示词。model字段指明该提示词主要针对哪个 AI 模型优化。tags字段我们使用简单的逗号分隔字符串来存储标签。对于更复杂的标签系统如多对多关系可以单独创建标签表和关系表但为了简化本项目采用此方案。created_at记录创建时间便于排序和筛选。4.2 实现 RESTful API接下来我们为两张表实现完整的增删改查CRUDAPI。// server/index.js (续) // Builders 相关 API // 获取所有 builders app.get(/api/builders, (req, res) { const stmt db.prepare(SELECT * FROM builders ORDER BY created_at DESC); const builders stmt.all(); res.json(builders); }); // 获取单个 builder app.get(/api/builders/:id, (req, res) { const stmt db.prepare(SELECT * FROM builders WHERE id ?); const builder stmt.get(req.params.id); if (builder) { res.json(builder); } else { res.status(404).json({ error: Builder not found }); } }); // 创建新的 builder app.post(/api/builders, (req, res) { const { name, category, description, official_url, command_example, tags } req.body; if (!name) { return res.status(400).json({ error: Name is required }); } const stmt db.prepare( INSERT INTO builders (name, category, description, official_url, command_example, tags) VALUES (?, ?, ?, ?, ?, ?) ); const info stmt.run(name, category, description, official_url, command_example, tags); res.status(201).json({ id: info.lastInsertRowid, message: Builder created }); }); // 更新 builder app.put(/api/builders/:id, (req, res) { const { name, category, description, official_url, command_example, tags } req.body; const stmt db.prepare( UPDATE builders SET name ?, category ?, description ?, official_url ?, command_example ?, tags ? WHERE id ? ); const info stmt.run(name, category, description, official_url, command_example, tags, req.params.id); if (info.changes 0) { res.json({ message: Builder updated }); } else { res.status(404).json({ error: Builder not found }); } }); // 删除 builder app.delete(/api/builders/:id, (req, res) { const stmt db.prepare(DELETE FROM builders WHERE id ?); const info stmt.run(req.params.id); if (info.changes 0) { res.json({ message: Builder deleted }); } else { res.status(404).json({ error: Builder not found }); } }); // Prompts 相关 API (结构类似略) // 为节省篇幅Prompts 的 GET /api/prompts, GET /api/prompts/:id, // POST /api/prompts, PUT /api/prompts/:id, DELETE /api/prompts/:id // 的实现逻辑与 Builders 完全一致只需替换表名和字段。 // 在实际代码中你需要完整实现它们。 // 启动服务器 app.listen(port, () { console.log(TechHub backend server running at http://localhost:${port}); });注意在生产环境中你需要对所有的输入进行严格的验证和清理以防止 SQL 注入。虽然better-sqlite3使用参数化查询已经能有效防御 SQL 注入但仍需验证业务逻辑如字段长度、必填项。后端 API 已经就绪现在我们可以启动后端服务进行测试。# 在 server 目录下 cd server npm run dev如果看到TechHub backend server running at http://localhost:3000的日志说明后端启动成功。你可以使用 Postman 或 curl 测试 API例如GET http://localhost:3000/api/builders。5. 前端界面开发与功能集成前端将提供用户界面来展示、搜索、添加、编辑和删除资源。我们将创建几个核心组件。5.1 配置前端开发服务器代理为了避免跨域问题我们在开发阶段配置 Vite 的代理将/api开头的请求转发到后端服务器。修改client/vite.config.jsimport { defineConfig } from vite import vue from vitejs/plugin-vue // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { proxy: { /api: { target: http://localhost:3000, // 后端服务器地址 changeOrigin: true, } } } })5.2 创建资源展示组件首先我们创建一个用于展示 Builder 列表的组件client/src/components/BuilderList.vue。!-- client/src/components/BuilderList.vue -- template div div stylemargin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; h2Builder 工具库/h2 el-button typeprimary clickdialogVisible true添加 Builder/el-button /div el-table :databuilders stylewidth: 100% el-table-column propname label名称 width180 / el-table-column propcategory label类别 width120 / el-table-column propdescription label描述 / el-table-column proptags label标签 width150 template #defaultscope el-tag v-fortag in scope.row.tags?.split(,) :keytag sizesmall stylemargin-right: 5px; {{ tag.trim() }} /el-tag /template /el-table-column el-table-column label操作 width180 template #defaultscope el-button sizesmall clickhandleEdit(scope.row)编辑/el-button el-button sizesmall typedanger clickhandleDelete(scope.row.id)删除/el-button /template /el-table-column /el-table !-- 添加/编辑对话框 -- el-dialog v-modeldialogVisible :titleformTitle width50% el-form :modelform label-width80px el-form-item label名称 required el-input v-modelform.name placeholder例如Vite / /el-form-item el-form-item label类别 el-input v-modelform.category placeholder例如前端构建 / /el-form-item el-form-item label描述 el-input v-modelform.description typetextarea :rows3 placeholder简要描述该工具的用途 / /el-form-item el-form-item label官方链接 el-input v-modelform.official_url placeholderhttps://... / /el-form-item el-form-item label命令示例 el-input v-modelform.command_example typetextarea :rows2 placeholdernpm create vitelatest / /el-form-item el-form-item label标签 el-input v-modelform.tags placeholder多个标签用英文逗号分隔如前端,构建,工具 / /el-form-item /el-form template #footer span classdialog-footer el-button clickdialogVisible false取消/el-button el-button typeprimary clicksubmitForm确认/el-button /span /template /el-dialog /div /template script setup import { ref, reactive, onMounted, computed } from vue import { ElMessage, ElMessageBox } from element-plus import axios from axios const builders ref([]) const dialogVisible ref(false) const isEditing ref(false) const currentId ref(null) const form reactive({ name: , category: , description: , official_url: , command_example: , tags: }) const formTitle computed(() isEditing.value ? 编辑 Builder : 添加 Builder) // 获取数据 const fetchBuilders async () { try { const response await axios.get(/api/builders) builders.value response.data } catch (error) { console.error(Failed to fetch builders:, error) ElMessage.error(获取数据失败) } } // 提交表单创建或更新 const submitForm async () { if (!form.name.trim()) { ElMessage.warning(名称不能为空) return } try { if (isEditing.value) { await axios.put(/api/builders/${currentId.value}, form) ElMessage.success(更新成功) } else { await axios.post(/api/builders, form) ElMessage.success(添加成功) } dialogVisible.value false resetForm() fetchBuilders() // 刷新列表 } catch (error) { console.error(Submit failed:, error) ElMessage.error(操作失败) } } // 编辑 const handleEdit (row) { isEditing.value true currentId.value row.id Object.assign(form, row) // 将行数据填充到表单 dialogVisible.value true } // 删除 const handleDelete (id) { ElMessageBox.confirm(确定要删除此记录吗, 警告, { confirmButtonText: 确定, cancelButtonText: 取消, type: warning, }).then(async () { try { await axios.delete(/api/builders/${id}) ElMessage.success(删除成功) fetchBuilders() } catch (error) { ElMessage.error(删除失败) } }).catch(() {}) } // 重置表单 const resetForm () { isEditing.value false currentId.value null Object.keys(form).forEach(key { form[key] }) } // 对话框关闭时重置 const handleDialogClose () { resetForm() } onMounted(() { fetchBuilders() }) /script5.3 集成到主应用并添加路由类似地你需要创建一个PromptList.vue组件。然后修改client/src/App.vue作为主布局并引入简单的路由切换功能。!-- client/src/App.vue -- template div idapp el-container el-header styletext-align: center; border-bottom: 1px solid #eee; h1我的技术资源主站/h1 p集中管理 Builder 工具、AI 提示词等开发资源/p /el-header el-container el-aside width200px styleborder-right: 1px solid #eee; el-menu :default-activeactiveMenu selecthandleMenuSelect el-menu-item indexbuilders spanBuilder 工具/span /el-menu-item el-menu-item indexprompts spanAI 提示词/span /el-menu-item el-menu-item indexsearch span全局搜索/span /el-menu-item /el-menu /el-aside el-main BuilderList v-ifactiveMenu builders / PromptList v-ifactiveMenu prompts / div v-ifactiveMenu search h3全局搜索功能 (待实现)/h3 p这里可以集成一个搜索框同时搜索 Builders 和 Prompts 表。/p /div /el-main /el-container /el-container /div /template script setup import { ref } from vue import BuilderList from ./components/BuilderList.vue import PromptList from ./components/PromptList.vue const activeMenu ref(builders) const handleMenuSelect (index) { activeMenu.value index } /script style #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; } .el-header { background-color: #f8f9fa; line-height: 60px; } /style5.4 启动前后端并验证现在我们可以同时启动前端和后端服务来验证整个流程。启动后端服务在server目录npm run dev启动前端开发服务器在client目录npm run dev打开浏览器访问 Vite 提供的地址通常是http://localhost:5173。点击“添加 Builder”按钮填写一个示例工具信息如名称Vite类别前端构建描述下一代前端构建工具命令示例npm create vitelatest。点击确认后列表应该会刷新并显示你刚添加的记录。尝试编辑和删除功能。至此一个具备基本 CRUD 功能的技术资源管理主站已经可以运行。但为了使其真正实用我们还需要实现搜索等增强功能。6. 核心功能增强搜索与数据导出一个资源库的核心价值在于快速找到所需内容。我们将实现一个简单的全局搜索并添加数据导出功能。6.1 实现后端联合搜索 API在后端server/index.js中添加一个新的 API 端点用于在builders和prompts两张表中进行联合搜索。// server/index.js (续) // 全局搜索 API app.get(/api/search, (req, res) { const keyword req.query.q; if (!keyword || keyword.trim() ) { return res.json({ builders: [], prompts: [] }); } const searchPattern %${keyword}%; // 搜索 builders const builderStmt db.prepare( SELECT *, builder as type FROM builders WHERE name LIKE ? OR description LIKE ? OR category LIKE ? OR tags LIKE ? ); const builders builderStmt.all(searchPattern, searchPattern, searchPattern, searchPattern); // 搜索 prompts const promptStmt db.prepare( SELECT *, prompt as type FROM prompts WHERE title LIKE ? OR content LIKE ? OR category LIKE ? OR model LIKE ? OR tags LIKE ? ); const prompts promptStmt.all(searchPattern, searchPattern, searchPattern, searchPattern, searchPattern); res.json({ builders, prompts }); });这个 API 接收一个查询参数q并在两个表的多个字段中进行模糊匹配LIKE。返回的结果中附带一个type字段用于区分资源类型。6.2 实现前端搜索组件创建一个新的组件client/src/components/GlobalSearch.vue。!-- client/src/components/GlobalSearch.vue -- template div el-input v-modelsearchKeyword placeholder输入关键词搜索 Builder 或 Prompt... stylewidth: 400px; margin-bottom: 20px; inputdebouncedSearch clearable template #prefix el-iconSearch //el-icon /template /el-input div v-ifsearchResults.builders.length 0 h3Builder 工具 ({{ searchResults.builders.length }})/h3 el-table :datasearchResults.builders stylewidth: 100%; margin-bottom: 30px; el-table-column propname label名称 / el-table-column propcategory label类别 / el-table-column propdescription label描述 show-overflow-tooltip / el-table-column label操作 template #defaultscope el-button sizesmall click$emit(view-detail, scope.row)查看/el-button /template /el-table-column /el-table /div div v-ifsearchResults.prompts.length 0 h3AI 提示词 ({{ searchResults.prompts.length }})/h3 el-table :datasearchResults.prompts stylewidth: 100%; el-table-column proptitle label标题 / el-table-column propmodel label适用模型 / el-table-column propcategory label分类 / el-table-column propcontent label内容 show-overflow-tooltip / el-table-column label操作 width100 template #defaultscope el-button sizesmall typeprimary clickcopyPrompt(scope.row.content)复制/el-button /template /el-table-column /el-table /div div v-ifsearchKeyword searchResults.builders.length 0 searchResults.prompts.length 0 el-empty description未找到相关资源 / /div /div /template script setup import { ref, reactive } from vue import { Search } from element-plus/icons-vue import { ElMessage } from element-plus import axios from axios import _ from lodash // 需要先安装 lodash: npm install lodash const searchKeyword ref() const searchResults reactive({ builders: [], prompts: [] }) // 使用 lodash 的防抖函数避免输入时频繁请求 const debouncedSearch _.debounce(async () { if (!searchKeyword.value.trim()) { searchResults.builders [] searchResults.prompts [] return } try { const response await axios.get(/api/search, { params: { q: searchKeyword.value } }) searchResults.builders response.data.builders searchResults.prompts response.data.prompts } catch (error) { console.error(Search failed:, error) ElMessage.error(搜索失败) } }, 300) // 延迟 300 毫秒 // 复制提示词到剪贴板 const copyPrompt async (text) { try { await navigator.clipboard.writeText(text) ElMessage.success(提示词已复制到剪贴板) } catch (err) { // 降级方案 const textArea document.createElement(textarea) textArea.value text document.body.appendChild(textArea) textArea.select() document.execCommand(copy) document.body.removeChild(textArea) ElMessage.success(提示词已复制) } } /script然后在App.vue中引入并使用这个搜索组件替换掉之前占位的搜索页面。6.3 实现数据导出功能为了方便备份或迁移数据我们可以添加一个简单的导出功能。在后端添加一个导出 API// server/index.js (续) // 导出所有数据为 JSON app.get(/api/export, (req, res) { const builderStmt db.prepare(SELECT * FROM builders); const promptStmt db.prepare(SELECT * FROM prompts); const data { exportedAt: new Date().toISOString(), builders: builderStmt.all(), prompts: promptStmt.all() }; // 设置响应头告诉浏览器这是一个可下载的 JSON 文件 res.setHeader(Content-Disposition, attachment; filenametechhub_export.json); res.setHeader(Content-Type, application/json); res.send(JSON.stringify(data, null, 2)); // 美化输出 });在前端可以在侧边栏或页脚添加一个导出按钮点击时触发下载!-- 在 App.vue 的合适位置添加 -- el-button typeinfo plain clickexportData导出所有数据 (JSON)/el-button script setup // ... 其他代码 const exportData () { window.open(/api/export, _blank); } /script7. 常见问题排查与优化建议在开发和运行这个项目的过程中你可能会遇到一些典型问题。以下是一些常见问题的排查路径和优化建议。7.1 常见问题排查表问题现象可能原因检查方式处理建议前端页面无法加载控制台报跨域错误1. 后端未启动。2. 后端未启用 CORS。3. Vite 代理配置错误。1. 检查后端服务http://localhost:3000是否可访问。2. 检查后端index.js是否使用了app.use(cors())。3. 检查client/vite.config.js中的代理配置。1. 确保后端服务运行在正确的端口。2. 确认已安装并正确使用cors中间件。3. 重启前端开发服务器。添加/编辑资源后列表不刷新前端提交成功但未在成功后调用fetchBuilders刷新数据。检查对应组件的submitForm方法确认在axios.post或axios.put的then块中调用了数据获取函数。在 API 调用成功的回调中执行fetchBuilders()或fetchPrompts()。搜索功能没有返回结果1. 搜索关键词为空。2. 后端搜索 API 路由或 SQL 有误。3. 数据库中没有匹配的数据。1. 打开浏览器开发者工具的“网络”标签查看搜索请求是否发出参数是否正确。2. 查看后端控制台是否有 SQL 错误日志。3. 直接在数据库管理工具中执行类似 SQL 语句测试。1. 确保搜索请求的 URL 和参数正确。2. 检查后端/api/search的 SQL 语句特别是LIKE子句和字段名。3. 确认数据库中有测试数据。SQLite 数据库文件被锁定多个进程同时写入数据库或上次进程异常退出未释放锁。检查是否同时运行了多个后端实例或者编辑器、数据库工具打开了该文件。1. 停止所有使用该数据库的进程。2. 删除database.db文件会丢失数据并重启服务让程序重建。3. 使用better-sqlite3的readonly模式打开只读连接。前端构建后访问 API 404生产环境下前端静态文件和后端 API 不在同一个域名/端口代理配置失效。开发环境代理 (vite.config.js) 仅在npm run dev时有效。构建后需要其他方式。方案1将前后端部署在同一域名下使用 Nginx 等反向代理将/api请求转发到后端。方案2构建时将 API 地址设置为绝对路径通过环境变量。7.2 性能与安全优化建议当前版本为最小可行产品MVP适用于个人学习和小范围使用。如果计划用于团队或生产环境需要考虑以下优化数据库优化索引在builders和prompts表的name,tags,category等常用搜索字段上创建索引大幅提升搜索速度。CREATE INDEX idx_builders_search ON builders(name, category, tags); CREATE INDEX idx_prompts_search ON prompts(title, model, category, tags);连接池虽然 SQLite 是文件数据库但在高并发下使用连接池管理better-sqlite3连接能避免瓶颈。API 安全输入验证对所有 API 的输入进行严格的验证如字段类型、长度、必填可以使用Joi或express-validator库。身份认证添加简单的 API 密钥认证或用户登录如 JWT防止数据被随意篡改。SQL 注入防护坚持使用参数化查询better-sqlite3已做到绝不拼接 SQL 字符串。前端体验分页当数据量很大时列表和搜索应支持分页。后端 API 需要增加limit和offset参数。加载状态在数据加载、提交表单时显示加载动画或禁用按钮提升用户体验。错误处理更全面的网络错误、服务器错误提示。数据备份定期备份server/database.db文件。可以利用导出功能编写脚本定期将数据导出为 JSON 并存储到其他位置。7.3 扩展方向这个主站可以作为一个基础向多个方向扩展更多资源类型添加“GitHub 项目”、“技术文章”、“在线工具”等新的资源类型只需复制类似的表和组件即可。标签系统升级将逗号分隔的tags字段升级为独立的标签表和关系表实现真正的多对多关联和标签管理。导入功能支持从 CSV、JSON 或浏览器书签文件导入数据。浏览器扩展开发一个浏览器扩展在浏览 GitHub、技术博客时一键将当前页面信息保存到主站。Docker 部署将整个应用前端、后端、数据库容器化方便在任何支持 Docker 的环境一键部署。全文搜索引擎如果资源条目非常多可以集成Elasticsearch或MeiliSearch提供更强大的全文检索能力。通过以上步骤你已经成功构建了一个私人的技术资源聚合站。它不仅解决了资源分散的问题还通过可扩展的设计为未来功能迭代留下了空间。你可以根据自己的需求继续完善和定制它使其成为你日常开发工作中不可或缺的效率工具。 构建个人技术资源聚合站：从零实现Builder与AI提示词管理
在实际项目中我们经常需要收集和整理来自不同渠道的技术工具、框架和资源比如 GitHub 上的开源项目、AI 模型的最佳提示词、各种 Builder 工具链等。这些零散的信息散落在浏览器书签、笔记软件或聊天记录里查找和使用效率很低。一个更高效的做法是建立一个私有的、可搜索的、可管理的“主站”或知识库将这些资源集中管理并能快速检索和应用。本文将围绕如何构建这样一个技术资源聚合主站展开。我们将使用一个轻量级的技术栈实现从数据采集、存储、检索到前端展示的完整流程。整个过程不涉及复杂的部署适合个人开发者或小团队用于管理自己的技术资产。你将学会如何搭建一个服务将你关注的 Builder 工具、AI 提示词、GitHub 项目链接等信息结构化地存储起来并通过 Web 界面进行管理和使用。1. 理解核心概念Builder、提示词与资源聚合在开始构建之前我们需要明确几个核心概念这有助于我们设计合理的数据结构和功能。1.1 什么是 Builder在软件开发领域Builder 通常指一种用于简化复杂对象创建过程的设计模式或者指一系列用于构建、编译、打包项目的工具。从输入的网络热词来看其含义更加广泛可能包括开发工具链如C BuilderIDE、Form Builder表单构建器、Stack BuilderPostgreSQL 的扩展安装工具。硬件/嵌入式工具如GD32 Embedded Builder。库/包管理工具如Orcad Library Builder。新兴概念如Snap Graph Builder可能指某种可视化构建工具、Trae Builder with MCP可能涉及模型上下文协议。对于我们的主站可以将任何用于“构建”某物的工具、框架或平台都视为一个Builder资源。其核心属性包括名称、类别如“前端构建”、“嵌入式”、官方链接、描述、以及可能的使用命令或配置片段。1.2 什么是提示词Prompt提示词是用户与大语言模型如 ChatGPT、DeepSeek、Minimax 等交互时输入的指令或问题。高质量的提示词能显著提升 AI 输出的准确性和实用性。提示词工程已成为一项重要技能。通用提示词适用于多种场景的提问模板。领域特定提示词如“AI 编程提示词”、“数学建模 AI 提示词”。角色扮演提示词如让 AI 扮演特定专家。结构化提示词包含系统指令、用户输入、上下文示例的复杂模板如Minimax H3提示词模板。在我们的主站里一个提示词资源需要包含标题、适用的 AI 模型/平台、具体的提示词内容、分类如“代码生成”、“文案润色”、以及效果示例。1.3 资源聚合主站的设计目标我们的主站不是一个简单的收藏夹。它应该具备以下能力结构化存储为不同类型的资源Builder、提示词、GitHub 项目定义清晰的数据模型。便捷录入提供表单或 API方便快速添加新资源。高效检索支持按名称、标签、分类、描述进行全文搜索。快速应用对于提示词能一键复制对于命令行工具能快速查看常用命令。知识关联可以给资源打标签形成知识网络。明确了目标后我们就可以开始技术选型和环境搭建。2. 环境准备与技术栈选型我们将选择一个全栈 JavaScript 方案这样前后端可以使用同一种语言降低学习成本。项目将分为前端、后端和数据库三层。2.1 开发环境要求请确保你的本地开发环境满足以下要求组件要求检查命令备注Node.jsLTS 版本 (如 18.x, 20.x)node --version运行 JavaScript 后端和前端构建工具npm通常随 Node.js 安装npm --versionNode.js 包管理器Git最新稳定版git --version版本控制和克隆项目模板代码编辑器VS Code, WebStorm 等-推荐 VS Code 并安装相关插件浏览器Chrome, Firefox, Edge 最新版-用于前端调试2.2 技术栈说明我们选择以下具体技术它们在生态、学习和开发效率上都有不错的表现后端框架Express.js一个极简的 Node.js Web 框架足够轻量适合快速构建 RESTful API。数据库SQLite无需安装和配置数据库服务数据存储在单个文件中非常适合个人项目或小型应用。我们将使用better-sqlite3驱动它性能较好且同步 API 更易于理解。对象关系映射ORM无为了保持简单和直接控制 SQL本项目不引入 ORM。我们将直接编写 SQL 语句来操作数据库。前端框架Vite Vue 3Vite 提供极速的开发服务器和构建体验。Vue 3 的 Composition API 让逻辑组织更灵活。我们将使用script setup语法。UI 组件库Element Plus基于 Vue 3 的桌面端组件库提供了丰富的表格、表单、对话框等组件能极大加快前端开发。HTTP 客户端Axios用于前端向后端 API 发送请求。这个技术栈的依赖清晰搭建步骤明确接下来我们初始化项目。3. 项目初始化与结构搭建我们将创建一个标准的 Node.js 全栈项目结构。首先创建项目根目录。# 创建项目目录并进入 mkdir my-tech-hub cd my-tech-hub3.1 初始化后端项目在根目录下创建server文件夹作为后端项目。# 创建后端目录 mkdir server cd server # 初始化 npm 项目一路回车即可 npm init -y安装后端所需的依赖包npm install express better-sqlite3 cors npm install --save-dev nodemonexpress: Web 框架。better-sqlite3: SQLite 数据库驱动。cors: 处理跨域资源共享方便前后端分离开发。nodemon: 开发工具监听文件变化自动重启服务。修改server/package.json中的scripts部分方便启动{ name: server, version: 1.0.0, description: , main: index.js, scripts: { start: node index.js, dev: nodemon index.js }, keywords: [], author: , license: ISC, dependencies: { better-sqlite3: ^9.0.0, cors: ^2.8.5, express: ^4.18.2 }, devDependencies: { nodemon: ^3.0.1 } }3.2 初始化前端项目回到项目根目录使用 Vite 官方脚手架快速创建 Vue 项目。# 回到根目录 cd .. # 使用 npm 创建 Vite 项目选择 Vue 模板 npm create vitelatest client -- --template vue # 进入前端目录并安装依赖 cd client npm install安装前端额外的依赖Element Plus 和 Axios。npm install element-plus axios为了方便使用 Element Plus我们需要在client/src/main.js中进行全局引入import { createApp } from vue import App from ./App.vue import ElementPlus from element-plus import element-plus/dist/index.css const app createApp(App) app.use(ElementPlus) app.mount(#app)3.3 项目最终结构预览完成以上步骤后你的项目结构应该大致如下my-tech-hub/ ├── server/ # 后端服务 │ ├── node_modules/ │ ├── database.db # SQLite 数据库文件稍后生成 │ ├── index.js # 后端主入口文件 │ └── package.json └── client/ # 前端应用 ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.js ├── index.html ├── package.json └── vite.config.js现在基础骨架已经搭建完毕接下来我们将从数据库开始实现核心功能。4. 数据库设计与后端 API 实现数据模型是整个应用的核心。我们需要设计两张表来存储Builder和Prompt资源。4.1 数据库表设计在server/index.js中我们初始化数据库并创建表。// server/index.js const express require(express); const Database require(better-sqlite3); const cors require(cors); const app express(); const port 3000; // 使用中间件 app.use(cors()); // 允许前端跨域请求 app.use(express.json()); // 解析 JSON 请求体 // 连接数据库如果不存在则创建 const db new Database(./database.db); // 创建资源表 db.exec( CREATE TABLE IF NOT EXISTS builders ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, category TEXT, description TEXT, official_url TEXT, command_example TEXT, tags TEXT, -- 用逗号分隔的标签字符串如 前端,构建,工具 created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE IF NOT EXISTS prompts ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, model TEXT, -- 适用模型如 ChatGPT-4, DeepSeek, 通用 content TEXT NOT NULL, -- 提示词具体内容 category TEXT, -- 分类如 编程, 写作, 分析 example_output TEXT, tags TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); ); console.log(Database and tables initialized.);设计说明builders表存储 Builder 工具。command_example字段用于存放常用的安装或使用命令。prompts表存储 AI 提示词。model字段指明该提示词主要针对哪个 AI 模型优化。tags字段我们使用简单的逗号分隔字符串来存储标签。对于更复杂的标签系统如多对多关系可以单独创建标签表和关系表但为了简化本项目采用此方案。created_at记录创建时间便于排序和筛选。4.2 实现 RESTful API接下来我们为两张表实现完整的增删改查CRUDAPI。// server/index.js (续) // Builders 相关 API // 获取所有 builders app.get(/api/builders, (req, res) { const stmt db.prepare(SELECT * FROM builders ORDER BY created_at DESC); const builders stmt.all(); res.json(builders); }); // 获取单个 builder app.get(/api/builders/:id, (req, res) { const stmt db.prepare(SELECT * FROM builders WHERE id ?); const builder stmt.get(req.params.id); if (builder) { res.json(builder); } else { res.status(404).json({ error: Builder not found }); } }); // 创建新的 builder app.post(/api/builders, (req, res) { const { name, category, description, official_url, command_example, tags } req.body; if (!name) { return res.status(400).json({ error: Name is required }); } const stmt db.prepare( INSERT INTO builders (name, category, description, official_url, command_example, tags) VALUES (?, ?, ?, ?, ?, ?) ); const info stmt.run(name, category, description, official_url, command_example, tags); res.status(201).json({ id: info.lastInsertRowid, message: Builder created }); }); // 更新 builder app.put(/api/builders/:id, (req, res) { const { name, category, description, official_url, command_example, tags } req.body; const stmt db.prepare( UPDATE builders SET name ?, category ?, description ?, official_url ?, command_example ?, tags ? WHERE id ? ); const info stmt.run(name, category, description, official_url, command_example, tags, req.params.id); if (info.changes 0) { res.json({ message: Builder updated }); } else { res.status(404).json({ error: Builder not found }); } }); // 删除 builder app.delete(/api/builders/:id, (req, res) { const stmt db.prepare(DELETE FROM builders WHERE id ?); const info stmt.run(req.params.id); if (info.changes 0) { res.json({ message: Builder deleted }); } else { res.status(404).json({ error: Builder not found }); } }); // Prompts 相关 API (结构类似略) // 为节省篇幅Prompts 的 GET /api/prompts, GET /api/prompts/:id, // POST /api/prompts, PUT /api/prompts/:id, DELETE /api/prompts/:id // 的实现逻辑与 Builders 完全一致只需替换表名和字段。 // 在实际代码中你需要完整实现它们。 // 启动服务器 app.listen(port, () { console.log(TechHub backend server running at http://localhost:${port}); });注意在生产环境中你需要对所有的输入进行严格的验证和清理以防止 SQL 注入。虽然better-sqlite3使用参数化查询已经能有效防御 SQL 注入但仍需验证业务逻辑如字段长度、必填项。后端 API 已经就绪现在我们可以启动后端服务进行测试。# 在 server 目录下 cd server npm run dev如果看到TechHub backend server running at http://localhost:3000的日志说明后端启动成功。你可以使用 Postman 或 curl 测试 API例如GET http://localhost:3000/api/builders。5. 前端界面开发与功能集成前端将提供用户界面来展示、搜索、添加、编辑和删除资源。我们将创建几个核心组件。5.1 配置前端开发服务器代理为了避免跨域问题我们在开发阶段配置 Vite 的代理将/api开头的请求转发到后端服务器。修改client/vite.config.jsimport { defineConfig } from vite import vue from vitejs/plugin-vue // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { proxy: { /api: { target: http://localhost:3000, // 后端服务器地址 changeOrigin: true, } } } })5.2 创建资源展示组件首先我们创建一个用于展示 Builder 列表的组件client/src/components/BuilderList.vue。!-- client/src/components/BuilderList.vue -- template div div stylemargin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; h2Builder 工具库/h2 el-button typeprimary clickdialogVisible true添加 Builder/el-button /div el-table :databuilders stylewidth: 100% el-table-column propname label名称 width180 / el-table-column propcategory label类别 width120 / el-table-column propdescription label描述 / el-table-column proptags label标签 width150 template #defaultscope el-tag v-fortag in scope.row.tags?.split(,) :keytag sizesmall stylemargin-right: 5px; {{ tag.trim() }} /el-tag /template /el-table-column el-table-column label操作 width180 template #defaultscope el-button sizesmall clickhandleEdit(scope.row)编辑/el-button el-button sizesmall typedanger clickhandleDelete(scope.row.id)删除/el-button /template /el-table-column /el-table !-- 添加/编辑对话框 -- el-dialog v-modeldialogVisible :titleformTitle width50% el-form :modelform label-width80px el-form-item label名称 required el-input v-modelform.name placeholder例如Vite / /el-form-item el-form-item label类别 el-input v-modelform.category placeholder例如前端构建 / /el-form-item el-form-item label描述 el-input v-modelform.description typetextarea :rows3 placeholder简要描述该工具的用途 / /el-form-item el-form-item label官方链接 el-input v-modelform.official_url placeholderhttps://... / /el-form-item el-form-item label命令示例 el-input v-modelform.command_example typetextarea :rows2 placeholdernpm create vitelatest / /el-form-item el-form-item label标签 el-input v-modelform.tags placeholder多个标签用英文逗号分隔如前端,构建,工具 / /el-form-item /el-form template #footer span classdialog-footer el-button clickdialogVisible false取消/el-button el-button typeprimary clicksubmitForm确认/el-button /span /template /el-dialog /div /template script setup import { ref, reactive, onMounted, computed } from vue import { ElMessage, ElMessageBox } from element-plus import axios from axios const builders ref([]) const dialogVisible ref(false) const isEditing ref(false) const currentId ref(null) const form reactive({ name: , category: , description: , official_url: , command_example: , tags: }) const formTitle computed(() isEditing.value ? 编辑 Builder : 添加 Builder) // 获取数据 const fetchBuilders async () { try { const response await axios.get(/api/builders) builders.value response.data } catch (error) { console.error(Failed to fetch builders:, error) ElMessage.error(获取数据失败) } } // 提交表单创建或更新 const submitForm async () { if (!form.name.trim()) { ElMessage.warning(名称不能为空) return } try { if (isEditing.value) { await axios.put(/api/builders/${currentId.value}, form) ElMessage.success(更新成功) } else { await axios.post(/api/builders, form) ElMessage.success(添加成功) } dialogVisible.value false resetForm() fetchBuilders() // 刷新列表 } catch (error) { console.error(Submit failed:, error) ElMessage.error(操作失败) } } // 编辑 const handleEdit (row) { isEditing.value true currentId.value row.id Object.assign(form, row) // 将行数据填充到表单 dialogVisible.value true } // 删除 const handleDelete (id) { ElMessageBox.confirm(确定要删除此记录吗, 警告, { confirmButtonText: 确定, cancelButtonText: 取消, type: warning, }).then(async () { try { await axios.delete(/api/builders/${id}) ElMessage.success(删除成功) fetchBuilders() } catch (error) { ElMessage.error(删除失败) } }).catch(() {}) } // 重置表单 const resetForm () { isEditing.value false currentId.value null Object.keys(form).forEach(key { form[key] }) } // 对话框关闭时重置 const handleDialogClose () { resetForm() } onMounted(() { fetchBuilders() }) /script5.3 集成到主应用并添加路由类似地你需要创建一个PromptList.vue组件。然后修改client/src/App.vue作为主布局并引入简单的路由切换功能。!-- client/src/App.vue -- template div idapp el-container el-header styletext-align: center; border-bottom: 1px solid #eee; h1我的技术资源主站/h1 p集中管理 Builder 工具、AI 提示词等开发资源/p /el-header el-container el-aside width200px styleborder-right: 1px solid #eee; el-menu :default-activeactiveMenu selecthandleMenuSelect el-menu-item indexbuilders spanBuilder 工具/span /el-menu-item el-menu-item indexprompts spanAI 提示词/span /el-menu-item el-menu-item indexsearch span全局搜索/span /el-menu-item /el-menu /el-aside el-main BuilderList v-ifactiveMenu builders / PromptList v-ifactiveMenu prompts / div v-ifactiveMenu search h3全局搜索功能 (待实现)/h3 p这里可以集成一个搜索框同时搜索 Builders 和 Prompts 表。/p /div /el-main /el-container /el-container /div /template script setup import { ref } from vue import BuilderList from ./components/BuilderList.vue import PromptList from ./components/PromptList.vue const activeMenu ref(builders) const handleMenuSelect (index) { activeMenu.value index } /script style #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; } .el-header { background-color: #f8f9fa; line-height: 60px; } /style5.4 启动前后端并验证现在我们可以同时启动前端和后端服务来验证整个流程。启动后端服务在server目录npm run dev启动前端开发服务器在client目录npm run dev打开浏览器访问 Vite 提供的地址通常是http://localhost:5173。点击“添加 Builder”按钮填写一个示例工具信息如名称Vite类别前端构建描述下一代前端构建工具命令示例npm create vitelatest。点击确认后列表应该会刷新并显示你刚添加的记录。尝试编辑和删除功能。至此一个具备基本 CRUD 功能的技术资源管理主站已经可以运行。但为了使其真正实用我们还需要实现搜索等增强功能。6. 核心功能增强搜索与数据导出一个资源库的核心价值在于快速找到所需内容。我们将实现一个简单的全局搜索并添加数据导出功能。6.1 实现后端联合搜索 API在后端server/index.js中添加一个新的 API 端点用于在builders和prompts两张表中进行联合搜索。// server/index.js (续) // 全局搜索 API app.get(/api/search, (req, res) { const keyword req.query.q; if (!keyword || keyword.trim() ) { return res.json({ builders: [], prompts: [] }); } const searchPattern %${keyword}%; // 搜索 builders const builderStmt db.prepare( SELECT *, builder as type FROM builders WHERE name LIKE ? OR description LIKE ? OR category LIKE ? OR tags LIKE ? ); const builders builderStmt.all(searchPattern, searchPattern, searchPattern, searchPattern); // 搜索 prompts const promptStmt db.prepare( SELECT *, prompt as type FROM prompts WHERE title LIKE ? OR content LIKE ? OR category LIKE ? OR model LIKE ? OR tags LIKE ? ); const prompts promptStmt.all(searchPattern, searchPattern, searchPattern, searchPattern, searchPattern); res.json({ builders, prompts }); });这个 API 接收一个查询参数q并在两个表的多个字段中进行模糊匹配LIKE。返回的结果中附带一个type字段用于区分资源类型。6.2 实现前端搜索组件创建一个新的组件client/src/components/GlobalSearch.vue。!-- client/src/components/GlobalSearch.vue -- template div el-input v-modelsearchKeyword placeholder输入关键词搜索 Builder 或 Prompt... stylewidth: 400px; margin-bottom: 20px; inputdebouncedSearch clearable template #prefix el-iconSearch //el-icon /template /el-input div v-ifsearchResults.builders.length 0 h3Builder 工具 ({{ searchResults.builders.length }})/h3 el-table :datasearchResults.builders stylewidth: 100%; margin-bottom: 30px; el-table-column propname label名称 / el-table-column propcategory label类别 / el-table-column propdescription label描述 show-overflow-tooltip / el-table-column label操作 template #defaultscope el-button sizesmall click$emit(view-detail, scope.row)查看/el-button /template /el-table-column /el-table /div div v-ifsearchResults.prompts.length 0 h3AI 提示词 ({{ searchResults.prompts.length }})/h3 el-table :datasearchResults.prompts stylewidth: 100%; el-table-column proptitle label标题 / el-table-column propmodel label适用模型 / el-table-column propcategory label分类 / el-table-column propcontent label内容 show-overflow-tooltip / el-table-column label操作 width100 template #defaultscope el-button sizesmall typeprimary clickcopyPrompt(scope.row.content)复制/el-button /template /el-table-column /el-table /div div v-ifsearchKeyword searchResults.builders.length 0 searchResults.prompts.length 0 el-empty description未找到相关资源 / /div /div /template script setup import { ref, reactive } from vue import { Search } from element-plus/icons-vue import { ElMessage } from element-plus import axios from axios import _ from lodash // 需要先安装 lodash: npm install lodash const searchKeyword ref() const searchResults reactive({ builders: [], prompts: [] }) // 使用 lodash 的防抖函数避免输入时频繁请求 const debouncedSearch _.debounce(async () { if (!searchKeyword.value.trim()) { searchResults.builders [] searchResults.prompts [] return } try { const response await axios.get(/api/search, { params: { q: searchKeyword.value } }) searchResults.builders response.data.builders searchResults.prompts response.data.prompts } catch (error) { console.error(Search failed:, error) ElMessage.error(搜索失败) } }, 300) // 延迟 300 毫秒 // 复制提示词到剪贴板 const copyPrompt async (text) { try { await navigator.clipboard.writeText(text) ElMessage.success(提示词已复制到剪贴板) } catch (err) { // 降级方案 const textArea document.createElement(textarea) textArea.value text document.body.appendChild(textArea) textArea.select() document.execCommand(copy) document.body.removeChild(textArea) ElMessage.success(提示词已复制) } } /script然后在App.vue中引入并使用这个搜索组件替换掉之前占位的搜索页面。6.3 实现数据导出功能为了方便备份或迁移数据我们可以添加一个简单的导出功能。在后端添加一个导出 API// server/index.js (续) // 导出所有数据为 JSON app.get(/api/export, (req, res) { const builderStmt db.prepare(SELECT * FROM builders); const promptStmt db.prepare(SELECT * FROM prompts); const data { exportedAt: new Date().toISOString(), builders: builderStmt.all(), prompts: promptStmt.all() }; // 设置响应头告诉浏览器这是一个可下载的 JSON 文件 res.setHeader(Content-Disposition, attachment; filenametechhub_export.json); res.setHeader(Content-Type, application/json); res.send(JSON.stringify(data, null, 2)); // 美化输出 });在前端可以在侧边栏或页脚添加一个导出按钮点击时触发下载!-- 在 App.vue 的合适位置添加 -- el-button typeinfo plain clickexportData导出所有数据 (JSON)/el-button script setup // ... 其他代码 const exportData () { window.open(/api/export, _blank); } /script7. 常见问题排查与优化建议在开发和运行这个项目的过程中你可能会遇到一些典型问题。以下是一些常见问题的排查路径和优化建议。7.1 常见问题排查表问题现象可能原因检查方式处理建议前端页面无法加载控制台报跨域错误1. 后端未启动。2. 后端未启用 CORS。3. Vite 代理配置错误。1. 检查后端服务http://localhost:3000是否可访问。2. 检查后端index.js是否使用了app.use(cors())。3. 检查client/vite.config.js中的代理配置。1. 确保后端服务运行在正确的端口。2. 确认已安装并正确使用cors中间件。3. 重启前端开发服务器。添加/编辑资源后列表不刷新前端提交成功但未在成功后调用fetchBuilders刷新数据。检查对应组件的submitForm方法确认在axios.post或axios.put的then块中调用了数据获取函数。在 API 调用成功的回调中执行fetchBuilders()或fetchPrompts()。搜索功能没有返回结果1. 搜索关键词为空。2. 后端搜索 API 路由或 SQL 有误。3. 数据库中没有匹配的数据。1. 打开浏览器开发者工具的“网络”标签查看搜索请求是否发出参数是否正确。2. 查看后端控制台是否有 SQL 错误日志。3. 直接在数据库管理工具中执行类似 SQL 语句测试。1. 确保搜索请求的 URL 和参数正确。2. 检查后端/api/search的 SQL 语句特别是LIKE子句和字段名。3. 确认数据库中有测试数据。SQLite 数据库文件被锁定多个进程同时写入数据库或上次进程异常退出未释放锁。检查是否同时运行了多个后端实例或者编辑器、数据库工具打开了该文件。1. 停止所有使用该数据库的进程。2. 删除database.db文件会丢失数据并重启服务让程序重建。3. 使用better-sqlite3的readonly模式打开只读连接。前端构建后访问 API 404生产环境下前端静态文件和后端 API 不在同一个域名/端口代理配置失效。开发环境代理 (vite.config.js) 仅在npm run dev时有效。构建后需要其他方式。方案1将前后端部署在同一域名下使用 Nginx 等反向代理将/api请求转发到后端。方案2构建时将 API 地址设置为绝对路径通过环境变量。7.2 性能与安全优化建议当前版本为最小可行产品MVP适用于个人学习和小范围使用。如果计划用于团队或生产环境需要考虑以下优化数据库优化索引在builders和prompts表的name,tags,category等常用搜索字段上创建索引大幅提升搜索速度。CREATE INDEX idx_builders_search ON builders(name, category, tags); CREATE INDEX idx_prompts_search ON prompts(title, model, category, tags);连接池虽然 SQLite 是文件数据库但在高并发下使用连接池管理better-sqlite3连接能避免瓶颈。API 安全输入验证对所有 API 的输入进行严格的验证如字段类型、长度、必填可以使用Joi或express-validator库。身份认证添加简单的 API 密钥认证或用户登录如 JWT防止数据被随意篡改。SQL 注入防护坚持使用参数化查询better-sqlite3已做到绝不拼接 SQL 字符串。前端体验分页当数据量很大时列表和搜索应支持分页。后端 API 需要增加limit和offset参数。加载状态在数据加载、提交表单时显示加载动画或禁用按钮提升用户体验。错误处理更全面的网络错误、服务器错误提示。数据备份定期备份server/database.db文件。可以利用导出功能编写脚本定期将数据导出为 JSON 并存储到其他位置。7.3 扩展方向这个主站可以作为一个基础向多个方向扩展更多资源类型添加“GitHub 项目”、“技术文章”、“在线工具”等新的资源类型只需复制类似的表和组件即可。标签系统升级将逗号分隔的tags字段升级为独立的标签表和关系表实现真正的多对多关联和标签管理。导入功能支持从 CSV、JSON 或浏览器书签文件导入数据。浏览器扩展开发一个浏览器扩展在浏览 GitHub、技术博客时一键将当前页面信息保存到主站。Docker 部署将整个应用前端、后端、数据库容器化方便在任何支持 Docker 的环境一键部署。全文搜索引擎如果资源条目非常多可以集成Elasticsearch或MeiliSearch提供更强大的全文检索能力。通过以上步骤你已经成功构建了一个私人的技术资源聚合站。它不仅解决了资源分散的问题还通过可扩展的设计为未来功能迭代留下了空间。你可以根据自己的需求继续完善和定制它使其成为你日常开发工作中不可或缺的效率工具。