前言

大家之前都有使用过浏览器中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. IOC注解详解

    @Component 修改一个类,将这个类交给Spring管理 相当于在配置文件当中配置<bean id="" class=""> @Compone ...

  2. 视频色彩空间RGB、YUV、YCbCr

    RGB.YUV和YCbCr都是人为规定的彩色模型或颜色空间(有时也叫彩色系统或彩色空间).它的用途是在某些标准下用通常可接受的方式对彩色加以描述.本质上,彩色模型是坐标系统和子空间的阐述. RGB R ...

  3. ubuntu16上部署confluence-6.14.5的迁移

    author:headsen chen date:  2019-10-18  15:02:06 notice :created  by  headsen chen himself and not al ...

  4. html页面自适应宽度

    html页面实现响应式的方式有很多,本篇介绍懒人必备一招见效的方法. 在head标签中加入 <meta name="viewport" content="width ...

  5. Spring cloud微服务安全实战-7-9自定义日志采集的格式和内容

    怎么来控制输出的日志的格式.并且从日志里面提取出来我想要的一些信息. 整个的message是一个大的json格式字符串. 虽然是可以通过关键字搜索到.但是日志看起来并不舒服. 在我们的控制台,日志实际 ...

  6. mybatis:字符串转成数组拼接成SQL

    <foreach item="item" index="index" collection="str.split(',')" open ...

  7. [图片问答]LODOP打印的行间距字间距

    LODOP可以打印纯文本,也可以是超文本,关于哪些打印项是纯文本,哪些打印项是超文本,之前有博文相关介绍:LODOP中的纯文本和超文本打印项. 之前的关于纯文本的行间距字间距介绍:Lodop设置文本项 ...

  8. [LeetCode] 154. Find Minimum in Rotated Sorted Array II 寻找旋转有序数组的最小值 II

    Follow up for "Find Minimum in Rotated Sorted Array":What if duplicates are allowed? Would ...

  9. python：找出两个列表中相同和不同的元素(使用推导式)

    #接口返回值 list1 = ['张三', '李四', '王五', '老二'] #数据库返回值 list2 = ['张三', '李四', '老二', '王七'] a = [x for x in lis ...

  10. python基础篇（六）

    PYTHON基础篇(六) 正则模块re A:正则表达式和re模块案例 B:re模块的内置方法 时间模块time A:时间模块的三种表示方式 B:时间模块的相互转换 随机数模块random A:随机数模 ...