用 Nest.js 開發 API 吧 (三) - Controller


Posted by AlanSyue on 2020-12-02

上一篇介紹了 Nest.js 專案的基本架構,這次將針對 Controller 來特別介紹。
Controller 擁有基本路由設定,主要負責接收 client 端的 requests 以及 response。

我們來看看以下範例,將會在 /src/app.controller.ts 做示範:

Get

import { Controller, Get } from '@nestjs/common';

@Controller()
export class AppController {
  constructor() {}

  // Get 請求,回傳字串 test
  @Get()
  getHello(): string {
    return 'test';
  }
}

在 terminal 輸入 yarn start:dev 後,到 Postman 用 Get 請求就會接收到 test

我們也可以在 Get 請求帶入參數,如下:

import { Controller, Get, Param } from '@nestjs/common';
@Controller()
export class AppController {
  constructor() {}

  // Get 請求,回傳參數 id
  @Get('user/:userId')
  getUser(@Param('userId') id: number): number {
    return id;
  }
}

如下圖可以看到成功回傳輸入的參數

Post

接下來介紹 Post 請求用法,如下範例程式碼:

import { Controller, Post, Body } from '@nestjs/common';
// 定義 post 資料的欄位型態
interface PostData {
  name: string,
  email: string
}
@Controller()
export class AppController {
  constructor() {}

  // Post 請求,回傳 body 資訊
  @Post('user')
  addUser(@Body() postData: PostData): Object {
    return {
      name: postData.name,
      email: postData.email
    };
  }
}

Postman 測試,成功回傳 name 跟 email。

另外也可以操作 query string,如下範例:

import { Controller, Post, Body, Query } from '@nestjs/common';
// 定義 post 資料的欄位型態
interface PostData {
  name: string,
  email: string
}
// 定義 query string 資料的欄位型態
interface QueryData {
  limit: number
}
@Controller()
export class AppController {
  constructor() {}

  // Post 請求,回傳 body 資訊以及 query string 資料
  @Post('user')
  addUser(
    @Body() postData: PostData,
    @Query() query: QueryData
  ): Object {
    return {
      name: postData.name,
      email: postData.email,
      limit: query.limit
    };
  }
}

結果如下:

小結

這次先介紹 Controller 中常用到的 Get、Post 請求,之後系列會有實作 CRUD,到時候可以再延伸介紹 Put、Delete。如果以上內容有錯誤,再請不吝指教!

NEXT:用 Nest.js 開發 API 吧 (四) - Service


#nestjs #nodejs #javascript #API #controller #route #get #post







Related Posts

【React】-上傳到 Netlify 問題紀錄

【React】-上傳到 Netlify 問題紀錄

OOP - 8 關於繼承

OOP - 8 關於繼承

弱弱的碰一下後端 —— 未完待續

弱弱的碰一下後端 —— 未完待續


Comments