实战使用 NestJS 搭建一个 Admin 后台服务 - 01. 项目搭建、配置文件和路由

实战使用 NestJS 搭建一个 Admin 后台服务 - 01. 项目搭建、配置文件和路由

实战使用 NestJS 搭建一个 Admin 后台服务 - 02. typeorm 操作 mysql&基础 crud

最近我在对之前编写的 NestJS 后台项目进行重构时,发现了许多需要改进的地方。因此,我决定重新整理代码,记录一些开发心得。本文将逐步介绍如何使用 NestJS 从零开始搭建一个 Admin 后台服务。

GitHub 项目地址,欢迎各位大佬 Star。

截至目前,该项目已更新到实现基本权限控制的初级阶段。随着文章的更新,权限将不断完善,直至实现按钮级权限、部门权限和接口权限。前端部分涉及代码为个人的另一个项目

vite-react-admin -通用的 vite-react 后台项目,基于 vite5-react18-router6-ts-mobx-antd5-proComponent,同样欢迎各位大佬 star

一、项目创建

项目环境:

  • nestjs: 10.x

根据官方文档直接创建项目

ssh 复制代码
npm i -g @nestjs/cli
nest new project-name

核心文件

ssh 复制代码
src
 ├── app.controller.spec.ts
 ├── app.controller.ts
 ├── app.module.ts
 ├── app.service.ts
 └── main.ts
文件名 说明
app.controller.ts 带有单个路由的基本控制器示例。
app.controller.spec.ts 对于基本控制器的单元测试样例
app.module.ts 应用程序的根模块。
app.service.ts 带有单个方法的基本服务
main.ts 应用程序入口文件。它使用 NestFactory 用来创建 Nest 应用实例。

可以具体可以看下官方文档 docs.nestjs.cn/10/awesome。直接实操,虚的不多整。

二、配置文件

配置文件使用相关说明 docs.nestjs.cn/10/techniqu...

这里直接使用 自定义配置文件 的方式。主打快速不绕路。

开始前先添加.gitignore 文件忽略常用的文件。根据你前端习惯来即可

bash 复制代码
# .gitignore
# 先简单添加两,后续补充
/dist
/node_modules

1、安装依赖

bash 复制代码
yarn add @nestjs/config

2、前期装备

  • 在根目录创建文件夹/文件名 /config/config.ts
ts 复制代码
export default () => ({
  // 用于配置端口 项目启动端口 环境变量未配置则使用默认设置3003
  port: parseInt(process.env.PORT, 10) || 3003,
});
  • 根目录下创建.env 文件。
  • .env 文件添加到.gitignore 这里后续会放一些敏感配置如果公开的 git 仓库则忽略提交,不公开的略过
bash 复制代码
# 端口配置
PORT=3003
  • 对于以下几个文件直接只保留 app.module.ts 作为全局 module 的核心,其他直接删除
  • 同时修改 app.module.ts

src ├── app.controller.spec.ts ├── app.controller.ts ├── app.module.ts ├── app.service.ts

ts 复制代码
import { Module } from '@nestjs/common';
import config from './config/config';

@Module({
  imports: [
    /** 环境变量配置 */
    ConfigModule.forRoot({
      /** 全局使用 将ConfigModule加载到根模块(例如AppModule)后,您无需在其他模块中导入它 */
      /** nest 核心之一的模块概念,需要自行摸索,此次不展开,主打搭建业务,不看因为所以 */
      isGlobal: true,
      /** 加载自定义config */
      load: [config],
    }),
  ],
})
export class AppModule {}

3、开始使用

完成上面步骤后,我们就可以开始使用了。

  • main.ts 中使用
ts 复制代码
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ConfigService } from '@nestjs/config';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const configService = app.get(ConfigService);
  const port = configService.get<number>('port');
  await app.listen(port);
}
bootstrap();
  • ***.module.ts 文件中的使用,后续会使用到场景暂不展开
ts 复制代码
TypeOrmModule.forRootAsync({
  imports: [ConfigModule], // 记得导入 ConfigModule
  useFactory: async (configService: ConfigService) => ({
    type: 'mysql',
    host: configService.get<string>('database.host'),
    port: configService.get<number>('database.port'),
    username: configService.get<string>('database.username'),
    password: configService.get<string>('database.password'),
    database: configService.get<string>('database.database'),
    synchronize: true,
    autoLoadEntities: true,
    timezone: '+08:00', // 东八时区
  }),
  inject: [ConfigService],
}),
  • ***.service.ts 文件中的使用,后续会使用到场景暂不展开
ts 复制代码
constructor(
  private configService: ConfigService,
) {}
const username = this.configService.get<string>('initAdmin.username');

三、创建 restful 路由接口

使用官方提供的命令创建 restful 路由接口 根目录下终端执行

bash 复制代码
nest g resource users routers

选择 REST API

会多了图中出现的相关目录同时 UsersModule 会被自动注入到 AppModule 中,可以查看 app.module.ts 文件。

打开 users.module.ts 文件,会发现有如下代码:

ts 复制代码
import {
  Controller,
  Get,
  Post,
  Body,
  Patch,
  Param,
  Delete,
} from '@nestjs/common';
import { UsersService } from './users.service';
import { CreateUserDto } from './dto/create-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';

@Controller('users')
export class UsersController {
  constructor(private readonly usersService: UsersService) {}

  @Post()
  create(@Body() createUserDto: CreateUserDto) {
    return this.usersService.create(createUserDto);
  }

  @Get()
  findAll() {
    return this.usersService.findAll();
  }

  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.usersService.findOne(+id);
  }

  @Patch(':id')
  update(@Param('id') id: string, @Body() updateUserDto: UpdateUserDto) {
    return this.usersService.update(+id, updateUserDto);
  }

  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.usersService.remove(+id);
  }
}

不然怎么说 nestjs 是 node 版本的 springboot 呢,和 spring 那套是很像的

@Controller('users') 决定的就是路由地址,@Get() @Post() @Patch() @Delete() 修饰的方法就是路由方法,@Param() 修饰的参数就是路由参数,@Body() 修饰的参数就是请求参数,@Query() 修饰的参数就是查询参数,@Header() 修饰的参数就是请求头参数

话不多说,直接启动,访问响应接口可以看到输出 users.service.ts 中对应的 return

bash 复制代码
npm run start

终端中可以看到对应的路由日志

apifox 中取调用接口

与 users.service.ts 中的 create 输出一致

Service 负责处理逻辑、Controller 负责路由、Module 负责整合, 这三个模块是最核心的,和 java 的 spring boot 设计理念基本类似。可以去官网里详细了解,个人能为学习新技术,官网一直是最可靠的。本系列文章,纯搞业务,帮助你搭建一个 admin 服务,实际就是在了解了一定 nestjs 之后的一个实战。

下一篇

至此基础的框架差不多搭建好了,下一篇将会梳理,mysql 数据库的链接及 crud 操作,接口入参的校验

相关推荐
罔闻_spider31 分钟前
爬虫----webpack
前端·爬虫·webpack
吱吱鼠叔32 分钟前
MATLAB数据文件读写:1.格式化读写文件
前端·数据库·matlab
爱喝水的小鼠1 小时前
Vue3(一) Vite创建Vue3工程,选项式API与组合式API;setup的使用;Vue中的响应式ref,reactive
前端·javascript·vue.js
WeiShuai1 小时前
vue-cli3使用DllPlugin优化webpack打包性能
前端·javascript
Wandra1 小时前
很全但是超级易懂的border-radius讲解,让你快速回忆和上手
前端
ice___Cpu1 小时前
Linux 基本使用和 web 程序部署 ( 8000 字 Linux 入门 )
linux·运维·前端
JYbill1 小时前
nestjs使用ESM模块化
前端
加油吧x青年2 小时前
Web端开启直播技术方案分享
前端·webrtc·直播
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(二)
前端·react.js·前端框架
小白小白从不日白2 小时前
react hooks--useCallback
前端·react.js·前端框架