小闭环项目技术栈选型实践
概述
技术选型不是孤立的决策，而是从业务需求出发，结合团队现状、技术熟悉度、扩展性等多维度的综合考量。本文以一个完整小闭环项目为例，讲解从前端到后端、从存储到部署的全栈选型思维链。
学习目标
- 建立"业务 → 团队 → 技术 → 扩展性"的选型思维链
- 掌握前端请求库、CSS 方案、辅助工具的选型依据
- 理解 NestJS + MySQL + Redis 的后端选型逻辑
- 了解 Docker 与原生部署的方案对比
一、选型思维链
图表渲染中…
| 决策要素 | 说明 | 权重 |
|---|---|---|
| 业务需求 | 功能需求、性能要求、用户规模 | 最高 |
| 团队情况 | 技术熟悉度、团队规模、协作方式 | 最高 |
| 技术熟悉度 | 学习成本、开发效率 | 高 |
| 扩展性 | 技术演进、团队成长、生态支持 | 高 |
没有最好的技术，只有最适合的技术。
二、前端技术选型
2.1 请求方案：Axios vs Fetch
| 维度 | Axios | Fetch |
|---|---|---|
| 封装程度 | 完善封装，开箱即用 | 原生 API，需自行封装 |
| 拦截器 | 请求/响应拦截器 | 无内置拦截器 |
| 异常处理 | 自动处理 HTTP 错误 | 需手动判断 response.ok |
| 超时控制 | timeout 配置 | 需 AbortController |
| 包体积 | ~13KB | 原生无额外体积 |
选型建议：生产项目优先 Axios（稳定性和封装性好）；极简项目可用 Fetch + 二次封装。
2.2 Mock 接口方案
| 方案 | 特点 | 适用场景 |
|---|---|---|
| Mock.js | 拦截 XHR，生成随机数据 | 传统项目 |
| MSW | Service Worker 拦截 | 现代前端项目 |
| Json Server | 快速搭建 REST API | 快速原型 |
| vite-plugin-mock | Vite 生态内置 | Vite 项目开发环境 |
2.3 CSS 方案
| 方案 | 优点 | 适用场景 |
|---|---|---|
| Tailwind CSS | 快速开发、体积小、设计系统 | 新项目 |
| UnoCSS | 性能极致、可定制 | 性能敏感项目 |
| Sass + CSS Modules | 成熟稳定 | 团队熟悉 Sass |
| Styled-components | 组件化样式 | React 项目 |
原子化 CSS 流行原因：无需命名、按需生成体积小、内置设计规范、IDE 插件支持好。
2.4 辅助工具
| 工具类型 | 推荐方案 |
|---|---|
| 自动路由 | vite-plugin-pages |
| 自动导入 | unplugin-vue-components / unplugin-auto-import |
| 日期处理 | dayjs / date-fns |
| 工具函数 | lodash-es / radash |
三、服务端技术选型
3.1 SSR 框架
| 前端框架 | SSR 方案 | 特点 |
|---|---|---|
| Vue | Nuxt.js | 官方推荐，生态完善 |
| React | Next.js | 官方推荐，功能强大 |
选择官方方案的理由：与框架深度集成、长期维护保障、社区生态完善、文档资料丰富。
3.2 后端框架：NestJS
| 维度 | 评估 |
|---|---|
| 扩展性 | 模块化架构，易于扩展 |
| 开发便利性 | 装饰器语法，代码优雅 |
| TypeScript | 原生支持 |
| 企业级 | 依赖注入、模块化、测试友好 |
NestJS 架构层次：Module → Controller → Service → Repository → DTO。
与 Express 对比：NestJS 强制模块化避免面条代码、依赖注入便于测试和解耦、框架自动处理异常。
四、存储层选型
4.1 数据库：MySQL
| 维度 | 说明 |
|---|---|
| 成熟稳定 | 20+ 年发展，大规模生产验证 |
| 生态完善 | ORM 支持、工具链、社区资源 |
| 事务支持 | ACID 特性，数据一致性好 |
ORM 推荐：
| ORM | 特点 | 推荐场景 |
|---|---|---|
| Prisma | 类型安全，开发体验极佳 | 新项目 |
| TypeORM | TypeScript 原生，装饰器语法 | NestJS 项目 |
| Sequelize | 功能全面，生态成熟 | 传统项目 |
4.2 缓存：Redis
典型应用场景：热点数据缓存、分布式 Session、简单消息队列、计数器/排行榜。
图表渲染中…
注意事项：缓存雪崩（随机过期时间）、缓存穿透（缓存空值）、缓存一致性（更新后失效缓存）。
五、部署方案选型
5.1 操作系统
推荐 Ubuntu LTS：5 年安全更新、apt 包管理丰富、社区活跃文档完善、新手友好。
5.2 部署方式对比
| 维度 | Docker 部署 | 原生部署 |
|---|---|---|
| 环境一致性 | 完美 | 需手动配置 |
| 部署速度 | 快 | 较慢 |
| 学习成本 | 需学 Docker | 传统运维 |
| 扩展性 | K8s 友好 | 手动扩展 |
| 调试难度 | 容器内调试 | 直接调试 |
Docker 部署：多阶段构建减小镜像体积、docker-compose 编排多服务。
原生部署：PM2 进程管理 + Nginx 反向代理，适合小型项目。
六、完整技术栈总览
图表渲染中…
常见问题
Q: 小项目需要 NestJS 吗？
不一定。NestJS 学习曲线较陡，小项目可能过度设计。简单 API 用 Express/Koa 即可，中大型项目或团队协作场景推荐 NestJS。
Q: Docker 和原生部署怎么选？
生产环境推荐 Docker（环境一致性、扩展性好）；学习阶段或小型项目可用 PM2 + Nginx 快速部署。
延伸阅读
- 上一篇：测试工作流与文档规范 — 测试协作
- 下一篇：终端工具扩展指南 — 开发效率
- 相关：前端技术方案选型方法 — 选型方法论