Nestjs配置静态资源，模板引擎以及Post示例

配置静态资源

• 参考文档：https://docs.nestjs.com/techniques/mvc

上述是官方配置

// 官方示例：main.ts
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express'; // 这里是http平台
import { join } from 'path';
import { AppModule } from './app.module';

async function bootstrap() {
  // 这里的create方法是一个泛型，传入我们的http平台
  const app = await NestFactory.create<NestExpressApplication>(
    AppModule,
  );

  app.useStaticAssets(join(__dirname, '..', 'public')); // 这样即可配置好静态资源目录 这行代码最关键
  app.setBaseViewsDir(join(__dirname, '..', 'views')); // 这是配置基于模板引擎存放的模板文件
  app.setViewEngine('hbs'); // 这是设置模板引擎, 我们可以选择我们熟悉的ejs

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

这样可做最简单的配置

// 官方示例：main.ts
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express'; // 这里是http平台
import { AppModule } from './app.module';

async function bootstrap() {
  // 这里的create方法是一个泛型，传入我们的http平台
  const app = await NestFactory.create<NestExpressApplication>(
    AppModule,
  );
  app.useStaticAssets('public'); // 这样即可配置好静态资源目录
  await app.listen(3000);
}
bootstrap();

设置虚拟路径

// 官方示例：main.ts
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express'; // 这里是http平台
import { AppModule } from './app.module';

async function bootstrap() {
  // 这里的create方法是一个泛型，传入我们的http平台
  const app = await NestFactory.create<NestExpressApplication>(
    AppModule,
  );

  // 虚拟路径为 static
  app.useStaticAssets('public', {
    prefix: '/static'
  });
  
  // 这是配置基于模板引擎存放的模板文件
  app.setBaseViewsDir('views');
  // 这是设置模板引擎, 我们可以选择我们熟悉的ejs 需要先安装：yarn add ejs
  app.setViewEngine('ejs');

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

• 区分前后台管理系统的模板文件，一般我们会在views目录中划分
• 示例：
  • views/
    • default 这里存放前台模板文件
      • index.ejs
      • news.ejs
      • about.ejs
    • admin 这里存放后台模板文件
      • index.ejs
      • news.ejs
      • goods.ejs

在控制器中基于ejs来渲染页面

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};
    }
}

编写简单的模板引擎

// default/index.ejs
<div>姓名： <%=name%></div>
<div>年龄： <%=age%></div>

测试如何表单提交, 简单一个小demo

• 编写购物车控制器

  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');
      }
  }
  

• 编写添加购物车组件

  <!-- 静态资源的加载模拟 -->
  <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="请输入商品名称">
      </div>
      <div>
          <input type="text" name="number" placeholder="请输入商品数量">
      </div>
      <input type="submit" value="提交" />
  </form>