《前端基础实战：从零搭建用户列表，掌握前后端分离核心思想》从零搭建用户列表：一个完整的前后端分离项目实战写在前面最近

从零搭建用户列表：一个完整的前后端分离项目实战

本文将带你从零开始，使用原生HTML/CSS/JS配合json-server，完成一个用户列表展示功能。涵盖语义化HTML、DOM编程、模块化思想、后端Mock数据等核心知识点。

写在前面

最近在整理前端基础知识时，发现很多同学虽然能用框架快速搭建页面，但对底层的HTML语义、DOM操作、模块化设计等概念却掌握不牢。这篇文章从一个简单的用户列表需求出发，完整记录了我的开发思路和技术选型，希望能帮助大家夯实基础。

项目结构

project/
├── fe/                    # 前端目录
│   ├── index.html        # 页面结构
│   ├── common.js         # JS逻辑
│   └── style.css         # 样式（可选）
├── backend/              # 后端目录
│   ├── package.json      # 项目配置
│   └── db.json          # 模拟数据库
└── README.md

📚 知识点：为什么这样组织目录？

前后端分离：fe和backend可以分别部署在不同的服务器
职责单一：每个文件只做一件事，符合软件工程原则
便于协作：前端和后端可以并行开发，互不干扰

一、HTML 结构设计

语义化标签优先

很多同学写页面喜欢 div 一把梭，但语义化标签对SEO和代码可读性都更有好：

<header>页面头部</header>
<main class="container">
    <aside>侧边栏</aside>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <!-- 主要内容 -->
        </div>
    </div>
    <aside>右侧边栏</aside>
</main>
<footer>页面底部</footer>

📚 知识点详解：语义化标签

标签	语义	对SEO的影响	替代的div方案
`<header>`	页眉/区块头部	告诉搜索引擎这是导航区域	`<div class="header">`
`<main>`	页面主体内容	标识核心内容，一个页面只有一个	`<div class="main">`
`<aside>`	侧边栏/辅助信息	表示与主内容相关的辅助信息	`<div class="sidebar">`
`<footer>`	页脚/版权信息	标识页面底部信息区域	`<div class="footer">`
`<nav>`	导航链接	标识网站导航区域	`<div class="nav">`

为什么语义化很重要？

搜索引擎优化（SEO）：谷歌爬虫给语义化标签更高的权重
无障碍访问（a11y）：屏幕阅读器可以快速定位页面结构
代码可维护性：其他开发者接手时能快速理解页面结构
浏览器默认样式：部分标签自带合理的默认样式

Table 的正确写法

表格一定要区分 thead 和 tbody，这不仅让结构清晰，也方便后续JS操作：

<table class="table" id="user-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>昵称</th>
            <th>家乡</th>
        </tr>
    </thead>
    <tbody></tbody>  <!-- JS动态填充内容 -->
</table>

📚 知识点详解：表格标签

table（表格容器）
├── thead（表头区域，0或1个）
│   └── tr（表格行）
│       └── th（表头单元格，自动加粗居中）
├── tbody（表格主体，0或多个）
│   └── tr
│       └── td（普通单元格）
└── tfoot（表尾区域，0或1个，可选）
    └── tr
        └── td

th 与 td 的区别：

<th>（Table Header）：表头单元格，默认字体加粗、居中，表示该列的含义
<td>（Table Data）：普通数据单元格，默认左对齐、普通字重

为什么JS要操作tbody而不是table？

只刷新数据区域，表头保持不变
避免意外破坏表格结构
性能更好（只重新渲染tbody部分）

盒模型思维

写HTML时先搭盒子框架，再填充内容。container 固定宽度左右留白，row 表示一行，这是经典的PC端布局思路。

📚 知识点详解：CSS盒模型

┌─────────────────────────────────────┐
│            margin（外边距）           │
│  ┌───────────────────────────────┐  │
│  │         border（边框）          │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │     padding（内边距）     │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │    content（内容）   │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

块级元素 vs 行内元素：

类型	特点	常见标签	宽度
块级元素	独占一行，可设宽高	`<div>`、`<p>`、`<header>`、`<main>`	默认100%
行内元素	与其他元素同行，不可设宽高	`<span>`、`<a>`、`<strong>`	内容撑开

二、CSS 与 Bootstrap

直接引入 Bootstrap 3 快速获得样式支持，省去手写大量CSS的时间：

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

Bootstrap的栅格系统非常实用：col-md-6 col-md-offset-3 表示在中等屏幕上占据一半宽度并居中。

📚 知识点详解：Bootstrap栅格系统

Bootstrap把一行（row）分成12等份：

类名	含义	宽度计算
`col-md-4`	中等屏幕占4格	4/12 = 33.33%
`col-md-6`	中等屏幕占6格	6/12 = 50%
`col-md-12`	中等屏幕占12格	100%
`col-md-offset-3`	向右偏移3格	产生左边距

响应式断点：

col-xs-*：超小屏幕（手机，<768px）
col-sm-*：小屏幕（平板，≥768px）
col-md-*：中等屏幕（桌面，≥992px）
col-lg-*：大屏幕（宽屏，≥1200px）

CDN工作原理：

浏览器解析到<link>标签
向CDN服务器发起HTTP请求
下载bootstrap.min.css文件
解析CSS并应用到页面

为什么用CDN？

速度快：CDN就近分配节点
缓存共享：访问其他使用同一CDN的网站无需重新下载
节省带宽：不占用自己服务器流量
并发加载：不同域名可并行下载

三、JavaScript DOM 编程

模块化思维

不要把代码都塞在一个文件里。common.js 专门处理前端逻辑，与HTML结构分离，便于维护和扩展。

📚 知识点详解：模块化设计

设计原则	说明	本例体现
单一职责	一个模块只做一件事	HTML管结构，CSS管样式，JS管逻辑
高内聚	模块内部紧密相关	common.js只处理用户列表相关逻辑
低耦合	模块之间依赖少	通过ID/class连接，不直接依赖

动态渲染表格

核心步骤：找到挂载点 → 遍历数据 → 动态生成HTML

// 获取tbody元素作为挂载点
const oBody = document.querySelector('.table tbody');

let i = 1;
for (let user of users) {
    oBody.innerHTML += `
        <tr>
            <td>${i}</td>
            <td>${user.name}</td>
            <td>${user.nickname}</td>
            <td>${user.hometown}</td>
        </tr>
    `;
}

📚 知识点详解：DOM操作

DOM树结构：

document（根节点）
  └─ html（<html>）
      └─ body（<body>）
          └─ main.container
              └─ div.row
                  └─ div.col-md-6
                      └─ table
                          ├─ thead
                          └─ tbody ← querySelector找到这里

querySelector vs 其他选择器：

// 返回第一个匹配的元素
document.querySelector('.table tbody')

// 返回所有匹配的元素（NodeList）
document.querySelectorAll('td')

// 通过ID获取（最快）
document.getElementById('user-table')

// 通过类名获取
document.getElementsByClassName('table')

innerHTML 的工作原理：

浏览器解析传入的HTML字符串
构建新的DOM节点
替换原有的子节点

⚠️ 性能注意事项：

// ❌ 性能差：每次循环都重新解析
for (let user of users) {
    oBody.innerHTML += '<tr>...</tr>';
}

// ✅ 性能好：一次构建，一次插入
let html = '';
for (let user of users) {
    html += '<tr>...</tr>';
}
oBody.innerHTML = html;

ES6 语法亮点

for...of 循环：比传统 for (let i=0; i<arr.length; i++) 更简洁
模板字符串：用反引号 + ${变量} 替代字符串拼接，可读性暴增

📚 知识点详解：ES6语法

数组遍历方法对比：

// 传统for循环（需要索引时使用）
for (let i = 0; i < users.length; i++) {
    console.log(users[i]);
}

// for...of（只需要值，不需要索引）
for (let user of users) {
    console.log(user.name);
}

// forEach（函数式编程）
users.forEach(user => {
    console.log(user.name);
});

// map（返回新数组）
const names = users.map(user => user.name);

模板字符串特性：

// 传统拼接（难写、难读）
const html = '<tr><td>' + user.id + '</td><td>' + user.name + '</td></tr>';

// 模板字符串（优雅、支持换行）
const html = `
    <tr>
        <td>${user.id}</td>
        <td>${user.name}</td>
    </tr>
`;

四、后端模拟：json-server

前端开发经常遇到后端接口还没好的情况，json-server 可以快速Mock一个REST API。

初始化项目

cd backend
npm init -y
npm install json-server

📚 知识点详解：npm包管理

package.json的作用：

{
  "name": "backend",           // 项目名称
  "version": "1.0.0",          // 版本号（语义化版本）
  "description": "",           // 项目描述
  "main": "index.js",          // 入口文件
  "scripts": {                 // 自定义命令
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],              // 关键词
  "author": "",                // 作者
  "license": "ISC",            // 开源协议
  "dependencies": {            // 生产环境依赖
    "json-server": "^0.17.0"   // ^表示兼容版本
  }
}

npm install 做了什么？

读取package.json中的dependencies
下载依赖包到node_modules目录
生成package-lock.json锁定版本

创建 db.json

{
  "users": [
    {
      "id": 1,
      "name": "昌哥",
      "hometown": "南昌",
      "nickname": "昌哥nb666"
    },
    {
      "id": 2,
      "name": "胡航",
      "hometown": "南昌",
      "nickname": "航哥"
    }
  ]
}

📚 知识点详解：JSON格式

JSON语法规则：

键名必须用双引号包裹
字符串值必须用双引号
数字、布尔值、null不需要引号
不能有注释
最后一个属性后面不能有逗号

数据类型：

类型	示例	说明
字符串	`"昌哥"`	双引号包裹
数字	`25`	整数或浮点数
布尔值	`true`	true或false
数组	`[1, 2, 3]`	方括号
对象	`{"name": "昌哥"}`	花括号
null	`null`	空值

启动服务

npx json-server db.json --port 3000

访问 http://localhost:3000/users 就能拿到JSON数据。

📚 知识点详解：REST API

HTTP方法	端点	功能	请求体
GET	`/users`	获取所有用户	无
GET	`/users/1`	获取id=1的用户	无
POST	`/users`	新增用户	`{"name": "新用户"}`
PUT	`/users/1`	完整更新id=1	全量数据
PATCH	`/users/1`	部分更新id=1	`{"nickname": "新昵称"}`
DELETE	`/users/1`	删除id=1	无

npx是什么？

npm 5.2+ 自带的工具
直接运行node_modules/.bin下的命令
不需要全局安装json-server

五、前后端联调

用 fetch 发起网络请求，拿到数据后渲染到页面：

fetch('http://localhost:3000/users')
    .then(response => response.json())
    .then(data => {
        users = data;
        renderTable();  // 重新执行渲染逻辑
    });

📚 知识点详解：fetch API和异步编程

fetch执行流程：

fetch() 发起请求
    ↓（异步，不阻塞后续代码）
浏览器发送HTTP请求
    ↓
服务器返回响应
    ↓
第一个.then() 拿到Response对象
    ↓
调用.json() 解析JSON
    ↓
第二个.then() 拿到实际数据
    ↓
执行渲染逻辑

Response对象常用属性和方法：

fetch(url).then(response => {
    response.status      // HTTP状态码，200表示成功
    response.ok          // 布尔值，status在200-299之间为true
    response.headers     // 响应头信息
    response.json()      // 解析为JSON对象
    response.text()      // 解析为字符串
    response.blob()      // 解析为二进制数据
})

Promise的三种状态：

状态	含义	触发时机
pending	进行中	初始状态
fulfilled	成功	调用resolve()
rejected	失败	调用reject()

async/await语法糖：

// 等价于上面的fetch写法，但更直观
async function loadUsers() {
    const response = await fetch('http://localhost:3000/users');
    const data = await response.json();
    users = data;
    renderTable();
}

六、完整数据流图解

1. 用户打开页面
   ↓
2. 浏览器加载index.html
   ↓
3. 解析HTML，构建DOM树
   ↓
4. 遇到<link>加载Bootstrap CSS
   ↓
5. 遇到<script>加载并执行common.js
   ↓
6. common.js执行fetch请求
   ↓
7. 请求到达json-server
   ↓
8. json-server读取db.json
   ↓
9. 返回JSON数据给前端
   ↓
10. JS遍历数据，生成HTML字符串
    ↓
11. 设置tbody.innerHTML
    ↓
12. 浏览器重新渲染表格
    ↓
13. 用户看到用户列表

知识小结

知识点	要点	代码体现
HTML语义化	用语义标签替代div	`<header>`、`<main>`、`<aside>`、`<footer>`
表格语义化	区分表头和主体	`<thead>` + `<tbody>`
DOM查询	用选择器查找元素	`document.querySelector('.table tbody')`
动态渲染	用innerHTML插入内容	`oBody.innerHTML += ...`
模块化	代码按职责拆分	HTML结构 + JS逻辑 + CSS样式
后端模拟	用json-server	`npx json-server db.json --port 3000`
网络请求	用fetch获取数据	`fetch(url).then(res => res.json())`
异步处理	Promise处理异步	`.then()` 链式调用

常见问题排查指南

问题	可能原因	解决方法
表格不显示	找不到tbody	检查选择器是否正确
数据不更新	fetch是异步的	确认渲染在.then回调中
中文乱码	缺少meta标签	添加`<meta charset="UTF-8">`
跨域报错	不同端口访问	json-server默认支持CORS
页面空白	JS语法错误	打开F12控制台查看
连接失败	json-server未启动	运行`npx json-server db.json --port 3000`

写在最后

这个项目虽然简单，但涵盖了Web开发的核心流程。打好HTML语义、DOM操作、模块化设计这些基础，后续学习React/Vue等框架会事半功倍。

学习路径建议：

手敲一遍代码，不要复制粘贴
修改参数观察变化，理解每一行
尝试添加新功能（搜索、分页、添加用户）
理解原理后再学框架

如果觉得有收获，欢迎点赞收藏！

项目源码已整理，需要的小伙伴可以私信我～