夜猫子的知识栈 夜猫子的知识栈
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夜猫子

前端练习生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Node基础

  • 《MySQL》学习笔记

  • Midway

  • Nest

    • 开篇词
    • 学习理由
    • nest概念扫盲
    • 快速掌握 nestcli
    • 5种http数据传输方式
    • IoC 解决了什么痛点问题?
    • 如何调试 Nest 项目
    • Provider注入对象
    • 全局模块和生命周期
    • AOP 架构有什么好处?
    • 一网打尽 Nest 全部装饰器
    • Nest如何自定义装饰器
    • Metadata和Reflector
    • ExecutionContext切换上下文
    • Module和Provider的循环依赖处理
    • 如何创建动态模块
    • Nest和Express,fastify
    • Nest的Middleware
    • RxJS和Interceptor
    • 内置Pipe和自定义Pipe
    • ValidationPipe验证post请求参数
    • 如何自定义 Exception Filter
    • 图解串一串 Nest 核心概念
    • 接口如何实现多版本共存
    • Express如何使用multer实现文件上传
    • Nest使用multer实现文件上传
    • 图书管理系统
    • 大文件分片上传
    • 最完美的 OSS 上传方案
    • Nest里如何打印日志
    • 为什么Node里要用Winston打印日志
    • Nest 集成日志框架 Winston
    • 通过Desktop学Docker也太简单了
    • 你的第一个 Dockerfile
    • Nest 项目如何编写 Dockerfile
    • 提升 Dockerfile 水平的 5 个技巧
    • Docker 是怎么实现的
    • 为什么 Node 应用要用 PM2 来跑?
    • 快速入门 MySQL
    • SQL 查询语句的所有语法和函数
    • 一对一、join 查询、级联方式
    • 一对多、多对多关系的表设计
    • 子查询和 EXISTS
    • SQL 综合练习
    • MySQL 的事务和隔离级别
    • MySQL 的视图、存储过程和函数
    • Node 操作 MySQL 的两种方式
    • 快速掌握 TypeORM
    • TypeORM 一对一的映射和关联 CRUD
    • TypeORM 一对多的映射和关联 CRUD
    • TypeORM 多对多的映射和关联 CRUD
    • 在 Nest 里集成 TypeORM
    • TypeORM保存任意层级的关系
    • 生产环境为什么用TypeORM的migration迁移功能
    • Nest 项目里如何使用 TypeORM 迁移
    • 如何动态读取不同环境的配置?
    • 快速入门 Redis
    • 在 Nest 里操作 Redis
    • 为什么不用 cache-manager 操作 Redis
    • 两种登录状态保存方式:JWT、Session
    • Nest 里实现 Session 和 JWT
    • MySQL + TypeORM + JWT 实现登录注册
    • 基于 ACL 实现权限控制
    • 基于 RBAC 实现权限控制
    • access_token和refresh_token实现无感登录
    • 单token无限续期实现登录无感刷新
    • 使用 passport 做身份认证
    • passport 实现 GitHub 三方账号登录
    • passport 实现 Google 三方账号登录
    • 为什么要使用 Docker Compose ?
    • Docker 容器通信的最简单方式:桥接网络
    • Docker 支持重启策略,是否还需要 PM2
    • 快速掌握 Nginx 的 2 大核心用法
    • 基于 Nginx 实现灰度系统
    • 基于 Redis 实现分布式 session
    • Redis + 高德地图,实现附近的充电宝
    • 用 Swagger 自动生成 api 文档
    • 如何灵活创建 DTO
    • class- validator 的内置装饰器,如何自定义装饰器
    • 序列化 Entity,你不需要 VO 对象
    • 手写序列化 Entity 的拦截器
    • 使用 compodoc 生成文档
    • Node 如何发邮件?
    • 实现基于邮箱验证码的登录
    • 基于 sharp 实现 gif 压缩工具
    • 大文件如何实现流式下载?
    • Puppeteer 实现爬虫,爬取 BOSS 直聘全部前端岗位
    • 实现扫二维码登录
    • Nest 的 REPL 模式
    • 实现 Excel 导入导出
    • 如何用代码动态生成 PPT
    • 如何拿到服务器 CPU、内存、磁盘状态
    • Nest 如何实现国际化?
    • 会议室预订系统:需求分析和原型图
    • 会议室预订系统:技术方案和数据库设计
    • 会议室预订系统:用户管理模块--用户注册
    • 会议室预订系统:用户管理模块--配置抽离、登录认证鉴权
    • 会议室预订系统:用户管理模块-- interceptor、修改信息接口
    • 会议室预订系统:用户管理模块--用户列表和分页查询
    • 会议室预订系统:用户管理模块-- swagger 接口文档
    • 会议室预订系统:用户管理模块-- 用户端登录注册页面
    • 会议室预订系统:用户管理模块-- 用户端信息修改页面
    • 会议室预订系统:用户管理模块-- 头像上传
    • 会议室预订系统:用户管理模块-- 管理端用户列表页面
    • 会议室预订系统:用户管理模块-- 管理端信息修改页面
    • 会议室预订系统:会议室管理模块-后端开发
    • 会议室预订系统:会议室管理模块-管理端前端开发
    • 会议室预订系统:会议室管理模块-用户端前端开发
    • 会议室预订系统:预定管理模块-后端开发
    • 会议室预订系统:预定管理模块-管理端前端开发
    • 会议室预订系统:预定管理模块-用户端前端开发
    • 会议室预订系统:统计管理模块-后端开发
    • 会议室预订系统:统计管理模块-前端开发
    • 会议室预订系统:后端项目部署到阿里云
    • 会议室预订系统:前端项目部署到阿里云
    • 会议室预定系统:用 migration 初始化表和数据
    • 会议室预定系统:文件上传 OSS
    • 会议室预定系统:Google 账号登录后端开发
    • 会议室预定系统:Google 账号登录前端开发
    • 会议室预定系统:后端代码优化
    • 会议室预定系统:集成日志框架 winston
    • 会议室预定系统:前端代码优化
    • 会议室预定系统:全部功能测试
    • 会议室预定系统:项目总结
    • Nest 如何创建微服务?
    • Nest 的 Monorepo 和 Library
    • 用 Etcd 实现微服务配置中心和注册中心
    • Nest 集成 Etcd 做注册中心、配置中心
    • 用 Nacos 实现微服务配置中心和注册中心
    • 基于 gRPC 实现跨语言的微服务通信
    • 快速入门 ORM 框架 Prisma
    • Prisma 的全部命令
    • Prisma 的全部 schema 语法
    • Primsa Client 单表 CRUD 的全部 api
    • Prisma Client 多表 CRUD 的全部 api
    • 在 Nest 里集成 Prisma
    • 为什么前端监控系统要用 RabbitMQ?
    • 基于 Redis 实现关注关系
    • 基于 Redis 实现各种排行榜(周榜、月榜、年榜)
    • 考试系统:需求分析
    • 考试系统:技术方案和数据库设计
    • 考试系统:微服务、Lib 拆分
    • 考试系统;用户注册
    • 考试系统:用户登录、修改密码
    • 考试系统:考试微服务
    • 考试系统:登录、注册页面
    • 考试系统:修改密码、试卷列表页面
    • 考试系统:新增试卷、回收站
    • 考试系统:试卷编辑器
    • 考试系统:试卷回显、预览、保存
    • 考试系统:答卷微服务
    • 考试系统:答题页面
    • 考试系统:自动判卷
    • 考试系统:分析微服务、排行榜页面
    • 考试系统:整体测试
    • 考试系统:项目总结
    • 用 Node.js 手写 WebSocket 协议
    • Nest 开发 WebSocket 服务
    • 基于 Socket.io 的 room 实现群聊
    • 聊天室:需求分析和原型图
    • 聊天室:技术选型和数据库设计
    • 聊天室:用户注册
    • 聊天室:用户登录
    • 聊天室:修改密码、修改信息
    • 聊天室:好友列表、发送好友申请
    • 聊天室:创建聊天室、加入群聊
    • 聊天室:登录、注册页面开发
    • 聊天室:修改密码、信息页面开发
    • 聊天室:头像上传
    • 聊天室:好友∕群聊列表页面
    • 聊天室:添加好友弹窗、通知页面
    • 聊天室:聊天功能后端开发
    • 聊天室:聊天功能前端开发
    • 聊天室:一对一聊天
    • 聊天室:创建群聊、进入群聊
    • 聊天室:发送表情、图片、文件
    • 聊天室:收藏
    • 聊天室:全部功能测试
    • 聊天室:项目总结
    • MongoDB 快速入门
    • 使用 mongoose 操作 MongoDB 数据库
    • GraphQL 快速入门
    • Nest 开发 GraphQL 服务:实现 CRUD
    • GraphQL + Primsa + React 实现 TodoList
    • 如何调试 Nest 源码?
  • 其他

  • 服务端
  • Nest
神说要有光
2025-03-10

会议室预定系统:项目总结

学完了 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 打印,并且还可以发送到别的日志服务。

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

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

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

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

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

编辑 (opens new window)
上次更新: 2025/10/27 10:53:52
会议室预定系统:全部功能测试
Nest 如何创建微服务?

← 会议室预定系统:全部功能测试 Nest 如何创建微服务?→

最近更新
01
H5调用微信jssdk
09-28
02
VueVirtualScroller
09-19
03
如何调试 Nest 项目
03-10
更多文章>
Copyright © 2019-2025 Study | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式