从零搭建使用者列表：完整前后端分离实战

写在前面

痛点：很多同学能快速用框架跑出页面却不清楚底层的 HTML 语义、DOM 操作和模块化设计到底是怎么回事，导致后期维护和性能调优困难。本篇以最基础的技术栈为例，帮助你夯实这些关键概念。

项目结构

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

📚 知识点：

• 前后端分离：fe 与 backend 可分别部署在不同服务器，实现职责单一。
• 便于协作：前端和后端可以并行开发，互不干扰。
• 易于 ：以后迁移到真实 API 时只需替换 backend 部分。

一、HTML 结构设计

语义化标签优先

痛点：大量使用

导致代码难读、SEO 和无障碍支持差。

页面头部




页面底部

为什么语义化很关键？怎么说呢，

1. SEO：搜索引擎会给语义标签更高权重。
2. a11y：屏幕阅读器能快速定位结构。
3. 可维护性：其他开发者能迅速理解页面层次。
4. 默认样式：部分标签自带合理的浏览器样式。

表格的正确写法

痛点：Tfoot/ad/tbody 分不清，导致 JS 操作时误删表头或渲染效率低下。

ID
Name
Nickname
乡城

THead 与 TBody 的区别：

• : 表头，只渲染一次。老实说，
• : 数据区。每次请求只更新此块，提高渲染性能。

盒模型思维

痛点：Cascading Style Sheets 常被写成“随意堆砌”，导致页面宽度溢出或间距不一致。其实，

/* CSS盒模型示意 */
.box {
从margin来看。20px，/* 外边距 */
至于border，1px solid #ccc;/* 边框 */
padding: 10px;/* 内边距 */
width的观点是，300px;/* 内容宽度 */
}

二、CSS 与 Bootstrap 快速上手

Migrate from hand‑crafted CSS to Bootstrap CDN for instant响应式布局与组件支持。

Sass / 栅格程序要点：

类名	含义
.col-md-4	#4/12 ≈百分之三十三
.col-md-6	#6/12 =五十成左右
.col-md-12	#12/12 =一百成上下
.col-md-offset-3	#向右偏移3格

为何使用 CDN？

• L​atency ↓：就近节点加速下载；
• C​ache 共享：同域名站点可直接命中缓存；
• B​andwidth 节省：不占用自己服务器流量；
• P​arallel 加载：跨域并行下载提高首屏速度。

三、JavaScript DOM 编程与模块化思维

拆分模块

// common.js – 专注业务逻辑，不混杂样式或结构代码

// 请求数据并渲染表格
async function loadUsers {
const resp = await fetch;if throw new Error;const users = await resp.json;renderTable，}
// 高效渲染 – 一次性插入
function renderTable {
const tbody = document.querySelector;const rows = data.map =>
`
${i + 1}${u.name}${u.nickname}${u.hometown}
`
).join;tbody.innerHTML = rows;}
// 页面加载完毕自动执行
document.addEventListener;

S​pain:: 使用 ES6+提高可读性，避免传统循环里频繁修改 innerHTML 带来的性能抖动。

常见 DOM 疑难杂症及方法

\t\t\t \ \t\t\t \t\t \t \t

问题描述	可能原因	解决办法
表格未渲染	选择器错误或 fetch 异步未处理	确认 `document.querySelector` 正确；把渲染放进 `.n` 或 `await` 后面。\t
中文乱码	缺少 `` 或服务器返回非 UTF‑8 编码。\ t	在 ` ` 加入 `` 并确保 json-server 返回 UTF‑8。\ t
跨域报错\ t	前端访问的端口与 json-server 不同。\ t	json-server 默认开启 CORS，无需额外配置；若关闭请在启动时加 `--cors` 参数。\ t
控制台报 `Uncaught SyntaxError` \ t	JS 文件中缺少闭合符号或引号错误。\ t	打开 F12 → Console 检查报错位置并修正语法错误。\ t \ \ <\/table\ 四、后端模拟：json‑server 快速起航<\/h2\

---