前端想转AI全栈-初步练习记录

背景最近已经裁员潮了前端已凉为了后续还能找到工作或者对自己的提升现在记录尝试开始转AI全栈因为本人是前端不具备任何的后端知识所以直接一步尝试简单的AI全栈先把思维先扭转过来后续再一步步提升。阶段 1能从前端 fetch 到你自己写的后端目前先走第一步现在我满是前端的电脑先搭建后端先学会生成自己的一个API能调通先基于目前我的环境有这些工具有nodejs有vscode我会vueai开发工具是codex还没真正写过后端你现在这一阶段只要完成一件事目标只有一个 用 Vue 调用一个你自己写的 Node 后端接口 不接 AI、不接数据库、不做鉴权完成这一步你就正式进入 AI 全栈赛道。非常重要的心态说明先说清楚你现在不是在“学后端”你是在给前端找一个“中间人”这个中间人将来才会去找 AI第二步第一步整体结构先看全貌ai-demo/├─ server/ ← 你新学的Node 后端│ └─ index.js └─ web/ ← 你熟悉的Vue前端和后端是两个独立项目用 HTTP 通信1 步创建后端项目你现在就做1️⃣ 新建一个文件夹任意地方mkdir ai-demo cd ai-demo2️⃣ 创建后端目录mkdir server cd server3️⃣ 初始化 Node 项目npm init -y你会看到一个package.json这一步成功就行。4️⃣ 安装最基础的后端框架Expressnpm install express为什么是 Express因为概念最少文档最多非常适合你这种「前端转后端第一天」第 2 步写你第一个后端接口核心1️⃣ 在server目录下创建index.js完整复制粘贴下面代码const express require(express) const app express() const PORT 3001 // 让后端能解析 JSON app.use(express.json()) // 定义一个 API 接口 app.post(/api/chat, (req, res) { const userMessage req.body.message console.log(收到前端消息, userMessage) // 先假装这是 AI 的回复 res.json({ reply: 后端收到你的话 userMessage }) }) app.listen(PORT, () { console.log(✅ 后端已启动http://localhost:${PORT}) })现在不用理解每一行你只要知道三点/api/chat是一个接口它接收前端传来的内容它返回一个 JSON后续继续