07 Koa2 使用koa-views中间件使用模板引擎,koa2 ejs, ejs, koa2 handlebars,handlebars

2684 阅读 0 评论 0 点赞

一、Koa2 使用 EJS 模板引擎

1、安装Koa模板中间件模块，及EJS模板引擎模块

安装koa模板使用中间件：npm install koa-views --save

安装ejs模板引擎：npm install ejs --save

2、新建一个目录用来存放模板文件，通常是一些html文件，目录通常名称为 views

3、模板文件：login.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%=title%></title>
</head>
<body></body>
</html>

4、代码：

const Koa = require('koa'), router = require('koa-router')(), static = require('koa-static'), path = require('path'),
    session = require('koa-session'), views = require('koa-views'), app = new Koa();

/** 配置并加载模板引擎中间件 */
//如果这样配置，则需要将后缀改为【ejs】
// app.use(views(path.join(__dirname, './views'), {extension: 'ejs'}));
//按以下配置，则不需要将后缀改为【ejs】，使用html即可
app.use(views('views', {map: {html: 'ejs'}}));

router.get('/', async function (ctx) {
    let title = '学生管理系统登录页面';
    await ctx.render('login', {title});
});

//启动路由
app.use(router.routes()).use(router.allowedMethods()).listen(8080, () => { console.log('服务已启动'); });

二、Koa2 使用 Handlebars 模板引擎

1、安装Koa模板中间件模块，及handlebars模板引擎模块

安装koa模板使用中间件：npm install koa-views --save

安装handlebars模板引擎：npm install handlebars --save

2、新建一个目录用来存放模板文件，通常是一些html文件，目录通常名称为 views

3、模板文件：login.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
</head>
<body></body>
</html>

4、代码：

const Koa = require('koa'), router = require('koa-router')(), static = require('koa-static'), path = require('path'),
    session = require('koa-session'), views = require('koa-views'), app = new Koa();
/**
 * 配置并加载模板引擎中间件
 */
app.use(views(path.join(__dirname, 'views'), {
    map: {html: 'handlebars'},
    options: {
        helpers: {
            uppercase: (str) => str.toUpperCase()
        },
        partials: {
            header: 'template/header',//引用template下的header，使用partials模块化系统页面 
            account: 'template/account',
            comment: 'template/comment',
            footer: 'template/footer'
        },
        cache: true //是否缓存模板字符串，建议开发阶段设置为false，或者不用设置
    }
}));

router.get('/', async function (ctx) {
    let title = '学生管理系统登录页面';
    await ctx.render('login', {title});
});

//启动路由
app.use(router.routes()).use(router.allowedMethods()).listen(8080, () => {
    console.log('服务已启动');
});

其中配置引擎中间件那块可以简单写成：

app.use(views('views', {
    map: {html: 'handlebars'}
}));