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. vue实现吸顶

    data(){ return{ list:[], swiperOption:"", xiding : "", // 轮播高度 SwiperHeight:'' } ...

  2. AL11新建目录、删除目录

    AL11可以进入SAP应用服务器中. 项目上需要和外围系统做接口 写文件到文件服务器上,让外围系统过来读取,但是为了减少SAP应用服务器的负担,需要一台独立的文件服务器共享目录到SAP应用服务器, 也 ...

  3. Delphi MSComm控件属性

  4. 采用kubeadm部署工具，部署kubernetes1.16.3

    安装kubenetes有5种部署工具,分别是kubeadm.kops.KRIB.Kubespray.本实验采用的是kubeadm部署工具.如有想了解其他部署工具,请点击这里 环境说明 角色/主机名 系 ...

  5. linux wireless 基础知识 MAC80211 CFG80211

    转:http://blog.csdn.net/liuxd3000/article/details/23761663 1. 基本概念   • cfg80211:  用于对无线设备进行配置管理.与Full ...

  6. 【转】Qt 资源图片删除后，错误 needed by `debug/qrc_image.cpp'. Stop. 的终极解决办法

    @2019-06-13 [小记] Qt项目做完了把资源文件夹下已经不用的图片文件删掉,运行时报错(编译不报错):No rule to make target `images/图片文件名', neede ...

  7. Linux 之Ubuntu在VM中安装(桌面版)

    1.安装系统 https://jingyan.baidu.com/article/14bd256e0ca52ebb6d26129c.html 2.安装VM Tools https://jingyan. ...

  8. 内嵌tomcat快速入门

    1.依赖 <!--Java语言操作tomcat --> <dependency> <groupId>org.apache.tomcat.embed</grou ...

  9. dedecms织梦后台发布文章提示“标题不能为空”的解决办法

    V5.7登录后台后,发布英文标题没问题,发布中文会提示“标题不能为空”. 原因:htmlspecialchars在php5.4默认为utf8编码,gbk编码字符串经 htmlspecialchars ...

  10. 微服务框架SpringCloud与Dubbo

    #v1.0.0# 1.背景 Dubbo,是阿里巴巴服务化治理的核心框架,并被广泛应用于阿里巴巴集团的各成员站点.阿里巴巴近几年对开源社区的贡献不论在国内还是国外都是引人注目的,比如:JStorm捐赠给 ...