3.nestjs设置模板引擎

最新推荐文章于 2024-05-22 09:57:27 发布

人生一串儿

最新推荐文章于 2024-05-22 09:57:27 发布

阅读量1.8k

点赞数 1

分类专栏： nestjs

本文链接：https://blog.csdn.net/u012570307/article/details/112615370

版权

nestjs 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

设置模板引擎

设置模板引擎
- 模板引擎+post数据提交，路由跳转

设置模板引擎

1.安装对应的模板引擎

cnpm i ejs --save

2、配置模板引擎

app.setBaseViewsDir('views');
app.setViewEngine('ejs');

完整示例:Main.ts中配置如下

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { join } from 'path';
// 1.引入NestExpressApplication
import { NestExpressApplication } from '@nestjs/platform-express';

async function bootstrap() {
  // 2.加入到create
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  /* 
   * 3.1.2 设置虚拟路径2 
   * 注：需要引入import { join } from 'path';
   * 访问连接：http://localhost:3000/static/2.jpg
   */
  app.useStaticAssets(join(__dirname, '..', 'public'), {
    prefix: '/static/'
  })

  /* 配置模板引擎，不用引入直接配置 */
  app.setBaseViewsDir('views');
  app.setViewEngine('ejs');

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

3、渲染页面

创建views文件夹，下面再创建default，admin文件夹，default下创建ejs文件，如下

root
	views
		admin
		default
			index.ejs

2)配置app.controller.ts

// 1.引入Render
import { Controller, Get, Render } from '@nestjs/common';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService: AppService) {}
  @Get()
  // 2.配置ejs文件路径
  @Render('default/index')
  getHello() {
    // 3.配置内容
    return {"name": "张三"};
  }
}

3）配置index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是模板引擎<br>
    <!-- 1.展示变量 -->
    姓名：<%=name%>
</body>
</html>

模板引擎+post数据提交，路由跳转

业务演示：新建user.controller演示

import { Body, Controller, Get, Post, Render, Response } from '@nestjs/common';

@Controller('user')
export class UserController {
    @Get()
    @Render('default/user')
    index() {
    }

    @Post('doAdd')
    doAdd(@Body() body, @Response() res) {
        console.log(body);
        // 需要跳转到制定页面，否则会跳转到http://localhost:3000/user/doAdd
        res.redirect('/user')
    }
}

模板：新建default/user.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 演示加载css -->
    <link rel="stylesheet" href="/static/base.css">
</head>
<body>
    <form action="/user/doAdd" method="post">
        <input type="text" name="username" placeholder="请输入用户名"><br>
        <input type="text" name="age" placeholder="请输入年龄"><br>
        <input type="submit" value="提交">
    </form>
    <br>
    <!-- 演示加载图片 -->
    <img src="/static/1.jpg" alt="">
</body>
</html>

人生一串儿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.nestjs设置模板引擎

设置模板引擎设置模板引擎模板引擎+post数据提交，路由跳转设置模板引擎1.安装对应的模板引擎cnpm i ejs --save2、配置模板引擎app.setBaseViewsDir('views');app.setViewEngine('ejs');完整示例:Main.ts中配置如下import { NestFactory } from '@nestjs/core';import { AppModule } from './app.module';import { join } f
复制链接

扫一扫

专栏目录