全栈项目架构三支柱：模块化 × 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
      └── footer

DOM 编程------查找元素：

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 能对齐。

全栈开发不是学多少框架，是把这三根支柱立稳了，不管技术怎么换，底层思维不变。