从零搭建全栈应用：模块化思想 + 语义化HTML + JSON‑Server快速Mock

作者：kisshyshy 标签：全栈开发 / 模块化 / HTML语义化 / DOM编程 / 前端工程化

在快速迭代的前端时代，很多同学一上来就直奔框架（Vue / React），反而忽略了HTML、CSS、JavaScript这"前端三件套"的底层魅力 。

但大厂面试和实战项目，恰恰最看重你对模块化设计、语义化结构、DOM原生操作的理解。

本文将从项目架构设计 出发，带你手写一个前后端分离的demo，涵盖：

模块化目录划分
语义化HTML + 12列栅格布局
原生JS DOM编程与动态渲染
使用json-server快速搭建后端Mock接口

全程干货，每一块都有代码示例 和设计图占位，建议收藏后跟着敲一遍 ✨

一、项目整体架构：前后端模块化分离

一个清晰的项目结构，是可维护、可扩展 的基石。我们遵循"职责单一"原则：

bash 复制代码

project/
├── fe/                 # 前端目录
│   ├── index.html      # 主页面
│   ├── css/            # 样式模块
│   │   └── style.css
│   └── js/             # 脚本模块
│       ├── common.js   # 公共方法
│       └── main.js     # 业务入口
└── backend/            # 后端目录
    ├── package.json    # 项目描述
    └── db.json         # Mock数据库

为什么要这样拆分？

如果不分模块，所有代码挤在一个文件里 → 维护成本爆炸、无法复用、协作困难。

而每个文件夹/文件只做一件事，就像Java中的一个类，清晰且健壮。

二、HTML结构：先搭盒子，再填内容

1. 块级元素 vs 行内元素

块级元素 （如<div>, <header>, <section>）：默认占一整行，适合做布局盒子。
行内元素 （如<span>, <a>）：兄弟元素可以并列，适合放文本或小控件。

2. 别再"div 满天飞"！用语义化标签

语义标签对SEO 和无障碍访问极其友好，大厂代码规范第一条就是它。

html 复制代码

<body>
  <header>网站头部</header>
  <main>
    <aside>侧边栏信息</aside>
    <article>主要内容区域</article>
  </main>
  <footer>页脚</footer>
</body>

🖼️ 图片位置 -- 语义化标签对比

提示词：左侧是一堆div嵌套的混乱代码，右侧是header/main/aside/footer清晰结构，对比夸张，带有箭头和"推荐"标签

3. 表格也讲语义：`<thead>` + `<tbody>`

html 复制代码

<table>
  <thead>
    <tr><th>姓名</th><th>分数</th></tr>
  </thead>
  <tbody>
    <tr><td>张三</td><td>98</td></tr>
  </tbody>
</table>

thead定义表头，tbody定义数据体 ------ 即使不写CSS，浏览器也能正确理解表格结构。

三、CSS布局：从container到栅格系统

1. Container容器（经典PC布局）

css 复制代码

.container {
  width: 1200px;        /* 固定宽度 */
  margin: 0 auto;       /* 左右留白 */
  padding: 0 15px;
}

2. 12列栅格模拟（Row + Col）

css 复制代码

.row {
  display: flex;
  flex-wrap: wrap;
}
.col-4 {
  width: 33.333%;
}
.col-6 {
  width: 50%;
}

这样我们就能像Bootstrap一样，快速搭建行列布局：

html 复制代码

<div class="container">
  <div class="row">
    <div class="col-4">导航</div>
    <div class="col-8">内容</div>
  </div>
</div>

四、DOM编程：用原生JS实现模块化插入

大厂尤其注重原生DOM操作 能力，即使你用框架，面试也会问document.querySelector、innerHTML这些底层。

1. 动态渲染表格的例子

假设我们从后端拿到一组用户数据，动态插入到<tbody>中：

javascript 复制代码

// main.js
const users = [
  { name: 'Alice', score: 95 },
  { name: 'Bob', score: 87 }
];

function renderTable() {
  const tbody = document.querySelector('#user-table tbody');
  let html = '';
  users.forEach(user => {
    html += `<tr><td>${user.name}</td><td>${user.score}</td></tr>`;
  });
  tbody.innerHTML = html;
}
renderTable();

2. 模块化抽离 -- common.js

将公共函数（如renderTable、fetchData）放在common.js中，然后在index.html中按顺序引入：

html 复制代码

<script src="js/common.js"></script>
<script src="js/main.js"></script>

五、后端准备：json-server，10秒拥有完整API

前端写好了，但数据从哪里来？别急，用json-server这个神器，将JSON文件瞬间变成REST API。

1. 初始化后端项目

bash 复制代码

cd backend
npm init -y           # 生成 package.json
npm i json-server

2. 创建`db.json`（我们的"数据库"）

json 复制代码

{
  "posts": [
    { "id": 1, "title": "模块化思想", "author": "金道轩" }
  ],
  "users": [
    { "id": 1, "name": "Alice", "age": 25 }
  ]
}

3. 启动Mock服务

在package.json的scripts中添加：

json 复制代码

"scripts": {
  "start": "json-server --watch db.json --port 3000"
}

然后运行 npm start，访问 http://localhost:3000/posts 你就能看到数据了 🎉

4. 前端调用Mock接口（Fetch）

javascript 复制代码

// common.js
async function fetchPosts() {
  const res = await fetch('http://localhost:3000/posts');
  const data = await res.json();
  console.log(data);
}

这样，前后端彻底分离 ------ 前端专注页面交互，后端专注提供数据接口。

六、总结：大厂全栈的底层修炼之路

关键点	你学会的姿势
模块化思想	按职责拆分目录，每个文件只做一件事
HTML语义化	用`<header>/<main>/<aside>`代替无聊的`<div>`
栅格布局	container + row + col 搞定响应式
原生DOM编程	`querySelector` + `innerHTML` 动态渲染
Mock后端	`json-server` 零成本开启API服务

真正的全栈能力，不是框架的搬运工，而是对底层原理 和工程化设计的深刻理解。

如果这篇文章对你有帮助，欢迎点赞 + 收藏 + 转发 👏

也欢迎在评论区聊聊你的模块化实践 或json-server使用小技巧～

💬 作者：kisshyshy
一个热爱分享底层技术与工程实践的AI全栈开发者

从零搭建全栈应用：模块化思想 + 语义化HTML + JSON‑Server快速Mock