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. 深度学习模型调优方法(Deep Learning学习记录)

    深度学习模型的调优,首先需要对各方面进行评估,主要包括定义函数.模型在训练集和测试集拟合效果.交叉验证.激活函数和优化算法的选择等. 那如何对我们自己的模型进行判断呢?——通过模型训练跑代码,我们可以 ...

  2. Docker 快速搭建 LDAP

    Docker 快速搭建 LDAP 步骤 # 拉取镜像 docker pull osixia/openldap:1.3.0 # 创建并进入映射目录 mkdir -p /usr/local/ldap &a ...

  3. Fixing the train-test resolution discrepancy

  4. java 多态一

    一 多态的概述 现实事物经常会体现出多种形态,如学生,学生是人的一种,则一个具体的同学张三既是学 生也是人,即出现两种形态. Java作为面向对象的语言,同样可以描述一个事物的多种形态.如Studen ...

  5. Flutter 容器(7) - DecoratedBox

    DecoratedBox: 装饰容器,在其子widget绘制前(或后)绘制一个装饰Decoration(如背景.边框.渐变等) import 'package:flutter/material.dar ...

  6. NeuralCoref: python的共指消解工具教程

    转载地址 https://blog.csdn.net/blmoistawinde/article/details/81782971 共指消解 首先简要地说说共指消解是什么,有什么用处.假设机器正在阅读 ...

  7. 二叉搜索树 [四边形不等式优化区间dp]

    二叉搜索树 [四边形不等式优化区间dp] 题目描述 有 \(n\) 个结点,第 \(i\) 个结点的权值为 \(i\) . 你需要对它们进行一些操作并维护一些信息,因此,你需要对它们建立一棵二叉搜索树 ...

  8. Reinforcement Learning Using a Continuous Time Actor-Critic Framework with Spiking Neurons

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! Abstract 动物会重复奖励的行为,但基于奖励的学习的生理基础仅得到了部分阐明.一方面,实验证据表明神经调节剂多巴胺携带有关奖励的信息 ...

  9. IDEA报错:Class JavaLaunchHelper is implemented in both

    在IDEA运行一个程序时报错: Class JavaLaunchHelper is implemented in both 这个错误是Mac下Java 的一个bug,意思是这个JavaLaunchHe ...

  10. ARDUBOY游戏开发之路(一) 初识ARDUBOY

    一.什么是ARDUBOY Arduboy是一个仅有信用卡大小的创造.分享游戏的开放平台.爱好者可以免费从Arduboy中选择一款经典的游戏,然后将游戏在目前最流行的arduino平台上编程.Ardub ...