Nestjs中使用模板引擎和配置靜態資源

1 、NestJS中配置靜態資源

官方文檔：docs.nestjs.com/techniques/…javascript

app.useStaticAssets('public');
複製代碼

完整代碼：html

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.jpg，這樣就能夠經過http://localhost:3000/1.jpg 來訪問圖片。咱們也能夠配置虛擬目錄，好比咱們想經過http://localhost:3000/static/1.jpg來訪問public目錄裏面的文件，這時候代碼以下：java

app.useStaticAssets(join(__dirname, '..', 'public'),{
    prefix: '/static/', //設置虛擬路徑
});
複製代碼

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
import {join} from 'path';
async function bootstrap() {
    const app = await NestFactory.create<NestExpressApplication>(AppModule);
    // app.useStaticAssets('public');
    app.useStaticAssets(join(__dirname, '..', 'public'),{
        prefix: '/static/', //設置虛擬路徑
        });
        await app.listen(3000);
    }
bootstrap();
複製代碼

2 、NestJS中配置模板引擎

官方文檔：docs.nestjs.com/techniques/… 1 、安裝對應的模板引擎，好比ejs cnpm i ejs --save 2 、配置模板引擎express

app.setBaseViewsDir(join(__dirname, '..', 'views')) // 放視圖的文件
app.setViewEngine('ejs');
複製代碼

完整代碼：npm

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
async function bootstrap() {
    const app = await NestFactory.create<NestExpressApplication>(AppModule);
    // app.useStaticAssets('public');
    app.useStaticAssets(join(__dirname, '..', 'public'),{
        prefix: '/static/', //設置虛擬路徑
    });
    app.setBaseViewsDir(join(__dirname, '..', 'views')) // 放視圖的文件
    app.setViewEngine('ejs');
    await app.listen(3000);
}
bootstrap();
複製代碼

3 、渲染頁面bootstrap

import { Get, Controller, Render } from '@nestjs/common';
@Controller()
export class AppController {
    @Get()
    @Render('index')
    root() {
        return { message: 'Hello world!' };
    }
}
複製代碼

4 、項目根目錄新建views，目錄而後新建index.ejsmarkdown

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    這是 ejs 演示代碼
    <br>
    <%=message%>
</body>
</html>
複製代碼

3 、NestJS中模板引擎結合Post、以及路由跳轉

import { Controller, Get, Post, Body,Response, Render} from '@nestjs/common';
@Controller('user')
export class UserController {
    @Get()
    @Render('default/user')
    index(){
        return {"name":"張三"};
    }
    @Post('doAdd')
    doAdd(@Body() body,@Response() res){
        console.log(body);
        res.redirect('/user'); //路由跳轉
    }
}
複製代碼

模板:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="/static/1.png" alt="" />
    <br>
    <form action="/user/doAdd" method="post">
    <input type="text" name="username" placeholder="請輸入用戶名" />
    <br>
    <br>
    <input type="text" name="age" placeholder="年齡" />
    <br>
    <br>
    <input type="submit" value="提交">
    </form>
</body>
</html>
複製代碼