5 art-template
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的更多相关文章
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
- art.template 循环里面分组。
后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...
- 利用art.template模仿VUE 一次渲染多个模版
TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...
- 利用art.template模仿VUE
首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...
- js 模板引擎 -Art Template
一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- 一分钟上手artTemplate
一分钟上手artTemplate artTemplate是腾讯开源的前端模版引擎.之前做hue二次开发,只接触过用python写的mako模版引擎,所以之前对前端模版引擎了解不是很多. 这次因为pm叫 ...
- Express使用art-template模板引擎
第一步:安装 npm install --save art-template npm install --save express-art-template 第二步:指定.html使用的解析引擎(官方 ...
- vscode开发中绝对让你惊艳的插件！！！(个人在用)
识别模版引擎 1.Apache Velocity :识别Velocity(vm) 2.Art Template Helper:识别artTemplate 点击路径跳转 1.Laravel goto v ...
- ES6/ES2015的一些特性的简单使
1.一些常用的ES6的特性: let, const, class, extends, super, arrow functions, template string, destructuring, d ...
- artTemplate子模板include
art.Template:https://github.com/aui/art-template 下面来实现利用模版来实现递归调用生成tree <script type="text/h ...
随机推荐
- “随手记”开发记录day13
今天继续对我们的项目进行更改. 今天我们需要做的是增加“修改”功能.对于已经添加的记账记录,长按可以进行修改和删除的操作. 但是今天并没有完成……
- Maven骨架生成项目速度慢问题解决办法
在创建maven project时(使用了archetype),速度慢的令人不敢相信,从Idea的控制台可以看到信息停留在: [INFO] <<< maven-archetype-p ...
- 6.深入k8s：守护进程DaemonSet
转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 最近也一直在加班,处理项目中的事情,发现问题越多越是感觉自己的能力不足,希望自己能多学点 ...
- C++实现二叉树的链接存储结构（先根、中根和后根遍历）
验证二叉树的链接存储结构及其上的基本操作. [实验要求]: 1. 从文件创建一棵二叉树,并对其初始化: 2. 先根.中根.后根遍历二叉树: 3. 在二叉树中搜索给定结点的父结点: 4. 搜索二叉树中符 ...
- C#算法设计查找篇之02-二分查找
二分查找(Binary Search) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/699 访问. 二分查找也称折半查 ...
- 手把手教你NLTK WordNet使用方法
最近看了WordNet,0基础入门,简单记下笔记.因为本身不是学自然语言处理的,好多名词不是特别清楚,现有的博客读的晕乎乎,所以重新写了这个,理清思路.除了行文中提到的链接,其他几个有用的参考链接如下 ...
- 前端实现图片上传预览并转换base64
前端实现文件的上传,就必须用到input标签,type属性为file. 在vue项目中通ref操作dom.input有一个属性accept,是必须要搭配type=file使用. multiple可以上 ...
- Jmeter 常用函数（1）- 详解 __Random
如果你想查看更多 Jmeter 常用函数可以在这篇文章找找哦 https://www.cnblogs.com/poloyy/p/13291704.html 作用 产生一个随机数 语法格式 ${__Ra ...
- paramiko 模块 ---- python2.7
模拟远程执行命令: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import paramiko #设置日志记录 paramiko ...
- JDK14-ZGC调研初探
原创声明:作者:Arnold.zhao 博客园地址:https://www.cnblogs.com/zh94 背景 公司ElasticSearch准备进行升级,而ElasticSearch7以上则是已 ...