【前端】嘿,Nest.js实战开发系列之 Nest.js初体验

写在前面前面从小白视角学习了Typescript,并学习总结了ts的系列文章,希望能够对于读者有所帮助。至于学习了TS基础后,如何进行开发实践,本系列将结合Nest.js的Node服务器框架进行娓娓道来。

创新互联公司是一家专注于成都网站设计、成都网站建设与策划设计,旬阳网站建设哪家好?创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:旬阳等地区。旬阳做网站价格咨询:18980820575

  • Nest (NestJS) 是一个用于构建高效、可扩展的Node.js服务器端应用程序的框架。它使用渐进式 JavaScript,使用TypeScript构建并完全支持(但仍然允许开发人员使用纯 JavaScript 进行编码)并结合了 OOP(面向对象编程)、FP(函数式编程)和 FRP(函数式响应式编程)的元素。

Nest使用了功能强大的HTTP Server框架,默认支持Express框架,其是简单易上手的。Nest是在Express上进行抽象而成的,结合TS强大的语言体系实现高效快捷开发。

Nest是笔者继接触Express框架后感兴趣的Node框架,对此还是比较熟悉的,选择Nest也就简单易行。截止到笔者发布文章的时候,Github上Nest拥有37.7K个Stat,足以证明其受青睐程度。

Nest 提供开箱即用的应用程序架构,允许开发人员和团队创建高度可测试、可扩展、松散耦合且易于维护的应用程序。该架构深受 Angular 的启发。

项目创建

开发环境

在项目开展前,先行介绍下开发环境:

  • node.js:14.15.1
  • typescript:3.8.3
  • nest.js:7.6.15

先决条件请确保您的操作系统上安装了Node.js(>= 10.13.0,v13 除外)。

创建项目

要使用 Nest cli创建项目,先得安装相关脚手架,运行下列命令创建第一个Nest项目。

 
 
 
 
  1. $ npm i -g @nestjs/cli 
  2. $ nest new project-name 

当然也可以使用yarn命令进行创建:

 
 
 
 
  1. $ yarn add @nest/cli 
  2. $ nest new project-name 

在输入完上述命令后,得到以下内容:

 
 
 
 
  1. G:\Code>nest new nest-test 
  2.   We will scaffold your app in a few seconds.. 
  3.  
  4. CREATE nest-test/.eslintrc.js (631 bytes) 
  5. CREATE nest-test/.prettierrc (51 bytes) 
  6. CREATE nest-test/nest-cli.json (64 bytes) 
  7. CREATE nest-test/package.json (1971 bytes) 
  8. CREATE nest-test/README.md (3339 bytes) 
  9. CREATE nest-test/tsconfig.build.json (97 bytes) 
  10. CREATE nest-test/tsconfig.json (339 bytes) 
  11. CREATE nest-test/src/app.controller.spec.ts (617 bytes) 
  12. CREATE nest-test/src/app.controller.ts (274 bytes) 
  13. CREATE nest-test/src/app.module.ts (249 bytes) 
  14. CREATE nest-test/src/app.service.ts (142 bytes) 
  15. CREATE nest-test/src/main.ts (208 bytes) 
  16. CREATE nest-test/test/app.e2e-spec.ts (630 bytes) 
  17. CREATE nest-test/test/jest-e2e.json (183 bytes) 
  18.  
  19. ? Which package manager would you ️  to use? yarn 
  20. ▹▹▹▸▹ Installation in progress...  

上述所示,会询问你选择yarn还是npm进行包管理,笔者此处选择的是yarn。

 
 
 
 
  1.   Successfully created project nest-test 
  2.   Get started with the following commands: 
  3.  
  4. $ cd nest-test 
  5. $ yarn run start 
  6.  
  7.  
  8.                           Thanks for installing Nest  
  9.                  Please consider donating to our open collective 
  10.                         to help us maintain this package. 
  11.  
  12.  
  13.                  Donate: https://opencollective.com/nest 

经历过岁月静好,电脑后台已经为我们负重前行,最终创建成功。

根据上述提示,我们进入项目进行操作,项目目录如下所示:

运行yarn start或npm run start后执行运行项目,启动项目服务。

此时,在浏览器地址栏输入http://localhost:3000即可看到hello world。

详情介绍

路由

当打开src目录下main.ts文件时,看到@Controller()装饰器中使用路由前缀可以更方便地进行路由分组,最大程度减少代码重复。

main.ts

 
 
 
 
  1. import { NestFactory } from '@nestjs/core'; 
  2. import { AppModule } from './app.module'; 
  3.  
  4. async function bootstrap() { 
  5.   const app = await NestFactory.create(AppModule);//表示使用nest的工厂函数创建了AppModule 
  6.   await app.listen(3000);//表示项目监听的端口是3000 
  7. bootstrap(); 

控制器是控制传入的请求返回到客户端的显示内容,当然也可以进行添加指定的路由。我们可以在app.controller.ts文件中添加以下代码:

 
 
 
 
  1. @Get("/home") 
  2. getHome(): string { 
  3.   return "my home"; 

运行得到:

设置局部路由前缀

路由还可以设置局部和全局的前缀,使用前缀可以避免在所有路由共享通用前缀时出现冲突的情况。

在@Controller()写入best,可以表示当前文件中所有路由设置前缀best。如下所示:

 
 
 
 
  1. @Controller("best") 
  2. export class AppController { 
  3.   constructor(private readonly appService: AppService) {} 
  4.  
  5.   @Get() 
  6.   getHello(): string { 
  7.     return this.appService.getHello(); 
  8.   } 

运行结果:

设置全局路由前缀

可以在main.ts文件中添加app.setGlobalPrefix()设置全局路由前端:

 
 
 
 
  1. app.setGlobalPrefix('nest-test'); // 全局路由前缀 

运行结果:

controller控制器

控制器负责处理传入的请求并将响应返回给客户端。控制器的目的是接收应用程序的特定请求。在路由该控制器接收哪些请求机构的控制。很多时候,每个控制器有多个路由,不同的路由可以执行不同的动作。

为创建一个基本的控制器,我们使用类和装饰器。装饰器将类与所需的元数据相关联,并使 Nest 能够创建路由映射(将请求绑定到相应的控制器)。

app.controller.ts

 
 
 
 
  1. import { Controller, Get } from '@nestjs/common'; 
  2. import { AppService } from './app.service'; 
  3.  
  4. @Controller() 
  5. export class AppController { 
  6.   constructor(private readonly appService: AppService) {} 
  7.  
  8.   @Get() 
  9.   getHello(): string { 
  10.     return this.appService.getHello(); 
  11.   } 

同样的,我们可以使用命令进行创建新的控制器模块,便于对项目的管理。

 
 
 
 
  1. $ nest g controller users 

此时在src中生成了users目录文件:

初始化的controller文件如下:

users.controller.ts

 
 
 
 
  1. import { Controller } from '@nestjs/common'; 
  2.  
  3. @Controller('users') 
  4. export class UsersController {} 

Services业务

我们看到前面controller文件中,可以实现简单业务逻辑的处理,但是在实际开发中应当将控制器和业务进行分开,对代码进行解耦。

 
 
 
 
  1. $ nest g service users 

此时在src中的users目录下生成了业务文件:

users.service.ts

 
 
 
 
  1. import { Injectable } from '@nestjs/common'; 
  2.  
  3. @Injectable() 
  4. export class UsersService { 
  5.   // 添加用户的业务逻辑 
  6.   addUser(username: string, password: string): string{ 
  7.     console.log(`create user:username--${username} password--${password}`); 
  8.      
  9.     return "add user success"; 
  10.   } 

users.controller.ts

 
 
 
 
  1. import { Body, Controller, Post } from '@nestjs/common'; 
  2. import { UsersService }from "./users.service"; 
  3. @Controller('users') 
  4. export class UsersController { 
  5.   constructor(private readonly usersService: UsersService) {}//Nest 是围绕通常称为依赖注入的强大设计模式构建的。Nest 将UsersService通过创建并返回一个实例usersService。 
  6.    
  7.   @Post("add") 
  8.   addUser(@Body() body){ 
  9.     return this.usersService.addUser(body.username,body.password); 
  10.   } 

使用postman进行模拟用户请求,运行结果如下:

Module模块

模块是用@Module()装饰器注释的类,@Module()装饰器提供元数据利用的组织应用程序结构。

每个应用程序至少有一个模块和一个根模块。根模块是 Nest 用于构建应用程序图的起点- Nest 用于解析模块和提供者关系和依赖关系的内部数据结构。虽然理论上非常小的应用程序可能只有根模块,但这不是典型情况。我们要强调的是,强烈推荐使用模块作为组织组件的有效方式。因此,对于大多数应用程序,最终的架构将采用多个模块,每个模块封装一组密切相关的功能。

所述@Module()装饰采用单个对象,其属性描述该模块:

我们看到上面创建的Service和Controller是如何进行访问运行的呢?

打开app.modelu.ts 可以看到:

 
 
 
 
  1. import { Module } from '@nestjs/common'; 
  2. import { AppController } from './app.controller'; 
  3. import { AppService } from './app.service'; 
  4. import { UsersController } from './users/users.controller'; 
  5. import { UsersService } from './users/users.service'; 
  6.  
  7. @Module({ 
  8.   imports: [], 
  9.   controllers: [AppController, UsersController], 
  10.   providers: [AppService, UsersService], 
  11. }) 
  12. export class AppModule {} 

在我们创建了子模块后,创建了UsersController和UsersService,即使不新建module文件也能通过路由访问,因为系统会自动添加到app.module.ts文件中。

当然,我们也可以根据需求进行创建子模块的module文件,只需要执行下列命令即可:

 
 
 
 
  1. $ nest g module users 

此时看到生成了module子模块文件:

初始化的文件如下所示:

 
 
 
 
  1. import { Module } from '@nestjs/common'; 
  2.  
  3. @Module({}) 
  4. export class UsersModule {} 

此时需要将users模块的UsersController和UsersService组装到module文件中。这样,其他module模块想要引入Users模块时,不需要同时Controller和Service了,方便对本模块进行管理。

 
 
 
 
  1. import { Module } from '@nestjs/common'; 
  2. import { UsersController } from './users.controller'; 
  3. import { UsersService } from './users.service'; 
  4.  
  5. @Module({ 
  6.   imports: [UsersModule], 
  7.   controllers: [UsersController], 
  8.   providers: [UsersService], 
  9. }) 
  10. export class UsersModule {} 

当然,需要对app.module.ts文件进行修改,因为子模块已经引入了Controller和Service了。

 
 
 
 
  1. import { Module } from '@nestjs/common'; 
  2. import { AppController } from './app.controller'; 
  3. import { AppService } from './app.service'; 
  4. // import { UsersController } from './users/users.controller'; 
  5. // import { UsersService } from './users/users.service'; 
  6. import { UsersModule } from './users/users.module'; 
  7.  
  8. @Module({ 
  9.   imports: [UsersModule], 
  10.   controllers: [AppController], 
  11.   providers: [AppService], 
  12. }) 
  13. export class AppModule {} 

小结

本文主要介绍使用Nest创建的首个项目,简要讲解了创建过程,以及使用到的模块概念。对路由、控制器、业务、模块进行了阐述,后续概念会进行详细讲解,更详细的请见官方文档。

当前文章:【前端】嘿,Nest.js实战开发系列之 Nest.js初体验
文章来源:http://www.shufengxianlan.com/qtweb/news18/222668.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联