koa中使用模板引擎

清疚 2022-04-22 16:10 314阅读 0赞

在node中使用模板引擎需要一个中间件koa-views

## 在koa中使用ejs ##

### 安装模块 ###

# 安装koa模板使用中间件
    npm install --save koa-views
    
    # 安装ejs模板引擎
    npm install --save ejs

### 使用模板引擎 ###

demo源码

[https://github.com/ChenShenhai/koa2-note/blob/master/demo/ejs/][https_github.com_ChenShenhai_koa2-note_blob_master_demo_ejs]

文件目录

├── package.json
    ├── index.js
    └── view
        └── index.ejs

./index.js文件

const Koa = require('koa')
    const views = require('koa-views')
    const path = require('path')
    const app = new Koa()
    
    // 加载模板引擎
    app.use(views(path.join(__dirname, './view'), {
      extension: 'ejs'
    }))
    
    app.use( async ( ctx ) => {
      let title = 'hello koa2'
      await ctx.render('index', {
        title,
      })
    })
    
    app.listen(3000)

./view/index.ejs 模板

<!DOCTYPE html>
    <html>
    <head>
        <title><%= title %></title>
    </head>
    <body>
        <h1><%= title %></h1>
        <p>EJS Welcome to <%= title %></p>
    </body>
    </html>

koa-views源码地址：[https://github.com/queckezz/koa-views][https_github.com_queckezz_koa-views]

## 模板引擎 ##

适用于 koa 的模板引擎选择非常多，比如 [jade][]、[ejs][]、[nunjucks][]、[xtemplate][] 等。

是否支持前后端混用  
jade 直接淘汰，相信在前端js领域一般不会选择 jade 来渲染。

nunjucks 也使用的比较少（ejs其实也少），更多人会选择使用 handlebars 。

xtemplate 目前在阿里的系统中前后端混用中已经得到论证，节约了模板前后端转换的时间。

参考：  
[https://chenshenhai.github.io/koa2-note/note/template/add.html][https_chenshenhai.github.io_koa2-note_note_template_add.html]  
[http://book.apebook.org/minghe/koa-action/xtemplate/xtemplate.html][http_book.apebook.org_minghe_koa-action_xtemplate_xtemplate.html]

转载：https://www.jianshu.com/p/be39a99c92ca

[https_github.com_ChenShenhai_koa2-note_blob_master_demo_ejs]: https://github.com/ChenShenhai/koa2-note/blob/master/demo/ejs/
[https_github.com_queckezz_koa-views]: https://github.com/queckezz/koa-views
[jade]: https://www.npmjs.com/package/koa-jade
[ejs]: https://www.npmjs.com/package/koa-ejs
[nunjucks]: https://www.npmjs.com/package/koajs-nunjucks
[xtemplate]: https://github.com/xtemplate/xtemplate
[https_chenshenhai.github.io_koa2-note_note_template_add.html]: https://chenshenhai.github.io/koa2-note/note/template/add.html
[http_book.apebook.org_minghe_koa-action_xtemplate_xtemplate.html]: http://book.apebook.org/minghe/koa-action/xtemplate/xtemplate.html