前言

很多刚学编程的人会有一个困惑：为什么教程里的项目和公司里的项目差别那么大？

教程做一个留言板，HTML + PHP + MySQL 三件套搞定。公司的项目，光前端就要学 React/Vue、TypeScript、Webpack（哦不对现在是 Vite 了）、状态管理、路由、权限、埋点…… 后端的 Spring Boot / Gin + Redis + Kafka + Elasticsearch + Docker + K8s…… 看着就头疼。

这篇文章用一个留言板项目，模拟真实世界中技术栈是如何一步一步加上去的。每加一个东西，都不是「为了学而学」，而是老板提了新需求。

你不需要会所有的技术，但搞清楚它们为什么存在，比背 API 重要得多。

阶段一：纯静态

老板说，搞个留言板页面给我看看。

做静态的最简单 —— 一个 HTML 文件。写上标题、几条假留言，搞定。

过了一天，老板说太丑了。加 CSS。再过一天，再加点交互吧？加 JavaScript。

老板又说，以后做更多页面了，每次都手写样式太慢。引入 Bootstrap（那个年代）或者现在的 Tailwind CSS。不想从零写组件，用 shadcn/ui 或者 Ant Design。

到这一步，我们还不需要 Node.js，不需要构建工具。

阶段二：前后端交互

老板说，留言不能是假的，得让用户真的能留言。

现在需要后端了。最开始前后端不分离 —— 用 JSP / Thymeleaf / PHP 模板在服务端拼 HTML 返回。数据库用 MySQL，ORM 用 MyBatis / JPA。

后来老板听说「单页面应用体验更好」。好，前后端分离。

前端选了 Vue 3（当年是 Vue 2）或者 React 18。后端给了 RESTful API，顺便丢了个 Swagger 文档地址过来。前端用 axios / fetch 调接口。接口还没写完的时候，用 MSW（Mock Service Worker）模拟数据先开发着。

老板说：小程序也搞一个。前端选了 Taro / uni-app，一套代码跑微信 + 支付宝 + 抖音小程序。还好前后端分离了，API 不用动。

阶段三：工程化

代码越写越多，JS 和 CSS 散落一地。需要一个构建工具把所有东西打包、压缩、转换。

当年是 Webpack，现在是 Vite。顺便引入了 TypeScript—— 老板说代码质量要提高。

CSS 也不手写了，用 Less / Sass 或者直接用 CSS Modules / Tailwind。Tailwind 的好处是样式跟着 HTML 走，不用在两个文件之间跳。

老板说要做响应式。移动端布局用 CSS Grid / Flexbox，配合 Tailwind 的断点类。图片用 <picture> + srcset 做自适应。

老板说要做动画。用 CSS Animation / Framer Motion / GSAP，页面不再死气沉沉。

阶段四：测试与部署

老板说，你们提交前先跑测试。前端用 Vitest / Playwright，后端用 JUnit / Pytest。测试人员写自动化脚本。

代码变更越来越频繁，每次手动部署太累。引入 CI/CD：Git push → GitHub Actions 跑测试 → 测试通过自动部署。

部署用什么？Docker。前端打镜像跑 Nginx，后端打镜像跑 Java / Go。多台服务器用 Docker Compose 编排，规模再大上 Kubernetes。

顺便加个 Nginx 反代，配 SSL，域名绑定。

阶段五：性能与缓存

用的人多了，数据库扛不住。加 Redis 做缓存，热门留言直接缓存不查数据库。数据库做读写分离和分库分表。

前端也不能闲着。用 Vuex / Pinia / Zustand 做状态管理，localStorage 存用户偏好。请求做防抖节流，别让用户狂点。

静态资源上 CDN。图片用 WebP / AVIF 格式，懒加载。

阶段六：搜索与日志

留言越来越多，老板说加个搜索功能。数据库 LIKE 查询太慢，上 Elasticsearch 做全文搜索 + 中文分词。

用户留言后需要同步到搜索索引，同步操作会阻塞。引入消息队列 Kafka / RabbitMQ 做异步。

日志也不能只看终端了。用 ELK（Elasticsearch + Logstash + Kibana） 或者更轻的 Grafana + Loki 做日志收集和可视化。前端上 Sentry 做错误监控。

阶段七：安全

用户要注册登录了。前后端不分离时用 Cookie + Session，分离后用 JWT Token。

老板说，留言板账号要能登录公司的其他系统。上 OAuth 2.0 + SSO（单点登录）。

HTTP 不安全，切换到 HTTPS。防止 XSS、CSRF、SQL 注入 —— 后端框架和前端框架各有一套防护机制，但要搞清楚它们防了什么。

防爬虫和恶意刷留言：Nginx 限流、Redis 频率限制、前端加验证码。

阶段八：AI 与现代化

这两年的新花样：

• 老板说留言里要能一键翻译。加个 AI 翻译 API。
• 老板说能不能自动总结留言？LLM API（OpenAI / DeepSeek）一行 prompt 搞定。
• 老板说回复能不能 AI 生成草稿？同上。
• 前端开发用 GitHub Copilot / Cursor 辅助写代码。
• 用 Dependabot / Renovate 自动更新依赖。

现在回头看

当初那个「HTML + CSS + JS」就能搞定的留言板，最后变成了：

1
前端: React/Vue + TypeScript + Vite + Tailwind + Pinia/Zustand + Axios + Sentry
2
后端: Spring Boot / Gin + MySQL + Redis + Elasticsearch + Kafka + Docker + K8s
3
基础设施: Nginx + CDN + HTTPS + CI/CD + Grafana + ELK

这还不是全部。每一个新需求都可能引入一个新工具或新服务。

但你不是一个人在做这些。真实项目里，前端负责前端那一坨，后端负责后端那一坨，运维负责基础设施那一坨。知道全貌是为了理解「为什么需要它」，不是为了一个人全扛。

总结

技术的复杂性不是凭空产生的。每加一个东西，背后都有一个具体的问题要解决：

• 代码多了 → 构建工具
• 用户多了 → 缓存 + 分布式
• 搜索需求 → Elasticsearch
• 老板怕出事 → 监控 + 日志
• 安全需求 → JWT + HTTPS + 限流

这也是为什么面试总问「你项目中用过什么技术」—— 不是在考你背 API，是在考你有没有理解这些技术为什么出现在项目里。