Nestjs configures static resources, template engine, and post examples

Configuring static resources

• Reference documents ：https://docs.nestjs.com/techniques/mvc

The above is the official configuration

//  The official sample ：main.ts
import {
     NestFactory } from '@nestjs/core';
import {
     NestExpressApplication } from '@nestjs/platform-express'; //  Here is http platform 
import {
     join } from 'path';
import {
     AppModule } from './app.module';

async function bootstrap() {
    
  //  there create Method is a generic type , Incoming to us http platform 
  const app = await NestFactory.create<NestExpressApplication>(
    AppModule,
  );

  app.useStaticAssets(join(__dirname, '..', 'public')); //  In this way, the static resource directory can be configured   This line of code is the most critical 
  app.setBaseViewsDir(join(__dirname, '..', 'views')); //  This is the configuration based on the template file stored in the template engine 
  app.setViewEngine('hbs'); //  This is to set the template engine ,  We can choose what we are familiar with ejs

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

This is the simplest configuration

//  The official sample ：main.ts
import {
     NestFactory } from '@nestjs/core';
import {
     NestExpressApplication } from '@nestjs/platform-express'; //  Here is http platform 
import {
     AppModule } from './app.module';

async function bootstrap() {
    
  //  there create Method is a generic type , Incoming to us http platform 
  const app = await NestFactory.create<NestExpressApplication>(
    AppModule,
  );
  app.useStaticAssets('public'); //  In this way, the static resource directory can be configured 
  await app.listen(3000);
}
bootstrap();

Set virtual path

//  The official sample ：main.ts
import {
     NestFactory } from '@nestjs/core';
import {
     NestExpressApplication } from '@nestjs/platform-express'; //  Here is http platform 
import {
     AppModule } from './app.module';

async function bootstrap() {
    
  //  there create Method is a generic type , Incoming to us http platform 
  const app = await NestFactory.create<NestExpressApplication>(
    AppModule,
  );

  //  The virtual path is  static
  app.useStaticAssets('public', {
    
    prefix: 'static/'
  });
  
  //  This is the configuration based on the template file stored in the template engine 
  app.setBaseViewsDir('views');
  //  This is to set the template engine ,  We can choose what we are familiar with ejs  You need to install ：yarn add ejs
  app.setViewEngine('ejs');

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

• Distinguish the template files of the front and background management systems , Generally we will be in views Partition in directory
• Example ：
  • views/
    • default This is where the foreground template files are stored
      • index.ejs
      • news.ejs
      • about.ejs
    • admin The background template file is stored here
      • index.ejs
      • news.ejs
      • goods.ejs

In the controller based on ejs To render a page

import {
     Controller, Get, Render } from '@nest/common';
import {
     AppService } from './app.service';

@Controller()
export class AppController {
    
    constructor(private readonly appService: AppService) {
    }
    @Get()
    @Render('default/index')
    index() {
    
        return {
    name: 'Joh', age: 10};
    }
}

Write a simple template engine

// default/index.ejs
<div> full name ： <%=name%></div>
<div> Age ： <%=age%></div>

Test how forms are submitted , A simple little demo

• Write the shopping cart controller

  import {
         Controller, Get, Post, Body, Response, Render } from '@nestjs/common';
  
  @Controller('cart')
  export class CartController {
        
      @Get()
      @Render('default/cart')
      index() {
        
          // do nothing
      }
      @Post('add')
      add(@Body() body, @Response() res) {
        
          console.log(body);
          res.redirect('/cart');
      }
  }
  

• Write add shopping cart components

  <!--  Loading simulation of static resources  -->
  <link rel="stylesheet" href="/static/apple.css">
  <img src="/static/apple.png" />
  
  <form action="/cart/add" method="post">
      <div>
          <input type="text" name="name" placeholder=" Please enter the product name ">
      </div>
      <div>
          <input type="text" name="number" placeholder=" Please enter the quantity of goods ">
      </div>
      <input type="submit" value=" Submit " />
  </form>