怪咖工作室之违背的青春
小咖之"怪咖工作室-违背的青春"
项目背景
为什么想要创建这个项目？
我原本是打算开发一个博客系统，但是想想之前已经通过CSDN、Hexo、VuePress、VitePress等搭建过静态博客系统了。所以想做个其他类型的项目，把这些年学习、掌握的技术融合到一起开发一个完整的项目。
在信息爆炸的数字时代，个人成长轨迹常被碎片化信息淹没，学习与工作经历的沉淀往往散落在笔记软件、社交媒体、本地文档等多个载体中，难以形成系统化的成长脉络。传统的记录方式缺乏结构化梳理，既不利于自我复盘，也无法清晰展现个人能力的演进过程。
“怪咖工作室 - 违背的青春” 诞生于对这种现状的反思：标准化的成长路径虽被广泛认同，却往往束缚个体独特性的表达。许多有价值的探索、试错与突破，因不符合传统评价体系而被忽略或遗忘。同时，技术从业者需要一个既能沉淀专业成长，又能承载个性化思考的专属空间，既作为自我对话的媒介，也作为与同频者交流的窗口。
项目目标
1.个人成长系统化沉淀
构建统一的记录平台，将分散的学习笔记、项目经验、思维碎片整合为结构化的成长档案，形成可追溯、可复盘的个人知识体系。
2.独特成长轨迹可视化
通过时间线、技能图谱等形式，直观呈现 “非标准化” 成长路径的价值，凸显那些突破常规的探索与收获，打破传统成长评价框架的局限。
3.自我迭代与反思工具
建立周期性复盘机制，通过数据化呈现能力成长曲线，辅助识别优势领域与改进方向，成为持续自我优化的驱动力。
4.同频者交流窗口
打造开放但不失个性的展示空间，吸引理念契合的同行者，形成基于真实成长经历的深度交流，而非表面化的社交互动。
5.技术实践载体
以项目开发过程本身作为技术能力的实践场，通过全栈开发、架构设计、用户体验优化等环节，实现技术能力与个人品牌的双重沉淀。
软件架构
一、架构设计原则
在设计前明确核心原则，确保架构与项目目标匹配：
- 技术融合性 ：覆盖前端、后端、数据库、部署运维等全栈技术，满足 “技术实践载体” 目标；
- 数据结构化 ：支持项目经验、技能数据、项目分类等多类型成长信息的存储与关联，契合 “系统化沉淀” 需求；
- 可视化友好 ：支持技能图谱、技术栈、数据统计等可视化展现，契合 “独特成长轨迹可视化” 目标；
- 日志存储 ：支持登录日志、系统日志、请求日志以及用户行为日志（
Redis）存储。 - 数据安全 ：数据存储在数据库中，数据安全由数据库提供。
二、整体架构分层（Node + Vue3 + React 前后端分离 ）
采用 “前后端分离” 架构模式，将系统拆分为 6 层，各层职责清晰、解耦性强，便于独立开发与维护：
| 架构分层 | 核心职责 | 技术选型建议 | 关键产出物 |
|---|---|---|---|
| 1. 前端展示层 | 负责用户交互与数据展示，如系统菜单、个人作品、技能展示、项目列表、用户信息等 | Vue3 + Vite5 + Pinia + ECharts + Tailwind CSS + TypeScript + Element Plus | 前端页面、组件库、API 请求封装 |
| 2. 后台管理层 | 负责客户端信息管理，如菜单管理、轮播图管理、项目管理、技术栈管理、项目类别管理、用户信息管理等 | React19 + TypeScript + Ant Design + Tailwind CSS + Redux + Recharts +Vite5 | 后台界面、组件库、API 请求封装 |
| 3. 接口层（网关） | 统一管理前后端交互接口，处理请求转发、参数校验 | Node + Express | 接口文档（ApiFox）、请求拦截器 |
| 4. 后端服务层 | 实现核心业务逻辑，如用户信息管理、项目记录、附件上传、菜单管理、轮播图管理、技术栈管理 | Node + Express + MySQL + Redis + Sequelize + JWT + Joi + Multer + Winston + NodeSchedule | 服务接口、业务逻辑代码、事务管理、日志存储、定时任务、数据统计 |
| 5. 数据持久层 | 负责数据存储与查询 | MySQL + Redis | 数据库表结构、SQL 脚本、缓存策略 |
| 6. 部署运维层 | 负责项目部署、环境配置、接口代理，确保系统稳定运行 | Nginx + 阿里云 ECS | Nginx 配置、Pm2 |
三、详细设计
详细设计包含以下内容：
- 数据库设计：详细设计数据库表结构、字段含义、数据类型、外键关系E-R图等，确保数据存储与查询效率 optimal。
- 接口设计：详细设计接口，包括请求参数、返回结果、错误码、接口文档等，确保接口清晰、易用。
- 业务逻辑设计：详细设计业务逻辑，包括用户信息管理、项目记录、附件上传、菜单管理、轮播图管理、技术栈管理、项目类别管理、用户信息管理等，确保业务逻辑清晰、可扩展。
- 前端页面设计：详细设计前端页面，包括系统菜单、个人作品、技能展示、项目列表、用户信息等，确保页面清晰、易用。
- 后端服务设计：详细设计后端服务，包括用户信息管理、项目记录、附件上传、菜单管理、轮播图管理、技术栈管理、项目类别管理、用户信息管理等，确保服务清晰、可扩展。
- 部署运维设计：详细设计部署运维，包括项目部署、环境配置、接口代理，确保系统稳定运行。
