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 ...
随机推荐
- 铁大树洞与市面上现有APP对比
写在前面 铁大树洞这款APP严格来说并没有可以参照的对象,但如果非要说的话也可以有.这里我们选取百度贴吧进行对比. 百度贴吧 可以看到,百度贴吧的贴吧首页排版要更加好看,且在首页添加了各种分类.也许我 ...
- Spring IOC 启动过程
1. 引言 本篇博文主要介绍 IOC 容器的启动过程,启动过程分为两个步骤,第一个阶段是容器的启动阶段,第二个阶段是 Bean 实例化阶段,这两个阶段各自需要执行的步骤如下图,接下来会一一介绍. 需要 ...
- 【计算机算法设计与分析】——SVM
一.简介 支持向量机(support vector machines)是一种二分类模型,它的目的是寻找一个超平面来对样本进行分割,分割的原则是间隔最大化,最终转化为一个凸二次规划问题来求解.由简至繁的 ...
- 45道Promise面试题
来看看通过阅读本篇文章要点: Promise的几道基础题 Promise结合setTimeout Promise中的then.catch.finally Promise中的all和race async ...
- 没有Qt Quick UI，没有 Qt Quick Project
书上写的是File ‣ New File or Project ‣ Qt Quick Project ‣ Qt Quick UI 但实际上是File ‣ New File or Project ‣ O ...
- gtk.Builder.AddFromFile SIGSEGV.
可能是由于GTK没有初始化的缘故,在程序开头加上gtk.Init(nil)进行初始化 或者参考我这篇博客就不会出错了
- LNK2005 连接错误解决办法 2009-10-30 12:13
nafxcwd.lib(afxmem.obj) : error LNK2005: "void * __cdecl operator new(unsigned int)" (??2@ ...
- 土题大战Vol.0 A. 笨小猴 思维好题
土题大战Vol.0 A. 笨小猴 思维好题 题目描述 驴蛋蛋有 \(2n + 1\) 张 \(4\) 星武器卡片,每张卡片上都有两个数字,第 \(i\) 张卡片上的两个数字分别是 \(A_i\) 与 ...
- 使用BurpSuite、Hydra和medusa爆破相关的服务
一.基本定义 1.爆破=爆破工具(BP/hydra)+字典(用户字典/密码字典). 字典:就是一些用户名或者口令(弱口令/使用社工软件的生成)的集合. 2.BurpSuite 渗透测试神器,使用Jav ...
- Python网络爬虫与信息提取笔记
直接复制粘贴笔记发现有问题 文档下载地址//download.csdn.net/download/hide_on_rush/12266493 掌握定向网络数据爬取和网页解析的基本能力常用的 Pytho ...