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