NestJs框架快速入門(V6.5)

Nest是構建高效可擴展的 Node.js Web 應用程序的框架。
默認使用JavaScript的超集TypeScript進行開發。

環境準備

查看node和npm版本:

$ node --version
v10.16.0

$ npm --version
6.9.0

安裝@nestjs/cli

使用 npm 全局安裝 @nestjs/cli:

$ npm i -g @nestjs/cli
/usr/local/bin/nest -> /usr/local/lib/node_modules/@nestjs/cli/bin/nest.js
+ @nestjs/[email protected]
removed 3 packages and updated 13 packages in 6.982s

使用 nest --version 命令查看 nest 當前版本:

$ nest --version
6.5.0

使用 nest new 命令創建一個名爲 nest-app 的項目:

$ nest new nest-app    
⚡  We will scaffold your app in a few seconds..

CREATE /nest-app/.prettierrc (51 bytes)
CREATE /nest-app/README.md (3370 bytes)
CREATE /nest-app/nest-cli.json (84 bytes)
CREATE /nest-app/nodemon-debug.json (163 bytes)
CREATE /nest-app/nodemon.json (67 bytes)
CREATE /nest-app/package.json (1804 bytes)
CREATE /nest-app/tsconfig.build.json (97 bytes)
CREATE /nest-app/tsconfig.json (325 bytes)
CREATE /nest-app/tslint.json (426 bytes)
CREATE /nest-app/src/app.controller.spec.ts (617 bytes)
CREATE /nest-app/src/app.controller.ts (274 bytes)
CREATE /nest-app/src/app.module.ts (249 bytes)
CREATE /nest-app/src/app.service.ts (142 bytes)
CREATE /nest-app/src/main.ts (208 bytes)
CREATE /nest-app/test/app.e2e-spec.ts (561 bytes)
CREATE /nest-app/test/jest-e2e.json (183 bytes)

? Which package manager would you ❤️  to use? npm
▹▹▹▸▹ Installation in progress... ☕
?  Successfully created project nest-app
?  Get started with the following commands:

$ cd nest-app
$ npm run start

    Thanks for installing Nest ?
Please consider donating to our open collective
    to help us maintain this package.
                         
?  Donate: https://opencollective.com/nest

啓動項目

進入項目，並啓動項目

$ cd nest-app 
$ npm run start
> [email protected] start /Users/wangtom/development/node/nest-app
> ts-node -r tsconfig-paths/register src/main.ts
[Nest]3226-2019-06-13 [NestFactory] Starting Nest application...
[Nest]3226-2019-06-13 [InstanceLoader] AppModule dependencies initialized +87ms
[Nest]3226-2019-06-13 [RoutesResolver] AppController {/}: +41ms
[Nest]3226-2019-06-13 [RouterExplorer] Mapped {/, GET} route +16ms
[Nest]3226-2019-06-13 [NestApplication] Nest application successfully started +43ms

打開瀏覽器，訪問 http://localhost:3000/ 就可以看到Hello World!頁面輸出了。

或者在終端使用 curl 請求:

$ curl -i localhost:3000
HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: text/html; charset=utf-8
Content-Length: 12
ETag: W/"c-Lve95gjOVATpfV8EL5X4nxwjKHE"
Date: Thu, 13 Jun 2019 08:16:42 GMT
Connection: keep-alive

Hello World!% 

可以看到， 輸出了 Hello World! 字符串。
使用 -i 參數，表示要輸出 header 頭信息。
在 header 頭信息中，我們可以看到，X-Powered-By 值爲 Express， 就是告訴我們這個網站或框架底層是 Expres 框架。

項目結構

查看一下項目結構:

$ ll nest-app 
total 640
-rw-r--r--    1 wangtom  staff   3.3K  6 13 16:13 README.md
-rw-r--r--    1 wangtom  staff    84B  6 13 16:13 nest-cli.json
drwxr-xr-x  585 wangtom  staff    18K  6 13 16:14 node_modules
-rw-r--r--    1 wangtom  staff   163B  6 13 16:13 nodemon-debug.json
-rw-r--r--    1 wangtom  staff    67B  6 13 16:13 nodemon.json
-rw-r--r--    1 wangtom  staff   287K  6 13 16:14 package-lock.json
-rw-r--r--    1 wangtom  staff   1.8K  6 13 16:14 package.json
drwxr-xr-x    7 wangtom  staff   224B  6 13 16:13 src
drwxr-xr-x    4 wangtom  staff   128B  6 13 16:13 test
-rw-r--r--    1 wangtom  staff    97B  6 13 16:13 tsconfig.build.json
-rw-r--r--    1 wangtom  staff   325B  6 13 16:13 tsconfig.json
-rw-r--r--    1 wangtom  staff   426B  6 13 16:13 tslint.json

可以使用 tree 命令查看nest-app的目錄結構:

比如使用 tree ./nest-app -L 1, 查看1級目錄結構。

./nest-app
├── README.md
├── nest-cli.json
├── node_modules/
├── nodemon-debug.json
├── nodemon.json
├── package-lock.json
├── package.json
├── src  # 源碼目錄
│   ├── app.controller.spec.ts
│   ├── app.controller.ts # 控制器類
│   ├── app.module.ts  # 模塊
│   ├── app.service.ts # 服務類
│   └── main.ts   # 入口文件
├── test   # 測試目錄
│   ├── app.e2e-spec.ts
│   └── jest-e2e.json
├── tsconfig.build.json
├── tsconfig.json
└── tslint.json

可以看到，和 Angular 的項目結構很相似。

src/main.ts 是項目的入口文件, 定義了一個異步方法(bootstrap)來啓動應用，默認監聽端口 3000:

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

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

控制器: app.controller.ts

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

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

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

控制器中定義了一個名爲 getHello() 的方法，使用 @Get 註解，表示可以通過 Get 方法訪問。
控制器構造方法中引入了私有隻讀的服務類 AppService， 在 getHello() 方法中調動了服務類(AppService)中的 getHello() 方法。

服務類: app.service.ts

// app.service.ts
import { Injectable } from '@nestjs/common';

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

在服務類AppService中，定義了getHello()方法，只返回了字符串 Hello World!。

小試牛刀

熟悉了項目目錄結構與基本運行代碼後，我們來增加一些自己的方法，感受一個這個框架。

自定義一個返回當前版本的接口，獲取當前應用的版本:

// app.controller.ts
// 導入 Post
import { Controller, Get } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}

  @Get()
  getHello(): string {
    return this.appService.getHello();
  }
  // 自定義 getVersion 方法: 
  @Get('/version')
  getVersion(): Object {
    return this.appService.getVersion();
  }
  // 自定義 postIndex 方法: 
  @Post('/api')
  postIndex(): Object {
    return this.appService.getVersion();
  }
}

在控制器文件 src/app.controller.ts 中:
新增了一個使用@Get註解的getVersion()方法，可以通過Get訪問，路由爲“/version”。
新增了一個使用@Post註解的postIndex()方法，可以通過Post訪問, 路由爲“/api”。

修改服務類文件 app.service.ts:

新增一個名爲getVersion()的方法，返回 Object 格式的json數據。

// app.service.ts
import { Injectable } from '@nestjs/common';

@Injectable()
export class AppService {
  getHello(): string {
    return 'Hello World!';
  }
  // 自定義：獲取版本
  getVersion(): Object {
    return {
      code: 200, 
      msg: "OK",
      data: {
        version:"0.0.1"
      }, 
    }
  }
}

使用 Control+C 結束終端運行，這次我們使用 npm run start:dev 啓動(項目文件有修改會自動重啓服務):

$ npm run start:dev  

5:17:42 PM - Starting compilation in watch mode...
[1] 
[1] 
[1] 5:17:44 PM - Found 0 errors. Watching for file changes.
[0][nodemon] 1.19.1
[0][nodemon] to restart at any time, enter `rs`
[0][nodemon] watching: /Users/wangtom/development/node/nest-app/dist/**/*
[0][nodemon] starting `node dist/main`
[0][Nest]3845-2019-06-13[NestFactory] Starting Nest application...
[0][Nest]3845-2019-06-13[InstanceLoader] AppModule dependencies initialized +20ms
[0][Nest]3845-2019-06-13[RoutesResolver] AppController {/}: +6ms
[0][Nest]3845-2019-06-13[RouterExplorer] Mapped {/, GET} route +8ms
[0][Nest]3845-2019-06-13[RouterExplorer] Mapped {/version, GET} route +2ms
[0][Nest]3845-2019-06-13[RouterExplorer] Mapped {/api, POST} route +2ms
[0][Nest]3845-2019-06-13[NestApplication] Nest application successfully started +4ms
 ... 

現在我們使用 curl 命令分別來請求這幾個路由地址:

請求 “localhost:3000/version”:

$ curl localhost:3000            
Hello World!% 
# 默認GET請求'/version': 存在，返回預期的結果
$ curl localhost:3000/version
{"code":200,"msg":"OK","data":{"version":"0.0.1"}}%                                                   

# 改成POST請求'/version': 不存在，框架自帶的錯誤提示
$ curl -X POST localhost:3000/version    
{"statusCode":404,"error":"Not Found","message":"Cannot POST /version"}% 

請求 “localhost:3000/api”:

# 使用POST請求'/api': 存在，返回預期的結果
$ curl -X POST localhost:3000/api
{"code":200,"msg":"OK","data":{"version":"0.0.1"}}% 

# 改成GET請求'/api': 不存在，框架自帶的錯誤提示
$ curl localhost:3000/api 
{"statusCode":404,"error":"Not Found","message":"Cannot GET /api"}% 

References

https://docs.nestjs.com/first-steps

Change log

2018.12.18 add this page, nestjs version 5.7.
2019.06.13 update nestjs 6.5.

感謝閱讀，如有問題請留言。

[END]