1. Configure static resources in NestJS

The official document: docs.nestjs.com/techniques/…

app.useStaticAssets('public');
Copy the code

Complete code:

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();
Copy the code

To build public directory in the root directory, and then inside the directory to save a picture such as 1. The JPG, so you can access images by http://localhost:3000/1.jpg. We can also configure the virtual directory, for example, we want to http://localhost:3000/static/1.jpg to access the public directory inside the file, then the code is as follows:

app.useStaticAssets(join(__dirname, '.. '.'public'), {prefix: '/static/'.// Set the virtual path
});
Copy the code
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/'.// Set the virtual path
        });
        await app.listen(3000);
    }
bootstrap();
Copy the code

2. Configure the template engine in NestJS

The official document: docs.nestjs.com/techniques/… 1. Install the corresponding template engine, such as EJS CNPM I EJS –save

app.setBaseViewsDir(join(__dirname, '.. '.'views')) // Put the view file
app.setViewEngine('ejs');
Copy the code

Complete code:

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/'.// Set the virtual path
    });
    app.setBaseViewsDir(join(__dirname, '.. '.'views')) // Put the view file
    app.setViewEngine('ejs');
    await app.listen(3000);
}
bootstrap();
Copy the code

3. Render the page

import { Get, Controller, Render } from '@nestjs/common';
@Controller()
export class AppController {
    @Get()
    @Render('index')
    root() {
        return { message: 'Hello world! '}; }}Copy the code

4. Create views in the root directory of the project and create index.ejs in the directory

<! DOCTYPEhtml>
<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>This is the EJS demo code<br>
    <%=message%>
</body>
</html>
Copy the code

3, NestJS template engine with Post, and route jump

import { Controller, Get, Post, Body,Response, Render} from '@nestjs/common';
@Controller('user')
export class UserController {
    @Get()
    @Render('default/user')
    index(){
        return {"name":"Zhang"};
    }
    @Post('doAdd')
    doAdd(@Body() body,@Response() res){
        console.log(body);
        res.redirect('/user'); // Route jump}}Copy the code

Template:

<! DOCTYPEhtml>
<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="Please enter user name" />
    <br>
    <br>
    <input type="text" name="age" placeholder="Age" />
    <br>
    <br>
    <input type="submit" value="Submit">
    </form>
</body>
</html>
Copy the code