1.项目目录

2.app.js

/**

 * http://aui.github.io/art-template/koa/

 * 1、npm install --save art-template

 *    npm install --save koa-art-template

 * 2、const render = require('koa-art-template');

 * 3、

 * render(app, {

 *   root: path.join(__dirname, 'view'), // 视图的位置

 *   extname: '.art', // 后缀名

 *   debug: process.env.NODE_ENV !== 'production' // 是否开启调试模式

 * })

 * 4、await ctx.render('user')

 */

// 引入模块

const Koa = require('koa');

const router = require('koa-router')(); /*引入是实例化路由 推荐*/

const render = require('koa-art-template');

const path = require('path');

// 实例化

let app = new Koa();

// 配置 koa-art-template 模板引擎

render(app, {

  root: path.join(__dirname, 'views'), // 视图的位置

  extname: '.html', // 后缀名

  debug: process.env.NODE_ENV !== 'production' // 是否开启调试模式

})

router.get('/', async (ctx) => {

  // ctx.body = '首页';

  let list = {

    name: '张三',

    h: '<h2>这是一个h2</h2>',

    num: 20,

    data: ['11111', '22222', '33333']

  }

  await ctx.render('index', {

    list: list

  })

})

router.get('/news', async (ctx) => {

  // ctx.body = '新闻';

  let app = {

    name: '张三',

    h: '<h2>这是一个h2</h2>',

    num: 20,

    data: ['11111', '22222', '33333']

  }

  await ctx.render('news', {

    list: app

  });

})

app.use(router.routes());

app.use(router.allowedMethods());

app.listen(3000);

3.原始用法

views/index.html

<!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>

  <link rel="stylesheet" href="css/basic.css" />

</head>

<body>

  <h2 class="title">这是一个koa-art-template</h2>

  <h2>绑定数据</h2>

  <%=list.name%>

    <br />

    <%= 1 + 2 %>

      <br />

      <hr />

      <br />

      <h2>绑定html数据</h2>

      <%=list.h%>

        <%-list.h%>

          <h2>条件</h2>

          <%if(num>10){%>

            大于10

            <%}else{%>

              小于10

              <%}%>

                <br />

                <hr />

                <br />

                <h2>循环数据</h2>

                <ul>

                  <%for(var i=0;i<list.data.length;i++){%>

                    <li>

                      <%=list.data[i]%>

                    </li>

                    <%}%>

                </ul>

                <br />

                <hr />

                <br />

                <% include('./public/footer.html')%>

</body>

</html>

4.art-template 的用法 -- 类似于 angular 语法

views/news.html

<!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>

  <link rel="stylesheet" href="css/basic.css" />

</head>

<body>

  <h2 class="title">这是一个koa-art-template</h2>

  <h2>绑定数据</h2>

  {{list.name}}

  <br />

  <hr />

  <br />

  <h2>绑定html数据</h2>

  {{@list.h}}

  <h2>条件</h2>

  {{if num>20}} <span>大于20</span> {{else}} <span>小于20</span> {{/if}}

  <br />

  <hr />

  <br />

  <h2>循环数据</h2>

  <ul>

    {{each list.data}}

    <li>{{$index}} --- {{$value}}</li>

    {{/each}}

  </ul>

  <br />

  <hr />

  <br /> {{include './public/footer.html'}}

</body>

</html>

views/public/footer.html

<h1>这是一个底部</h1>

5.效果图

koa 基础（十三）koa-art-template 模板引擎的使用的更多相关文章

  1. koa 基础（九） ejs 模板引擎的使用

    1.app.js /** * ejs 模板引擎的使用: * 1.npm install koa-views --save * 2.npm install ejs --save * 3.var view ...

  2. Django基础，Day10 - template 模板引擎与路径设置

    作为一个Web框架,Django需要一个方便的方式来生成动态的HTML.最常见的方法依赖于模板.模板包含所需的HTML输出的静态部分以及一些特殊的语法描述如何插入动态内容. Django框架后端默认支 ...

  3. 前端知识点回顾——koa和模板引擎

    koa 基于Node.js的web框架,koa1只兼容ES5,koa2兼容ES6及以后. const Koa = requier("koa"); const koa = new K ...

  4. koa art-template模板引擎的使用

    art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...

  5. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  6. 3、KOA模板引擎+访问静态资料中间件

    一.Koa模板引擎初识1.安装中间件 : npm i --save koa-views2.安装ejs模板引擎 :npm i --save ejs3.编写模板:<%= title %> 是调 ...

  7. koa 基础（二十六）数据库 与 art-template 模板 联动 --- 编辑数据、删除数据

    1.通过 ObjectID 获取 _id 根目录/module/db.js /** * DB库 */ var MongoDB = require('mongodb'); var MongoClient ...

  8. koa 基础（二十五）数据库 与 art-template 模板 联动 --- 新增数据

    1.视图层 根目录/views/index.html <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. koa 基础（二十三）封装 DB 库 --- 应用

    1.根目录/module/config.js /** * 配置文件 */ var app = { dbUrl: 'mongodb://127.0.0.1:27017/?gssapiServiceNam ...

随机推荐

  1. es6函数扩展（+ ...扩展运算符）

    1.参数默认值 function foo(param = 'nihao'){ console.log(param); } foo('hello kitty'); 2.参数解构赋值 function f ...

  2. Go语言并发机制

    Go语言中的并发 使用goroutine编程 使用 go 关键字用来创建 goroutine .将go声明放到一个需调用的函数之前,在相同地址空间调用运行这个函数,这样该函数执行时便会作为一个独立的并 ...

  3. golang实现RSA加密解密

    非对称加密示意图: 在此可以看到,非对称加密是通过两个密钥(公钥-私钥)来实现对数据的加密和解密的.公钥用于加密,私钥用于解密. RSA公钥和私钥生成: package main import ( & ...

  4. 并发编程J.U.C之AQS剖析

    一.j.u.c简介 在说主题AQS之前,我们有必要先来说一下J.U.C 顾名思义J.U.C就是java.util.concurrent,java并发工具包.由我们的并发大师老爷子Doug Lea亲自操 ...

  5. 基于UDS的BootLoader

    bootloader程序架构略有简化的bootloader图 这张图和恒润教程中的BootLoader流程大体是一致的. 疑问点 Q:图中的烧写顺序是34-36-34-36-34-36-37,但另一些 ...

  6. Android异常与性能优化相关面试问题-内存管理面试问题详解

    内存管理机制概述: 分配机制:操作系统会为每一个进程分配一个合理的内存大小,从而保证每一个进程能够正常的运行,不至于内存不够使用,或者某个进程占用过多的内存. 回收机制:在系统内存不足的时候,系统有一 ...

  7. LIBUSB_TRANSFER_ERROR

    首先, 我的设备是一个KNX无线接受模块, 利用UART与主机相连, 看到的设备就是ttyUSBx 利用libusb写了一个程序, 调用同步I/O 的API, 即libusb_bulk_transfe ...

  8. openGL中的gl,glu,glut

    OpenGL函数库相关的API有核心库(gl).实用库(glu).辅助库(aux).实用工具库(glut).窗口库(glx.agl.wgl)和扩展函数库等.gl是核心,glu是对gl的部分封装.glx ...

  9. 关于Spring MVC写的不错的几篇博客

    关于Spring MVC写的不错的几篇博客 https://my.oschina.net/kolbe/blog/509810 https://www.cnblogs.com/sunniest/p/45 ...

  10. innerHTML和innerText的使用和区别

    document对象中有innerHTML.innerText这两个属性,都是获取document对象文本内容,但使用起来还是有区别的: 1) innerHTML设置或获取标签所包含的HTML+文本信 ...