Koa中 引入使用 EJS 模板引擎

Posted 明天也要努力

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Koa中 引入使用 EJS 模板引擎相关的知识,希望对你有一定的参考价值。

1. Koa中引入使用 EJS 模板引擎

简介

“E” 代表什么?可以表示 “可嵌入(Embedded)”,也可以是“高效(Effective)”、“优雅(Elegant)”或者是“简单(Easy)”。
EJS 是一套简单的模板语言,帮你利用普通的 javascript 代码生成 html 页面。EJS 没有如何组织内容的教条,也没有再造一套迭代和控制流语法;有的只是普通的 JavaScript 代码而已。
EJS 中文文档

安装
koa-views npm地址

// 安装 koa-views 
npm install koa-views --save 
// 安装 ejs 
npm install ejs --save

引入 koa-views 配置中间件

const views = require('koa-views'); 
app.use(views(__dirname + '/views', { 
  extension: 'ejs' 
}));
参数说明
koa-views(root, opts)
  root 	视图所在的位置,必须是绝对路径。所有渲染视图都是相对于此路径的。
  opts (optional)
	opts.autoRender		是否使用ctx.body接收呈现的模板字符串。默认为true;
	opts.extension		视图的默认扩展名;
	opts.map			将文件扩展名映射到引擎	
	opts.engineSource   替换为默认引擎源
	opts.options		这些选项将被传递给 View Engine。

补充说明:nodejs 中的 __dirname 与 __filename
__filename	获取当前模块文件的带有完整绝对路径的文件名;【包含文件名本身的绝对路径】
__dirname	获得当前文件所在目录的完整目录名。【不包含文件名本身的绝对路径】

Koa中使用 ejs

// eg:
router.get('/add',async (ctx) => { 
  let title = 'hello koa2';
  await ctx.render('index',{ title }) 
})

2. EJS 模板引擎语法

引入模板

<%- include('public/header')  %>

绑定数据

<%= h %>

绑定 html 数据

<%- h %>

循环数据

<%for(var i=0;i<list.length;i++) { %>
	<li><%= list[i] %></li> 
<%}%>

判断语句

<% if(true){ %> 
  <div>true</div> 
<%} else{ %> 
  <div>false</div> 
<%} %>

3. 完整演示代码

// app.js
const Koa = require('koa');
const Router = require('koa-router');
const views = require('koa-views'); 

const app = new Koa();
const router = new Router();

/*
*配置模板引擎中间件--第三方中间件
*/
app.use(views(__dirname + '/views', { 
  extension: 'ejs' 
}));

// 写一个中间件配置公共的信息,这样在每一个路由的render里面都可使用
app.use(async (ctx,next) => {
  ctx.state.userInfo = 'admin';
  await next();
})


router.get('/',async (ctx, next) => {
  const content = '<p>这是一个晴朗的下午</p>';
  const list = ['111','222','333'];
  const count = 60;

  await ctx.render('index',{
    title: 'Vue',
    content: content,
    list: list,
    count: count,
  })
})



app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000,()=>{ 
  console.log('http://localhost:3000'); 
});
// views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <%- include('public/header')  %>

  <div> <%= title %> </div>

  <%- content %>

  <% for(let i = 0; i < list.length; i++ ){ %> 
    <li><%= list[i] %></li>
  <% } %> 
  
  <% if(count > 50){ %> 
    <span> 大于50 </span>
  <% }else{ %> 
    <span> 小于50 </span>
  <% } %> 

  <div>用户信息:<%= userInfo %> </div>
</body>

</html>

以上是关于Koa中 引入使用 EJS 模板引擎的主要内容,如果未能解决你的问题,请参考以下文章

EJS模板引擎

EJS模板引擎

3KOA模板引擎+访问静态资料中间件

在 EJS 模板引擎中,如何“包含”页脚?

ejs模板引擎的使用

koa01