前端后端吵吵吵，谁才是路由的爸爸？
RESTful、MVC、MVVM、单页面、接口文档……
这些词面试老是蹦出来，到底怎么搞懂？
今天我就用一篇文章，把这坨概念一次性讲明白，保证你面试顺得像丝儿一样～
先放一张脑图（文字版）
- URL 组成
- 动态路由 & RESTful 规范
- 后端路由（传统 MVC）
- 前端路由（SPA）
- 前后端分离 & API
- MVVM 是啥
- 大前端是怎么来的
别急，我们一步步来。
URL 到底长啥样？
看这个例子：
https://juejin.cn/users/123?a=1&b=2#hash
这串玩意拆开是这样的：
| 部分 | 叫啥 | 干啥用 |
|---|---|---|
https | 协议 | 跟服务端说“咱用安全的 HTTP 聊” |
juejin.cn | 域名 | 找到服务器 |
| （443） | 端口 | https 默认 443，http 默认 80 |
/users/123 | 路径 | 表示我要哪个资源 |
?a=1&b=2 | 查询字符串 | 额外条件 |
#hash | 哈希 | 网页内定位（浏览器自己用） |
你面试的时候，HR 出道题：“来，说说 URL 里这几个玩意怎么区分？”
别怂，这张表一背，稳了。
动态路由 + RESTful 是啥？
动态路由：就是路径里有变量。
/users/:id
访问/users/123，id就是123。
这可不光前端，后端也玩得飞起，比如 Express、Django、Spring MVC 都支持。
RESTful 风格，这是后端最爱考你的名词之一。
核心是两个点：
- URL 定位资源
- HTTP 方法表示动作
| 动作 | 方法 | URL | 干啥 |
|---|---|---|---|
| 查 | GET | /post/:id | 查某篇文章 |
| 增 | POST | /post | 新建文章 |
| 改（全量） | PUT | /post/:id | 替换整篇文章 |
| 改（部分） | PATCH | /post/:id | 改一部分 |
| 删 | DELETE | /post/:id | 删除文章 |
| 查头 | HEAD | /post/:id | 查元信息 |
还有个彩蛋：
上传头像？ PUT /avatar/:id
也是 RESTful 的精神体现。
早期后端路由：全是后端爸爸说了算
最早的网站开发，堪称后端爸爸统治全局：
浏览器发请求 -> 服务器路由（后端匹配 URL）
-> 调用 Controller（控制器） -> 找 Model（数据库）
-> 用 View（模板引擎）拼页面 -> 返回完整 HTML
来个例子：
/users/123
后端路由：匹配 /users/:id
控制器：查数据库找这个 ID 的用户
View：用模板（JSP、EJS、Thymeleaf……）拼个 <h1>Hello, Allen</h1>
完事，一整个页面扔回去。
✅ 优点
- 够简单，浏览器啥都不用管，后端全包办
- SEO 友好，搜索引擎一看就是现成 HTML
❌ 缺点
- 每次换个页面都得刷新整个浏览器
- 前端和后端紧紧捆一起，俗称“耦合”
- 前端写页面还得学后端模板语法，想单飞都飞不了
MVC：后端路由背后的分层秘密
为啥后端路由要搞 Controller、Model、View 这么啰嗦？
为了分工明确嘛，这套叫 MVC。
| 层 | 负责啥 |
|---|---|
| Model | 跟数据说话（查库） |
| View | 跟用户说话（HTML 页面） |
| Controller | 跟两边说话（路由+逻辑） |
然后前端不乐意了：咱分开干吧！
随着 Ajax、React、Vue 这些神器出现，前端发现：
“后端你别给我拼页面了，给我 JSON 就行！我自己用 JS 拼！”
于是：
- 后端只要写接口，遵守 RESTful，暴露资源。
- 前端拿
fetch/axios去调。 - 数据回来后，自己拼页面，想咋炫就咋炫。
这就是：
/api/user/123 -> 返回 {"id":123,"name":"Allen"}
前端拿到后在浏览器里渲染。
前端路由登场：SPA 单页面的秘密武器
以前换页面，要刷新整个页面。
单页面应用（SPA）说：
“我全都要在浏览器里搞定！”
前端路由就诞生了。
它干两件事：
- 监听 URL 的变化（
/users/123） - 找到对应的页面级组件（
<UserPage />）渲染出来
常用库：
- React →
react-router-dom - Vue →
vue-router
所以现在：
- 后端路由：只关心 API
- 前端路由：自己切换页面，浏览器无感刷新
MVVM：前端这锅饭咋分工？
有了前端路由，前端自己得有分层。
这时候来了个词：
MVVM = Model + View + ViewModel
| 层 | 干啥 | React 里咋体现 |
|---|---|---|
| Model | 数据（后端接口给的 JSON） | fetch、axios |
| View | 页面（长啥样） | JSX |
| ViewModel | 连接两者（状态管理） | useState、useEffect |
举个栗子：
function UserPage() {
const [user, setUser] = useState(null);
useEffect(() => {
fetch('/api/user/123')
.then(res => res.json())
.then(data => setUser(data));
}, []);
return <div>{user?.name}</div>;
}
- Model：
/api/user/123回来的 JSON - View：
<div>{user?.name}</div> - ViewModel：
useState管数据，useEffect拉接口
前后端分离：API 开发文档就是圣旨
既然前端要自己拼页面，后端只给数据，那两边得靠啥对接？
靠接口文档！
文档里写：
- 路径：
GET /api/user/:id - 请求参数：
id - 返回值：
{ id, name, age }
前端对着写 fetch，后端照着返回，谁也别甩锅。
大前端：不仅仅是网页
前端发展到现在，已经不只是写个 PC 页面了：
| 场景 | 干啥 |
|---|---|
| PC 网页 | React、Vue |
| Mobile H5 | 浏览器里跑的响应式页面 |
| App | React Native、Flutter、uni-app |
| 小程序 | 微信/支付宝小程序 |
| 桌面端 | Electron，QQ 音乐、VSCode 都是 Electron 做的 |
现在的前端程序员：
一个接口拉到底，PC/手机/App/小程序/桌面都能用，
不叫前端，叫大前端。
✅ 全文一句话总结
以前后端爸爸统治一切（后端路由 + MVC）
现在前端要当家做主（前端路由 + MVVM）
RESTful 让接口更优雅
前后端分离靠 API 文档当红娘
前端自己写路由，写状态，拿接口拼页面，
一套技术打天下，PC、Mobile、小程序全都要！
面试这么说，面试官只会点头
你只要把这套：
“现在都是前后端分离，后端只写 RESTful API，前端自己做路由和渲染，框架一般用 MVVM，比如 React 用 useState/useEffect 实现数据驱动，前后端通过接口文档连调，一套代码可以适配 PC、H5、App、小程序，典型的大前端。”
背下来，面试稳了。
如果觉得有用，请你动动发财的小手，点个赞赞。
这篇文章字数不多，但全是血肉干货。
收藏就是赚到，面试临时抱佛脚，就翻出来背背就行。
有用？别忘了点赞 + 收藏 + 关注我
要是想看：
✅ 前后端分离实战 DEMO
✅ 前端路由代码示例
✅ MVVM 手写版
在评论区告诉我，我给你安排！
完结！感谢阅读 🫡
