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. go语言入门（4）函数

    1,函数的定义格式 函数构成代码执行的逻辑结构.在Go语言中,函数的基本组成为:关键字func.函数名.参数列表.返回值.函数体和返回语句. Go 语言函数定义格式如下 func FuncName(/ ...

  2. 第三方库-正则re

    Python正则表达式里的单行re.S和多行re.M模式 Python 的re模块内置函数几乎都有一个flags参数,以位运算的方式将多个标志位相加.其中有两个模式:单行(re.DOTALL, 或者r ...

  3. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  4. MariaDB基本命令

    --查看当前日期select current_date();--查看当前时间select current_time();--查看当前日期.时间select now();--查看当前用户select u ...

  5. Python3-Set

    # Set(集合) # 集合(set)是一个无序不重复元素的序列. # 基本功能是进行成员关系测试和删除重复元素. # 可以使用大括号 { } 或者 set() 函数创建集合,注意:创建一个空集合必须 ...

  6. Codeforces 871C 872E Points, Lines and Ready-made Titles

    题 OvO http://codeforces.com/contest/871/problem/C ( Codeforces Round #440 (Div. 1, based on Technocu ...

  7. javaScript高级3笔记2

    DOM0级事件 <img src = "../..."  onclick = "function()" />  // 处理事件 elment.onc ...

  8. poj 2431 Expedition 贪心+优先队列 很好很好的一道题！！！

    Expedition Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10025   Accepted: 2918 Descr ...

  9. poj 2376 Cleaning Shifts 贪心 区间问题

    <pre name="code" class="html"> Cleaning Shifts Time Limit: 1000MS   Memory ...

  10. bzoj3307 雨天的尾巴题解及改题过程（线段树合并+lca+树上差分）

    题目描述 N个点,形成一个树状结构.有M次发放,每次选择两个点x,y对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.完成所有发放后,每个点存放最多的是哪种物品. 输入格式 第一行数字N,M接下 ...