1. Koa中引入使用 EJS 模板引擎
简介
“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。
EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条，也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。
安装
// 安装 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>
