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. kubernetes资源配置之ReplicaSets

    什么是ReplicaSets? ReplicaSet的目的是维护在任何给定时间运行的稳定的副本Pod集. 因此,它通常用于保证指定数量的相同Pod的可用性 ReplicaSets怎么样工作? Repl ...

  2. linux工具之lsof

      1.lsof  ( list    open   files)   lsof(list open files) 是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通 ...

  3. Java语言基础(11)

    1 构造方法 构造方法是一种特殊的方法,只有在创建对象的时候才被调用,用来执行初始化的操作,比如给属性赋值... 1) 构造方法名字跟类名一致,没有返回值也就没有返回值类型 2) 格式: 类名(参数列 ...

  4. 【icpc2019网络赛南昌站】Yukino With Subinterval

    傻b错误调一天系列 原题: 大意:给你一个数列a,字词两种操作: 1.把c[l]改成r 2.询问在区间[l,r]中,有多少个极大子区间满足子区间里的数全部一样,且在[x,y]范围内 (对于满足条件的区 ...

  5. Liux chmod 给文件夹赋权限

    777 最高权限 给文件夹及子文件夹赋权限 chmod -R 777 * 给单独文件赋权限 chmod -R 777 ./startup.sh

  6. 最简单之安装hive

    一,安装模式介绍 Hive官网上介绍了Hive的3种安装方式,分别对应不同的应用场景. a.内嵌模式(元数据保村在内嵌的derby种,允许一个会话链接,尝试多个会话链接时会报错) b.本地模式(本地安 ...

  7. linux内核 进程调度

    概念: 进程调度决定那个进程投入运行,运行多长时间. 进程调度没有太复杂的原理,最大限度的利用处理器时间的原则是:只要有可执行的程序,那么总会有进程在执行,如果可运行的进程比处理器数目要多,那么注定要 ...

  8. 不使用C库函数（Sprintf）将void* 指针转换为十六进制字符串

    #include <stdio.h> #include <stdint.h> #include <stdlib.h> void hexDump(void *ptr, ...

  9. ssh远程连接centos7故障排除

    导致故障的原因在两个方面 1.网络问题---物理链路就不通可以通过在客户端 telnet目标主机地址,例如:telnet 192.168.1.107 22 千万别忘了端口号!!!,如果通了还连不上则按 ...

  10. js 原生ajax请求

    什么是ajax 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). XMLHttpRequest 用于在后台与服务器交换数据.这意味着可 ...