快速搭建 API：用 json-server + 原生前端实现用户列表（零编码后端）

在学习前后端交互时，我们常常需要一个“现成的 API”来测试前端逻辑。手动编写 Node.js 服务虽然能加深理解，但在快速验证 UI 或练习 fetch 调用时，显得有些繁琐。

好消息是：你可以用 json-server 在 1 分钟内启动一个完整的 RESTful API 服务，无需写一行后端代码！

本文将基于你原有的前端代码，展示如何通过 json-server 自动生成 /users 接口，并用 npm run dev 一键启动服务，最终实现动态用户列表渲染。

---

一、前端代码：完全复用你的原始实现

你的 HTML + JavaScript 代码无需任何修改，依然保持简洁高效：

html
预览



  
  
  User List
  
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f4f4f4;
    }
  


  <h1>Users</h1>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>

  
    // ✅ 调用 json-server 自动生成的 /users 接口
    fetch('http://localhost:3000/users')
      .then(response => response.json())
      .then(data => {
        const tbody = document.querySelector('tbody');
        tbody.innerHTML = data.map(user => `
          <tr>
            <td>${user.id}</td>
            <td>${user.name}</td>
            <td>${user.email}</td>
          </tr>
        `).join('');
      })
      .catch(error => {
        console.error('获取数据失败:', error);
        document.querySelector('tbody').innerHTML = `
          <tr><td colspan="3">请先运行 npm run dev 启动 API 服务</td></tr>
        `;
      });
  

💡 关键点：

• 请求地址为 http://localhost:3000/users —— 这正是 json-server 的默认行为；
• 前端逻辑完全不变，体现了“接口契约”思想：只要后端返回相同结构的 JSON，前端无需改动。

---

二、准备数据文件：db.json

json-server 的核心是一个 JSON 格式的数据文件，它会自动根据该文件生成对应的 REST API。

创建 db.json 文件，内容如下：

json
编辑
{
  "users": [
    {
      "id": 1,
      "name": "舒俊",
      "email": "123@qq.com"
    },
    {
      "id": 2,
      "name": "陈俊璋",
      "email": "1232@qq.com"
    },
    {
      "id": 3,
      "name": "徐行",
      "email": "121@qq.com"
    }
  ]
}

🔍 规则说明：

• json-server 会把 JSON 对象的每个顶层属性名当作资源名；
• 因此 users 数组会自动生成 /users 路由；
• 支持 GET/POST/PUT/DELETE 等操作（本例只用到 GET）。

---

三、配置 package.json：添加 dev 脚本

在项目根目录创建或修改 package.json，加入 json-server 依赖和启动脚本：

json
编辑
{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "json-server --watch db.json"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "json-server": "^1.0.0-beta.3"
  }
}

关键字段解释：

字段	作用
"dev": "json-server --watch db.json"	定义 npm run dev 命令，启动服务并监听 db.json 变化
--watch	当 db.json 内容修改时，API 数据自动更新，无需重启
json-server	默认监听 3000 端口，提供 /users、/users/1 等路由

---

四、启动服务 & 查看效果

1. 安装依赖（首次运行）：

   bash
   编辑
   npm install
   

2. 启动 API 服务：

   bash
   编辑
   npm run dev
   

3. 终端将显示：

   text
   编辑
   {^_^}/ hi!
   
   Done
   
   Resources
   http://localhost:3000/users
   
   Home
   http://localhost:3000
   

4. 打开浏览器访问 http://localhost:3000/users，你会看到：

   json
   编辑
   [
     {"id":1,"name":"舒俊","email":"123@qq.com"},
     {"id":2,"name":"陈俊璋","email":"1232@qq.com"},
     {"id":3,"name":"徐行","email":"121@qq.com"}
   ]
   

5. 再打开你的 index.html（建议用 Live Server 或本地 HTTP 服务器），即可看到表格成功加载！

⚠️ 注意：如果直接双击 HTML 文件（file:// 协议），部分浏览器会因 CORS 策略阻止请求。推荐使用 VS Code 的 Live Server 插件 启动前端（如 http://127.0.0.1:5500），此时 fetch 到 localhost:3000 属于跨域，但 json-server 默认已开启 CORS，所以能正常工作。

---

五、json-server vs 原生 Node.js：如何选择？

方案	适用场景	优点	缺点
json-server	快速原型、教学演示、前端 Mock 数据	⚡ 零编码、自动 REST API、支持 CRUD、热重载	❌ 不适合生产环境，无权限控制、无真实数据库
原生 Node.js	学习底层原理、构建真实后端	🧠 深入理解 HTTP、路由、CORS、流等机制	🕒 开发效率低，需手动处理细节

✅ 建议：

• 学习阶段：先用 json-server 快速验证前端逻辑；
• 进阶阶段：再手写 Node.js 服务，理解“背后发生了什么”。

---

六、总结要点

概念	说明
db.json	数据源文件，顶层 key 自动转为 API 路由（如 users → /users）
npm run dev	执行 json-server --watch db.json，启动开发服务器
默认端口	3000，可通过 --port 参数修改
CORS 支持	json-server 默认允许跨域，前端可安全调用
前端兼容性	你的原始 fetch 代码无需任何修改，无缝对接
热更新	修改 db.json 后，API 数据立即生效，无需重启