模板渲染

本组件用于在 midway 体系使用服务端渲染 ejs，nunjucks 模板。 ​

使用 ejs

安装依赖

选择对应的模板安装依赖。

$ npm i @midwayjs/view-ejs --save

​

引入组件

首先，引入组件，在 configuration.ts  中导入：

import { Configuration } from '@midwayjs/decorator';import * as view from '@midwayjs/view-ejs';import { join } from 'path';
@Configuration({  imports: [    view, // 导入 ejs 组件  ],  importConfigs: [join(__dirname, 'config')],})export class ContainerLifeCycle {}

配置

// src/config/config.default.tsexport const view = {  defaultViewEngine: 'ejs',  mapping: {    '.ejs': 'ejs',  },};
// ejs configexport const ejs = {};

使用

​

注意，默认的 view 目录为 ${appRoot}/view ，在其中创建一个 hello.ejs 文件。 ​

目录结构如下：

➜  my_midway_app tree.├── src│   └── controller                 ## Controller 目录│       └── home.ts├── view                           ## 模板目录│   └── hello.ejs├── test├── package.json└── tsconfig.json

我们在模板里写一些 ejs 格式的内容，比如：

// view/hello.ejshello <%= data %>

​

在 Controller 中渲染。

import { Inject, Provide } from '@midwayjs/decorator';import { Context } from '@midwayjs/koa';
@Provide()@Controller('/')export class HomeController {  @Inject()  ctx: Context;
  @Get('/')  async render() {    await this.ctx.render('hello.ejs', {      data: 'world',    });  }}

使用 Nunjucks

和 ejs 类似，引入对应组件即可。

1、选择对应的模板安装依赖。

$ npm i @midwayjs/view-nunjucks --save

​

2、引入组件，在 configuration.ts  中导入：

import { Configuration } from '@midwayjs/decorator';import * as view from '@midwayjs/view-nunjucks';import { join } from 'path';
@Configuration({  imports: [    view, // 导入 nunjucks 组件  ],  importConfigs: [join(__dirname, 'config')],})export class ContainerLifeCycle {}

3、增加 nunjucks 的配置，比如默认使用 nunjucks。

// src/config/config.default.tsexport const view = {  defaultViewEngine: 'nunjucks',  mapping: {    '.nj': 'nunjucks',  },};

​

4、在 view 目录增加模板

// view/test.ejshi, {{ user }}

​

在 Controller 中渲染。

import { Inject, Provide } from '@midwayjs/decorator';import { Context } from '@midwayjs/koa';
@Provide()@Controller('/')export class HomeController {  @Inject()  ctx: Context;
  @Get('/')  async render() {    await ctx.render('test.nj', { user: 'midway' });  }}

访问后会输出 hi, midway 。 ​

如果有自定义 filter 的需求，可以在入口处增加，比如下面增加了一个名为 hello 的 filter。

import { App, Configuration, Inject } from '@midwayjs/decorator';import * as view from '@midwayjs/view-nunjucks';import { join } from 'path';
@Configuration({  imports: [view],  importConfigs: [join(__dirname, 'config')],})export class AutoConfiguration {  @App()  app;
  @Inject()  env: view.NunjucksEnvironment;
  async onReady() {    this.env.addFilter('hello', (str) => {      return 'hi, ' + str;    });  }}

在模板里可以使用

{  {    name | hello;  }}

然后渲染

// controller// ...await ctx.render('test.nj', { name: 'midway' });

也会输出 hi, midway 。 ​

注意事项

如需在 egg(@midwayjs/web) 场景下使用，请在 plugint.ts 中关闭 view 和其相关插件。 ​

import { EggPlugin } from 'egg';export default {  // ...  view: false,} as EggPlugin;

​

否则会出现下面类似的错误。

TypeError: Cannot set property view of #<EggApplication> which has only a getter