从零开始，手把手带你搭建一个全栈项目（新手向）
本文整理自一次全栈开发实战课程笔记，适合刚入门的前端/后端新手阅读。读完你会对"前后端分离""RESTful API""模块化开发"这些概念有一个具体的认识。
1. 项目长什么样？
我们的项目叫 Users Chat AI，是一个前后端分离的小型全栈应用。目录结构大概是这样：
css
ai 全栈/
├── backend/ ← 后端代码（Node.js + json-server）
├── frontend/ ← 前端代码（HTML + CSS + JS）
└── db.json ← 用 JSON 文件充当数据库核心思路：后端只负责提供数据接口，前端只负责展示页面和交互，两者通过 HTTP 请求通信。 这也是目前绝大多数互联网公司的协作方式。
2. 模块化：写代码的第一条纪律
在动手写代码之前，先记住三条规则（它们能让你未来的自己少掉很多头发）：
| 规则 | 解释 |
|---|---|
| 一个函数只做一件事 | 不要让一个函数既查数据库又发邮件 |
| 一个文件只写一个模块 | 用户相关的代码和文章相关的代码，分开放 |
| 一个文件夹只负责一块功能 | 后端、前端、工具函数各放各的目录 |
好处：
- 代码好维护 ------ 三个月后回来看，依然能看懂
- 可读性高 ------ 别人接手你的项目不用从头猜
- 简单可靠 ------ 小的、单一的东西不容易出 bug
3. JavaScript：一门语言打通全场
你可能以为 JavaScript 只能写网页，实际上它可以跑在：
- 前端（浏览器里操作 DOM）
- 后端（Node.js 写服务端）
- AI 应用开发
- 嵌入式设备
我们这个项目前后端都用 JavaScript（Node.js），对新手来说最大的好处是：只需要学一门语言就能打通全栈。
4. 后端：用 RESTful API 暴露数据
4.1 什么是 API？
API = Application Programming Interface，说白了就是后端暴露给前端的一套数据接口。前端说"给我用户列表"，后端就返回一串 JSON 数据。
4.2 RESTful 是什么？
RESTful 是一种设计 API 的规范，核心就两句话：
① URL 用来定位资源（名词），不要用动词
bash
✅ 好的设计： ❌ 不好的设计：
GET /users 用户列表 GET /getAllUsers
GET /users/5 第 5 个用户 POST /deleteUser?id=5
POST /users 新增用户
DELETE /users/5 删除第 5 个用户② 用 HTTP 方法来表达"做什么"
| HTTP 方法 | 对应操作 | 含义 |
|---|---|---|
GET |
Read | 查询数据 |
POST |
Create | 新增数据 |
PUT / PATCH |
Update | 修改数据 |
DELETE |
Delete | 删除数据 |
这就是 CRUD ------ 所有业务系统最基本的四个操作。RESTful 被称为"Web 开发的根基"，连阿里巴巴的 Java 开发规范都在推荐这种做法。
4.3 后端初始化（实操）
打开终端，进入 backend 目录，执行：
bash
# 第一步：初始化项目，会生成 package.json
npm init -y
# 第二步：安装 json-server
npm i json-server这几个名词解释一下：
- npm：Node Package Management，Node 的包管理器。你可以把它理解成"应用商店"，别人写好的工具你一条命令就能装。
- package.json：项目的身份证，记录了项目名、版本号、依赖了哪些包。
- json-server ：一个神器级的工具，能把一个 JSON 文件瞬间变成一套 RESTful API 。比如你写一个
db.json：
json
{
"users": [
{ "id": 1, "name": "张三", "age": 25 },
{ "id": 2, "name": "李四", "age": 30 }
],
"posts": [
{ "id": 1, "title": "我的第一篇文章", "userId": 1 }
]
}启动 json-server 后，自动就有了：
bash
GET http://localhost:3000/users → 获取用户列表
GET http://localhost:3000/users/1 → 获取第 1 个用户
POST http://localhost:3000/users → 新增一个用户
PUT http://localhost:3000/users/1 → 修改第 1 个用户
DELETE http://localhost:3000/users/1 → 删除第 1 个用户零代码，一个 JSON 文件就成了一个后端服务！
5. 数据存在哪里？
程序里的数据存储分两大类：
| 类型 | 例子 | 特点 |
|---|---|---|
| 内存存储 | 数组、对象 | 程序关了数据就没了 |
| 持久存储 | MySQL 数据库、JSON 文件、Excel、CSV | 数据长期保存 |
本项目中我们用 JSON 文件 做持久存储------对于学习和小型项目来说足够用，而且 json-server 天然支持。
6. 前端：网页三剑客 + 模块化
前端的核心是三个东西，各司其职：
| 技术 | 负责 | 类比 |
|---|---|---|
| HTML | 网页的结构和内容 | 房子的骨架 |
| CSS | 网页的外观和样式 | 房子的装修 |
| JavaScript | 网页的交互和行为 | 房子的电路/开关 |
6.1 HTML 的核心概念
盒子模型
HTML 元素本质上是一个个"盒子"。块级元素可以设置宽高，在 PC 端业务中通常用一个固定宽度的容器（container）包住内容，左右留白居中。
语义化标签（重点！）
html
<!-- ❌ 不推荐：全是 div，看不出结构 -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>
<!-- ✅ 推荐：用语义化标签 -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>为什么要语义化？
- 可读性好，好维护 ------ 一个月后回来看代码，一眼就知道每个部分是干什么的
- SEO 友好 ------ 搜索引擎（百度/Google）的爬虫能更好地理解你的页面结构，排名更高
DOM：浏览器如何理解 HTML
当浏览器加载一个 HTML 文件时，内部的 C++ HTML 解析器会把它解析成一棵树状结构，这就是 DOM（Document Object Model）。
css
document（根节点）
└── html
└── body（可视区的起点）
├── header
├── div.container
│ ├── nav
│ └── main
└── footer关键理解：浏览器在内存中创建了一个全局的 document 对象，通过 JavaScript 操作这个对象就能动态改变页面内容。 这就是 DOM 编程。
DOM 查询性能
javascript
document.querySelector('#userName') // 🚀 最快：通过 id 查，唯一索引
document.querySelector('.table') // 🚗 还行：通过 class 查
document.querySelector('div') // 🐢 最慢：通过标签名查，范围太大7. Bonus：学会用 AI 辅助编程
整节课贯穿了一个思路------用 AI 当你的编程搭子。关键在于 prompt 要写清楚约束条件：
arduino
❌ 模糊的 prompt：
"帮我写个接口"
✅ 好的 prompt：
"请你帮我设计 users 用户数据接口，遵守 RESTful 机制，同时遵循模块化原则"
"请帮我编写首页，使用 Bootstrap CSS 框架，使用语义化标签"写 prompt 的诀窍：说清楚做什么 + 加什么约束 + 用什么技术栈。
总结
这篇文章覆盖了全栈开发最基础的知识点：
- 前后端分离 + 模块化 是项目架构的基础
- RESTful API 是前后端通信的标准方式
- json-server 让新手零门槛搭建后端
- HTML 语义化标签 写出的代码更优雅、可维护性更好
- DOM 是 JavaScript 操作页面的桥梁
- 写好 prompt 是现代程序员的必备技能
如果你也在入门全栈，希望这篇笔记能帮你把这些零散的概念串起来。