npm 在终端命令下执行装包，就会在该目录下产生一个node_modules包

art-template地址：https://aui.github.io/art-template/zh-cn/docs/

安装  npm install art-template --save

1.单纯的在node环境某个js文件中引入'art-template文件

调用 template.render(source, data, options)方法 source string类型

const template = require('art-template')

// template.render(source, data, options);

let htmlStr = `

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  <p>{{msg}}</p>

  <div>{{each list}} {{$index}}---{{$value}} {{/each}}</div>

  <div>{{each user}} {{$index}}---{{$value}} {{/each}}</div>

    <ul>

        {{each list}} <li>{{$value}}</li> {{/each}}

    </ul>

</body>

</html>

`

const data = {

  msg: 'aaa',

  list: [10, 20, 30],

  user: {

    name: 'zs',

    age: 10,

    gender: 'male'

  }

}

let res = template.render(htmlStr, data)

console.log(res);

以下是输出内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>aaa</p>
  <div> 0---10  1---20  2---30 </div>
  <div> name---zs  age---10  gender---male </div>
    <ul>
         <li>10</li>  <li>20</li>  <li>30</li>
    </ul>
</body>
</html>

可以看出输出的渲染数据后的html字符串，如果后台将这个html字符串作为响应内容response发给前端，前端浏览器拿到后会自动解析出里面的html标签，就是常见的惠网页内容。这个就是后端渲染的最简单的原理。

2.把网页内容放在html文件中，在总模块中引入fs模块，读取html文件。抽离出HTML文件

3.结合网络传输，给浏览器发送真实的网页内容

5 art-template的更多相关文章

  1. art template前端模板引擎

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

  2. art.template 循环里面分组。

    后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...

  3. 利用art.template模仿VUE 一次渲染多个模版

    TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...

  4. 利用art.template模仿VUE

    首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...

  5. js 模板引擎 -Art Template

    一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  6. 一分钟上手artTemplate

    一分钟上手artTemplate artTemplate是腾讯开源的前端模版引擎.之前做hue二次开发,只接触过用python写的mako模版引擎,所以之前对前端模版引擎了解不是很多. 这次因为pm叫 ...

  7. Express使用art-template模板引擎

    第一步:安装 npm install --save art-template npm install --save express-art-template 第二步:指定.html使用的解析引擎(官方 ...

  8. vscode开发中绝对让你惊艳的插件！！！(个人在用)

    识别模版引擎 1.Apache Velocity :识别Velocity(vm) 2.Art Template Helper:识别artTemplate 点击路径跳转 1.Laravel goto v ...

  9. ES6/ES2015的一些特性的简单使

    1.一些常用的ES6的特性: let, const, class, extends, super, arrow functions, template string, destructuring, d ...

  10. artTemplate子模板include

    art.Template:https://github.com/aui/art-template 下面来实现利用模版来实现递归调用生成tree <script type="text/h ...

随机推荐

  1. Linux学习笔记之如何把ubuntu下的c文件共享到windows下文件夹

    1.首先可在桌面新建文件夹,或者自己任意路径文件夹都可以, 2.在Linux下点击虚拟机 点击设置 点击选项,选择共享文件夹,点击总是启用,然后添加文件夹,添加你windows下想保存的文件夹   可 ...

  2. Javascript注意点

    Javascript注意点 在img标签中的src如果为相对路径, 但是在js获取的时候会转为全路径 候选框中, 在执行onclick之前, 会由于html的特征先设置checked属性 为a标签添加 ...

  3. 基于Logistic回归和sigmoid函数的分类算法推导

    此部分内容是对机器学习实战一书的第五章的数学推导,主要是对5.2节代码实现中,有一部分省去了相关的公式推导,这里进行了推导,后续会将算法进行java实现.此部分同样因为公式较多,采用手写推导,拍照记录 ...

  4. XCTF-WEB-新手练习区(1-4)笔记

    靶场地址:https://adworld.xctf.org.cn/ 1:view_source X老师让小宁同学查看一个网页的源代码,但小宁同学发现鼠标右键好像不管用了. 原理:使用浏览器F12或者B ...

  5. C# ASP JS引用路径不正确导致的错误

    假设JS包放在根目录下的Scripts文件夹下 当前页的路径在另一个文件夹下,那么他引用JS应该:<script src="../Scripts/jquery-1.4.1.min.js ...

  6. C#算法设计查找篇之03-插值查找

    插值查找(Interpolation Search) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/701 访问. 插值 ...

  7. python新添加excel数据

    相关库 import os import xlwt from xlrd import open_workbook from xlutils.copy import copy 1.判断是否存在xls文件 ...

  8. 为什么要写博客（jekyll迁移）

    layout: post title: '为什么要写博客' date: 2019-08-12 author: xiepl1997 tags: 随笔 曾经我写过不少博客,为什么没有坚持下去?不知道. 这 ...

  9. 装机备忘录：VS Code 常用插件

    VS Code 常用插件推荐 1.基本的代码补全 2.git 扩展工具,可以看到代码的每一行 是谁修改?什么时候修改? 修改的版本号? 修改的注释? 非常好的一个工具 3.括号颜色改变工具,可以改变括 ...

  10. 【CF1174D】 Ehab and the Expected XOR Problem - 构造

    题面 Given two integers \(n\) and \(x\), construct an array that satisfies the following conditions: · ...