在NestJS中重定向或渲染UI_在material UI appbar中渲染图像_在Material UI和条件渲染中接收道具 - 腾讯云开发者社区

在NestJS中重定向或渲染UI

基础概念

NestJS 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的框架。它使用现代 JavaScript 或 TypeScript 构建，并结合了 OOP（面向对象编程）、FP（函数式编程）和 FRP（函数式响应编程）的元素。

在 NestJS 中，重定向和渲染 UI 是两种常见的页面跳转方式。

重定向

重定向是指将客户端浏览器导向另一个 URL。在 NestJS 中，可以通过 @Res() 装饰器获取响应对象，然后调用其 redirect 方法实现重定向。

渲染 UI

渲染 UI 是指服务器端生成 HTML 内容并发送给客户端浏览器。在 NestJS 中，通常与模板引擎（如 Handlebars、EJS 等）结合使用，通过 @View() 装饰器指定视图模板，并在控制器方法中返回数据。

类型与应用场景

重定向：
- 登录成功后跳转到用户主页。
- 表单提交后跳转到确认页面。
渲染 UI：
- 显示用户个人信息页面。
- 动态生成产品列表页面。

示例代码

重定向示例

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

@Controller()
export class AppController {
  @Get('redirect')
  redirectToAnotherPage(@Res() response: Response) {
    response.redirect('/another-page');
  }
}

渲染 UI 示例（使用 Handlebars 模板引擎）

首先，安装 Handlebars 和相关依赖：

npm install hbs @nestjsplus/express-views

然后，在 app.module.ts 中配置模板引擎：

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { ViewsModule, ViewEngine } from '@nestjsplus/express-views';
import * as hbs from 'hbs';

@Module({
  imports: [
    ViewsModule.register({
      defaultViewEngine: ViewEngine.HBS,
      extname: '.hbs',
      layoutsDir: 'src/views/layouts/',
      partialsDir: 'src/views/partials/',
    }),
  ],
  controllers: [AppController],
})
export class AppModule {}

创建一个视图模板 src/views/home.hbs：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
</head>
<body>
  <h1>Welcome to the Home Page</h1>
  <p>{{ message }}</p>
</body>
</html>

在控制器中渲染该模板：

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

@Controller()
export class AppController {
  @Get('home')
  @Render('home')
  home() {
    return { message: 'Hello, World!' };
  }
}