nest入门笔记

命令#

new#

用于初始化项目，更多配置可通过添加-h来查看帮助。接下来介绍的命令都可以通过-h来查看帮助。

1
# -h查看帮助
2
nest new -h

可以看到new命令支持多种选项的设置，通过简写大概大概就能看出他们的意思：

• —directory：指定创建目录
• —skip-git：跳过 git 的初始化
• —skip-install：跳过 npm install
• —package-manager：指定包管理工具，指定后初始化项目时不用选择
• —language：指定语言，默认为 typescript
• —strict：是否开启严格模式

1
nest build --webpack

nest-cli.json#

项目创建完成后，会生成next-cli.json文件，以上说的选项都可在这里进行配置。

如设置使用 webpack 进行打包，设置"webpack": true即可

1
{
2
  "$schema": "https://json.schemastore.org/nest-cli",
3
  "collection": "@nestjs/schematics",
4
  "sourceRoot": "src",
5
  "compilerOptions": {
6
    "deleteOutDir": true,
7
    "webpack": true
8
  }
9
}

打包结果如下：

info#

查看项目信息，包括系统信息、 node、npm 和依赖版本

目录#

项目初始化完成后，在 src 下存在 5 个文件：

1
.
2
├── app.controller.spec.ts
3
├── app.controller.ts
4
├── app.module.ts
5
├── app.service.ts
6
└── main.ts

1
@Module({
2
  controllers: [AppController],
3
  providers: [AppService],
4
})

1
@Controller()
2
export class AppController {
3
  constructor(private readonly appService: AppService) {}
4

5
  @Get()
6
  getHello(): string {
7
    return this.appService.getHello()
8
  }
9
}

1
@Injectable()
2
export class AppService {
3
  getHello(): string {
4
    return 'Hello World!'
5
  }
6
}

运行项目#

此时，我们通过npm run start启动项目，在浏览器中输入 localhost:3000 如下：

我们可以试着修改 AppController 中，添加不同的路由：

1
@Controller()
2
export class AppController {
3
  constructor(private readonly appService: AppService) {}
4

5
  @Get()
6
  getHello(): string {
7
    return this.appService.getHello()
8
  }
9
  @Get('/random')
10
  getNum(): number {
11
    return this.appService.getNum()
12
  }
13
}

1
@Injectable()
2
export class AppService {
3
  getHello(): string {
4
    return 'Hello World!'
5
  }
6
  getNum(): number {
7
    return Math.random() * 10
8
  }
9
}

此时需要重新运行项目（更新不会立即生效，需要更新立即生效时使用npm run start:dev启动项目）

再次访问localhost:3000/random，如下

url param#

url param 就是将 url 直接写在 url 上，比如 http://localhost:3000/api/person/12，其中 12 就是路径中的参数（url param）

在 Nest 中通过 @Get(':id') 和 @Param('id') 配合拿到它。

如上面创建的person模块中：

1
@Get(':id')
2
findOne(@Param('id') id: string) {
3
  return `received id: ${id}`;
4
  // return this.personService.findOne(+id);
5
}

此时我们在浏览器地址栏直接输入 http://localhost:3000/api/person/12，便会得到以下结果：

或者在静态资源 /public/index.html 中通过 http 请求：

1
async function urlParam() {
2
  const res = await axios.get('/api/person/1')
3
}
4
urlParam()

结果如下：

query#

query 同样是通过 url 来传递参数，通过 url 中 ？后面的用 & 分隔的字符串传递数据，比如 http://localhost:3000/api/person/find?name=li&age=12。

在 Nest 中通过 @Query() 可以获取到传递的参数。

1
@Get('find')
2
find(@Query('name') name: string, @Query('age') age: number) {
3
  return `received: name=${name},age=${age}`;
4
}
5
@Get(':id')
6
findOne(@Param('id') id: string) {
7
  return `received id: ${id}`;
8
}

注意，我们新添加的 find 路由要放到 :id 路由的前面，因为 Nest 是从上往下匹配的，如果放在后面，那匹配的就是 :id 的路由。

此时我们可以直接通过 url 访问 http://localhost:3000/api/person/find?name=li&age=12 或者构造 http 请求：

1
async function query() {
2
  const res = await axios.get('/api/person/find', {
3
    params: {
4
      name: 'li',
5
      age: 12,
6
    },
7
  })
8
}
9
query()

结果如下：

form urlencoded#

前面两种都是 get 请求，将传递的参数存放在 url 中，而接下来的几种数据传输方式都是 post 请求，将传递的参数存放在 body 中。

form urlencoded 是通过表单提交数据，就是将 query 的数据放在 body 中发送 post 请求提交。

通过表单提交的数据，会以 application/x-www-form-urlencoded 的格式提交，Nest 中可以通过 @Body() 解析请求体，注入到 dto 中，dto 就是 data transfer object，即封装传输数据的对象。

1
export class CreatePersonDto {
2
  name: string
3
  age: number
4
}

1
@Post()
2
body(@Body() createPersonDto: CreatePersonDto) {
3
  return `received: ${JSON.stringify(createPersonDto)}`;
4
}

构造 http 请求：

1
async function formUrlEncoded() {
2
  const res = await axios.post(
3
    '/api/person',
4
    Qs.stringify({
5
      name: 'li',
6
      age: 12,
7
    }),
8
    {
9
      headers: { 'content-type': 'application/x-www-form-urlencoded' },
10
    }
11
  )
12
}
13
formUrlEncoded()

结果如下：

form data#

form data 大多用于传输文件，axios 中需要指定 content type 为 multipart/form-data，并且用 FormData 对象来封装传输的内容。

Nest 中要使用 FilesInterceptor 来处理其中的 binary 字段，用 @UseInterceptors 装饰器启用，配置 dest 为上传文件的目录，然后通过 @UploadedFiles 来读取，其余非文件字段用 @Body 来读取。

1
@Post('file')
2
@UseInterceptors(AnyFilesInterceptor({
3
  dest: 'uploads/'
4
}))
5
body2(@Body() createPersonDto: CreatePersonDto, @UploadedFiles() files: Array<Express.Multer.File>) {
6
  return `received: ${JSON.stringify(createPersonDto)}`
7
}

构造 http 请求：

1
<input id="fileInput" type="file" multiple />
2
<script>
3
  const fileInput = document.querySelector('#fileInput')
4

5
  async function formData() {
6
    const data = new FormData()
7
    data.set('name', 'li')
8
    data.set('age', 12)
9
    data.set('file1', fileInput.files[0])
10
    data.set('file2', fileInput.files[1])
11

12
    const res = await axios.post('/api/person/file', data, {
13
      headers: { 'content-type': 'multipart/form-data' },
14
    })
15
  }
16

17
  fileInput.onchange = formData
18
</script>

结果如下：

服务端成功接收到我们上传的文件，并且保存在配置的 dest 目录中：

json#

json 格式应该是最为常用的了，直接将 json 数据作为请求体发送，Nest 中通过 @Body() 来解析请求体，注入到 dto 中。

form urlencoded 和 json 都是从 body 取值，Nest 内部会根据 content type 做区分，使用不同的解析方式。

1
@Post()
2
body(@Body() createPersonDto: CreatePersonDto) {
3
  return `received: ${JSON.stringify(createPersonDto)}`
4
}

构造 http 请求：

1
async function json() {
2
  const res = await axios.post('/api/person', {
3
    name: 'li',
4
    age: 12,
5
  })
6
}
7
json()

结果如下：

这 5 种 http 的传输数据的方式覆盖了绝大多数开发场景，如果你想进阶全栈，理解这 5 种接口是首先要做到的。