02-nestjs基础实践,REST Client的使用,源码调试

44 阅读2分钟

执行npm run start:dev运行项目,在浏览器访问:http://localhost:3000

清理项目

删除项目中的app.controller.ts, app.service.ts文件

修改入口文件:main.ts

async function bootstrap() {
  + app.setGlobalPrefix('api'); // 给每一个接口添加前缀'/api'
}

创建user模块

nest g mo user --no-spec # 生成src/user/user.module.ts
nest g co user --no-spec # 生成src/user/user.controller.ts
nest g s user --no-spec # 生成src/user/user.service.ts

修改源码如下

/* -----------------------app.module.ts 源码如下----------------------- */
import { Module } from '@nestjs/common';
import { UserModule } from './user/user.module';
@Module({
  imports: [UserModule],
  controllers: [],
  providers: [],
})
export class AppModule {}

/* -----------------------src/user/user.module.ts 源码如下----------------------- */
import { Module } from '@nestjs/common';
import { UserController } from './user.controller';
import { UserService } from './user.service';
@Module({
  controllers: [UserController],
  providers: [UserService],
})
export class UserModule {}

/* -----------------------src/user/user.controller.ts 源码如下----------------------- */
import { Controller, Get, Post } from '@nestjs/common';
import { UserService } from './user.service';
@Controller('user')
export class UserController {
  constructor(private userService: UserService) {}
  @Get()
  getUsers() {
    return this.userService.getUsers();
  }
  addUser() {
    return this.userService.addUser();
  }
}

/* -----------------------src/user/user.service.ts 源码如下----------------------- */
import { Injectable } from '@nestjs/common';
@Injectable()
export class UserService {
  getUsers() {
    return { code: 0, data: [{ name: 'kgm', age: 18 }], msg: '请求用户列表成功' };
  }
  addUser() {
    return { code: 0, data: { name: 'kgm', age: 18 }, msg: '添加用户列表成功' };
  }
}

以上代码会生成2个路由

  • Mapped {/api/user, GET} route
  • Mapped {/api/user, POST} route

vscode模拟请求接口

请先安装vscode插件REST Client, 然后创建文件:src/user/user.request.http

### 请求用户列表
GET http://localhost:3000/api/user

### 请求新增用户
POST http://localhost:3000/api/user
content-type: application/json

{"name": "kgm"}

### 上传文件类型(接口暂未实现)
POST http://localhost:3000/api/upload
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="text"

title
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="image"; filename="1.jepg"
Content-Type: image/jepg

./1.jepg
------WebKitFormBoundary7MA4YWxkTrZu0gW--

image.png

程序调试

vscode调试

第一步 image.png 第二步 image.png 配置文件代码如下

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch via NPM",
      "request": "launch",
      "runtimeArgs": ["run-script", "start:debug"],
      "runtimeExecutable": "npm",
      "runtimeVersion": "16.14.2",
      "internalConsoleOptions": "neverOpen",
      "skipFiles": ["<node_internals>/**"],
      "type": "node"
    }
  ]
}

第三步 image.png

谷歌浏览器调试

以debug模式启动服务

npm run start:debug

打开浏览器,操作如下 image.png 再次请求接口,会触发相应接口处的断点