nest.js mvc 介绍——迹忆客-ag捕鱼王app官网

nest 默认使用底层的 express 库。 因此，在 express 中使用 mvc（模型-视图-控制器）模式的每种技术也适用于 nest。

首先，让我们使用 cli 工具搭建一个简单的 nest 应用程序：

$ npm i -g @nestjs/cli
$ nest new project

为了创建一个 mvc 应用程序，我们还需要一个模板引擎来渲染我们的 html 视图：

$ npm install --save hbs

我们使用了 hbs（handlebars）引擎，但你可以使用任何适合自己要求的引擎。 安装过程完成后，我们需要使用以下代码配置 express 实例：

import { nestfactory } from '@nestjs/core';
import { nestexpressapplication } from '@nestjs/platform-express';
import { join } from 'path';
import { appmodule } from './app.module';
async function bootstrap() {
  const app = await nestfactory.create(
    appmodule,
  );
  app.usestaticassets(join(__dirname, '..', 'public'));
  app.setbaseviewsdir(join(__dirname, '..', 'views'));
  app.setviewengine('hbs');
  await app.listen(3000);
}
bootstrap();

我们告诉 express，public 目录将用于存储静态资源，视图将包含模板，并且应该使用 hbs 模板引擎来呈现 html 输出。

模板渲染

现在，让我们在其中创建一个 views 目录和 index.hbs 模板。 在模板中，我们将打印从控制器传递的消息：

  
    
    
  
  
    {{ message }}
  

接下来，打开 app.controller 文件并将 root() 方法替换为以下代码：

import { get, controller, render } from '@nestjs/common';
@controller()
export class appcontroller {
  @get()
  @render('index')
  root() {
    return { message: 'hello world!' };
  }
}

在这段代码中，我们在 @render() 装饰器中指定了要使用的模板，并将路由处理程序方法的返回值传递给模板进行渲染。 请注意，返回值是一个带有属性消息的对象，与我们在模板中创建的消息占位符匹配。

在应用程序运行时，打开浏览器并导航到 http://localhost:3000 。 我们应该看到 hello world！ 信息。

动态模板渲染

如果应用程序逻辑必须动态决定要渲染哪个模板，那么我们应该使用 @res() 装饰器，并在我们的路由处理程序中提供视图名称，而不是在 @render() 装饰器中：

提示 当 nest 检测到 @res() 装饰器时，它会注入特定于库的响应对象。 我们可以使用这个对象来动态渲染模板。

import { get, controller, res, render } from '@nestjs/common';
import { response } from 'express';
import { appservice } from './app.service';
@controller()
export class appcontroller {
  constructor(private appservice: appservice) {}
  @get()
  root(@res() res: response) {
    return res.render(
      this.appservice.getviewname(),
      { message: 'hello world!' },
    );
  }
}

fastify

如本章所述，我们可以将任何兼容的 http 提供程序与 nest 一起使用。 fastify 就是这样一个库。 为了使用 fastify 创建 mvc 应用程序，我们必须安装以下软件包：

$ npm i --save fastify-static point-of-view handlebars

接下来的步骤涵盖了与 express 使用的几乎相同的过程，只是特定于平台的细微差别。 安装过程完成后，打开 main.ts 文件并更新其内容：

import { nestfactory } from '@nestjs/core';
import { nestfastifyapplication, fastifyadapter } from '@nestjs/platform-fastify';
import { appmodule } from './app.module';
import { join } from 'path';
async function bootstrap() {
  const app = await nestfactory.create(
    appmodule,
    new fastifyadapter(),
  );
  app.usestaticassets({
    root: join(__dirname, '..', 'public'),
    prefix: '/public/',
  });
  app.setviewengine({
    engine: {
      handlebars: require('handlebars'),
    },
    templates: join(__dirname, '..', 'views'),
  });
  await app.listen(3000);
}
bootstrap();

fastify api 略有不同，但这些方法调用的最终结果保持不变。 fastify 需要注意的一个区别是传递给 @render() 装饰器的模板名称必须包含文件扩展名。

import { get, controller, render } from '@nestjs/common';
@controller()
export class appcontroller {
  @get()
  @render('index.hbs')
  root() {
    return { message: 'hello world!' };
  }
}

在应用程序运行时，打开浏览器并导航到 http://localhost:3000 。 您应该看到 hello world！ 信息。