Vue3+NestJS 全栈开发企业级管理后台「完jie」

Vue3+NestJS 全栈开发企业级管理后台

核心代码，注释必读

// download：3w ukoou com

Nest（NestJS）是一个用于构建高效、可扩展的Node.js 服务器端应用程序的框架。 它使用渐进式JavaScript，用TypeScript 构建并完全支持TypeScript（但仍能让开发者用纯JavaScript 编码），并结合了OOP（面向对象编程）、FP（功能编程）和FRP（功能反应式编程）的元素。

NestJS核心 - Controller讲解和应用

控制器主要是用来处理客户端传入的请求并向客户端返回响应。

它一般是用来做路由导航的，内部路由机制控制哪个控制器接收哪些请求。

路由

为了创建基本控制器，我们需要使用@Controller装饰器，装饰器将类与所需元数据关联起来，并使Nest能够创建路由映射。

我们使用nest-cli快速创建一个REST API风格的完整CURD代码。

nest g resource nanjiu

在生成的nanjiu文件夹下，我们可以看到有nanjiu.controller.ts文件，代码如下：

// nanjiu.controller.ts
import { Controller, Get, Post, Body, Patch, Param, Delete, Query } from '@nestjs/common';
import { NanjiuService } from './nanjiu.service';
import { CreateNanjiuDto } from './dto/create-nanjiu.dto';
import { UpdateNanjiuDto } from './dto/update-nanjiu.dto';

@Controller('nanjiu')
export class NanjiuController {
  constructor(private readonly nanjiuService: NanjiuService) {}

  @Post()
  create(@Body() createNanjiuDto: CreateNanjiuDto) {
    return this.nanjiuService.create(createNanjiuDto);
  }

  @Get()
  findAll(@Param() params, @Query() query) {
    console.log('find', query)
    return this.nanjiuService.findAll();
  }

  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.nanjiuService.findOne(+id);
  }

  @Patch(':id')
  update(@Param('id') id: string, @Body() updateNanjiuDto: UpdateNanjiuDto) {
    return this.nanjiuService.update(+id, updateNanjiuDto);
  }

  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.nanjiuService.remove(+id);
  }
}

@controller装饰器中传入了nanjiu参数，表示指定路由前缀nanjiu，在@controller装饰器中使用路由前缀，可以让我们很轻松地将一组相关路由放在一起集中管理。

比如当我们通过get方式请求/nanjiu这个路由时，它应该会走到@get装饰器修饰的findAll方法内

可以使用ApiFox工具进行接口测试：

从上图中可以看到我此时的请求路径是http://localhost:3000/apinanjiu，是不是很好奇为了什么多了一层/api，这是因为我加了一层全局路由前缀

// main.ts
app.setGlobalPrefix('api'); // 全局路由前缀

这里我们还可以看到状态码为200，并且能够看到findAll的返回值，就说明此时的请求是正常的，但右边还有个error提示返回数据结构与接口定义不一致。

这是因为这里我们只是简单地返回了一个字符串，并不符合JSON格式

在Nest中，有两种选项来处理响应值：

• 标准模式：使用此内置方法，当请求处理程序返回 JavaScript 对象或数组时，它将自动序列化为 JSON。然而，当它返回 JavaScript 基本类型（例如，string、number、boolean）时，Nest 将仅发送该值，而不尝试对其进行序列化。这使得响应处理变得简单：只需返回值，Nest 就会处理其余的事情。

  此外，默认情况下，响应的状态代码始终为 200，除了使用 201 的 POST 请求。我们可以通过@HttpCode(...)在处理程序级别添加装饰器来轻松更改此行为

• 特定库模式：我们可以使用特定于库的（例如，Express）@Res()，可以使用方法处理程序签名中的装饰器注入该对象（例如， findAll(@Res() response)）。通过这种方法，您可以使用该对象公开的本机响应处理方法。例如，使用 Express，可以使用response.status(200).send().

路由通配符

Nest还支持基于模式的路由，比如，使用通配符

@Get('ab*cd')
findAll() {
  return 'This route uses a wildcard';
}

路由'ab*cd'路径将匹配abcd、ab_cd、abecd等。字符?、+、*和()可以在路由路径中使用，并且是其正则表达式对应项的子集。连字符 ( -) 和点 ( .) 按字面意思解释为基于字符串的路径。

请求对象

作为后端项目，访问客户端请求的详细信息也非常重要，从上面生成的代码中我们可以看到@Body、@Param、@Query等装饰器，没错，在大多数时候我们并不需要手动获取请求对象（查询字符串、参数、请求头、正文等），直接通过这些开箱即用的装饰器就能快速获取。

比如我们在findAll内加上日志

// nanjiu.controller.ts
@Get()
  findAll(@Param() params, @Query() query) {
    console.log('find', params, query) // 日志
    return this.nanjiuService.findAll();
  }

然后在请求时带上一些参数：

此时我们再来看看后端打印的日志：

这里就能看到前端请求传过来的Query参数为city: shanghai

这些开箱即用的装饰器有以下这些：

@Request(), @Req()	req
@Response(), @Res()*	res
@Next()	next
@Session()	req.session
@Param(key?: string)	req.params/req.params[key]
@Body(key?: string)	req.body/req.body[key]
@Query(key?: string)	req.query/req.query[key]
@Headers(name?: string)	req.headers/req.headers[name]
@Ip()	req.ip
@HostParam()	req.hosts

HTTP请求方法

从上面生成的代码中的，我们可以发现除了@Get请求方法装饰器外还有一些其它的，事实上，Nest为所有标准 HTTP 方法提供了装饰器：@Get()、@Post()、@Put()、@Delete()、@Patch()、@Options()和@Head()。

一般大家常用的都是get请求与post请求吧，好像很少看到其它类型的请求

获取get请求参数

这里可以使用@Request装饰器与@Query装饰器，与express完全一致

上面已经演示了通过@Query获取，那就在通过@Request再演示一遍

// nanjiu.controller.ts
@Get()
  findAll(@Request() req, @Query() query) {
    console.log('find', req.query, query)
    return this.nanjiuService.findAll();
  }

通过req.query与Query获取的是一致的，所以使用@Query装饰器获取get类型的请求参数会更方便一些，如果你还想获取更多关于请求的参数可以使用@Request装饰器。

获取post请求参数

与express一样，可以使用@Request装饰器与Body装饰器

// nanjiu.controller.ts
@Post()
  create(@Body() createNanjiuDto: CreateNanjiuDto) {
    console.log('body', createNanjiuDto)
    return this.nanjiuService.create(createNanjiuDto);
  }

Vue3+NestJS 全栈开发企业级管理后台实战

• ➜  nest-learn git:(master) ✗ nest   
  Usage: nest <command> [options]
  
  Options:
    -v, --version                                   Output the current version.
    -h, --help                                      Output usage information.
  
  Commands:
    new|n [options] [name]                          Generate Nest application.
    build [options] [app]                           Build Nest application.
    start [options] [app]                           Run Nest application.
    generate|g [options] <schematic> [name] [path]  Generate a Nest element.
      Available schematics:
        ┌───────────────┬─────────────┐
        │ name          │ alias       │
        │ application   │ application │
        │ angular-app   │ ng-app      │
        │ class         │ cl          │
        │ configuration │ config      │
        │ controller    │ co          │
        │ decorator     │ d           │
        │ filter        │ f           │
        │ gateway       │ ga          │
        │ guard         │ gu          │
        │ interceptor   │ in          │
        │ interface     │ interface   │
        │ middleware    │ mi          │
        │ module        │ mo          │
        │ pipe          │ pi          │
        │ provider      │ pr          │
        │ resolver      │ r           │
        │ service       │ s           │
        │ library       │ lib         │
        │ sub-app       │ app         │
        └───────────────┴─────────────┘
    info|i                                          Display Nest project details.
    update|u [options]                              Update Nest dependencies.
    add [options] <library>                         Adds support for an external library to your project.
  ➜  nest-learn git:(master) ✗ 
  

• 一般使用命令创建组件、服务、守卫、管道

  nest g gu guard/auth [--no-spec]