likes
comments
collection
share

NestJS(一)基础篇

作者站长头像
站长
· 阅读数 43

学习前需要掌握的知识:

  • 熟练使用TypeScript以及TypeScript的各种装饰器
  • 熟悉NodeJS以及了解一点MVC思想(了解的话本文可以引导一下你就更加清晰了)

装饰器学习文章:走近MidwayJS:初识TS装饰器与IoC机制

Nest介绍

一个用于构建高效、可扩展的 Node.js 服务器端应用程序的开发框架。Nest 构建在强大的 HTTP 服务器框架上,例如默认是 Express 并且还可以通过配置从而使用 Fastify

优点:

  • TypeScript支持良好
  • 基于MVC思想使得项目更加规范
  • 提供ExpressFastify两个Node框架,如果熟悉其中一个那么就相对容易入手

安装Nest

安装Nest前需要确保你已经安装了Nodejs

npm i -g @nestjs/cli  // 全局安装Nest
nest new project-name  // 创建项目

初始化项目流程

  1. 选择你喜欢的包管理工具,你得提前安装喜欢的包管理工具。

NestJS(一)基础篇

  1. 等待安装完毕既进入项目可启动项目

NestJS(一)基础篇

  1. cd进入目录后,可以在命令行输入code ./快捷 打开vscode编辑器

NestJS(一)基础篇

目录结构介绍

NestJS(一)基础篇

核心代码都在src文件下面。

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

给大家解释一下app.xxx.ts代表的含义

app.controller.spec.ts控制器的测试文件
app.controller.ts单一路由控制器(Controller)
app.module.ts应用程序的根模块(Module)
app.service.ts具有单一方法的基本服务(Service)
main.tsnestjs程序主入口

启动项目

  1. 我这里使用的是pnpm启动,如果你没有安装可以使用npm run start:dev
// 这个可以实时更新代码(推荐使用这种方法)
pnpm start:dev

// 代码更新后需要重启服务器
pnpm start
  1. 启动项目可能遇到的问题:

NestJS(一)基础篇

nest默认端口号是3000,如果你3000端口号被占用了那么你得在src/main.ts中换一个端口号,这里我换成了8082

NestJS(一)基础篇

  1. 打开浏览器访问项目地址:http://localhost:8082,这里的8082端口可以改成你自己定义的端口号

NestJS(一)基础篇

运行流程讲解

1.程序入口

main.ts进入然后执行NestFactory.create创建一个AppModule实例,然后启动HTTP监听8082端口。

// src/main.ts
import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'

async function bootstrap() {
    const app = await NestFactory.create(AppModule)
    await app.listen(8082)
}
bootstrap()

2. 声明模块

// src/app.module.ts
import { Module } from '@nestjs/common'
import { AppController } from './app.controller'
import { AppService } from './app.service'

// 1. 使用 Module 作为类装饰器
@Module({
    imports: [],
  	exports: [],
    controllers: [AppController], // 2.载入一个控制器
    providers: [AppService], // 3. 注入业务逻辑
})
export class AppModule {}

AppModule是程序的启动模块,使用了Module作为类装饰器,@Module()接收一个配置对象里面有四个属性:providerscontrollersimportsexports

providers注入具体业务逻辑给Nest的各个模块
controllers1. 控制路由
  1. 处理HTTP请求
  2. 响应数据给客户端
  3. 将业务委托给providers处理 | | imports | 在这里导入其他模块的服务 | | exports | 在这里共享当前模块服务出去 |

3.载入控制器

每个控制器都有GETPOSTPUTDELETE请求方法,它们可以同时出现,但不要重复出现两次同样的请求方法

// src/app.controller.ts
import { Controller, Get } from '@nestjs/common'
import { AppService } from './app.service'

// 1. @Controller() 定义一个控制器
@Controller()
export class AppController {
    constructor(private readonly appService: AppService) {}

    // 2. @Get 请求方法修饰器
    @Get()
    getHello(): string {
        // 3. 直接调用 AppService 实例的方法
        return this.appService.getHello()
    }
}
  1. @Controller()接收一个字符串作为参数,不传的话就是/下文单独列出讲解。例如:@Controller('app')那么我们的地址就是http://localhost:8082 /app才能访问接口数据了,否则就是404
  1. @Get()的作用是修饰getHello方法,这样当控制器接收到GET请求后就会触发getHello方法 。相对应的还有@Post()@Put()@Delate()等请求方法
  1. 我们之所以可以直接调用this.appService.getHello()而不需要new AppService,还得继续往下看

4.注入逻辑给控制器调用

import { Injectable } from '@nestjs/common'

// 1.@Injectable()
@Injectable()
export class AppService {
    getHello(): string {
        return 'Hello World!'
    }
}

@Injectable()修饰后的AppService,在src/app.controller.ts使用时不需要再去new AppService

路由装饰器@Controller

NestJS基于装饰器修饰路由。修改一下app.controller.ts看看效果:

import { Controller, Get } from '@nestjs/common'
import { AppService } from './app.service'

// 1.传递一个 'hello' 给装饰器 
@Controller('hello')
export class AppController {
    constructor(private readonly appService: AppService) {}

    @Get()
    getHello(): string {
        return this.appService.getHello()
    }
}

当我们访问http://localhost:8082,结果404

tips: 如果你还是能正常访问,那么你得重启服务器或者命令行重新执行pnpm start:dev这样才能更新最新的代码哦

NestJS(一)基础篇

需要通过http://localhost:8082/hello访问:

NestJS(一)基础篇

从上图可以看出来我们代码的 @Controller('hello') 实际上就是给路由增加了访问路径

HTTP方法装饰器

除了控制器中可以添加路径,我们的请求方法装饰器也是可以的。常见请求方法装饰器有:@Get()@Post()@Put@Delete

方法装饰器是比较灵活的除了基本请求的路径外还支持通配符路径以及参数路径

tisp: 每一个控制器内只能存在一种类型的方法装饰器

// 主路径为 hello
@Controller('hello')
export class AppController {
    constructor(private readonly appService: AppService) {}

    // 1. 固定路径:
    // 发送GET请求,可以匹配到,http://localhost:8082/hello/get
    @Get('get')
    get(): string {
        // 业务逻辑...
        return ''
    }
  
    // 多层路径
    // 可以匹配到 GET 请求,http://localhost:8082/hello/world/liang
    @Get('world/liang')
    liang(): string {
        // 业务逻辑...
        return ''
    }

    // 发送POST请求,可以匹配到:http://localhost:8082/hello/post
    @Post('post')
    post(): string {
        // 业务逻辑...
        return ''
    }

    // 2.通配符路径(?+* 三种通配符 )
    // 可以匹配到 DELETE 请求, http://localhost:8082/hello/del_xxx
    @Delete('del_*')
    del(): string {
        return 'get_*'
    }

    // 3.带参数路径
    // 可以匹配到 PUT 请求,http://localhost:8082/hello/put/xxxx
    @Put('put/:id')
    Put() {
        return 'update put/:id'
    }
}

除了上面的请求方法还有一种设置请求路径的方法:全局前缀名

全局前缀路径

顾名思义就是在全部的请求路径上添加一个路径

我们可以在src/main.ts中设置全局的前缀路径

import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'

async function bootstrap() {
    const app = await NestFactory.create(AppModule)
    // 1. 就是这么简单的一句话
    app.setGlobalPrefix('api')
    await app.listen(8082)
}
bootstrap()

这样我们在发送请求的时候就得http://localhost:8082 /api/xxx了,否则会出现404的情况。


结束语

本章带大家简单入门一下NestJS后面会继续深入使用~

转载自:https://juejin.cn/post/7224556693484224568
评论
请登录