我用纯HTML+CSS+JS写了个全栈项目，大厂面试官追着问我这3个底层问题

别再上来就Vue/React了！把这3个基础打牢，你写的代码比别人好10倍

简历上写着"精通Vue3、React18、Node.js全栈开发"，结果我问他"div和header标签有什么区别"，他支支吾吾说不出来；再问"DOM树是什么结构"，直接懵了。

这不是个例。现在太多人学前端，上来就啃框架，把最基础的HTML、CSS、JS扔在一边。结果面试的时候，大厂面试官根本不问你框架怎么用，专挑这些底层问题往死里问。

今天我就用纯原生三件套+json-server ，带大家写一个完整的前后端分离全栈项目。没有任何复杂框架，所有代码加起来不到100行，但把大厂最看重的3个底层能力------模块化设计、HTML语义化、DOM编程------全部讲透。

看完这篇，你再去写框架代码，会有一种"原来如此"的通透感。

一、先搞懂：为什么大厂死磕这些"没用"的基础？

很多人觉得："现在都用框架了，谁还写原生JS？语义化标签有什么用，div不也能实现一样的效果？"

我以前也这么想，直到上次字节面试，面试官一句话点醒我： "框架是会变的，但HTML的标准20年没变过。你连DOM是什么都搞不懂，用Vue写出来的代码，本质上就是一堆div的堆砌，出了问题你根本不知道怎么调。"

确实如此。框架只是帮我们封装了底层操作，但底层逻辑永远不变。今天这个项目，我就用最原始的方式，把这些底层逻辑给你扒得明明白白。

二、第一步：模块化设计------每个文件只做一件事

这是所有优秀代码的起点，也是最容易被忽略的一点。

很多新手写代码，喜欢把所有东西都塞在一个HTML文件里：样式写在style标签里，JS写在script标签里，后端接口也用mock数据硬编码。结果项目稍微大一点，改一个功能要翻几百行代码，想死的心都有。

正确的做法是前后端模块化分离，每个文件夹、每个文件都有明确的职责：

bash 复制代码

project/
├── fe/          # 前端目录，只写页面相关代码
│   ├── index.html  # 页面结构
│   └── common.js   # 业务逻辑和DOM操作
└── backend/     # 后端目录，只处理数据
    ├── db.json     # 模拟数据库
    └── package.json # 后端项目配置

就这么简单的目录划分，就能让你的代码可维护性提升10倍。以后前端改样式，就去fe目录；后端改接口，就去backend目录，互不干扰。

💡 我的思考：模块化的本质不是"拆文件"，而是"分离关注点"。前端负责"用户看到什么"，后端负责"数据从哪里来"，这就是前后端分离的核心思想。

三、前端核心1：HTML语义化------别再div满天飞了

这是大厂面试官必问的第一个问题，也是最容易被低估的知识点。

很多人写HTML，从头到尾都是div：

html 复制代码

<div class="header"></div>
<div class="main">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>
<div class="footer"></div>

这样写确实能实现效果，但有两个致命问题：

搜索引擎看不懂：搜索引擎不知道哪个是标题，哪个是主体内容，你的网站SEO会很差
人也看不懂：过一个月你再看自己的代码，根本不知道每个div是干嘛的

正确的写法是用语义化标签，让代码"会说话"：

html 复制代码

<header>页面头部</header>
<main class="container">
  <aside>左侧边栏</aside>
  <div class="content">主体内容</div>
  <aside>右侧边栏</aside>
</main>
<footer>页面底部</footer>

你看，不用加任何注释，任何人一眼就能看懂这个页面的结构。

特别注意：表格的语义化

很多人写表格，直接一堆tr和td：

html 复制代码

<table>
  <tr>
    <td>ID</td>
    <td>姓名</td>
    <td>家乡</td>
  </tr>
  <tr>
    <td>1</td>
    <td>张三</td>
    <td>北京</td>
  </tr>
</table>

这是非常错误的写法。正确的表格必须包含thead（表头）和tbody（表体）：

html 复制代码

<table class="table table-striped">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>家乡</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据会通过JS动态插入这里 -->
  </tbody>
</table>

这不仅是语义化的要求，也是Bootstrap表格样式生效的前提。我当初就是忘了写thead，折腾了半小时样式都不对，踩过的坑你们别再踩了。

四、前端核心2：Bootstrap布局------让你的页面瞬间变好看

写原生CSS太麻烦？没关系，我们用Bootstrap这个神器，一行CSS都不用写，就能做出专业级别的页面。

Bootstrap的核心就是栅格系统 ，用container、row、col三个类就能搞定所有布局：

container：固定宽度的容器，左右自动留白，适配不同尺寸的PC屏幕
row：表示一行
col-md-*：表示一列，md表示中等屏幕，*表示占12列中的几列

比如我们要做一个居中的表格，宽度占屏幕的一半：

html 复制代码

<main class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <!-- col-md-offset-3 表示左边偏移3列，实现居中效果 -->
      <table class="table table-striped">
        <!-- 表格内容 -->
      </table>
    </div>
  </div>
</main>

就这么几行代码，一个美观、响应式的表格就做好了。比你自己写CSS快100倍。

💡 我的经验：Bootstrap 3.0.3是最经典、最稳定的版本，新手强烈推荐从这个版本开始学。CDN直接用BootCDN的，速度快还稳定：
html 复制代码
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

五、前端核心3：DOM编程------理解这棵树，你就懂了前端

这是大厂面试官必问的第二个问题，也是前端的灵魂所在。

很多人学JS，上来就学变量、循环、函数，却不知道JS最强大的能力是操作DOM。

什么是DOM？简单来说，就是浏览器把HTML文档解析成了一棵树状结构 ，每个HTML标签都是树上的一个节点。JS可以通过document对象，对这棵树进行增删改查。

比如我们要找到表格的tbody节点，然后动态插入数据：

javascript 复制代码

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

// 2. 遍历数据，生成HTML字符串
for (let user of users) {
  oBody.innerHTML += `
    <tr>
      <td>${user.id}</td>
      <td>${user.name}</td>
      <td>${user.hometown}</td>
    </tr>
  `;
}

就这么简单，几行代码就实现了数据的动态渲染。

这里我要纠正一个误区：很多人说"JS很难学"，其实JS是最友好的语言之一。

不用写分号
不用声明变量类型
单引号双引号随便用
甚至不用提前定义数组和对象

你看，我们直接写let users = [];，不用声明它是数组；直接写{id: 1, name: '张三'}，不用先定义类。JS就是这么随性，直接用就行。

六、后端极简实现：json-server------一行命令启动后端

写前端容易，写后端难？不存在的。今天我们不用写任何后端代码，用json-server这个工具，一行命令就能启动一个完整的RESTful API服务器。

步骤1：初始化后端项目

在backend目录下执行：

bash 复制代码

npm init -y

这会生成一个package.json文件，这是后端项目的描述文件。

步骤2：安装json-server

bash 复制代码

npm i json-server

步骤3：创建模拟数据库

新建db.json文件，写入我们的用户数据：

json 复制代码

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

步骤4：配置启动脚本

在package.json的scripts字段中添加：

json 复制代码

"scripts": {
  "dev": "json-server --watch db.json"
}

步骤5：启动后端服务器

bash 复制代码

npm run dev

现在打开浏览器访问http://localhost:3000/users，你就能看到我们的用户数据了！

就这么简单，一个支持GET、POST、PUT、DELETE的完整后端就做好了。不用写一行Express代码，不用配置MySQL，太香了。

七、前后端联调：fetch API------让数据流动起来

现在前端有了，后端也有了，最后一步就是让前端从后端获取数据，然后渲染到页面上。

我们用JS原生的fetch API来发送请求：

javascript 复制代码

// 从后端获取用户数据
fetch('http://localhost:3000/users')
  .then(data => data.json()) // 把响应数据转换成JSON格式
  .then(data => {
    console.log(data); // 打印数据，方便调试
    const oBody = document.querySelector('.table tbody');
    
    // 动态渲染表格
    for (let user of data) {
      oBody.innerHTML += `
        <tr>
          <td>${user.id}</td>
          <td>${user.name}</td>
          <td>${user.hometown}</td>
        </tr>
      `;
    }
  })
  .catch(err => {
    console.log('请求失败：', err);
  });

这里有一个非常重要的点：fetch是异步的 。也就是说，JS不会等数据回来再执行后面的代码，而是先执行后面的代码，等数据回来后再执行then里面的函数。

很多新手会犯一个错误：把渲染代码写在then外面，结果数据还没回来，就开始渲染了，页面什么都没有。一定要记住：所有依赖异步数据的操作，都必须写在then里面。