diff --git a/AGENTS.md b/AGENTS.md index f40ac9e..fdcb68d 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -213,6 +213,7 @@ git push origin develop - `docs/getting-started/README.md` - 从零开始完整入门,包含学习地图、Vibe Coding 经验、网络配置、CLI 配置与开发环境搭建 - `docs/concepts/问题求解能力.md` - 问题定义与求解路径底层模型 - `docs/references/底层程序逻辑设计与工程优化项.md` - 底层程序逻辑与工程优化检查项 +- `docs/references/技术栈.md` - 常见软件系统技术栈、选型维度、组合案例与初学者学习路径 - `skills/auto-skill/` - Skills 生成、重构与校验的元技能 --- diff --git a/README.md b/README.md index f798adf..e53f59d 100644 --- a/README.md +++ b/README.md @@ -406,6 +406,7 @@ pip install -r tools/prompts-library/scripts/requirements.txt * [**AI 编程质量门禁与常见坑**](docs/references/AI编程质量门禁与常见坑.md): 系统提示词、硬约束、质量门禁与常见问题排查的合并入口。 * [**开发经验总结**](docs/references/开发经验.md): 变量命名、文件结构、编码规范、架构原则等。 * [**项目架构模板**](docs/references/项目架构模板.md): 多种项目类型的标准目录结构与数据服务架构模板。 +* [**技术栈**](docs/references/技术栈.md): 常见软件系统技术栈、选型维度、组合案例与初学者学习路径。 * [**系统提示词集合**](https://docs.google.com/spreadsheets/d/1Ifk_dLF25ULSxcfGem1hXzJsi7_RBUNAki8SBCuvkJA/edit?gid=1254297203#gid=1254297203): AI 开发的系统提示词,含多版本开发规范(云端表格)。 * [**外部资源(在线表格)**](./assets/README.md): 外部资源的唯一真相源(按类型分表),本地 Markdown 保留为历史参考。 diff --git a/assets/ai-citation/llms-full.txt b/assets/ai-citation/llms-full.txt index 67343cb..de361e8 100644 --- a/assets/ai-citation/llms-full.txt +++ b/assets/ai-citation/llms-full.txt @@ -44,6 +44,7 @@ GEOFlow 的关键启发是:GEO 不是关键词堆砌,而是内容工程链 - docs/getting-started/README.md:从零开始完整入门,包含学习地图、Vibe Coding 经验、网络环境、CLI 配置与开发环境搭建。 - docs/concepts/问题求解能力.md:问题定义、目标、约束、对象、路径。 - docs/concepts/拼好码.md:胶水原则的扩展,把复用成熟能力作为工程交付默认路径。 +- docs/references/技术栈.md:常见软件系统技术栈、选型维度、组合案例与初学者学习路径。 - assets/ai-citation/geo-seo-checklist.md:GEO / SEO 内容工程检查清单。 - docs/references/AI编程质量门禁与常见坑.md:系统提示词、硬约束、质量门禁与 AI 编程常见失败模式。 - skills/README.md:技能库入口。 diff --git a/docs/README.md b/docs/README.md index 9b6e4bf..d010399 100644 --- a/docs/README.md +++ b/docs/README.md @@ -18,4 +18,5 @@ 3. [思维模型](./concepts/思维模型.md) 4. [拼好码](./concepts/拼好码.md) 5. [AI 编程质量门禁与常见坑](./references/AI编程质量门禁与常见坑.md) -6. [哲学方法论](./philosophy/README.md) +6. [技术栈](./references/技术栈.md) +7. [哲学方法论](./philosophy/README.md) diff --git a/docs/references/README.md b/docs/references/README.md index 14a4154..fa10139 100644 --- a/docs/references/README.md +++ b/docs/references/README.md @@ -23,6 +23,7 @@ ### 项目规范 - [项目架构模板](项目架构模板.md) - 通用项目结构与 Dataset First 数据服务架构模板 +- [技术栈](技术栈.md) - 软件系统常见技术栈、选型维度、组合案例与初学者学习路径 - [代码组织](代码组织.md) - 代码组织原则 - [开发经验](开发经验.md) - 实战经验总结 diff --git a/docs/references/技术栈.md b/docs/references/技术栈.md new file mode 100644 index 0000000..a6f136f --- /dev/null +++ b/docs/references/技术栈.md @@ -0,0 +1,1531 @@ +# 技术栈 + +# 一、什么是技术栈 + +**技术栈**,英文叫 **Technology Stack**,指开发一个软件系统时使用的一整套技术、框架、语言、工具和平台。 + +它不是单独某一种技术,而是一个组合。 + +例如,一个网站可能会用: + +* 前端:React、TypeScript、Tailwind CSS +* 后端:Java、Spring Boot +* 数据库:MySQL、Redis +* 部署:Docker、Nginx、Kubernetes +* 云服务:AWS +* 工具:Git、GitHub Actions + +这些合起来,就是这个项目的技术栈。 + +--- + +# 二、技术栈通常包含哪些部分 + +## 1. 前端技术栈 + +前端负责用户看到的页面和交互。 + +常见内容包括: + +### 基础语言 + +* HTML:页面结构 +* CSS:页面样式 +* JavaScript:页面交互 +* TypeScript:JavaScript 的增强版,更适合大型项目 + +### 前端框架 + +* React +* Vue +* Angular +* Svelte +* SolidJS + +### UI 框架和组件库 + +* Tailwind CSS +* Bootstrap +* Ant Design +* Element Plus +* Material UI +* Shadcn UI + +### 构建工具 + +* Vite +* Webpack +* Rollup +* Parcel +* esbuild + +### 状态管理 + +* Redux +* Zustand +* Pinia +* Vuex +* MobX +* Recoil + +### 前端路由 + +* React Router +* Vue Router +* Next.js Router +* Nuxt Router + +### 前端请求工具 + +* Fetch API +* Axios +* TanStack Query +* SWR + +### 前端测试 + +* Jest +* Vitest +* Cypress +* Playwright +* Testing Library + +### 前端常见组合 + +React 技术栈: + +> React + TypeScript + Vite + Tailwind CSS + Zustand + Axios + +Vue 技术栈: + +> Vue 3 + TypeScript + Vite + Pinia + Vue Router + Element Plus + +企业级前端技术栈: + +> React + TypeScript + Next.js + Tailwind CSS + Shadcn UI + TanStack Query + +--- + +## 2. 后端技术栈 + +后端负责业务逻辑、接口、权限、数据处理、文件处理、支付、消息通知等。 + +### 常见后端语言 + +* Java +* Python +* JavaScript / TypeScript +* Go +* PHP +* C# +* Ruby +* Rust +* Kotlin +* Scala + +### Java 后端 + +常见技术: + +* Spring Boot +* Spring MVC +* Spring Cloud +* MyBatis +* MyBatis-Plus +* Hibernate / JPA +* Maven +* Gradle + +常见组合: + +> Java + Spring Boot + MyBatis-Plus + MySQL + Redis + +适合场景: + +* 企业系统 +* 电商平台 +* 金融系统 +* 大型后台系统 +* 微服务架构 + +--- + +### Python 后端 + +常见技术: + +* Django +* Flask +* FastAPI +* SQLAlchemy +* Celery +* Pydantic +* Poetry + +常见组合: + +> Python + FastAPI + PostgreSQL + Redis + Celery + +适合场景: + +* API 服务 +* 数据平台 +* AI 应用 +* 自动化工具 +* 中小型 Web 后端 + +--- + +### Node.js 后端 + +常见技术: + +* Express +* NestJS +* Koa +* Fastify +* Prisma +* TypeORM +* Sequelize + +常见组合: + +> Node.js + NestJS + TypeScript + Prisma + PostgreSQL + +适合场景: + +* 前后端统一 TypeScript +* 实时应用 +* 中台系统 +* API 服务 +* 初创项目 + +--- + +### Go 后端 + +常见技术: + +* Gin +* Echo +* Fiber +* GORM +* Go kit +* gRPC + +常见组合: + +> Go + Gin + PostgreSQL + Redis + Docker + +适合场景: + +* 高并发服务 +* 云原生系统 +* 微服务 +* 网关 +* 基础设施工具 + +--- + +### PHP 后端 + +常见技术: + +* Laravel +* Symfony +* ThinkPHP +* Composer + +常见组合: + +> PHP + Laravel + MySQL + Redis + +适合场景: + +* 内容管理系统 +* 企业官网 +* 电商网站 +* 快速 Web 开发 + +--- + +### C# 后端 + +常见技术: + +* ASP.NET Core +* Entity Framework Core +* LINQ +* NuGet + +常见组合: + +> C# + ASP.NET Core + SQL Server + Redis + +适合场景: + +* 企业系统 +* Windows 生态 +* 内部管理系统 +* 大型后端服务 + +--- + +## 3. 数据库技术栈 + +数据库负责存储、查询和管理数据。 + +## 关系型数据库 + +适合结构化数据。 + +常见数据库: + +* MySQL +* PostgreSQL +* SQL Server +* Oracle +* SQLite +* MariaDB + +适合存储: + +* 用户信息 +* 订单信息 +* 商品信息 +* 交易记录 +* 权限数据 + +常见组合: + +> MySQL + Redis +> PostgreSQL + Prisma +> SQL Server + Entity Framework + +--- + +## 非关系型数据库 + +适合灵活结构、文档、键值、图数据等。 + +### 文档数据库 + +* MongoDB +* CouchDB + +适合: + +* 内容数据 +* 配置数据 +* 半结构化数据 + +### 键值数据库 + +* Redis +* Memcached + +适合: + +* 缓存 +* Session +* 排行榜 +* 验证码 +* 分布式锁 + +### 搜索引擎 + +* Elasticsearch +* OpenSearch +* Solr + +适合: + +* 全文搜索 +* 日志检索 +* 商品搜索 +* 数据分析 + +### 图数据库 + +* Neo4j +* ArangoDB + +适合: + +* 社交关系 +* 推荐系统 +* 知识图谱 +* 风控关系分析 + +### 时序数据库 + +* InfluxDB +* TimescaleDB +* Prometheus + +适合: + +* 监控数据 +* 物联网数据 +* 设备指标 +* 时间序列分析 + +--- + +# 三、移动端技术栈 + +移动端负责开发手机 App。 + +## iOS 原生开发 + +语言和工具: + +* Swift +* Objective-C +* Xcode +* SwiftUI +* UIKit + +适合: + +* iPhone App +* iPad App +* Apple Watch App +* 高性能 iOS 应用 + +组合: + +> Swift + SwiftUI + Combine + CoreData + +--- + +## Android 原生开发 + +语言和工具: + +* Kotlin +* Java +* Android Studio +* Jetpack Compose +* XML Layout + +适合: + +* Android 手机 App +* 平板 App +* Android TV +* 原生高性能应用 + +组合: + +> Kotlin + Jetpack Compose + Retrofit + Room + +--- + +## 跨平台移动开发 + +一套代码开发多个平台。 + +常见技术: + +* Flutter +* React Native +* Ionic +* Expo +* Kotlin Multiplatform +* .NET MAUI + +常见组合: + +> Flutter + Dart + Firebase +> React Native + TypeScript + Expo + +适合: + +* 初创产品 +* 多端快速开发 +* 中小型 App +* 需要同时支持 iOS 和 Android 的项目 + +--- + +# 四、桌面端技术栈 + +桌面端用于开发 Windows、macOS、Linux 软件。 + +常见技术: + +* Electron +* Tauri +* Qt +* WPF +* WinUI +* JavaFX +* Avalonia +* Flutter Desktop + +常见组合: + +> Electron + React + TypeScript +> Tauri + Rust + Vue +> C# + WPF + SQL Server +> Qt + C++ + +适合: + +* 桌面客户端 +* 编辑器 +* 企业内部软件 +* 跨平台工具 +* 即时通讯软件 + +--- + +# 五、全栈技术栈 + +全栈是指前端、后端、数据库、部署都能覆盖。 + +常见全栈组合: + +## MERN + +> MongoDB + Express + React + Node.js + +适合: + +* 初创项目 +* SaaS +* Web 应用 +* 快速原型 + +## MEAN + +> MongoDB + Express + Angular + Node.js + +适合: + +* 企业级前端 +* 大型后台系统 + +## MEVN + +> MongoDB + Express + Vue + Node.js + +适合: + +* Vue 项目 +* 中小型 Web 应用 + +## PERN + +> PostgreSQL + Express + React + Node.js + +适合: + +* 结构化数据较多的 Web 应用 +* SaaS +* 管理后台 + +## T3 Stack + +> TypeScript + Next.js + tRPC + Prisma + Tailwind CSS + +适合: + +* 类型安全的全栈项目 +* 现代 Web 应用 +* 快速开发 + +## Django 全栈 + +> Python + Django + PostgreSQL + Redis + Celery + +适合: + +* 内容平台 +* 管理系统 +* 数据型应用 +* 中小企业系统 + +## Spring Boot 全栈 + +> Java + Spring Boot + Vue / React + MySQL + Redis + +适合: + +* 企业系统 +* 电商平台 +* 后台管理系统 +* 中大型项目 + +--- + +# 六、DevOps 和部署技术栈 + +DevOps 负责让项目自动化构建、测试、部署、监控和运维。 + +## 操作系统 + +* Linux +* Ubuntu +* CentOS +* Debian +* Alpine Linux +* Windows Server + +## Web 服务器 + +* Nginx +* Apache +* Caddy +* IIS + +## 容器技术 + +* Docker +* Docker Compose +* Podman + +## 容器编排 + +* Kubernetes +* Docker Swarm +* Nomad +* OpenShift + +## CI/CD + +* GitHub Actions +* GitLab CI +* Jenkins +* CircleCI +* Travis CI +* Argo CD +* Tekton + +## 云平台 + +* AWS +* Microsoft Azure +* Google Cloud +* 阿里云 +* 腾讯云 +* 华为云 +* Cloudflare +* Vercel +* Netlify +* Railway +* Render +* Fly.io + +## 基础设施即代码 + +* Terraform +* Pulumi +* Ansible +* Chef +* Puppet + +## 监控和日志 + +* Prometheus +* Grafana +* ELK Stack +* Loki +* Datadog +* New Relic +* Sentry +* OpenTelemetry + +常见部署组合: + +> Docker + Nginx + GitHub Actions + AWS +> Kubernetes + Helm + Argo CD + Prometheus + Grafana +> Vercel + Next.js + Supabase + +--- + +# 七、AI / 机器学习技术栈 + +AI 技术栈用于机器学习、深度学习、大模型应用、数据处理等。 + +## 编程语言 + +* Python +* R +* Julia +* C++ +* Scala + +## 数据处理 + +* NumPy +* Pandas +* Polars +* Dask +* Spark + +## 机器学习 + +* Scikit-learn +* XGBoost +* LightGBM +* CatBoost + +## 深度学习 + +* PyTorch +* TensorFlow +* Keras +* JAX + +## 大模型应用 + +* OpenAI API +* Anthropic API +* Gemini API +* LangChain +* LlamaIndex +* Haystack +* Transformers +* vLLM +* Ollama +* Hugging Face + +## 向量数据库 + +* Pinecone +* Weaviate +* Milvus +* Qdrant +* Chroma +* FAISS + +## MLOps + +* MLflow +* Kubeflow +* Weights & Biases +* DVC +* Airflow +* Prefect + +常见 AI 应用栈: + +> Python + FastAPI + OpenAI API + PostgreSQL + Redis + Docker + +RAG 应用栈: + +> LangChain + OpenAI API + Chroma / Pinecone + FastAPI + React + +机器学习训练栈: + +> Python + Pandas + Scikit-learn + XGBoost + MLflow + +深度学习训练栈: + +> Python + PyTorch + Transformers + Hugging Face + Weights & Biases + +--- + +# 八、数据工程技术栈 + +数据工程负责采集、清洗、存储、计算和分析数据。 + +## 数据采集 + +* Kafka +* RabbitMQ +* Flume +* Logstash +* Debezium + +## 数据存储 + +* Hadoop HDFS +* Amazon S3 +* MinIO +* Hive +* HBase + +## 数据计算 + +* Spark +* Flink +* Presto +* Trino +* Beam + +## 数据仓库 + +* Snowflake +* BigQuery +* Redshift +* ClickHouse +* Doris +* StarRocks + +## 数据调度 + +* Airflow +* Prefect +* Dagster +* DolphinScheduler +* Azkaban + +## 数据可视化 + +* Tableau +* Power BI +* Superset +* Metabase +* Looker + +常见组合: + +> Kafka + Spark + Hive + Airflow + Superset +> dbt + Snowflake + Airflow + Tableau +> Flink + Kafka + ClickHouse + Grafana + +--- + +# 九、游戏开发技术栈 + +游戏开发技术栈包括游戏引擎、图形渲染、物理系统、网络通信等。 + +## 游戏引擎 + +* Unity +* Unreal Engine +* Godot +* Cocos Creator + +## 游戏开发语言 + +* C# +* C++ +* Lua +* GDScript +* JavaScript +* Python + +## 图形技术 + +* OpenGL +* Vulkan +* DirectX +* Metal +* WebGPU + +## 常见组合 + +Unity 游戏: + +> Unity + C# + Blender + Photon + +Unreal 游戏: + +> Unreal Engine + C++ + Blueprint + Quixel + +Web 游戏: + +> Phaser + JavaScript + WebGL + +--- + +# 十、嵌入式和物联网技术栈 + +用于硬件设备、传感器、智能家居、工业控制等。 + +## 编程语言 + +* C +* C++ +* Rust +* MicroPython +* Assembly + +## 硬件平台 + +* Arduino +* Raspberry Pi +* ESP32 +* STM32 +* Nordic nRF +* Jetson Nano + +## 操作系统 + +* FreeRTOS +* Zephyr +* Embedded Linux +* RT-Thread + +## 通信协议 + +* MQTT +* CoAP +* Bluetooth +* Zigbee +* LoRa +* Modbus +* CAN +* HTTP + +常见组合: + +> ESP32 + FreeRTOS + MQTT + AWS IoT +> STM32 + C + FreeRTOS + CAN +> Raspberry Pi + Python + MQTT + Home Assistant + +--- + +# 十一、区块链技术栈 + +用于开发智能合约、钱包、去中心化应用等。 + +## 智能合约语言 + +* Solidity +* Rust +* Move +* Vyper + +## 区块链平台 + +* Ethereum +* Solana +* Polygon +* BNB Chain +* Aptos +* Sui + +## 开发工具 + +* Hardhat +* Foundry +* Truffle +* Remix + +## Web3 前端 + +* ethers.js +* web3.js +* wagmi +* viem +* RainbowKit + +常见组合: + +> Solidity + Hardhat + ethers.js + React +> Rust + Solana + Anchor + React +> Move + Aptos + TypeScript + +--- + +# 十二、网络安全技术栈 + +用于安全测试、防护、审计和监控。 + +## 安全测试 + +* Burp Suite +* OWASP ZAP +* Nmap +* Metasploit +* Wireshark +* SQLMap + +## 安全开发 + +* OAuth 2.0 +* OpenID Connect +* JWT +* HTTPS / TLS +* RBAC +* ABAC + +## 安全监控 + +* SIEM +* Wazuh +* Splunk +* ELK +* Suricata +* Zeek + +## 代码安全 + +* SonarQube +* Snyk +* Dependabot +* Trivy +* Checkmarx + +--- + +# 十三、常见项目对应技术栈 + +## 个人博客 + +简单版: + +> HTML + CSS + JavaScript + +现代版: + +> Next.js + Markdown + Tailwind CSS + Vercel + +后端版: + +> Django + PostgreSQL + Nginx + Docker + +--- + +## 企业官网 + +> Vue / React + Tailwind CSS + Nuxt / Next.js + Vercel + +--- + +## 后台管理系统 + +> Vue 3 + TypeScript + Vite + Pinia + Element Plus +> React + TypeScript + Ant Design + React Router + Axios + +--- + +## 电商系统 + +> React / Vue + Java Spring Boot + MySQL + Redis + Elasticsearch + RabbitMQ + +--- + +## 即时聊天系统 + +> React + Node.js + WebSocket + Redis + MongoDB + +--- + +## 在线教育平台 + +> React + Spring Boot + MySQL + Redis + OSS + WebRTC + +--- + +## SaaS 系统 + +> Next.js + TypeScript + PostgreSQL + Prisma + Stripe + Vercel + +--- + +## AI 聊天机器人 + +> React + FastAPI + OpenAI API + PostgreSQL + Redis + Vector Database + +--- + +## 短视频平台 + +> Flutter / React Native + Go / Java + MySQL + Redis + Kafka + CDN + Object Storage + +--- + +## 物联网平台 + +> ESP32 + MQTT + Node.js / Go + TimescaleDB + Grafana + +--- + +# 十四、如何选择技术栈 + +选择技术栈时,主要看以下因素: + +## 1. 项目类型 + +不同项目适合不同技术。 + +网站: + +> React、Vue、Next.js、Nuxt + +企业系统: + +> Java、Spring Boot、Vue、MySQL + +AI 应用: + +> Python、FastAPI、PyTorch、OpenAI API + +移动 App: + +> Flutter、React Native、Swift、Kotlin + +高并发服务: + +> Go、Java、Redis、Kafka + +--- + +## 2. 团队能力 + +如果团队熟悉 Java,就优先选 Java。 + +如果团队熟悉 JavaScript,就可以选: + +> React + Node.js + +如果团队熟悉 Python,就可以选: + +> Django / FastAPI + +技术栈不是越新越好,而是团队能不能稳定开发和维护。 + +--- + +## 3. 项目规模 + +小项目: + +> Vue / React + Firebase / Supabase + +中型项目: + +> React / Vue + Node.js / Django / Spring Boot + PostgreSQL + +大型项目: + +> Spring Boot / Go + 微服务 + Kubernetes + Redis + Kafka + Elasticsearch + +--- + +## 4. 性能要求 + +普通网站: + +> Node.js、Python、PHP、Java 都可以 + +高并发系统: + +> Go、Java、Rust、Redis、Kafka + +计算密集型系统: + +> C++、Rust、Go、Python + C++ 扩展 + +AI 训练: + +> Python + PyTorch + GPU + +--- + +## 5. 成本 + +低成本上线: + +> Next.js + Vercel + Supabase +> Vue + Firebase +> Django + SQLite / PostgreSQL + +企业级部署: + +> Kubernetes + 云服务器 + 数据库集群 + CI/CD + +--- + +## 6. 生态成熟度 + +成熟生态通常意味着: + +* 教程多 +* 问题容易搜索 +* 招人容易 +* 插件多 +* 社区活跃 +* 维护成本低 + +比如: + +* Java + Spring Boot +* Python + Django / FastAPI +* JavaScript + React / Vue +* Go + Gin +* PHP + Laravel + +--- + +# 十五、初学者应该学什么技术栈 + +## 如果你想做网页前端 + +推荐路线: + +1. HTML +2. CSS +3. JavaScript +4. TypeScript +5. React 或 Vue +6. Vite +7. Tailwind CSS +8. Git +9. 一个后端基础 + +推荐组合: + +> HTML + CSS + JavaScript + React + TypeScript + Vite + +--- + +## 如果你想做后端 + +推荐路线: + +1. 一门后端语言 +2. 数据库 +3. Web 框架 +4. API +5. 权限认证 +6. 缓存 +7. Docker +8. 部署 + +Java 路线: + +> Java + Spring Boot + MySQL + Redis + +Python 路线: + +> Python + FastAPI / Django + PostgreSQL + Redis + +Node.js 路线: + +> TypeScript + Node.js + NestJS + PostgreSQL + +Go 路线: + +> Go + Gin + PostgreSQL + Redis + +--- + +## 如果你想做全栈 + +推荐两条路线: + +### 路线一:JavaScript / TypeScript 全栈 + +> HTML + CSS + JavaScript + TypeScript + React + Node.js + PostgreSQL + +进阶: + +> Next.js + Prisma + PostgreSQL + Tailwind CSS + +### 路线二:Java 企业全栈 + +> Vue + Java + Spring Boot + MySQL + Redis + +--- + +## 如果你想做 AI + +推荐路线: + +1. Python +2. NumPy +3. Pandas +4. Scikit-learn +5. PyTorch +6. FastAPI +7. 向量数据库 +8. 大模型 API +9. Docker + +推荐组合: + +> Python + PyTorch + FastAPI + OpenAI API + PostgreSQL + Vector Database + +--- + +# 十六、技术栈的层级结构 + +可以把技术栈理解成这样: + +```text +应用层: +React、Vue、Flutter、Spring Boot、Django、FastAPI + +语言层: +JavaScript、TypeScript、Java、Python、Go、C#、C++ + +数据层: +MySQL、PostgreSQL、MongoDB、Redis、Elasticsearch + +基础设施层: +Linux、Docker、Kubernetes、Nginx、云服务器 + +工程工具层: +Git、GitHub、CI/CD、测试工具、监控工具 +``` + +更完整的结构: + +```text +用户界面 + ↓ +前端框架 + ↓ +API 通信 + ↓ +后端服务 + ↓ +业务逻辑 + ↓ +数据库 / 缓存 / 消息队列 + ↓ +服务器 / 容器 / 云平台 + ↓ +监控 / 日志 / 安全 / 自动化部署 +``` + +--- + +# 十七、技术栈示例总表 + +| 项目类型 | 推荐技术栈 | +| ------ | ------------------------------------------------------ | +| 个人博客 | Next.js + Markdown + Tailwind CSS + Vercel | +| 企业官网 | Vue / React + Nuxt / Next.js + Tailwind CSS | +| 后台管理系统 | Vue 3 + TypeScript + Vite + Pinia + Element Plus | +| 电商系统 | Spring Boot + MySQL + Redis + Elasticsearch + RabbitMQ | +| SaaS | Next.js + TypeScript + Prisma + PostgreSQL + Stripe | +| AI 应用 | Python + FastAPI + OpenAI API + PostgreSQL + 向量数据库 | +| 移动 App | Flutter / React Native / Swift / Kotlin | +| 桌面软件 | Electron / Tauri / Qt / WPF | +| 高并发服务 | Go / Java + Redis + Kafka + Kubernetes | +| 数据平台 | Kafka + Spark + Airflow + ClickHouse | +| 游戏 | Unity + C# / Unreal + C++ | +| 物联网 | ESP32 + MQTT + Go / Node.js + TimescaleDB | +| 区块链 | Solidity + Hardhat + ethers.js + React | + +--- + +# 十八、常见误区 + +## 误区一:技术栈越多越厉害 + +不是。 + +技术栈越多,维护成本越高。 + +小项目不要一上来就用: + +> Kubernetes + 微服务 + Kafka + Elasticsearch + +可能会过度设计。 + +--- + +## 误区二:只追求最新技术 + +新技术不一定稳定。 + +选技术时要考虑: + +* 是否成熟 +* 是否有人维护 +* 是否容易招聘 +* 是否适合项目 +* 是否容易部署 +* 是否容易排错 + +--- + +## 误区三:前端只会框架,不懂基础 + +React、Vue 很重要,但 HTML、CSS、JavaScript 基础更重要。 + +--- + +## 误区四:后端只会写接口,不懂数据库 + +后端必须理解: + +* SQL +* 索引 +* 事务 +* 缓存 +* 并发 +* 安全 +* 日志 +* 部署 + +--- + +## 误区五:会技术栈等于会做项目 + +会技术只是第一步。 + +真正做项目还需要: + +* 需求分析 +* 数据库设计 +* 接口设计 +* 权限设计 +* 异常处理 +* 测试 +* 部署 +* 维护 +* 性能优化 + +--- + +# 十九、一个完整 Web 项目的技术栈案例 + +假设做一个在线商城。 + +## 前端 + +* React +* TypeScript +* Vite +* Tailwind CSS +* React Router +* Zustand +* Axios +* TanStack Query + +负责: + +* 商品列表 +* 购物车 +* 登录注册 +* 订单页面 +* 支付页面 +* 用户中心 + +## 后端 + +* Java +* Spring Boot +* Spring Security +* MyBatis-Plus +* Maven + +负责: + +* 用户管理 +* 商品管理 +* 订单管理 +* 支付接口 +* 权限认证 +* 后台管理接口 + +## 数据库 + +* MySQL:存储用户、商品、订单 +* Redis:缓存、验证码、购物车、Session +* Elasticsearch:商品搜索 +* RabbitMQ:订单消息、库存扣减 + +## 文件存储 + +* 阿里云 OSS / AWS S3 + +负责: + +* 商品图片 +* 用户头像 +* 视频资料 + +## 部署 + +* Linux +* Docker +* Nginx +* GitHub Actions +* 云服务器 + +## 监控 + +* Prometheus +* Grafana +* Sentry +* ELK + +完整技术栈可以写成: + +> React + TypeScript + Vite + Tailwind CSS + Java + Spring Boot + MySQL + Redis + Elasticsearch + RabbitMQ + Docker + Nginx + GitHub Actions + Prometheus + Grafana + +--- + +# 二十、面试中如何介绍自己的技术栈 + +可以这样说: + +> 我主要使用 Java 后端技术栈,熟悉 Spring Boot、MyBatis、MySQL、Redis,也了解消息队列、Docker 和 Linux 部署。前端方面使用过 Vue 3、TypeScript、Vite 和 Element Plus,能够独立完成后台管理系统的前后端开发。 + +前端方向可以这样说: + +> 我主要使用 React / Vue 前端技术栈,熟悉 HTML、CSS、JavaScript、TypeScript,掌握组件化开发、路由、状态管理、接口请求、前端工程化和基础性能优化。 + +全栈方向可以这样说: + +> 我熟悉 TypeScript 全栈开发,前端使用 React 和 Next.js,后端使用 Node.js、NestJS,数据库使用 PostgreSQL,ORM 使用 Prisma,部署方面了解 Docker、Vercel 和 GitHub Actions。 + +--- + +# 二十一、总结 + +技术栈就是软件开发中使用的一整套技术组合。 + +它通常包括: + +```text +编程语言 +前端框架 +后端框架 +数据库 +缓存 +消息队列 +搜索引擎 +测试工具 +构建工具 +部署工具 +云平台 +监控工具 +安全工具 +开发协作工具 +``` + +学习技术栈时,不要只背名字,而要理解: + +```text +它解决什么问题? +它适合什么场景? +它和其他技术怎么配合? +它在项目中处于哪一层? +它有什么优点和缺点? +``` + +对初学者来说,推荐先掌握一条主线: + +前端路线: + +> HTML + CSS + JavaScript + TypeScript + React / Vue + +后端路线: + +> Java + Spring Boot + MySQL + Redis + +Python 路线: + +> Python + FastAPI / Django + PostgreSQL + +全栈路线: + +> TypeScript + React + Node.js + PostgreSQL + +AI 路线: + +> Python + PyTorch + FastAPI + 大模型 API + +真正重要的不是“知道很多技术名词”,而是能用合适的技术栈,把一个项目稳定、清晰、可维护地做出来。 \ No newline at end of file diff --git a/llms.txt b/llms.txt index c744898..343336d 100644 --- a/llms.txt +++ b/llms.txt @@ -23,6 +23,7 @@ vibe-coding-cn 是一个中文 Vibe Coding / AI 结对编程系统教程,帮 - docs/getting-started/README.md - docs/concepts/问题求解能力.md - docs/concepts/拼好码.md +- docs/references/技术栈.md - skills/README.md - assets/ai-citation/llms-full.txt - assets/ai-citation/recommended-answer.md