前言

大家之前都有使用过浏览器中js模板引擎，其实在Node.js中也可以使用模板引擎，最早使用模板引擎的概念是在服务端新起的。

art-template

art-template是一款高性能的JavaScript 模板引擎，不仅可以在浏览器（前端）使用，同时也可以在Node中使用。

GitHub地址：art-template

文档：官方中文

本章节我们来探讨下Node中使用art-template模板引擎生成一个标准的HTML文档。

主体

  1. art-template原理就是将一个字符串数据按照模板引擎的语法替换掉其中的某些特定格式数据，然后产出我们所需的HTML文档。art-template支持两种语法：标准语法，原始语法，标准语法多以{{}}常见，原始语法多以<% %>常见。对于不清楚art-template语法的同学可以去官方文档看下，这里不做详细叙述。

  2. 安装art-template第三方包

在项目当前目录npm install art-template，默认会安装在项目当前node_modules文件夹下。

  1. 在项目中创建template.html文件，这里用来编写我们的模板html文档。具体代码如下：
<!DOCTYPE html>

<html lang="zh">

<head>

  <meta charset="UTF-8">

  <title>{{Title}}</title>

</head>

<body>

  <h1>{{main}}</h1>

  <p>我的名字是{{name}},我今年{{age}}了，我的爱好有：{{each hobbies}}{{$value}}，{{/each}}</p>

</body>

</html>

这里使用art-template的标准语法，编写的时候一定按照正确的模板语法，否则会导致结果有误。

  1. 项目中创建server.js，用来创建服务器，并且引入art-template包。
let http = require('http')

let fs = require('fs')

let template = require('art-template')

let server = http.createServer()

server.on('request', (req, res) => {

  let url = req.url

  if (url === '/') {

    // 读取template.html中的内容，并且转换成字符串格式

    fs.readFile('./template.html', (error, data) => {

      if (error) {

        return res.end('can not find template.html')

      }

      let dataStr = data.toString()

      let htmlStr = template.render(dataStr, {

        name: 'pubdreamcc',

        Title: '首页',

        main: '个人信息',

        age: 24,

        hobbies: ['写代码', '读书', '篮球']

      })  // template.render()方法编译模板文档并返回渲染结果。

      res.end(htmlStr)

    })

  } else {

    res.end('404 NOT found')

  }

})

// 绑定端口号，开启服务器

server.listen(3000, () => {

  console.log('服务器已经启动，可以访问。。。')

})
  1. 启动服务器后，浏览器访问后，效果如下：

到这里就已经实现了我们起初的效果，应该比较简单吧，哈哈。如果喜欢的话，希望小伙伴们给个star哟，你们的点赞是我持续更新的动力。

说明

本仓库是自己Node.js学习过程的真实记录，以后会每天更新一些新的知识点，希望可以对想要学Node.js的同学有一些帮助，欢迎star，你们的点赞是我更新的持久动力。同时如果你觉得本仓库中的一些知识点有错误也可以issue我，方便后期我订正！

本仓库同时在博客园和掘金更新，欢迎写博客的朋友一起学习交流。

博客园

找我

掘金

找我

GitHub

找我

Node学习之（第三章：art-template模板引擎的使用）的更多相关文章

  1. The Road to learn React书籍学习笔记(第三章)

    The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...

  2. python学习心得第三章

    python学习心得第三章 1.三元运算 变量=值1 if 条件 else 值2 由图如果条件成立则赋值1给变量,如果条件不成立则赋值2给变量. 2.数据类型 集合:set() class set(o ...

  3. 《DOM Scripting》学习笔记-——第三章 DOM

    <Dom Scripting>学习笔记 第三章 DOM 本章内容: 1.节点的概念. 2.四个DOM方法:getElementById, getElementsByTagName, get ...

  4. [HeadFrist-HTMLCSS学习笔记]第三章构建模块：Web页面建设

    [HeadFrist-HTMLCSS学习笔记]第三章构建模块:Web页面建设 敲黑板!! <q>元素添加短引用,<blockquote>添加长引用 在段落里添加引用就使用< ...

  5. JVM学习笔记-第三章-垃圾收集器与内存分配策略

    JVM学习笔记-第三章-垃圾收集器与内存分配策略 tips:对于3.4之前的章节可见博客:https://blog.csdn.net/sanhewuyang/article/details/95380 ...

  6. python学习笔记——第三章 串

    第三章 字符串学习 1.字符串不灵活, 它不能被分割符值 >>> format = "hello, %s. %s enough for ya?" >> ...

  7. Spring 学习指南 第三章 bean的配置 (未完结)

    第三章 bean 的配置 ​ 在本章中,我们将介绍以下内容: bean 定义的继承: 如何解决 bean 类的构造函数的参数: 如何配置原始类型 (如 int .float 等) .集合类型(如 ja ...

  8. Windows程序设计(第五版)学习：第三章 窗口与消息

        第三章 窗口与消息 1,windows窗口过程:应用程序所创建的每一个窗口都有一个与之关联的窗口过程,用于处理传递给窗口的消息. 2,窗口依据窗口类来创建.窗口类标识了用于处理传递给窗口的消息 ...

  9. 好记心不如烂笔头之JQuery学习，第三章

    第三章中主要讲了几个对DOM进行操作的方法. 归纳如下: 属性的获取和设置: //属性的获取 $("li").attr("title"); //属性的设置 $( ...

随机推荐

  1. 单细胞ENS发育数据库

    iSyTE 2.0: a database for expression-based gene discovery in the eye - 眼睛发育 StemMapper: a curated ge ...

  2. 009-MySQL循环while、repeat、loop使用

    一.循环使用 mysql常见的三种循环方式:while.repeat和loop循环.还有一种goto,不推荐使用. 前提1.创建基本表结构 # 创建表结构 drop table if exists ` ...

  3. ES6新增函数总结和range函数实现

    Array.from  类数组,Set,字符串转为数组 Array.of   不定参数转为数组 Array.prototype.fill(value,[start],[end]) 对数组在指定范围填充 ...

  4. (转载)CNN 模型所需的计算力（FLOPs）和参数（parameters）数量计算

    FLOPS:注意全大写,是floating point operations per second的缩写,意指每秒浮点运算次数,理解为计算速度.是一个衡量硬件性能的指标. FLOPs:注意s小写,是f ...

  5. 【转】SOA架构和微服务架构的区别

    SOA架构和微服务架构的区别 https://blog.csdn.net/zpoison/article/details/80729052

  6. Linux下 导出postgrelSql 数据库

    登陆postgrel su - postgres 进入postgrelsql 安装目录下的bin目录 cd/usr/pgsql-11/bin 执行导出命令 ./pg_dump -U username ...

  7. Excel四象限散点图的制作方法

    Excel中四象限散点图带文本数据标签,可以在散点图的基础上进行一些设置即可得到,无需第三方插件或者宏代码,非常方便,以office2013为例,效果如下: 步骤: 1.准备好数据源,选中两列数据源( ...

  8. IDEA 2018 搭建 Spring MVC helloworld

    转自https://segmentfault.com/a/1190000017248622 网上看了不少idea搭建SpringMVC Helloworld的例子,但是一个个试下来都没有成功.我把他们 ...

  9. java.sql.SQLException: Zero date value prohibited

    今天使用mybatis出现了异常 java.sql.SQLException: Zero date value prohibited 查了下原因 mysql文档上写着 Datetimes with a ...

  10. Metricbeat 轻量型指标采集器

    一.介绍 用于从系统和服务收集指标.从 CPU 到内存,从 Redis 到 Nginx,Metricbeat 能够以一种轻量型的方式,输送各种系统和服务统计数据. 1.系统级监控,更简洁(轻量型指标采 ...