实战使用 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 操作,接口入参的校验

相关推荐
y先森4 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy4 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189114 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿5 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡6 小时前
commitlint校验git提交信息
前端
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇7 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒7 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员7 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐7 小时前
前端图像处理(一)
前端