DayDreamerBlog

Appearance

工作概览 ​

我在本项目中主要负责以下任务

  • 项目总体规划
  • 后台业务开发与部署
  • Web管理端开发
  • 移动用户端登录注册功能开发

主要内容 ​

工作模式 ​

  • 采用git作为版本控制工具，使用Github作为代码仓库。
  • 自动化部署服务，通过Vercel搭建前端测试场景；引入GithubActions自动部署服务端应用
  • 通过Apifox进行团队协作的接口文档管理和测试。

技术选型 ​

开发语言 ​

项目涉及两个前端任务，一个后端任务。考虑到组员的技术能力、开发便利、业务体量，在小组讨论后，综合决定在用户端选择了Javascript作为主语言进行快速开发，而在管理端和NodeJS后端决定使用Typescript以保证代码正确性和质量。

服务端 ​

  • 后端采用NestJS作为开发框架，其模块化、IOC的设计理念，以及较好的生态集成，都对这两周的开发提供了有效的帮助。
  • 使用Prisma作为数据库工具链，此外，其提供的简洁的prisma语法和实用的数据库迁移功能，对数据库结构设计起到了很大的帮助。
    • MySQL服务是外部提供的云数据库服务，免去了部署业务，也使得项目成员能够在不访问私有服务器的情况下访问业务数据库。
  • 通过Redis来满足缓存需求，能够支撑临时验证码，数据缓存等业务实现。
    • Redis单机部署在服务器本地，能够较好的保证缓存通信性能。
  • 使用采用Zod进行数据校验，Zod不仅支持在Js和Ts中使用，在Ts中还能推断类型，有助于接口数据格式的设计，结合NestJS管道机制可实现高效方便的接口数据校验。
  • 通过腾讯云COS来支撑图片，视频等文件存储任务，因为COS服务还没到期...
  • 采用阿里云百炼平台的大模型服务，并通过openaiSDK来支撑大模型调用

管理端 ​

  • 根据React官方文档现在的实践，选用vite作为构建工具。vite的bundless思想、按需加载、开发环境使用esbuild构建等特性，提升开发服务器响应能力，满足了前端开发时的即时反馈需求。
  • 采用rsuite作为主要组件库，看中其易理解的使用方式，以及不错的文档阅读体验。
  • 采用framer-motion进行动效辅助实现。
  • 考虑到管理端的项目体量较小且为单人开发，使用预处理器或者模块化的必要性不是很明显。由于多处样式动态交互的地方，也不方便采用tailwind原子化的方案。因此，还是采用原生css进行主要样式设计，同时结合了React的style进行辅助实现。
  • 采用zustand作为全局状态管理方案，zustand有着易用性和不错的性能。
  • ReactRouter作为路由解决方案，其生态成熟，易用性好。
  • 采用react-query作为非修改性操作场景（例如统计数据读取）的数据获取方案，其缓存方案和获取策略能够有效的减少无效请求造成的压力。

用户端 ​

通过Taro脚手架初始化后，项目基础功能已经较好的集成了，仅采用了zustand进行全局状态管理，根据负责用户端开发同学的意见，选择了antd组件库——因为其良好的中文文档、活跃的社区、易用性。

monorepo ​

考虑到前后端数据格式对接的不便利性，若分出三个仓库，并通过接口文档来进行数据对接，不容易保证数据格式的正确性，对于Typescript还需要重复建立类型定义，以及编写重复的Zod数据校验对象。

因此通过pnpm包管理工具的workspace实现一个简单的monorepo架构，将三个应用置于apps之下，在commons中提供一些共享的子包，可以更方便的共享代码，有利于共享数据类型定义和共享Zod数据校验对象。

此外，还能共享相同的依赖，加速install过程。在项目根目录可以非常方便的启动任意子应用。也不需要为每一个不同的代码仓库打开多个编辑器窗口。

管理端业务 ​

架构总览 ​

主要功能 ​

  • 查看需要审核的内容列表
  • 按状态（待处理、已批准、已拒绝）筛选内容
  • 在模态视图中查看内容详情
  • 接收系统操作确认通知

额外功能 ​

  • 结合AI辅助审核，进行批准、拒绝或删除内容
  • 审核数据统计
  • 主题切换

核心实现 ​

  • 使用 Intersection Observer API 实现无限滚动
  • 状态过滤
  • 使用 Framer Motion 实现动画过渡效果
  • 带有占位组件（骨架屏）的加载效果
  • 具备重试功能的加载错误处理机制

  • AI-Assisted-Review

UI/UX ​

  • 响应式设计

  • 流畅过渡动画
  • 主题切换

服务端业务 ​

TripTrip 服务端提供了一个强大且模块化的后端支持，主要内容包括：

  • 模块化的 NestJS 架构，职责分离清晰
  • 核心UGC业务（游记管理）
  • 全面的互动服务（点赞、评论、收藏、关注）
  • AI 辅助的内容审核
  • 基于 JWT 的身份验证与授权
  • 使用 MySQL 进行高效数据存储，并结合 Redis 缓存
  • 针对媒体文件的云存储集成

架构总览 ​

核心业务 ​

游记管理 ​

社区互动业务 ​

AI辅助审核 ​

数据存储 ​