koa第六章：视图模板渲染中间件koa-views

koa-views 是一个视图管理模块，它的灵活度很高，支持很多的模版引擎（如： ejs , nunjucks ，更多请看这里），这里我们给它配置的引擎是 ejs 。

安装

npm install --save koa-views
npm install --save egg.js

用例

app.js

const Koa = require(‘koa’);
const Router = require(‘koa-router’);
const mysql = require(‘mysql2/promise’);
const views = require(‘koa-views’);

const app = new Koa();
const router = new Router();
const render = views(__dirname + ‘/views’, {extension: ‘ejs’}); // 配置视图

app.context.appname = ‘koa2’;

router.get(‘/’, async (ctx, next) => {
const [rows, fields] = await ctx.connection.query(‘SELECT * FROM `product_category` WHERE `parent_id` = ?’, [0]);
// render 渲染方法，这里加载到 views/index.ejs 文件，第2参数是传参到模版
await ctx.render(
‘index’,
{
title: `${ctx.appname} – ${ctx.username}`,
arr: rows
}
);
});

app.use(async (ctx, next) => {
const connection = await mysql.createConnection({ host:’localhost’, user:’root’, password:’root’, database:’ebook’, charset:’utf8mb4′ });
ctx.connection = connection;
ctx.username = ‘许善祥’;
await next();
})
.use(render)
.use(router.routes())
.use(router.allowedMethods())
.listen(‘3000’,(err)=>{
if(err){
console.log(‘服仵器启动失败’);
}else{
console.log(‘服务器启动成功’);
}
});

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><%=title%></title>
</head>
<body>
    <% if (arr) {%>
    <% arr.forEach((item) => { %>
        <%=item.category_name%><br>
    <%})%>
    <%}%>
</body>
</html>

在浏览器里查看渲染后的html页面源代码：

<!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>koa2 - 许善祥</title>
</head>
<body>
        变频器<br>
        伺服与运动控制<br>
        行业专机<br>
</body>
</html>

可见 ejs 是一个非常简洁的 JavaScript 模版引擎，使用起来也很简单。