全栈项目架构三支柱：模块化 × RESTful × 语义化HTML，附AI辅助开发心法
写代码不难，难的是让代码能维护、能扩展、能让人看懂。这三根支柱撑起来，全栈项目才不会变成屎山。
🔥 为什么你的项目越写越乱？
你有没有遇到过这种情况：
- ❌ 一个函数 200 行，干了三件事
- ❌ 一个文件里又写逻辑又写样式又写HTML
- ❌ 接口URL随心所欲，
/getUser、/findUser、/userList三种写法 - ❌ 满屏都是
div，看不出哪里是导航哪里是正文
这些问题不是"代码写得不好"，是架构思维缺失。
今天讲三根支柱：模块化 + RESTful API + 语义化HTML，再附一个AI辅助开发的心法。
💻 后端：模块化 + RESTful API
模块化------代码能维护的根基
| 层级 | 规范 | 反面案例 |
|---|---|---|
| 函数 | 一个函数只做一个功能 | handleEverything() 干了三件事 |
| 文件 | 一个文件只写一个类/模块 | utils.js 里啥都有 |
| 文件夹 | 一个文件夹只负责一个模块 | src/ 下扁平化堆文件 |
💡 核心观点 ：模块化不是为了好看，是为了可读性、简单、可靠。代码写给别人看，也写给三个月后的自己看。
RESTful API 设计------暴露资源，动作靠HTTP动词
RESTful 是 Web 开发的根基，核心思想：URL 暴露资源，HTTP 动作表示操作。
URL 设计范式：
bash
协议://域名:端口/资源
https://localhost:3000/users → 用户列表
https://localhost:3000/users/:id → 某个用户详情
https://localhost:3000/posts → 文章列表
https://localhost:3000/posts/:id → 某篇文章HTTP 动作 = CRUD：
| 动作 | HTTP 方法 | 含义 |
|---|---|---|
| 查 | GET |
Read |
| 增 | POST |
Create |
| 改 | PUT/PATCH |
Update |
| 删 | DELETE |
Delete |
⚠️ 注意 ：URL 里不要出现动词！
/getUser是错的，GET /users/:id才是对的。动作交给 HTTP 方法，URL 只负责定位资源。
快速搭建后端：json-server
bash
# 初始化项目
npm init -y # 生成 package.json 项目描述文件
# 安装 json-server（模拟RESTful API）
npm i json-server
# 启动服务
json-server --watch db.json📌 划重点 ：
db.json就是一个 JSON 文件，json-server 会自动把它变成 RESTful API。开发阶段够用，生产环境换 MySQL 等数据库。
🎯 前端：语义化HTML + DOM模型
前端三剑客的职责分工
| 技术 | 职责 | 类比 |
|---|---|---|
| HTML | 网页结构 | 房子的骨架 |
| CSS | 样式表现 | 房子的装修 |
| JavaScript | 行为交互 | 房子的水电开关 |
HTML 语义化------拒绝 div 满天飞
容器规范：
html
<div class="container">
<nav>导航区域</nav>
<main>主要内容</main>
<footer>页脚</footer>
</div>💡 核心要点 ：
container是固定宽度容器，PC端业务通常左右留白。nav/main/footer不只是 div，它们自带语义------浏览器知道这是导航、正文、页脚。
语义化的三大优势：
- ✅ 可读性更好，有利于维护
- ✅ 搜索引擎优化（SEO）------爬虫能理解DOM结构
- ✅ 无障碍访问------屏幕阅读器能识别语义
DOM 模型------Document Object Model
什么是 DOM？
- Document ：HTML 文档（
text/html格式） - Object ：浏览器（HTML Parser）把 HTML 解析成树状结构，在内存中建立全局的
Document对象 - Model ：通过
Document对象可以操作 HTML，动态改变页面
DOM 树结构：
css
html (根节点)
└── body (可视区开始节点)
├── header.container
│ └── nav
├── main
└── footerDOM 编程------查找元素：
javascript
// 按 id 查找（最快，唯一索引）
document.querySelector('#myId')
// 按 class 查找（次之）
document.querySelector('.myClass')
// 按标签查找（最慢）
document.querySelector('div')⚠️ 注意：id 查找是 O(1) 级别，class 是 O(n)，标签更慢。性能敏感场景优先用 id。
AI 辅助开发：Prompt 设计心法
AI 写代码很快，但你怎么描述需求，决定了它产出什么质量。
Prompt 三要素
- 模块化约束：告诉 AI "请遵守模块化规范"
- RESTful 规范：告诉 AI "请设计 RESTful 风格的 API"
- 框架指定：告诉 AI "请使用 Bootstrap CSS 框架，使用语义化标签"
Prompt 示例
css
请你帮我设计 users 用户数据接口，请遵守 RESTful 机制，
URL 只暴露资源，HTTP 动词表示 CRUD 操作。
请帮我编写首页，使用 Bootstrap CSS 框架，
使用语义化标签（nav/main/footer），不要用 div 满天飞。📌 划重点：Prompt 设计能力 = 把规范和需求翻译成 AI 能理解的语言。AI 擅长执行，但它不会主动帮你选架构------这个决策是你的。
📊 传统写法 vs 规范写法
| 维度 | 传统写法 | 规范写法 |
|---|---|---|
| 函数 | 200行干3件事 | 20行干1件事 |
| URL | /getUser?id=123 |
GET /users/123 |
| HTML | <div class="header"> |
<header> |
| 文件组织 | 扁平化堆文件 | 按模块分文件夹 |
| AI Prompt | "帮我写个用户页面" | "用语义化标签+Bootstrap+模块化" |
一句话总结
模块化让代码能维护，RESTful 让接口能理解，语义化让 HTML 能搜索，Prompt 让 AI 能对齐。
全栈开发不是学多少框架，是把这三根支柱立稳了，不管技术怎么换，底层思维不变。