🧠 全栈之旅：构建后端与 REST API

Source: Dev.to

Hey fellow developers! 👋
在我的上一篇文章中，我专注于升级前端 UI 和 UX。界面看起来更好看了，但仍缺少真实应用的全栈感。这篇文章全部围绕 后端——真正让项目变得严肃的地方。

为什么必须添加后端

最初我想要一个后端来练习并提升我的后端技能。从应用的角度来看，后端是必不可少的，因为它可以：

• 📚 大量的名言数据
• 🤖 未来的 AI 可扩展性
• 🗂️ 基于分类的过滤

如果全部在前端处理，既混乱又不现实。有了后端，解决方案就变得简洁且易于管理。

后端搭建与结构

技术栈

• Node.js + Express → REST API
• MongoDB（本地使用 Compass）→ 数据库
• Render → 后端部署（后续文章会详细说明）

项目结构

/
├── index.html
├── style.css
├── script.js
├── backend/
│   ├── server.js
│   └── models/
│       └── Quote.js
└── README.md

Schema 创建

后端的核心是 quote schema：

const quoteSchema = new mongoose.Schema({
  text: { type: String, required: true },
  author: { type: String, required: true },
  category: { type: String, required: true }
});

工作原理

1. 前端点击分类按钮。
2. 向后端发送请求。
3. 后端按分类过滤名言。
4. 将文本和作者返回。
5. 在用户界面显示名言。

将后端连接到前端

在 script.js（原 index.js）中，我创建了 fetchQuotes() 函数：

async function fetchQuotes(category = null) {
  try {
    const url = category
      ? `${API_URL}/quotes/category/${category}`
      : `${API_URL}/quotes`;

    const res = await fetch(url);
    const quotes = await res.json();

    usedQuotes = [];
    usedColours = [];
    newQuote();
  } catch (err) {
    console.error("Backend not available:", err);
  }
}

fetchQuotes();

目前 API_URL 指向 localhost。以后会切换为已部署的后端 URL，这也为下一篇文章埋下伏笔。

本地最终效果

在我的本地系统上一切运行良好：

• 名言从后端获取。
• 分类过滤正常。
• 不再有硬编码的数据。

剩下的就是部署了。

接下来会有什么

在下一篇文章中，我将介绍：

• 🌐 前端部署 → GitHub Pages
• ☁️ 后端部署 → Render
• 🧪 实时数据调试
• 🔄 MongoDB Compass → MongoDB Atlas

敬请期待下一次更新！ 😄🔥