前言

大家之前都有使用过浏览器中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. VS2013下开发VC++程序，编译时提示错误error MSB8020: The build tools for v140 (Platform Toolset = 'v140') 的解决方案

    1. 问题描述: 提示如下错误:error MSB8020: The builds tools for v140 (Platform Toolset = 'v140') cannot be found ...

  2. Android - Button(按钮)的响应点击事件的4种写法

    Button控件setOnclickListener(View.OnClickListener listener)来接收一个点击事件的监听器 自定义一个点击事件监听器类让其实现View.OnClick ...

  3. 使用Spring容器最简单的代码姿势

    如果仅仅是为了测试简单使用一下Spring的IOC容器,或者研究一下Spring的容器的源码实现,那么在搭建Spring工程的时候,不需要复杂的xml配置.Spring3.0之后提供了Java注解配置 ...

  4. 命令mark

    for i in `sudo /usr/local/sbin/fping -g 10.181.37.0/26 -p 10 -r 1 | grep alive | awk '{print $1 }'`; ...

  5. Puppeteer最大化显示，分辨率自适应

    Puppeteer自适应分辨率,可以将defaultViewport设为null, 启动的时候还是半屏显示,点击最大化按钮,可以最大化显示. 这样分辨率能够自适应操作系统. 具体可看:https:// ...

  6. 腾讯云短信 nodejs 接入, 通过验证码修改手机示例

    腾讯云短信 nodejs 接入, 通过验证码修改手机示例 参考:腾讯云短信文档国内短信快速入门qcloudsms Node.js SDK文档中心>短信>错误码 nodejs sdk 使用示 ...

  7. ResponseBody和文件上传

    SpringMVC默认使用MappingJacksonHttpMessageConverter对json数据进行转换 <dependency> <groupId>com.fas ...

  8. [LeetCode] 461. Hamming Distance 汉明距离

    The Hamming distance between two integers is the number of positions at which the corresponding bits ...

  9. 树莓派插入U盘自动拷贝系统日志到U盘或通过U盘升级程序

    注意,U盘用Fat32格式,NTFS格式的话,需要在Linux另外安装相应驱动. 可通过udev实现如题的功能. 在/etc/udev/rules.d/目录下新建规则文件98-logcopy.rule ...

  10. .Net Core 1.1 + CentOs 7 环境配置

    centos7下使用yum安装mysql5.7.10 参考:http://www.cnblogs.com/hwd-cnblogs/p/5213337.html http://www.jb51.net/ ...