CHORD-X赋能Node.js全栈开发构建报告生成与管理后台如果你是一名全栈开发者接到一个需求要做一个能让用户提交报告生成任务然后后台自动处理用户还能实时查看进度和下载结果的Web应用你会从哪里开始过去这种涉及复杂内容生成的后台系统开发起来相当头疼。你需要自己搭建一套文本生成或内容处理的引擎还得考虑并发、队列、状态管理等一系列问题。但现在有了像CHORD-X这样的AI大模型服务事情就变得简单多了。我们可以把最复杂的“内容生成”部分交给它自己则专注于构建一个稳定、易用的Web应用。这篇文章我就来和你聊聊怎么用Node.js作为后端核心快速搭建一个完整的报告生成与管理后台。我们会从前端界面到后端API从任务队列到状态管理一步步把系统跑起来。整个过程就像搭积木一样把各个模块组合起来。1. 项目蓝图我们要做一个什么样的系统在动手写代码之前我们先得把整个系统的轮廓画清楚。这样开发起来才不会东一榔头西一棒槌。简单来说我们的系统需要完成以下几件核心事情用户能提交任务在前端页面用户填写报告的主题、要求等信息然后点击“生成”。后台能排队处理用户提交的任务不会立即执行而是进入一个队列后台按顺序一个个处理避免服务器一下子被压垮。调用AI生成内容轮到某个任务时后端调用CHORD-X的API把用户的要求传过去拿到生成的报告文本。用户能看进度和结果在任务处理过程中用户能在页面上看到“排队中”、“生成中”、“已完成”这样的状态。完成后可以直接下载生成好的报告文档。为了实现这些我们的技术栈可以这样选前端用Vue 3或者React 18都行它们生态丰富组件库多能快速搭建出好看的界面。本文示例会用Vue 3来演示。后端Node.js是我们的主力。Express框架轻量灵活Koa更现代一些两者任选其一。我们用Express来写因为它更常见资料也多。任务队列这是关键。我们需要一个“排队”机制。Redis不仅是个缓存数据库它的List和Sorted Set数据结构非常适合做简单的消息队列。我们会用bull这个库它是基于Redis的用起来特别顺手。数据库用来存用户信息、任务记录等。MongoDB用Mongoose或PostgreSQL用Prisma都可以看团队熟悉哪个。这里为了简单先用MongoDB。核心服务CHORD-X的API。它负责接收我们整理好的提示词然后返回高质量的报告内容。整个系统的数据流你可以想象成一条“流水线”前端提交任务 - 后端接收并存入数据库、扔进Redis队列 - 后台Worker从队列取出任务 - 调用CHORD-X API - 拿到结果后更新数据库状态 - 前端通过轮询或WebSocket看到状态变化 - 用户下载报告。理清了思路我们就可以开始准备“施工场地”了。2. 搭建开发环境从零开始准备磨刀不误砍柴工。我们先得把Node.js、数据库这些基础环境装好。2.1 安装Node.js与包管理器首先确保你的电脑上安装了Node.js。建议使用最新的LTS长期支持版本比如18.x或20.x。你可以去Node.js官网下载安装包或者用nvmNode Version Manager这样的工具来管理多个版本这样切换起来更方便。安装好后打开终端运行下面这两条命令检查一下node --version npm --version如果能正确显示版本号比如v20.11.0和10.2.4那就说明安装成功了。现在更流行的包管理器是yarn或者pnpm它们比npm速度更快、管理依赖更清晰。我个人喜欢用pnpm。你可以用npm全局安装它npm install -g pnpm安装后用pnpm --version确认一下。2.2 初始化后端项目找个你喜欢的目录新建一个文件夹比如叫report-gen-backend然后进入这个文件夹。mkdir report-gen-backend cd report-gen-backend用pnpm初始化一个新的Node.js项目pnpm init一路回车或者根据提示填写项目名称、描述等信息。这会生成一个package.json文件。接下来安装我们后端需要的核心依赖pnpm add express cors dotenv mongoose bull pnpm add -D nodemon typescript types/node types/express types/cors我来解释一下这些包是干嘛的express我们的Web框架。cors处理跨域请求因为前端和后端通常是分开部署的。dotenv用来加载环境变量把像CHORD-X API密钥这种敏感信息从代码里分离出去。mongooseMongoDB的对象模型工具用起来更面向对象。bull基于Redis的任务队列库。以-D安装的是开发依赖nodemon用于开发时自动重启typescript和相关types包是为了获得更好的类型提示如果你用TypeScript的话。2.3 准备数据库与RedisMongoDB你可以去MongoDB官网下载安装或者直接用它们提供的云服务MongoDB Atlas免费套餐就够我们开发测试用了。在Atlas上创建一个集群拿到连接字符串Connection String。Redis同样可以本地安装也可以用云服务。Redis官方也提供了云服务Redis Cloud有免费额度。本地安装的话可以去Redis官网下载或者用Docker跑一个docker run -d -p 6379:6379 --name redis-stack redis/redis-stack:latest这条命令会在本地6379端口启动一个带图形管理界面的Redis。环境准备好了我们创建两个关键的配置文件。首先在项目根目录创建.env文件存放所有敏感配置# 服务器端口 PORT3000 # MongoDB连接字符串请替换成你自己的 MONGODB_URImongodbsrv://username:passwordcluster0.xxxxx.mongodb.net/report_gen?retryWritestruewmajority # Redis连接信息如果是本地默认安装可以这样写 REDIS_HOSTlocalhost REDIS_PORT6379 # 如果Redis有密码 # REDIS_PASSWORDyourpassword # CHORD-X API 配置 CHORDX_API_KEYyour_chordx_api_key_here CHORDX_API_BASE_URLhttps://api.chordx.ai/v1切记这个.env文件要添加到.gitignore里千万不要提交到代码仓库。然后创建一个src/config/index.ts文件来集中管理配置import dotenv from dotenv; dotenv.config(); export default { port: process.env.PORT || 3000, mongodbUri: process.env.MONGODB_URI || mongodb://localhost:27017/report_gen, redis: { host: process.env.REDIS_HOST || localhost, port: parseInt(process.env.REDIS_PORT || 6379, 10), // password: process.env.REDIS_PASSWORD }, chordx: { apiKey: process.env.CHORDX_API_KEY!, apiBaseUrl: process.env.CHORDX_API_BASE_URL!, } };这样我们在代码里就可以通过import config from ./config来安全地使用这些配置了。3. 构建后端核心API、队列与Worker环境配置妥当我们可以开始写后端的“硬核”代码了。这部分是系统的大脑。3.1 设计数据模型我们先定义数据长什么样。在src/models/目录下创建两个文件第一个是User.ts用户模型这里简化处理实际项目会更复杂import mongoose, { Schema, Document } from mongoose; export interface IUser extends Document { username: string; email: string; createdAt: Date; } const UserSchema: Schema new Schema({ username: { type: String, required: true, unique: true }, email: { type: String, required: true, unique: true }, createdAt: { type: Date, default: Date.now } }); export default mongoose.modelIUser(User, UserSchema);第二个是ReportTask.ts报告任务模型这是核心import mongoose, { Schema, Document } from mongoose; // 定义任务状态的几种可能 export enum TaskStatus { PENDING pending, // 排队中 PROCESSING processing, // 生成中 COMPLETED completed, // 已完成 FAILED failed // 失败 } export interface IReportTask extends Document { userId: mongoose.Types.ObjectId; // 关联的用户ID title: string; // 报告标题 requirements: string; // 用户填写的具体要求 status: TaskStatus; // 任务状态 progress: number; // 进度百分比 (0-100) result?: string; // 最终生成的报告内容Markdown或HTML errorMessage?: string; // 如果失败错误信息 submittedAt: Date; // 提交时间 startedAt?: Date; // 开始处理时间 completedAt?: Date; // 完成时间 } const ReportTaskSchema: Schema new Schema({ userId: { type: Schema.Types.ObjectId, ref: User, required: true }, title: { type: String, required: true }, requirements: { type: String, required: true }, status: { type: String, enum: Object.values(TaskStatus), default: TaskStatus.PENDING }, progress: { type: Number, default: 0, min: 0, max: 100 }, result: { type: String }, errorMessage: { type: String }, submittedAt: { type: Date, default: Date.now }, startedAt: { type: Date }, completedAt: { type: Date } }); export default mongoose.modelIReportTask(ReportTask, ReportTaskSchema);这个模型记录了任务的整个生命周期。3.2 创建Express服务器与路由接下来在src/app.ts里创建我们的Express应用import express from express; import cors from cors; import mongoose from mongoose; import config from ./config; import taskRoutes from ./routes/taskRoutes; const app express(); // 中间件 app.use(cors()); // 允许前端跨域请求 app.use(express.json()); // 解析JSON格式的请求体 // 连接数据库 mongoose.connect(config.mongodbUri) .then(() console.log(✅ MongoDB连接成功)) .catch(err console.error(❌ MongoDB连接失败:, err)); // 路由 app.use(/api/tasks, taskRoutes); // 健康检查端点 app.get(/health, (req, res) { res.json({ status: ok, timestamp: new Date().toISOString() }); }); // 启动服务器 const PORT config.port; app.listen(PORT, () { console.log( 后端服务器运行在 http://localhost:${PORT}); });然后在src/routes/taskRoutes.ts里定义具体的API接口import { Router } from express; import ReportTask, { TaskStatus } from ../models/ReportTask; import { queue } from ../services/queueService; // 稍后我们会创建这个队列服务 const router Router(); // 1. 提交一个新的报告生成任务 router.post(/, async (req, res) { try { const { userId, title, requirements } req.body; // 创建任务记录初始状态为PENDING const newTask new ReportTask({ userId, title, requirements, status: TaskStatus.PENDING }); await newTask.save(); // 将任务ID加入到Bull队列中 await queue.add(generate-report, { taskId: newTask._id.toString() }); res.status(201).json({ success: true, message: 报告任务已提交正在排队中, data: { taskId: newTask._id } }); } catch (error) { console.error(提交任务失败:, error); res.status(500).json({ success: false, message: 服务器内部错误 }); } }); // 2. 获取单个任务的详情与状态 router.get(/:taskId, async (req, res) { try { const task await ReportTask.findById(req.params.taskId); if (!task) { return res.status(404).json({ success: false, message: 任务不存在 }); } res.json({ success: true, data: task }); } catch (error) { res.status(500).json({ success: false, message: 查询失败 }); } }); // 3. 获取用户的所有任务列表 router.get(/user/:userId, async (req, res) { try { const tasks await ReportTask.find({ userId: req.params.userId }) .sort({ submittedAt: -1 }); // 按提交时间倒序排列 res.json({ success: true, data: tasks }); } catch (error) { res.status(500).json({ success: false, message: 查询失败 }); } }); export default router;这三个API接口分别对应了提交任务、查询单个任务状态、查询用户任务列表构成了前后端交互的基础。3.3 实现任务队列与Worker现在来到最精彩的部分让任务在后台自动运行。我们在src/services/目录下创建两个文件。首先是queueService.ts用于创建和管理Bull队列import Bull from bull; import config from ../config; // 创建一个名为reportQueue的队列连接到我们的Redis export const queue new Bull(reportQueue, { redis: config.redis }); // 你可以在这里添加一些队列级别的事件监听比如任务完成、失败等用于监控和日志 queue.on(completed, (job) { console.log(任务 ${job.id} 已完成); }); queue.on(failed, (job, err) { console.error(任务 ${job.id} 失败:, err); });接着是workerService.ts这是真正的“工人”负责处理队列里的任务import { queue } from ./queueService; import ReportTask, { TaskStatus } from ../models/ReportTask; import { generateReportWithChordX } from ./chordxService; // 这是调用CHORD-X的函数下面会写 // 定义如何处理“generate-report”这个类型的任务 queue.process(generate-report, async (job) { const { taskId } job.data; console.log(开始处理任务: ${taskId}); const task await ReportTask.findById(taskId); if (!task) { throw new Error(任务 ${taskId} 不存在); } try { // 1. 更新任务状态为“处理中” task.status TaskStatus.PROCESSING; task.startedAt new Date(); task.progress 10; // 象征性地设置一个初始进度 await task.save(); // 2. 调用CHORD-X API生成报告内容 // 这里我们把用户的需求整理成更详细的提示词 const prompt 请生成一份关于“${task.title}”的详细报告。具体要求如下\n${task.requirements}\n请确保报告结构清晰内容专业。; const reportContent await generateReportWithChordX(prompt); // 模拟进度更新在实际中如果API支持流式或分步可以更真实地更新进度 task.progress 100; // 3. 任务成功保存结果 task.status TaskStatus.COMPLETED; task.result reportContent; task.completedAt new Date(); await task.save(); console.log(任务 ${taskId} 处理完成); return { success: true, contentLength: reportContent.length }; } catch (error: any) { console.error(处理任务 ${taskId} 时出错:, error); // 4. 任务失败记录错误信息 task.status TaskStatus.FAILED; task.errorMessage error.message || 未知错误; task.completedAt new Date(); await task.save(); throw error; // 抛出错误让Bull知道任务失败了 } });这个Worker会一直监听reportQueue队列。一旦有新的generate-report任务进来它就会被自动触发执行。3.4 集成CHORD-X API最后我们来实现与CHORD-X交互的服务层chordxService.tsimport axios from axios; import config from ../config; // 一个简单的函数调用CHORD-X的文本生成接口 export async function generateReportWithChordX(prompt: string): Promisestring { try { const response await axios.post( ${config.chordx.apiBaseUrl}/chat/completions, // 假设这是CHORD-X的聊天补全端点 { model: chord-x-latest, // 指定使用的模型根据CHORD-X文档来填 messages: [ { role: system, content: 你是一个专业的报告撰写助手。 }, { role: user, content: prompt } ], max_tokens: 2000, // 控制生成报告的长度 temperature: 0.7, // 控制创造性0.7比较平衡 }, { headers: { Authorization: Bearer ${config.chordx.apiKey}, Content-Type: application/json } } ); // 假设返回结构是 { choices: [{ message: { content: ... } }] } const generatedText response.data.choices[0]?.message?.content; if (!generatedText) { throw new Error(CHORD-X API返回内容为空); } return generatedText; } catch (error: any) { console.error(调用CHORD-X API失败:, error.response?.data || error.message); throw new Error(报告生成失败: ${error.message}); } }请注意上面的API端点、请求体和响应结构都是我假设的。在实际开发中你必须查阅CHORD-X官方的API文档使用正确的端点、参数和模型名称。这是项目能成功运行的关键一步。至此我们后端的核心部分就搭建完成了。你可以运行nodemon src/app.ts来启动服务器它会自动连接MongoDB和Redis并启动Worker进程。4. 打造前端界面让用户用起来后端在默默工作前端则需要提供一个友好的界面给用户。我们用Vue 3来快速实现。4.1 初始化Vue项目并安装依赖在你的工作区另起一个文件夹比如report-gen-frontend用Vite快速创建项目pnpm create vuelatest按照提示操作项目名就用默认的并选择安装TypeScript、Router、Pinia状态管理等。进入项目安装我们需要的额外依赖UI组件库和HTTP客户端。这里用Element Plus和Axioscd report-gen-frontend pnpm add axios element-plus element-plus/icons-vue pnpm add -D sass4.2 创建任务提交与状态查看页面我们主要做两个页面一个是提交新任务的表单页另一个是查看任务列表和详情的页面。首先在src/views/目录下创建TaskSubmit.vuetemplate div classtask-submit h2提交新的报告生成任务/h2 el-form :modelform :rulesrules refformRef label-width100px el-form-item label报告标题 proptitle el-input v-modelform.title placeholder例如2024年Q1市场分析报告 / /el-form-item el-form-item label详细要求 proprequirements el-input v-modelform.requirements typetextarea :rows6 placeholder请详细描述你希望报告包含哪些内容、结构、风格等。越详细生成效果越好。 / /el-form-item el-form-item el-button typeprimary clicksubmitTask :loadingsubmitting 提交生成任务 /el-button /el-form-item /el-form el-dialog v-modeldialogVisible title任务已提交 width30% p你的报告生成任务已成功提交/p p任务ID: strong{{ newTaskId }}/strong/p p你可以在“我的任务”页面查看进度和结果。/p template #footer el-button clickgoToTaskList查看我的任务/el-button el-button typeprimary clickdialogVisible false继续提交/el-button /template /el-dialog /div /template script setup langts import { ref, reactive } from vue; import { ElMessage, type FormInstance, type FormRules } from element-plus; import { useRouter } from vue-router; import { submitNewTask } from /api/taskApi; // 稍后我们会封装API const router useRouter(); const formRef refFormInstance(); const submitting ref(false); const dialogVisible ref(false); const newTaskId ref(); const form reactive({ title: , requirements: , userId: user_123 // 这里简化实际应从登录状态获取 }); const rules: FormRules { title: [{ required: true, message: 请输入报告标题, trigger: blur }], requirements: [{ required: true, message: 请输入详细要求, trigger: blur }] }; const submitTask async () { if (!formRef.value) return; const valid await formRef.value.validate(); if (!valid) return; submitting.value true; try { const response await submitNewTask(form); if (response.success) { newTaskId.value response.data.taskId; dialogVisible.value true; // 清空表单 formRef.value.resetFields(); } else { ElMessage.error(response.message || 提交失败); } } catch (error) { ElMessage.error(网络请求失败); } finally { submitting.value false; } }; const goToTaskList () { dialogVisible.value false; router.push(/tasks); }; /script然后创建TaskList.vue用于展示任务列表和详情template div classtask-list h2我的报告生成任务/h2 el-table :datatasks stylewidth: 100% el-table-column proptitle label报告标题 width180 / el-table-column propstatus label状态 width120 template #default{ row } el-tag :typegetStatusTagType(row.status) {{ row.status }} /el-tag /template /el-table-column el-table-column propprogress label进度 width100 template #default{ row } el-progress :percentagerow.progress :statusrow.status failed ? exception : / /template /el-table-column el-table-column propsubmittedAt label提交时间 width180 template #default{ row } {{ formatDate(row.submittedAt) }} /template /el-table-column el-table-column label操作 width200 template #default{ row } el-button sizesmall clickviewTaskDetail(row._id)查看详情/el-button el-button sizesmall typeprimary :disabledrow.status ! completed clickdownloadReport(row) 下载报告 /el-button /template /el-table-column /el-table !-- 任务详情抽屉 -- el-drawer v-modeldetailVisible title任务详情 size50% div v-ifcurrentTask h3{{ currentTask.title }}/h3 pstrong状态/strong el-tag :typegetStatusTagType(currentTask.status){{ currentTask.status }}/el-tag/p pstrong提交要求/strong/p el-input typetextarea :rows4 :model-valuecurrentTask.requirements readonly / p v-ifcurrentTask.resultstrong生成结果/strong/p div v-ifcurrentTask.result classresult-preview !-- 这里可以简单预览或者用Markdown渲染器 -- pre{{ currentTask.result.substring(0, 500) }}.../pre /div p v-ifcurrentTask.errorMessage stylecolor: red; strong错误信息/strong {{ currentTask.errorMessage }} /p /div /el-drawer /div /template script setup langts import { ref, onMounted } from vue; import { ElMessage } from element-plus; import { fetchUserTasks, fetchTaskDetail } from /api/taskApi; interface Task { _id: string; title: string; status: string; progress: number; submittedAt: string; requirements?: string; result?: string; errorMessage?: string; } const tasks refTask[]([]); const detailVisible ref(false); const currentTask refTask | null(null); const userId user_123; // 同样实际应从登录状态获取 const getStatusTagType (status: string) { switch(status) { case completed: return success; case processing: return primary; case failed: return danger; default: return info; // pending } }; const formatDate (dateStr: string) { return new Date(dateStr).toLocaleString(); }; const loadTasks async () { try { const response await fetchUserTasks(userId); if (response.success) { tasks.value response.data; } } catch (error) { ElMessage.error(加载任务列表失败); } }; const viewTaskDetail async (taskId: string) { try { const response await fetchTaskDetail(taskId); if (response.success) { currentTask.value response.data; detailVisible.value true; } } catch (error) { ElMessage.error(加载任务详情失败); } }; const downloadReport (task: Task) { if (!task.result) return; // 将文本内容生成一个Blob对象并触发下载 const blob new Blob([task.result], { type: text/markdown }); const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download ${task.title}_${task._id}.md; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; // 页面加载时获取任务列表并设置定时刷新例如每10秒 onMounted(() { loadTasks(); setInterval(loadTasks, 10000); // 简单轮询更新状态 }); /script4.3 封装API请求模块为了让前端代码更清晰我们在src/api/目录下创建taskApi.tsimport axios from axios; // 根据你的后端地址配置 const API_BASE_URL import.meta.env.VITE_API_BASE_URL || http://localhost:3000/api; const apiClient axios.create({ baseURL: API_BASE_URL, timeout: 10000, }); export interface TaskFormData { userId: string; title: string; requirements: string; } export async function submitNewTask(data: TaskFormData) { const response await apiClient.post(/tasks, data); return response.data; } export async function fetchUserTasks(userId: string) { const response await apiClient.get(/tasks/user/${userId}); return response.data; } export async function fetchTaskDetail(taskId: string) { const response await apiClient.get(/tasks/${taskId}); return response.data; }记得在根目录的.env.development文件中配置VITE_API_BASE_URL。最后配置一下路由把这两个页面挂载上去一个简单的、功能完整的前端应用就初具雏形了。运行pnpm dev你就可以在浏览器里体验整个报告生成流程了。5. 总结与展望走完这一趟我们从零开始用Node.js、Express、Redis、Vue和CHORD-X API搭建了一个具备完整流程的报告生成与管理后台。这个系统虽然是一个简化版但已经包含了现代Web应用的核心要素前后端分离、异步任务处理、状态管理和第三方服务集成。实际用下来这种架构的优势很明显。后端通过Bull队列解耦了请求接收和耗时处理服务器再也不会因为一个生成任务而阻塞。前端通过轮询或者更好的方式用WebSocket给用户提供了近乎实时的进度反馈体验上很流畅。而CHORD-X的引入则把最复杂的智能内容生成问题变成了一个简单的API调用。当然这个示例项目还有很多可以完善和深入的地方。比如用户认证与授权用JWT、更精细的队列优先级设置、任务失败后的重试机制、生成结果的格式美化从Markdown转成PDF或Word、前端改用WebSocket实现真正的实时推送、以及更完善的错误处理和日志监控。但最重要的是这个项目为你提供了一个清晰的蓝图和可运行的起点。你可以基于这个骨架根据自己业务的实际需求去添加血肉构建出更强大、更专业的系统。技术本身是工具而如何用这些工具高效、优雅地解决问题才是我们作为开发者不断探索的乐趣所在。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
CHORD-X赋能Node.js全栈开发：构建报告生成与管理后台
发布时间：2026/7/18 4:49:50
CHORD-X赋能Node.js全栈开发构建报告生成与管理后台如果你是一名全栈开发者接到一个需求要做一个能让用户提交报告生成任务然后后台自动处理用户还能实时查看进度和下载结果的Web应用你会从哪里开始过去这种涉及复杂内容生成的后台系统开发起来相当头疼。你需要自己搭建一套文本生成或内容处理的引擎还得考虑并发、队列、状态管理等一系列问题。但现在有了像CHORD-X这样的AI大模型服务事情就变得简单多了。我们可以把最复杂的“内容生成”部分交给它自己则专注于构建一个稳定、易用的Web应用。这篇文章我就来和你聊聊怎么用Node.js作为后端核心快速搭建一个完整的报告生成与管理后台。我们会从前端界面到后端API从任务队列到状态管理一步步把系统跑起来。整个过程就像搭积木一样把各个模块组合起来。1. 项目蓝图我们要做一个什么样的系统在动手写代码之前我们先得把整个系统的轮廓画清楚。这样开发起来才不会东一榔头西一棒槌。简单来说我们的系统需要完成以下几件核心事情用户能提交任务在前端页面用户填写报告的主题、要求等信息然后点击“生成”。后台能排队处理用户提交的任务不会立即执行而是进入一个队列后台按顺序一个个处理避免服务器一下子被压垮。调用AI生成内容轮到某个任务时后端调用CHORD-X的API把用户的要求传过去拿到生成的报告文本。用户能看进度和结果在任务处理过程中用户能在页面上看到“排队中”、“生成中”、“已完成”这样的状态。完成后可以直接下载生成好的报告文档。为了实现这些我们的技术栈可以这样选前端用Vue 3或者React 18都行它们生态丰富组件库多能快速搭建出好看的界面。本文示例会用Vue 3来演示。后端Node.js是我们的主力。Express框架轻量灵活Koa更现代一些两者任选其一。我们用Express来写因为它更常见资料也多。任务队列这是关键。我们需要一个“排队”机制。Redis不仅是个缓存数据库它的List和Sorted Set数据结构非常适合做简单的消息队列。我们会用bull这个库它是基于Redis的用起来特别顺手。数据库用来存用户信息、任务记录等。MongoDB用Mongoose或PostgreSQL用Prisma都可以看团队熟悉哪个。这里为了简单先用MongoDB。核心服务CHORD-X的API。它负责接收我们整理好的提示词然后返回高质量的报告内容。整个系统的数据流你可以想象成一条“流水线”前端提交任务 - 后端接收并存入数据库、扔进Redis队列 - 后台Worker从队列取出任务 - 调用CHORD-X API - 拿到结果后更新数据库状态 - 前端通过轮询或WebSocket看到状态变化 - 用户下载报告。理清了思路我们就可以开始准备“施工场地”了。2. 搭建开发环境从零开始准备磨刀不误砍柴工。我们先得把Node.js、数据库这些基础环境装好。2.1 安装Node.js与包管理器首先确保你的电脑上安装了Node.js。建议使用最新的LTS长期支持版本比如18.x或20.x。你可以去Node.js官网下载安装包或者用nvmNode Version Manager这样的工具来管理多个版本这样切换起来更方便。安装好后打开终端运行下面这两条命令检查一下node --version npm --version如果能正确显示版本号比如v20.11.0和10.2.4那就说明安装成功了。现在更流行的包管理器是yarn或者pnpm它们比npm速度更快、管理依赖更清晰。我个人喜欢用pnpm。你可以用npm全局安装它npm install -g pnpm安装后用pnpm --version确认一下。2.2 初始化后端项目找个你喜欢的目录新建一个文件夹比如叫report-gen-backend然后进入这个文件夹。mkdir report-gen-backend cd report-gen-backend用pnpm初始化一个新的Node.js项目pnpm init一路回车或者根据提示填写项目名称、描述等信息。这会生成一个package.json文件。接下来安装我们后端需要的核心依赖pnpm add express cors dotenv mongoose bull pnpm add -D nodemon typescript types/node types/express types/cors我来解释一下这些包是干嘛的express我们的Web框架。cors处理跨域请求因为前端和后端通常是分开部署的。dotenv用来加载环境变量把像CHORD-X API密钥这种敏感信息从代码里分离出去。mongooseMongoDB的对象模型工具用起来更面向对象。bull基于Redis的任务队列库。以-D安装的是开发依赖nodemon用于开发时自动重启typescript和相关types包是为了获得更好的类型提示如果你用TypeScript的话。2.3 准备数据库与RedisMongoDB你可以去MongoDB官网下载安装或者直接用它们提供的云服务MongoDB Atlas免费套餐就够我们开发测试用了。在Atlas上创建一个集群拿到连接字符串Connection String。Redis同样可以本地安装也可以用云服务。Redis官方也提供了云服务Redis Cloud有免费额度。本地安装的话可以去Redis官网下载或者用Docker跑一个docker run -d -p 6379:6379 --name redis-stack redis/redis-stack:latest这条命令会在本地6379端口启动一个带图形管理界面的Redis。环境准备好了我们创建两个关键的配置文件。首先在项目根目录创建.env文件存放所有敏感配置# 服务器端口 PORT3000 # MongoDB连接字符串请替换成你自己的 MONGODB_URImongodbsrv://username:passwordcluster0.xxxxx.mongodb.net/report_gen?retryWritestruewmajority # Redis连接信息如果是本地默认安装可以这样写 REDIS_HOSTlocalhost REDIS_PORT6379 # 如果Redis有密码 # REDIS_PASSWORDyourpassword # CHORD-X API 配置 CHORDX_API_KEYyour_chordx_api_key_here CHORDX_API_BASE_URLhttps://api.chordx.ai/v1切记这个.env文件要添加到.gitignore里千万不要提交到代码仓库。然后创建一个src/config/index.ts文件来集中管理配置import dotenv from dotenv; dotenv.config(); export default { port: process.env.PORT || 3000, mongodbUri: process.env.MONGODB_URI || mongodb://localhost:27017/report_gen, redis: { host: process.env.REDIS_HOST || localhost, port: parseInt(process.env.REDIS_PORT || 6379, 10), // password: process.env.REDIS_PASSWORD }, chordx: { apiKey: process.env.CHORDX_API_KEY!, apiBaseUrl: process.env.CHORDX_API_BASE_URL!, } };这样我们在代码里就可以通过import config from ./config来安全地使用这些配置了。3. 构建后端核心API、队列与Worker环境配置妥当我们可以开始写后端的“硬核”代码了。这部分是系统的大脑。3.1 设计数据模型我们先定义数据长什么样。在src/models/目录下创建两个文件第一个是User.ts用户模型这里简化处理实际项目会更复杂import mongoose, { Schema, Document } from mongoose; export interface IUser extends Document { username: string; email: string; createdAt: Date; } const UserSchema: Schema new Schema({ username: { type: String, required: true, unique: true }, email: { type: String, required: true, unique: true }, createdAt: { type: Date, default: Date.now } }); export default mongoose.modelIUser(User, UserSchema);第二个是ReportTask.ts报告任务模型这是核心import mongoose, { Schema, Document } from mongoose; // 定义任务状态的几种可能 export enum TaskStatus { PENDING pending, // 排队中 PROCESSING processing, // 生成中 COMPLETED completed, // 已完成 FAILED failed // 失败 } export interface IReportTask extends Document { userId: mongoose.Types.ObjectId; // 关联的用户ID title: string; // 报告标题 requirements: string; // 用户填写的具体要求 status: TaskStatus; // 任务状态 progress: number; // 进度百分比 (0-100) result?: string; // 最终生成的报告内容Markdown或HTML errorMessage?: string; // 如果失败错误信息 submittedAt: Date; // 提交时间 startedAt?: Date; // 开始处理时间 completedAt?: Date; // 完成时间 } const ReportTaskSchema: Schema new Schema({ userId: { type: Schema.Types.ObjectId, ref: User, required: true }, title: { type: String, required: true }, requirements: { type: String, required: true }, status: { type: String, enum: Object.values(TaskStatus), default: TaskStatus.PENDING }, progress: { type: Number, default: 0, min: 0, max: 100 }, result: { type: String }, errorMessage: { type: String }, submittedAt: { type: Date, default: Date.now }, startedAt: { type: Date }, completedAt: { type: Date } }); export default mongoose.modelIReportTask(ReportTask, ReportTaskSchema);这个模型记录了任务的整个生命周期。3.2 创建Express服务器与路由接下来在src/app.ts里创建我们的Express应用import express from express; import cors from cors; import mongoose from mongoose; import config from ./config; import taskRoutes from ./routes/taskRoutes; const app express(); // 中间件 app.use(cors()); // 允许前端跨域请求 app.use(express.json()); // 解析JSON格式的请求体 // 连接数据库 mongoose.connect(config.mongodbUri) .then(() console.log(✅ MongoDB连接成功)) .catch(err console.error(❌ MongoDB连接失败:, err)); // 路由 app.use(/api/tasks, taskRoutes); // 健康检查端点 app.get(/health, (req, res) { res.json({ status: ok, timestamp: new Date().toISOString() }); }); // 启动服务器 const PORT config.port; app.listen(PORT, () { console.log( 后端服务器运行在 http://localhost:${PORT}); });然后在src/routes/taskRoutes.ts里定义具体的API接口import { Router } from express; import ReportTask, { TaskStatus } from ../models/ReportTask; import { queue } from ../services/queueService; // 稍后我们会创建这个队列服务 const router Router(); // 1. 提交一个新的报告生成任务 router.post(/, async (req, res) { try { const { userId, title, requirements } req.body; // 创建任务记录初始状态为PENDING const newTask new ReportTask({ userId, title, requirements, status: TaskStatus.PENDING }); await newTask.save(); // 将任务ID加入到Bull队列中 await queue.add(generate-report, { taskId: newTask._id.toString() }); res.status(201).json({ success: true, message: 报告任务已提交正在排队中, data: { taskId: newTask._id } }); } catch (error) { console.error(提交任务失败:, error); res.status(500).json({ success: false, message: 服务器内部错误 }); } }); // 2. 获取单个任务的详情与状态 router.get(/:taskId, async (req, res) { try { const task await ReportTask.findById(req.params.taskId); if (!task) { return res.status(404).json({ success: false, message: 任务不存在 }); } res.json({ success: true, data: task }); } catch (error) { res.status(500).json({ success: false, message: 查询失败 }); } }); // 3. 获取用户的所有任务列表 router.get(/user/:userId, async (req, res) { try { const tasks await ReportTask.find({ userId: req.params.userId }) .sort({ submittedAt: -1 }); // 按提交时间倒序排列 res.json({ success: true, data: tasks }); } catch (error) { res.status(500).json({ success: false, message: 查询失败 }); } }); export default router;这三个API接口分别对应了提交任务、查询单个任务状态、查询用户任务列表构成了前后端交互的基础。3.3 实现任务队列与Worker现在来到最精彩的部分让任务在后台自动运行。我们在src/services/目录下创建两个文件。首先是queueService.ts用于创建和管理Bull队列import Bull from bull; import config from ../config; // 创建一个名为reportQueue的队列连接到我们的Redis export const queue new Bull(reportQueue, { redis: config.redis }); // 你可以在这里添加一些队列级别的事件监听比如任务完成、失败等用于监控和日志 queue.on(completed, (job) { console.log(任务 ${job.id} 已完成); }); queue.on(failed, (job, err) { console.error(任务 ${job.id} 失败:, err); });接着是workerService.ts这是真正的“工人”负责处理队列里的任务import { queue } from ./queueService; import ReportTask, { TaskStatus } from ../models/ReportTask; import { generateReportWithChordX } from ./chordxService; // 这是调用CHORD-X的函数下面会写 // 定义如何处理“generate-report”这个类型的任务 queue.process(generate-report, async (job) { const { taskId } job.data; console.log(开始处理任务: ${taskId}); const task await ReportTask.findById(taskId); if (!task) { throw new Error(任务 ${taskId} 不存在); } try { // 1. 更新任务状态为“处理中” task.status TaskStatus.PROCESSING; task.startedAt new Date(); task.progress 10; // 象征性地设置一个初始进度 await task.save(); // 2. 调用CHORD-X API生成报告内容 // 这里我们把用户的需求整理成更详细的提示词 const prompt 请生成一份关于“${task.title}”的详细报告。具体要求如下\n${task.requirements}\n请确保报告结构清晰内容专业。; const reportContent await generateReportWithChordX(prompt); // 模拟进度更新在实际中如果API支持流式或分步可以更真实地更新进度 task.progress 100; // 3. 任务成功保存结果 task.status TaskStatus.COMPLETED; task.result reportContent; task.completedAt new Date(); await task.save(); console.log(任务 ${taskId} 处理完成); return { success: true, contentLength: reportContent.length }; } catch (error: any) { console.error(处理任务 ${taskId} 时出错:, error); // 4. 任务失败记录错误信息 task.status TaskStatus.FAILED; task.errorMessage error.message || 未知错误; task.completedAt new Date(); await task.save(); throw error; // 抛出错误让Bull知道任务失败了 } });这个Worker会一直监听reportQueue队列。一旦有新的generate-report任务进来它就会被自动触发执行。3.4 集成CHORD-X API最后我们来实现与CHORD-X交互的服务层chordxService.tsimport axios from axios; import config from ../config; // 一个简单的函数调用CHORD-X的文本生成接口 export async function generateReportWithChordX(prompt: string): Promisestring { try { const response await axios.post( ${config.chordx.apiBaseUrl}/chat/completions, // 假设这是CHORD-X的聊天补全端点 { model: chord-x-latest, // 指定使用的模型根据CHORD-X文档来填 messages: [ { role: system, content: 你是一个专业的报告撰写助手。 }, { role: user, content: prompt } ], max_tokens: 2000, // 控制生成报告的长度 temperature: 0.7, // 控制创造性0.7比较平衡 }, { headers: { Authorization: Bearer ${config.chordx.apiKey}, Content-Type: application/json } } ); // 假设返回结构是 { choices: [{ message: { content: ... } }] } const generatedText response.data.choices[0]?.message?.content; if (!generatedText) { throw new Error(CHORD-X API返回内容为空); } return generatedText; } catch (error: any) { console.error(调用CHORD-X API失败:, error.response?.data || error.message); throw new Error(报告生成失败: ${error.message}); } }请注意上面的API端点、请求体和响应结构都是我假设的。在实际开发中你必须查阅CHORD-X官方的API文档使用正确的端点、参数和模型名称。这是项目能成功运行的关键一步。至此我们后端的核心部分就搭建完成了。你可以运行nodemon src/app.ts来启动服务器它会自动连接MongoDB和Redis并启动Worker进程。4. 打造前端界面让用户用起来后端在默默工作前端则需要提供一个友好的界面给用户。我们用Vue 3来快速实现。4.1 初始化Vue项目并安装依赖在你的工作区另起一个文件夹比如report-gen-frontend用Vite快速创建项目pnpm create vuelatest按照提示操作项目名就用默认的并选择安装TypeScript、Router、Pinia状态管理等。进入项目安装我们需要的额外依赖UI组件库和HTTP客户端。这里用Element Plus和Axioscd report-gen-frontend pnpm add axios element-plus element-plus/icons-vue pnpm add -D sass4.2 创建任务提交与状态查看页面我们主要做两个页面一个是提交新任务的表单页另一个是查看任务列表和详情的页面。首先在src/views/目录下创建TaskSubmit.vuetemplate div classtask-submit h2提交新的报告生成任务/h2 el-form :modelform :rulesrules refformRef label-width100px el-form-item label报告标题 proptitle el-input v-modelform.title placeholder例如2024年Q1市场分析报告 / /el-form-item el-form-item label详细要求 proprequirements el-input v-modelform.requirements typetextarea :rows6 placeholder请详细描述你希望报告包含哪些内容、结构、风格等。越详细生成效果越好。 / /el-form-item el-form-item el-button typeprimary clicksubmitTask :loadingsubmitting 提交生成任务 /el-button /el-form-item /el-form el-dialog v-modeldialogVisible title任务已提交 width30% p你的报告生成任务已成功提交/p p任务ID: strong{{ newTaskId }}/strong/p p你可以在“我的任务”页面查看进度和结果。/p template #footer el-button clickgoToTaskList查看我的任务/el-button el-button typeprimary clickdialogVisible false继续提交/el-button /template /el-dialog /div /template script setup langts import { ref, reactive } from vue; import { ElMessage, type FormInstance, type FormRules } from element-plus; import { useRouter } from vue-router; import { submitNewTask } from /api/taskApi; // 稍后我们会封装API const router useRouter(); const formRef refFormInstance(); const submitting ref(false); const dialogVisible ref(false); const newTaskId ref(); const form reactive({ title: , requirements: , userId: user_123 // 这里简化实际应从登录状态获取 }); const rules: FormRules { title: [{ required: true, message: 请输入报告标题, trigger: blur }], requirements: [{ required: true, message: 请输入详细要求, trigger: blur }] }; const submitTask async () { if (!formRef.value) return; const valid await formRef.value.validate(); if (!valid) return; submitting.value true; try { const response await submitNewTask(form); if (response.success) { newTaskId.value response.data.taskId; dialogVisible.value true; // 清空表单 formRef.value.resetFields(); } else { ElMessage.error(response.message || 提交失败); } } catch (error) { ElMessage.error(网络请求失败); } finally { submitting.value false; } }; const goToTaskList () { dialogVisible.value false; router.push(/tasks); }; /script然后创建TaskList.vue用于展示任务列表和详情template div classtask-list h2我的报告生成任务/h2 el-table :datatasks stylewidth: 100% el-table-column proptitle label报告标题 width180 / el-table-column propstatus label状态 width120 template #default{ row } el-tag :typegetStatusTagType(row.status) {{ row.status }} /el-tag /template /el-table-column el-table-column propprogress label进度 width100 template #default{ row } el-progress :percentagerow.progress :statusrow.status failed ? exception : / /template /el-table-column el-table-column propsubmittedAt label提交时间 width180 template #default{ row } {{ formatDate(row.submittedAt) }} /template /el-table-column el-table-column label操作 width200 template #default{ row } el-button sizesmall clickviewTaskDetail(row._id)查看详情/el-button el-button sizesmall typeprimary :disabledrow.status ! completed clickdownloadReport(row) 下载报告 /el-button /template /el-table-column /el-table !-- 任务详情抽屉 -- el-drawer v-modeldetailVisible title任务详情 size50% div v-ifcurrentTask h3{{ currentTask.title }}/h3 pstrong状态/strong el-tag :typegetStatusTagType(currentTask.status){{ currentTask.status }}/el-tag/p pstrong提交要求/strong/p el-input typetextarea :rows4 :model-valuecurrentTask.requirements readonly / p v-ifcurrentTask.resultstrong生成结果/strong/p div v-ifcurrentTask.result classresult-preview !-- 这里可以简单预览或者用Markdown渲染器 -- pre{{ currentTask.result.substring(0, 500) }}.../pre /div p v-ifcurrentTask.errorMessage stylecolor: red; strong错误信息/strong {{ currentTask.errorMessage }} /p /div /el-drawer /div /template script setup langts import { ref, onMounted } from vue; import { ElMessage } from element-plus; import { fetchUserTasks, fetchTaskDetail } from /api/taskApi; interface Task { _id: string; title: string; status: string; progress: number; submittedAt: string; requirements?: string; result?: string; errorMessage?: string; } const tasks refTask[]([]); const detailVisible ref(false); const currentTask refTask | null(null); const userId user_123; // 同样实际应从登录状态获取 const getStatusTagType (status: string) { switch(status) { case completed: return success; case processing: return primary; case failed: return danger; default: return info; // pending } }; const formatDate (dateStr: string) { return new Date(dateStr).toLocaleString(); }; const loadTasks async () { try { const response await fetchUserTasks(userId); if (response.success) { tasks.value response.data; } } catch (error) { ElMessage.error(加载任务列表失败); } }; const viewTaskDetail async (taskId: string) { try { const response await fetchTaskDetail(taskId); if (response.success) { currentTask.value response.data; detailVisible.value true; } } catch (error) { ElMessage.error(加载任务详情失败); } }; const downloadReport (task: Task) { if (!task.result) return; // 将文本内容生成一个Blob对象并触发下载 const blob new Blob([task.result], { type: text/markdown }); const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download ${task.title}_${task._id}.md; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; // 页面加载时获取任务列表并设置定时刷新例如每10秒 onMounted(() { loadTasks(); setInterval(loadTasks, 10000); // 简单轮询更新状态 }); /script4.3 封装API请求模块为了让前端代码更清晰我们在src/api/目录下创建taskApi.tsimport axios from axios; // 根据你的后端地址配置 const API_BASE_URL import.meta.env.VITE_API_BASE_URL || http://localhost:3000/api; const apiClient axios.create({ baseURL: API_BASE_URL, timeout: 10000, }); export interface TaskFormData { userId: string; title: string; requirements: string; } export async function submitNewTask(data: TaskFormData) { const response await apiClient.post(/tasks, data); return response.data; } export async function fetchUserTasks(userId: string) { const response await apiClient.get(/tasks/user/${userId}); return response.data; } export async function fetchTaskDetail(taskId: string) { const response await apiClient.get(/tasks/${taskId}); return response.data; }记得在根目录的.env.development文件中配置VITE_API_BASE_URL。最后配置一下路由把这两个页面挂载上去一个简单的、功能完整的前端应用就初具雏形了。运行pnpm dev你就可以在浏览器里体验整个报告生成流程了。5. 总结与展望走完这一趟我们从零开始用Node.js、Express、Redis、Vue和CHORD-X API搭建了一个具备完整流程的报告生成与管理后台。这个系统虽然是一个简化版但已经包含了现代Web应用的核心要素前后端分离、异步任务处理、状态管理和第三方服务集成。实际用下来这种架构的优势很明显。后端通过Bull队列解耦了请求接收和耗时处理服务器再也不会因为一个生成任务而阻塞。前端通过轮询或者更好的方式用WebSocket给用户提供了近乎实时的进度反馈体验上很流畅。而CHORD-X的引入则把最复杂的智能内容生成问题变成了一个简单的API调用。当然这个示例项目还有很多可以完善和深入的地方。比如用户认证与授权用JWT、更精细的队列优先级设置、任务失败后的重试机制、生成结果的格式美化从Markdown转成PDF或Word、前端改用WebSocket实现真正的实时推送、以及更完善的错误处理和日志监控。但最重要的是这个项目为你提供了一个清晰的蓝图和可运行的起点。你可以基于这个骨架根据自己业务的实际需求去添加血肉构建出更强大、更专业的系统。技术本身是工具而如何用这些工具高效、优雅地解决问题才是我们作为开发者不断探索的乐趣所在。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
