前端和后端不是两个页面，而是两个运行地点

一句话理解

前端是在用户浏览器里运行的页面代码；后端是在服务器上运行、对外提供 API 的代码。

区分它们最可靠的问题不是“文件看起来像什么”，而是：这段代码最终在哪里执行？

用餐厅理解

前端    顾客看到的菜单、点单按钮和取餐屏幕
后端    厨房里的接单、权限、做菜规则和库存处理
API     前台把订单送进厨房的窗口
数据库  厨房长期保存的订单本和库存账

顾客可以看到菜单，但不能拿到厨房保险柜钥匙。浏览器可以看到前端代码，所以秘密 Key 不能放在前端。

AI 留言板里，前端具体做什么

文件可能是：

src/App.tsx
src/components/MessageForm.tsx
src/components/MessageList.tsx
src/api/messages.ts

它负责：

1. 显示输入框和按钮。
2. 记住用户当前输入的文字。
3. 点击时调用 fetch。
4. 显示“保存中”“保存失败”等状态。
5. 收到新留言后更新列表。

一个简化前端：

function MessageForm() {
  const [text, setText] = useState('')

  async function handleSubmit() {
    const response = await fetch('/api/messages', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ text })
    })

    const savedMessage = await response.json()
    console.log(savedMessage)
  }

  return <button onClick={handleSubmit}>保存留言</button>
}

逐段看：

useState        只记住当前页面这次打开期间的输入
onClick         用户点击后进入 handleSubmit
fetch           请求后端 API
POST            表示准备新建一条留言
JSON.stringify  把 JavaScript 对象转成可以发送的 JSON 文本
response.json   把后端返回的 JSON 读成 JavaScript 数据

后端具体做什么

文件可能是：

server/index.ts
server/routes/messages.ts
server/db.ts

它负责：

1. 接收 POST /api/messages。
2. 检查用户是否登录。
3. 检查 text 是否为空、是否过长。
4. 调用数据库写入留言。
5. 返回状态码和 JSON。

一个简化 Express 后端：

app.post('/api/messages', async (req, res) => {
  const text = req.body.text

  if (!text || !text.trim()) {
    return res.status(400).json({ error: '留言不能为空' })
  }

  const message = await db.messages.create({ text })
  return res.status(201).json(message)
})

后端不负责按钮颜色，却负责“空留言不能保存”这种最终业务规则。即使前端已经限制空内容，后端仍然要检查，因为别人可以绕过页面直接请求 API。

为什么前端代码不能保存秘密

前端代码会下载到用户浏览器。用户可以用开发者工具查看 JavaScript、Network 和页面中的公开变量。

下面做法不安全：

const AI_API_KEY = '真实密钥'

即使变量名很隐蔽、代码被压缩，真实值仍可能被提取。

正确路线：

浏览器前端
  ↓ 请求自己的后端
自己的后端读取服务器环境变量
  ↓ 调用第三方 AI API
后端只把需要的结果返回前端

同一个项目里怎样判断文件属于哪边

常见前端线索

React 组件
useState、useEffect
document、window
onClick、input
CSS、Tailwind

常见后端线索

app.get、app.post
Flask 的 @app.route
Next.js app/api 下的 route.ts
数据库管理员连接
process.env 或 os.environ
服务器文件系统

这些只是线索，真正判断仍是运行地点。

三种常见架构不要混

纯前端静态网站

只有页面、文章、作品集。没有自己的登录、数据库写入和秘密 API Key。可以部署到静态托管。

前端加第三方后端服务

React 页面直接使用 Supabase 等服务的受限客户端。公开 Key 可以进前端，但安全依赖数据库权限策略；管理员密钥仍然不能进前端。

自己的前端加自己的后端

浏览器请求 Flask、Express 或 Next.js API。后端再访问数据库和第三方 API。

出错时两边分别看哪里

按钮没反应、白屏、state 不更新     浏览器 Console
请求地址、状态码、发送数据不对      浏览器 Network
500、数据库连接、环境变量错误        后端终端或平台日志
写入成功但刷新消失                  数据库和持久化逻辑

前端已经检查留言不能为空，后端还需要再检查吗？

答案：需要。前端检查改善用户体验，但请求可以绕过页面直接发送。后端必须执行最终业务规则和权限验证。