前言

大家之前都有使用过浏览器中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. Deep Reinforcement Learning with Iterative Shift for Visual Tracking

    Deep Reinforcement Learning with Iterative Shift for Visual Tracking 2019-07-30 14:55:31 Paper: http ...

  2. win7下查看进程端口

    一. 查看所有进程占用的端口 在开始-运行-cmd,输入:netstat –ano 可以查看所有进程 二.查看占用指定端口的程序 当你在用tomcat发布程序时,经常会遇到端口被占用的情况,我们想知道 ...

  3. aardio 文档

    aardio 文档 根据官方帮助手册制作了一份文档,添加了一些特性. 支持手机阅读 不用电脑也可以学习 aau 了,不受屏幕大小限制,你的小清新还是你的小清新~ 简单的搜索功能 快捷复制示例代码 基于 ...

  4. IEnumerable是什么

    首先怎么认识一个对象 IE+number+able  IE数字 可能 从名字上看不出什么玩意,以至于很久都没人真正认识这个接口 先看官方的解释 IEnumerable Interface Expose ...

  5. Python - Django - form 组件常用的字段和字段参数

    邮箱: views.py: from django import forms from django.forms import widgets class RegForm(forms.Form): e ...

  6. sql数据库查询相关操作，SQL的应用——SQL多表连查、子查询、多行子查询

    ? 1 **SQL多表连查** ? 1 2 3 4 5 6 7 8 --查询员工和部门信息 select * from emp e,dept d where e.deptno=d.deptno --查 ...

  7. Echartjs axis.getAxesOnZeroOf is not a function

    该问题已经解决,下面是解决思路! 问题描述: axis.getAxesOnZeroOf is not a function 使用echart 出现报这句错误,请求解决方案! 问题原因: 我给坐标设置了 ...

  8. 【Linux】Linux下进程间的通信方式

    本文内容: 1.进程通信的目的 2.介绍Linux下进程间的4种通信方式:管道,消息队列,共享内存,信号量 ps:套接字也可以用于进程间的通信,不过是不同物理机器上的进程通信,本章讨论是是同一台物理机 ...

  9. 【转帖】漏洞数量242:15，英特尔和AMD CPU谁更安全？

    漏洞数量242:15,英特尔和AMD CPU谁更安全? http://www.eetop.cn/cpu_soc/6946340.html 越来越多的用户开始怀疑哪种处理器可以最好地保护他们的计算机,数 ...

  10. poj 1095 题解（卡特兰数+递归

    题目 题意:给出一个二叉树的编号,问形态. 编号依据 1:如果二叉树为空,则编号为0: 2:如果二叉树只有一个节点,则编号为1: 3:所有含有m个节点的二叉树的编号小于所有含有m+1个节点的二叉树的编 ...