React+NestJS 全栈项目开发

开发背景

主要是学习下 NestJS这个后端技术，以及复习下React这个框架

前言

本项目是基于 React Hook、TypeScript、Ant Design、React Markdown、Editor Lite、Mobx、NestJS、Typeorm 开发的个人博客。

适配了移动端，项目中有文章模块，标签模块，轮播图功能。文章模块新增了精选文章，选中后就会在首页轮播图展示。

项目功能

1、使用 react-dom 生成虚拟dom，JSX语法糖加程序的可读性
2、整个项目集成了 TypeScript
3、基于ant-design UI 设计界面
4、对所有图片请求都封装成了 Hooks
5、NestJS使用Entities实体来实现数据对象的操作

项目动图

一、标签编辑

二、精选文章

三、新增文章

四、账号登录

五、移动端展示

文件资源目录

前端（react）
├─ .vscode # vscode推荐配置
├─ public # 静态资源文件（忽略打包）
├─ src
│ ├─ assets # 静态资源文件
│ ├─ component # 全局组件
│ ├─ config # 全局配置项
│ ├─ hook # 常用 Hooks
│ ├─ pages # 页面样式
│ ├─ request # 封装请求
│ ├─ store # pinia store
│ ├─ index.tsx # 入口页面
├─ .gitignore # git 提交忽略
├─ CHANGELOG.md # 项目更新日志
├─ commitlint.config.js # git 提交规范配置
├─ package-lock.json # 依赖包包版本锁
├─ package.json # 依赖包管理
├─ README.md # README 介绍
├─ STANDARD.md # 项目编码规范说明书
├─ tsconfig.json # typescript 全局配置

后端（nestjs）
+-- dist[目录] // 编译后的目录，用于预览项目
+-- node_modules[目录] // 项目使用的包目录，开发使用和上线使用的都在里边
+-- src[目录] // 源文件/代码，程序员主要编写的目录
| +-- app.controller.spec.ts // 对于基本控制器的单元测试样例
| +-- app.controller.ts // 控制器文件，可以简单理解为路由文件
| +-- app.module.ts // 模块文件，在NestJS世界里主要操作的就是模块
| +-- app.service.ts // 服务文件，提供的服务文件，业务逻辑编写在这里
| +-- app.main.ts // 项目的入口文件，里边包括项目的主模块和监听端口号
+-- test[目录] // 测试文件目录，对项目测试时使用的目录，比如单元测试...
| +-- app.e2e-spec.ts // e2e测试，端对端测试文件，测试流程和功能使用
| +-- jest-e2e.json // jest测试文件，jset是一款简介的JavaScript测试框架
+-- .eslintrc.js // ESlint的配置文件
+-- .gitignore // git的配置文件，用于控制哪些文件不受Git管理
+-- .prettierrc // prettier配置文件，用于美化/格式化代码的
+-- nest-cli.json // 整个项目的配置文件，这个需要根据项目进行不同的配置
+-- package-lock.json // 防止由于包不同，导致项目无法启动的配置文件，固定包版本
+-- package.json // 项目依赖包管理文件和Script文件，比如如何启动项目的命令
+-- README.md // 对项目的描述文件，markdown语法
+-- tsconfig.build.json // TypeScript语法构建时的配置文件
+-- tsconfig.json // TypeScript的配置文件，控制TypeScript编译器的一些行为