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 ...
随机推荐
- 深度学习模型调优方法(Deep Learning学习记录)
深度学习模型的调优,首先需要对各方面进行评估,主要包括定义函数.模型在训练集和测试集拟合效果.交叉验证.激活函数和优化算法的选择等. 那如何对我们自己的模型进行判断呢?——通过模型训练跑代码,我们可以 ...
- Docker 快速搭建 LDAP
Docker 快速搭建 LDAP 步骤 # 拉取镜像 docker pull osixia/openldap:1.3.0 # 创建并进入映射目录 mkdir -p /usr/local/ldap &a ...
- Fixing the train-test resolution discrepancy
- java 多态一
一 多态的概述 现实事物经常会体现出多种形态,如学生,学生是人的一种,则一个具体的同学张三既是学 生也是人,即出现两种形态. Java作为面向对象的语言,同样可以描述一个事物的多种形态.如Studen ...
- Flutter 容器(7) - DecoratedBox
DecoratedBox: 装饰容器,在其子widget绘制前(或后)绘制一个装饰Decoration(如背景.边框.渐变等) import 'package:flutter/material.dar ...
- NeuralCoref: python的共指消解工具教程
转载地址 https://blog.csdn.net/blmoistawinde/article/details/81782971 共指消解 首先简要地说说共指消解是什么,有什么用处.假设机器正在阅读 ...
- 二叉搜索树 [四边形不等式优化区间dp]
二叉搜索树 [四边形不等式优化区间dp] 题目描述 有 \(n\) 个结点,第 \(i\) 个结点的权值为 \(i\) . 你需要对它们进行一些操作并维护一些信息,因此,你需要对它们建立一棵二叉搜索树 ...
- Reinforcement Learning Using a Continuous Time Actor-Critic Framework with Spiking Neurons
郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! Abstract 动物会重复奖励的行为,但基于奖励的学习的生理基础仅得到了部分阐明.一方面,实验证据表明神经调节剂多巴胺携带有关奖励的信息 ...
- IDEA报错:Class JavaLaunchHelper is implemented in both
在IDEA运行一个程序时报错: Class JavaLaunchHelper is implemented in both 这个错误是Mac下Java 的一个bug,意思是这个JavaLaunchHe ...
- ARDUBOY游戏开发之路(一) 初识ARDUBOY
一.什么是ARDUBOY Arduboy是一个仅有信用卡大小的创造.分享游戏的开放平台.爱好者可以免费从Arduboy中选择一款经典的游戏,然后将游戏在目前最流行的arduino平台上编程.Ardub ...