Nestjs中使用模板引擎和配置静态资源

Nestjs中配置静态资源

静态资源是什么呢？例如CSS、JS以及图片等等。下面以在浏览器中访问图片为例来配置静态资源
首先新建一个项目，在其根目录中创建一个public文件夹用于存放静态资源

为了创建一个简单的 MVC 应用程序，我们必须安装一个模板引擎,命令如下：

 npm install --save hbs

将main.js中的代码改为：

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<NestExpressApplication>(AppModule);

  app.useStaticAssets(join(__dirname, '..', 'public'));
  app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('hbs');

  await app.listen(3000);
}
bootstrap();

我们先试试一个简单的配置静态资源目录，代码如下

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('public');  //配置静态资源目录
  await app.listen(3000);
}
bootstrap();

这时我们在public文件夹中放入一张图片，并取名为1.png

这时候我们启动项目，并输入对应的URL就可以看见图片出现在网站中

配置虚拟目录

比如想通过http://localhost:3000/static/1.png来访问public目录里面的文件

代码如下：
app.useStaticAssets(join(__dirname, '…", ‘public’),{
prefix: " /static/. //设置虚拟路径
})

这时候我们通过URL访问：

通过官方的方法也可以

配置模板引擎

安装对应的模板引擎，比如ejs
安装代码

cnpm i ejs --save

配置模板引擎
app.setBaseViewsDir(join(_dirname,‘…’,‘views’)) //放试图的文件
app.setViewEngine(‘ejs’);

然后在跟目录中新建一个名为views的文件夹

因为我们的项目设计到前端和后端，所以新建两个文件夹来区分前后端分别是admin和default

然后我们在default里面新建index.ejs来渲染页面，并添加一些基础的东西

然后需要引入Render装饰器，需要在app.controller.ts中添加并修改代码，如下

这时候我们访问URL就可看见我们在index中写的语句

接下来我们可以输出刚刚接受的数据

刷新刚刚的URL

NestJs中模板引擎结合Post演示

首先新建一个user控制器

然后进入user控制器中配置路由

启动项目看看浏览器能不能访问user控制器

在default文件夹中新建user.ejs,代码如下：

user控制器的代码改为：

这是我们输入相应的URL就可以看见以下画面：

这时候我们在输入框内输入一些数据并点击提交

就可以在终端看见传值