首页Picals About

说起技术栈，其实思来想去也是考虑了蛮多东西的。因为我自己是前端出身，也是沾了 Node.js 的光才慢慢摸索到后端相关的知识之后进行系统性的学习。

而这个项目创立的初衷之一，也是为了巩固我目前所学到的技术，并且期望遇到一些技术难点并加以解决。

因此，在这个项目中我打算采用目前比较流行的、目前我正在学习的技术栈，分为前后端两部分进行设计。

前端代码仓库：https://github.com/nonhana/Picals-Frontend-React

后端代码仓库：https://github.com/nonhana/Picals-Backend-Nest

# 前端技术栈

前端部分，主要考虑采用的技术栈为： React + TypeScript + Redux + Vite + Unocss 。

  1. React: React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发。它的主要特点包括：

    • 组件化：React 鼓励将界面拆分成可重用的组件，这有助于提高开发效率和代码质量。
    • 声明式编程：React 采用声明式编程范式，使代码更容易理解和维护。
    • 虚拟 DOM：React 使用虚拟 DOM 来提高应用的性能，只对发生变化的部分进行实际的 DOM 更新。

  2. TypeScript: TypeScript 是 JavaScript 的一个超集，它为 JavaScript 添加了静态类型检查的功能。其优点包括：

    • 类型安全：静态类型检查可以在编译时发现潜在的问题，减少运行时错误。
    • 代码质量：类型系统有助于维护大型代码库，提高代码的可读性和可维护性。
    • IDE 支持：TypeScript 提供了更好的 IDE 支持，包括自动完成、接口文档查看等。

  3. Redux: Redux 是一个用于 JavaScript 应用的状态管理库，常与 React 一起使用。其特点包括：

    • 可预测性：Redux 通过单一数据源（store）和纯函数（reducer）来管理状态，使得状态的变化可预测和追踪。
    • 中间件：Redux 支持中间件，使得在处理复杂异步逻辑时更加灵活。
    • 开发工具：Redux 提供了强大的开发工具，如 Redux DevTools，可以帮助开发者更好地理解和调试应用状态。

    预计更换为 Zustand。Redux 用来做状态管理的机制使用起来过于繁琐且无意义，Zustand 的声明机制与在 Vue3 中使用的 Pinia 相差无几，且相较于 Redux 对 TS 类型约束有更好的支持。

  4. Vite: Vite 是一个现代前端构建工具，它具有以下优点：

    • 快速启动：Vite 利用 ES 模块导入，在开发时不需要打包操作，可以实现快速的服务器启动和热重载。
    • 按需编译：只有当模块被请求时才会进行编译，提高了开发效率。
    • 优化的构建：Vite 在生产环境下使用 Rollup 进行打包，提供优化后的高效代码。

  5. UnoCSS: UnoCSS 是一个原子化 CSS 框架，其特点包括：

    • 按需生成：只为你实际使用的样式生成对应的 CSS，减少最终包的大小。
    • 高性能：UnoCSS 的设计注重性能，确保即使在大型项目中也能快速运行。
    • 可定制：支持高度定制，你可以根据项目需求定制生成的 CSS 规则。

# 后端技术栈

后端部分主要考虑的开发技术栈为： Nest.js + TypeScript + Redis + MySQL + Jwt + TypeOrm 。

  1. Nest.js: Nest.js 是一个高效、可扩展的 Node.js 框架，用于构建服务器端应用程序。它的特点包括：
    • 架构：Nest.js 使用模块化的方式组织代码，支持控制器、服务和模块等概念，有助于维护大型项目。
    • TypeScript 支持：Nest.js 天生支持 TypeScript，让开发者能够享受到类型安全带来的好处。
    • 依赖注入：Nest.js 实现了依赖注入容器，简化了模块和服务之间的依赖管理。
  2. TypeScript: 在后端使用 TypeScript 可以带来与前端相同的优点，如类型安全、更好的 IDE 支持和更易于维护和理解的代码。
  3. Redis: Redis 是一个开源的内存中的数据结构存储系统，可以用作数据库、缓存和消息代理。其特点包括：
    • 速度快：由于数据存储在内存中，Redis 提供极快的读写速度，适合需要高速读写的场景。
    • 支持多种数据结构：Redis 支持字符串、列表、集合、哈希、有序集合等数据结构，适用于各种场景。
    • 持久化：Redis 支持 RDB 和 AOF 两种持久化机制，可以根据需求选择合适的方式确保数据安全。
  4. MySQL: MySQL 是一个广泛使用的关系数据库管理系统，适用于存储结构化数据。它的优点包括：
    • 成熟稳定：MySQL 被广泛使用多年，拥有大量的用户和丰富的文档。
    • 灵活：MySQL 支持多种存储引擎，可以根据需要选择最适合的。
    • 社区支持：有一个庞大的社区支持 MySQL，遇到问题时可以容易地找到解决方案。
  5. JWT (JSON Web Tokens): JWT 用于在网络应用环境间传递声明的一种紧凑的、自包含的方式。它的优点包括：
    • 无状态认证：JWT 是自包含的，包含了所有用户认证所需的信息，适合分布式微服务架构。
    • 跨语言支持：作为一个开放标准，JWT 支持各种编程语言。
    • 安全性：JWT 可以使用密钥进行签名，保证了传输过程中的安全性。
  6. TypeOrm: TypeOrm 是一个基于 TypeScript 的 ORM 框架，支持多种数据库，包括 MySQL、PostgreSQL、SQLite 等。TypeOrm 的优点包括：
    • 类型安全：TypeOrm 支持 TypeScript，提供类型安全的数据库操作。
    • 灵活性：TypeOrm 提供了丰富的 API，支持多种查询方式和关联关系。
    • 跨数据库支持：TypeOrm 支持多种数据库，可以在不同数据库之间切换。