Skip to content

学完了 Nest 基础、MySQL、TypeORM、Docker & Docker Compose、Minio、passport 等技术之后,我们做了这个实战项目。

这个项目是会议室预定系统,分为用户端和管理端。

用户端登录之后可以查看可预定的会议室,预定会议室,查看预定历史等。

管理端则是用户、会议室、预定记录等的管理,还有统计分析。

当然,具体做什么项目不重要,我们主要是通过这个实战案例把前面学过的技术综合运用一遍。

比如之前你对 Nginx 的理解只是可以做反向代理、可以托管静态资源,但不知道它在整个链路的什么位置。

而现在,你写过 nginx 的配置文件,并且在阿里云上把它部署并跑了起来。

你对它的理解就更加深入和立体了。

为了聚焦在 Nest 和后端技术,前端部分我们尽量简化,界面都是用 antd 写的,没什么复杂的样式:

交互上也都比较单调,基本都是表格、表单。

实际上,预定会议室的功能一般都是和日历结合,比如 Google Calendar:

可以直观的查看哪些时间段是没有被预定的,然后预定。

而不是选择一个时间段预定,如果已经预订了提示该时间段已被预定:

这样体验不好。

不过不重要,我们的重点在于后端部分。

前端的交互大家可以自己去完善。

回顾下我们做这个项目的整个过程:

首先我们做了需求分析,分析了下有哪些功能,并画了原型图。

分了用户管理、会议室管理、预定管理、统计这 4 个模块。

这一步主要是明确做什么。

最后我们做出来的也是符合这些需求分析和原型图的。

然后我们设计了下技术方案,做了技术选型:

数据库设计:

分析了下接口:

接下来进入开发:

我们是按照每个模块先写后端,再写前端的顺序来开发的。

比如先开发用户模块后端部分,再开发用户模块前端部分。

然后开发会议室模块后端部分,再开发会议室模块前端部分。

我们首先创建后端项目,引入 typeorm 和 redis,实现了用户注册。

基于 @nestjs/config 包的 ConfigModule 把配置抽离到了 .env 文件里。

之后实现了登录和双 token 的无感刷新。

加上了登录和权限的 Guard 来做鉴权,通过 @RequireLogin、@RequirePermission 的自定义装饰器在 handler 上声明,只有声明的才会做鉴权。

然后添加了 interceptor 对响应格式做转换,改成 {code、message、data} 的格式。

并且还用 interceptor 实现了接口访问的日志记录。

然后实现了修改信息、修改密码的接口。

用到的 userId 通过 @UserInfo 自定义装饰器从 request.user 来取。

接下来实现了冻结用户和用户列表接口。

通过自定义 exception filter,catch 了 HTTPException,返回了自定义格式的响应,统一了响应格式。

加上了 swaggger 接口文档。

至此,用户管理模块的后端代码就完成了。

然后写了用户管理模块的前端代码:

引入了 React Router 来做路由,引入了 antd 来做 UI 组件库,引入了 axios 来发请求。

写了登录、注册、首页、修改密码、修改个人信息的页面。

这里还实现了头像上传的功能。

接下来又写了管理端的页面。

然后又分别实现了会议室模块、预定模块、统计模块的后端代码和前端页面。

之后加上了 docker-compose.yml 和 Nest 应用的 Dockerfile,部署到了阿里云。

我们买了一台阿里云服务器,在服务器上安装 git 来下载项目代码,然后安装 docker compose,在项目目录下执行 docker compose up 把服务跑起来就行了。

部署成功之后,我们的服务就可以在世界各地访问了。

然后又加上了 nginx 部署了前端项目,用它来做静态资源托管和 nest 服务的反向代理。

通过 Dockerfile 的多阶段构建,第一个阶段 npm run build 出产物,第二个阶段把产物和 nginx 配置文件复制过去跑 nginx 服务。

之后用 docker build 构建出镜像,把它上传到阿里云镜像仓库。

在另一边的 docker compose 配置文件里添加这个 nginx 的容器配置。

这样服务端那边就可以用 docker compose up 一次性跑起 nginx、nest、mysql、redis 等容器,前后端服务一键启动。

这样,前后端代码就都部署完了。

生产环境我们会把 sychonize 关掉,用 migration 来创建表和初始化数据。

我们加上了 migration 的 npm scripts,然后创建了几个 migration。

在服务器上执行 migration:run 就会创建数据库表并插入初始化数据。

之后我们把文件上传从基于 multer 实现,保存在项目目录下,换成了基于 minio 实现的 OSS 服务。

我们是用前端直传 OSS,然后把文件 url 发给应用服务器的方式。

这样,文件就都保存在了 minio 服务里,可以更方便的管理。

然后又实现了 google 登录,基于 passport 的 passport-google-oauth20 的策略来实现的。

在 callback 的路由里,基于 google 返回的信息做了自动注册,如果用户已经注册过,就直接返回登录信息。

并且 callback 里会重定向到网站首页,通过 cookie 携带 userInfo、accessToken、refreshToken 等信息。

前端代码再处理下 cookie,同步登录状态就好了。

然后集成了 winston 日志框架,日志会在 console、file 打印,并且还可以发送到别的日志服务。

最后我们对代码做了一些优化。

至此,我们的第一个项目实战就完成了。

项目做什么不重要,重要的是把用到的技术融会贯通,知道这些技术都是干什么的。

并且知道一个全栈项目从需求分析到开发到部署的整个流程。

如果你要自己做一个全栈项目,这些技术你能够用起来了么?