Nestjs中使用模板引擎和配置静态资源
- Nestjs中配置静态资源
- 配置虚拟目录
- 配置模板引擎
- NestJs中模板引擎结合Post演示
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就可以看见以下画面:
这时候我们在输入框内输入一些数据并点击提交
就可以在终端看见传值