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

背景：

最近已经裁员潮了，前端已凉，为了后续还能找到工作或者对自己的提升，现在记录尝试开始转AI全栈，因为本人是前端，不具备任何的后端知识，所以直接一步尝试简单的AI全栈，先把思维先扭转过来，后续再一步步提升。

阶段 1：能从前端 fetch 到你自己写的后端

目前先走第一步：

现在我满是前端的电脑先搭建后端，先学会生成自己的一个API，能调通先

基于目前我的环境有这些工具：有nodejs，有vscode，我会vue，ai开发工具是codex

还没真正写过后端

你现在这一阶段 只要完成一件事：
目标只有一个：

👉 用 Vue 调用一个你自己写的 Node 后端接口

👉 不接 AI、不接数据库、不做鉴权

完成这一步，你就正式进入 AI 全栈赛道。

非常重要的心态说明（先说清楚）

• 你现在 不是在"学后端"
• 你是在 给前端找一个"中间人"
• 这个中间人将来才会去找 AI（第二步）

第一步整体结构（先看全貌）

ai-demo/

├─ server/ ← 你新学的（Node 后端）

│ └─ index.js └─ web/ ← 你熟悉的（Vue））

👉 前端和后端是两个独立项目，用 HTTP 通信

1 步：创建后端项目（你现在就做）

1️⃣ 新建一个文件夹（任意地方）

mkdir ai-demo
cd ai-demo

2️⃣ 创建后端目录

mkdir server
cd server

3️⃣ 初始化 Node 项目

npm init -y

你会看到一个 package.json，这一步成功就行。

4️⃣ 安装最基础的后端框架（Express）

npm 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

后续继续