从零搭建一个全栈项目：前后端分离 + DOM 动态渲染实战

本文记录了通过搭建一个 user-chat 项目，从零实践前后端分离开发的全过程。涵盖 HTML 语义化标签、Bootstrap 布局、DOM 编程、json-server 模拟后端 API 等核心知识点。

前言

作为一名前端学习者，今天终于从"零散知识点"跨越到了完整项目实战。我们搭建了一个 user-chat 项目，实现了前端页面 + 后端 API 的前后端分离架构。

这篇文章将完整复盘整个开发过程，从项目结构设计到前后端联调，帮你理解全栈开发的基本流程。

一、项目架构：前后端分离

1.1 为什么需要前后端分离？

css 复制代码

传统开发（前后端混在一起）
├── 一个项目里 HTML + CSS + JS + 后端代码
├── 难以维护、难以扩展
└── 团队协作困难

前后端分离（现代开发）
├── fe/ 前端项目（专注页面和交互）
│   ├── index.html
│   ├── common.js
│   └── css/
│
└── be/ 后端项目（专注数据和接口）
    ├── package.json
    └── db.json

1.2 模块化设计思想

每个文件夹有职责划分，每个文件只做一件事。

目录/文件	职责
`index.html`	页面结构（骨架）
`common.js`	页面行为（逻辑）
`db.json`	模拟数据库
`package.json`	后端项目配置

二、前端开发：HTML + CSS + JS 三权分立

2.1 HTML：语义化标签构建页面骨架

不要 div 标签满天飞！ 大厂面试特别注重 HTML 语义化。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS 在头部引入，尽早渲染 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- 语义化标签替代 div -->
    <header>顶部导航</header>

    <main class="container">
        <aside>侧边栏</aside>
        <div class="row col-md-6 col-md-offset-3">
            <table class="table table-striped" id="user-table">
                <thead>
                    <tr>
                        <td>ID</td>
                        <td>姓名</td>
                        <td>家乡</td>
                        <td>昵称</td>
                    </tr>
                </thead>
                <tbody>
                    <!-- JS 动态填充 -->
                </tbody>
            </table>
        </div>
        <aside>侧边栏</aside>
    </main>

    <footer>底部信息</footer>

    <!-- JS 在 body 结束前引入，不阻塞渲染 -->
    <script src="./common.js"></script>
</body>
</html>

2.2 语义化标签 vs div

语义化标签	含义	替代的 div
`<header>`	页头区域	`<div class="header">`
`<footer>`	页脚区域	`<div class="footer">`
`<main>`	主要内容	`<div class="main">`
`<aside>`	侧边栏	`<div class="sidebar">`
`<nav>`	导航区域	`<div class="nav">`

💡 为什么语义化重要？

搜索引擎能更好地理解页面结构（SEO）

屏幕阅读器能更好地辅助无障碍访问

代码可读性更强，团队协作更高效

2.3 HTML 标签的两大类

css 复制代码

HTML 标签分类

┌─────────────────────────────────────┐
│  块级元素（Block）                    │
│  - 默认占据一整行                     │
│  - 用来做"盒子"（布局容器）            │
│  - div, p, h1-h6, table, header...   │
├─────────────────────────────────────┤
│  行内元素（Inline）                   │
│  - 不会独占一行                       │
│  - 兄弟元素可以"相安无事"排在一行       │
│  - span, a, strong, em...            │
└─────────────────────────────────────┘

先写盒子，再写内容------这是前端布局的核心思路。

2.4 table 的语义化结构

表格也有语义化标签，<thead> + <tbody> 是关键：

html 复制代码

<table>
    <thead>
        <tr>
            <td>ID</td>
            <td>姓名</td>
        </tr>
    </thead>
    <tbody>
        <!-- 数据行由 JS 动态填充 -->
    </tbody>
</table>

⚠️ <thead> 定义表头，<tbody> 定义数据区域。分离它们不仅语义清晰，还能方便地用 CSS/JS 单独控制样式和行为。

三、CSS 布局：Bootstrap 栅格系统

3.1 引入 Bootstrap

通过 CDN 引入 Bootstrap CSS 框架：

html 复制代码

<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

3.2 核心布局概念

Bootstrap 的栅格系统基于三个核心类：

类名	作用	说明
`.container`	容器	固定宽度，左右留白，居中显示
`.row`	行	一行，包含若干列
`.col-md-*`	列	将一行分为 12 等份

html 复制代码

<!-- 居中容器 -->
<main class="container">
    <!-- 占 6 列，偏移 3 列（实现居中） -->
    <div class="row col-md-6 col-md-offset-3">
        <!-- 表格内容 -->
    </div>
</main>

sql 复制代码

Bootstrap 栅格布局示意（12 列系统）

┌──────────────────────────────────────────────┐
│                   container                   │
│  ┌────────────────────────────────────────┐  │
│  │              row (12列)                 │  │
│  │  ┌──────┐  ┌──────────────┐  ┌──────┐  │  │
│  │  │ 3列  │  │    6列       │  │ 3列  │  │  │
│  │  │offset│  │   内容区     │  │offset│  │  │
│  │  └──────┘  └──────────────┘  └──────┘  │  │
│  └────────────────────────────────────────┘  │
└──────────────────────────────────────────────┘

🎯 col-md-offset-3 表示向右偏移 3 列，配合 col-md-6 实现内容居中效果。

四、DOM 编程：用 JS 动态渲染页面

4.1 什么是 DOM？

DOM（Document Object Model）是 HTML 文档在 JavaScript 中的对象表示：

css 复制代码

HTML 文档                    JS DOM 对象
┌──────────────┐            ┌──────────────┐
│  <html>      │  ────────▶ │  document    │
│  <head>      │            │  .documentElement  (根节点)
│  <body>      │            │  .body       (body节点)
│    <table>   │            │  .querySelector()  (查找节点)
│      <tbody> │            │  .innerHTML  (修改内容)
└──────────────┘            └──────────────┘

DOM 是一棵树，JS 通过遍历这棵树来查找、修改页面内容。

4.2 核心代码解析

javascript 复制代码

// 1. 发起请求，获取后端数据
fetch('http://localhost:3000/users')
    .then(data => data.json())   // 将响应转为 JSON 对象
    .then(data => {
        console.log(data);
        users = data;

        // 2. 找到 DOM 挂载点（tbody）
        const oBody = document.querySelector('.table tbody');

        // 3. 遍历数据，动态生成 HTML
        for (const user of users) {
            oBody.innerHTML += `
              <tr>
                <td>${user.id}</td>
                <td>${user.name}</td>
                <td>${user.hometown}</td>
                <td>${user.nickname}</td>
              </tr>
            `;
        }
    })

4.3 逐行解读

步骤	代码	说明
请求数据	`fetch(url)`	向后端 API 发起 HTTP 请求
解析响应	`.then(data => data.json())`	将响应体解析为 JSON 对象
查找节点	`document.querySelector('.table tbody')`	用 CSS 选择器找到 tbody 元素
动态渲染	`oBody.innerHTML += ...`	将数据拼装成 HTML 插入页面

💡 命名约定 ：代码中 oBody 的 o 前缀表示 Object 类型，这是一种常见的命名习惯。

4.4 for...of vs 传统 for 循环

javascript 复制代码

// ✅ ES6 for...of：可读性好，不需要计数
for (const user of users) {
    console.log(user);
}

// ❌ 传统 for 循环：可读性差，太机械
for (let i = 0; i < users.length; i++) {
    let user = users[i];
    console.log(user);
}

五、后端准备：json-server 快速搭建 API

5.1 初始化后端项目

bash 复制代码

# 1. 初始化项目，生成 package.json
npm init -y

# 2. 安装 json-server
npm i json-server

5.2 package.json 配置

json 复制代码

{
  "name": "backend",
  "version": "1.0.0",
  "scripts": {
    "dev": "json-server --watch db.json"
  },
  "dependencies": {
    "json-server": "^1.0.0-beta.15"
  }
}

💡 --watch 参数表示监听文件变化，修改 db.json 后自动重启服务。

5.3 编写模拟数据 db.json

json 复制代码

{
  "users": [
    {
      "id": 1,
      "name": "张三",
      "hometown": "北京",
      "nickname": "阿三"
    },
    {
      "id": 2,
      "name": "李四",
      "hometown": "上海",
      "nickname": "阿四"
    },
    {
      "id": 3,
      "name": "王五",
      "hometown": "广州",
      "nickname": "阿五"
    }
  ]
}

5.4 启动服务

bash 复制代码

npm run dev

json-server 会自动将 db.json 中的数据暴露为 RESTful API：

HTTP 方法	端点	说明
GET	`http://localhost:3000/users`	获取所有用户
GET	`http://localhost:3000/users/1`	获取单个用户
POST	`http://localhost:3000/users`	新增用户
PUT	`http://localhost:3000/users/1`	更新用户
DELETE	`http://localhost:3000/users/1`	删除用户

🚀 零代码搭建后端 API：json-server 是前端开发者的神器，无需写任何后端代码就能拥有完整的 CRUD 接口！

六、前后端联调：完整数据流

6.1 数据流转全流程

scss 复制代码

前后端联调数据流

┌──────────────┐     fetch()      ┌──────────────┐
│   前端页面    │ ──────────────▶ │  json-server │
│  index.html  │                  │  :3000       │
│  common.js   │ ◀────────────── │  db.json     │
│              │    JSON 响应     │              │
└──────────────┘                  └──────────────┘
       │
       │ document.querySelector()
       │ .innerHTML
       ▼
┌──────────────┐
│  DOM 动态渲染 │
│  表格数据展示  │
└──────────────┘

6.2 项目文件结构

bash 复制代码

user-chat/
├── fe/                    # 前端目录
│   ├── index.html         # 页面结构
│   └── common.js          # 页面逻辑
│
└── be/                    # 后端目录
    ├── package.json       # 项目配置
    └── db.json            # 模拟数据库

七、今日知识图谱

css 复制代码

📚 全栈开发入门知识图谱

前端三件套
├── HTML（结构）
│   ├── 语义化标签（header/footer/main/aside）
│   ├── 块级元素 vs 行内元素
│   ├── table 语义化（thead + tbody）
│   └── DOCTYPE 文档类型声明
│
├── CSS（样式）
│   ├── Bootstrap 栅格系统
│   ├── container / row / col 布局
│   └── CSS 头部引入（尽早渲染）
│
└── JavaScript（行为）
    ├── DOM 编程
    │   ├── document.querySelector()
    │   ├── .innerHTML 动态修改
    │   └── DOM 树状结构
    ├── fetch API 网络请求
    ├── ES6 for...of 循环
    └── 模板字符串 `${}`

后端基础
├── npm init -y 初始化项目
├── package.json 项目描述
├── json-server 模拟 API
└── RESTful 接口规范

工程化思想
├── 模块化开发（职责分离）
├── 前后端分离架构
└── 文件引入顺序优化

八、给初学者的建议

语义化标签从第一天就用
- 不要等"以后再改"，一开始就养成好习惯
- 大厂面试必考，SEO 的基础
理解 DOM 树是前端的核心
- document.querySelector() 是你最常用的工具
- 所有动态页面效果都基于 DOM 操作
善用 json-server 快速原型开发
- 前端开发不依赖后端进度
- 零成本拥有完整的 RESTful API
模块化思维要贯穿始终
- HTML 管结构，CSS 管样式，JS 管行为
- 前端管页面，后端管数据

结语

今天的 user-chat 项目虽然简单，但它涵盖了全栈开发的核心流程：前端页面搭建 → DOM 动态渲染 → 后端 API 提供 → 前后端联调。

从语义化标签到 DOM 编程，从 Bootstrap 布局到 json-server，每一个知识点都是前端工程师的必备技能。掌握了这些基础，后续学习 Vue、React 等框架就会事半功倍。

希望这篇文章对你有帮助！如果有任何问题，欢迎在评论区交流。

📌 参考资源

MDN: Web API 接口

Bootstrap 中文文档

json-server GitHub

📌 文章标签 前端 HTML CSS JavaScript DOM Bootstrap json-server 全栈开发 学习笔记

如果这篇文章对你有帮助，别忘了点赞、收藏、关注三连支持一下～你的鼓励是我持续输出的动力！ 💪