查看更多资源
1. 安装：
// 新建项目 koa-demo
npm init
npm install koa koa-router --save
npm install koa-views ejs --save
2. 图示：
3. ejs基本用法：
1. ejs 绑定数据
<%= title %>
2. ejs 绑定html数据
<%- htmlString %>
3. ejs 判断语句
<% if (num > 20){ %>
<div> true </div>
<% }else{ %>
<div> false </div>
<% } %>
4. ejs 循环数据
<% for(var i=0;i<list.length;i++){ %>
<li><%= list[i] %></li>
<% } %>
5. ejs 引入组件
<% include public/header.ejs %>
4. 代码 - app04.js：
let Koa = require('koa');
let router = require('koa-router')();
let views = require('koa-views'); // 引入 模块
let app = new Koa();
//配置模板引擎 方式一：模板的后缀名是.ejs 如 index.ejs
app.use(views('views', {
extension: 'ejs'
}))
/*
//配置模板引擎 方式二：模板的后缀名是.html 如 index.html
app.use(views('views',
{
map:{ html: 'ejs' }
})
);
*/
app.use(async (ctx, next) => {
ctx.state.userInfo = 'pack'; // 公用信息 ctx.state
await next();
})
router.get('/', async (ctx) => {
let title = 'hello ejs'; // 向模板 传递 参数
await ctx.render('index', { // 渲染 模板
title
})
})
router.get('/news', async (ctx) => {
let list = ['list01', 'list02', 'list03']; // 向模板 传递 参数
let content = '<h3>这个是h3</h3>';
let num = 12;
await ctx.render('news', { // 渲染 模板
list,
content,
num,
})
})
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3004);
// 启动 node app04.js
// 浏览器 访问：
// localhost:3004
// localhost:3004/news
5. 代码 - header.ejs：
<hr>
<p>这是header.ejs</p>
<hr>
6. 代码 - index.ejs：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>这是一个 ejs 模板引擎</h2>
<!-- 渲染 title -->
<h3>这是title：<%= title %></h3>
<!-- 渲染 userInfo -->
<h3>公共信息：<%= userInfo %></h3>
<!-- 引入 header.ejs 组件 -->
<% include public/header.ejs %>
</body>
</html>
7. 代码 - news.ejs：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<% include public/header.ejs %>
<h2>公用信息：<%= userInfo %></h2>
<h2>ejs 循环数据</h2>
<ul>
<% for(var i=0;i<list.length;i++){%>
<li><%= list[i] %></li>
<%}%>
</ul>
<h2>输出html数据：<%= content%></h2>
<h2>输出html数据：<%- content%></h2>
<h2>条件判断：</h2>
<% if (num > 20){%>
num 大于 20
<%}else{%>
num 小于 20
<%}%>
</body>
</html>
