从零开始搭建全栈项目：手把手新手教程（前后端分离实战）
首先介绍一下本项目。它名为 Users Chat AI，是一款典型的前后端分离小型全栈应用。以下是它的目录结构，供您参考：
ai 全栈/├── backend/← 后端代码（Node.js + json-server）├── frontend/ ← 前端代码（HTML + CSS + JS）└── db.json ← 用 JSON 文件充当数据库
核心理念十分清晰：后端仅负责提供数据接口，前端专注于页面展示与用户交互，二者通过 HTTP 请求进行通信。这正是当今大多数互联网公司的标准协作模式。
模块化编程：写代码的首要原则
在实际编码之前，请牢记以下三条规则——它们将助你未来避免大量困扰：
| 规则 | 解释 |
|---|---|
| 单个函数只做一件事 | 避免一个函数同时处理数据库查询与邮件发送 |
| 单个文件只含一个模块 | 用户相关代码与文章相关代码分开放置 |
| 单个文件夹只负责一块功能 | 后端、前端、工具函数分别存放于各自目录 |
这样做的优势显而易见：代码维护更便捷，三个月后回顾依然清晰；可读性高，他人接手项目无需从头猜测；简单可靠，小型、单一的功能模块不易出现错误。
JavaScript：一门语言打通全栈
你或许认为 JavaScript 仅能用于网页开发，但实际上它可运行于多种环境：前端（浏览器中操作 DOM）、后端（通过 Node.js 编写服务端）、AI 应用开发，乃至嵌入式设备。本项目前后端均使用 JavaScript（Node.js），对新手而言最大优势在于：只需掌握一门语言即可实现全栈开发。
后端开发：通过 RESTful API 暴露数据
4.1 API 是什么？
API（应用程序编程接口）简单来说就是后端向前端提供的一组数据接口。例如前端请求“获取用户列表”，后端则返回对应的 JSON 数据。
4.2 什么是 RESTful？
RESTful 是设计 API 的一种规范，核心原则可概括为两点：
① URL 用于定位资源（使用名词），避免使用动词
✅ 好的设计：❌ 不好的设计：GET/users 用户列表 GET/getAllUsersGET/users/5 第 5 个用户 POST /deleteUser?id=5POST /users 新增用户DELETE /users/5 删除第 5 个用户
② 通过 HTTP 方法表达具体操作
| HTTP 方法 | 对应操作 | 含义 |
|---|---|---|
GET | Read | 获取数据 |
POST | Create | 创建数据 |
PUT / PATCH | Update | 更新数据 |
DELETE | Delete | 删除数据 |
这就是 CRUD（增删改查）——所有业务系统中最基础的四种操作。RESTful 被誉为“Web 开发的基石”，阿里巴巴的 Java 开发规范也强烈推荐这一实践。
4.3 后端初始化（动手实操）
打开终端，切换到 backend 目录，运行以下命令：
# 第一步：初始化项目，会生成 package.jsonnpm init -y# 第二步：安装 json-servernpm i json-server
关于这些名词的简要说明：
- npm（Node Package Management）是 Node.js 的包管理器，类似于“应用商店”，通过一条命令即可安装他人编写好的工具。
- package.json 是项目的身份标识，包含项目名称、版本号以及所依赖的包信息。
- json-server 是一个极为强大的工具，可将一个 JSON 文件即时转换为一套完整的 RESTful API。例如编写一个
db.json文件：
{"users": [{ "id": 1, "name": "张三", "age": 25 },{ "id": 2, "name": "李四", "age": 30 }],"posts": [{ "id": 1, "title": "我的第一篇文章", "userId": 1 }]}
启动 json-server 后，系统会自动生成以下接口：
GEThttps://localhost:3000/users→ 获取用户列表GEThttps://localhost:3000/users/1→ 获取第 1 个用户POST https://localhost:3000/users→ 新增一个用户PUThttps://localhost:3000/users/1→ 修改第 1 个用户DELETE https://localhost:3000/users/1→ 删除第 1 个用户
无需编写任何后端代码，仅凭一个 JSON 文件即可搭建完整的后端服务！
数据存储方式
程序中的数据存储主要分为以下两类：
| 类型 | 例子 | 特点 |
|---|---|---|
| 内存存储 | 数组、对象 | 程序关闭后数据即丢失 |
| 持久存储 | MySQL 数据库、JSON 文件、Excel、CSV | 数据可长期持久保存 |
本项目采用 JSON 文件实现持久化存储——对于学习和小型项目而言已足够，并且 json-server 原生支持此方式。
前端开发：网页三剑客与模块化
前端开发的三大核心技术各司其职：
| 技术 | 负责 | 类比 |
|---|---|---|
| HTML | 定义网页结构与内容 | 房屋的骨架 |
| CSS | 控制网页外观与样式 | 房屋的装修 |
| JavaScript | 实现网页交互与行为 | 房屋的电路与开关 |
6.1 HTML 核心概念
盒子模型（Box Model）
每个 HTML 元素本质上都是一个“盒子”。块级元素可设置宽度和高度，在 PC 端开发中，通常采用固定宽度的容器（container）包裹内容，并左右留白实现居中布局。
语义化标签（重点强调）
<div class="header">...div><div class="na v">...div><div class="main">...div><div class="footer">...div><header>...header><na v>...na v><main>...main><footer>...footer>
为何要使用语义化标签？首先，可读性强、易于维护——一个月后回顾代码，能一眼识别各部分功能。其次，对 SEO 友好——百度、Google 等搜索引擎的爬虫能更准确地理解页面结构，从而获得更高排名。
DOM：浏览器如何解析 HTML
当浏览器加载 HTML 文件时，其内部的 C++ HTML 解析器会将其解析为树状结构，即 DOM（文档对象模型）。
document（根节点）└── html └── body（可视区的起点）├── header├── div.container│├── na v│└── main└── footer
关键点在于：浏览器在内存中创建了一个全局 document 对象，通过 JavaScript 操作该对象即可动态更新页面内容，这便是 DOM 编程的精髓。
DOM 查询性能对比
document.querySelector('#userName')// 最快：通过 id 查，唯一索引document.querySelector('.table') // 还行：通过 class 查document.querySelector('div')// 最慢：通过标签名查，范围太大
Bonus：利用 AI 辅助编程
本课程始终贯穿着一个理念——将 AI 作为你的编程助手。关键在于编写 prompt 时需明确约束条件：
❌ 模糊的 prompt： "帮我写个接口"✅ 好的 prompt： "请你帮我设计 users 用户数据接口，遵守 RESTful 机制，同时遵循模块化原则" "请帮我编写首页，使用 Bootstrap CSS 框架，使用语义化标签"
编写 prompt 的要点：明确任务目标 + 指定约束条件 + 注明所用技术栈。
总结与回顾
本文涵盖了全栈开发最基础的核心知识点：
- 前后端分离与模块化是项目架构的基石
- RESTful API 是前后端通信的标准规范
- json-server 使新手零门槛快速搭建后端
- HTML 语义化标签让代码更优雅、可维护性更强
- DOM 是 JavaScript 操纵页面的桥梁
- 编写精准 prompt 是现代程序员的必备技能
如果你正在入门全栈开发，希望本篇笔记能助你将零散概念系统化整合，顺利上路。
