模板引擎
原创...大约 1 分钟
默认情况下,Nest 在底层使用 Express
库。 因此,在 Express
中使用 MVC(模型-视图-控制器)模式的每种技术也适用于 Nest。
为了创建一个 MVC 应用,我们还需要一个 模板引擎 来渲染我们的 HTML 视图:
npm install --save hbs
我们使用了 hbs (Handlebars)
引擎,但你可以使用任何符合你要求的引擎。 安装过程完成后,我们需要使用以下代码配置 express 实例:
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets("src/public");
app.setBaseViewsDir("src/views");
app.setViewEngine('hbs');
await app.listen(3000);
}
bootstrap();
现在,我们在src
目录下创建public
和views
文件夹,其中,public
文件夹用于存放公共访问资源,views
文件夹用于存放.hbs
模板文件
我们在public
文件夹下新建一个a.txt
文件,之后访问:http://localhost:3000/a.txt
现在,让我们在其中创建一个 views
目录和 a.hbs
模板。 在模板中,我们将打印从控制器传递的 message
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App</title>
</head>
<body>
{{ message }}
</body>
</html>
使用
import { Controller, Get, Render } from '@nestjs/common';
import { UserService } from './user.service';
@Controller('user')
export class UserController {
constructor(private readonly userService: UserService) { }
@Get()
@Render('a')
findOne() {
return { message: 'Hello world!' };
}
}
在这段代码中,我们指定了要在 @Render()
装饰器中使用的模板,并将路由处理程序方法的返回值传递给模板进行渲染。 请注意,返回值是一个具有属性 message
的对象,与我们在模板中创建的 message
占位符匹配。
在应用运行时,打开浏览器并导航至 http://localhost:3000/user
。 你应该会看到 Hello world!
消息。
Powered by Waline v2.15.7