前言

大家之前都有使用过浏览器中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. 团队作业-Alpha(4/4)

    队名:软工9组 组长博客:https://www.cnblogs.com/cmlei/ 作业博客:https://edu.cnblogs.com/campus/fzu/SoftwareEngineer ...

  2. pip3的国内安装源

    1,清华源 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple virtualen 2,豆瓣源 pip3 install -i https ...

  3. t4模版快速入门

    语法 主要包括指令.文本块.控制块. 1.指令 指令主要包括template, output, assembly, import, include等类型,用以告诉T4引擎如何编译和运行一个模板.这些指 ...

  4. rabbitmq - 消息接收，解析xml格式数据时异常：ERROR not well-formed (invalid token): line 4, column 46

    ERROR alsv odoo.addons.cus_alsv.utils.alsv_about_mq.get_data_from_mq: parse_xml_data_from_mq: not we ...

  5. 解决Electron安装包下载慢的问题

    问题描述 在运行官网示例的过程中,一个安装包(electron-v5.0.8-darwin-x64.zip)下载特别慢,基本下载不下来.更改npm的安装源到taobao的镜像,也没有效果. 解决方案 ...

  6. [Java复习] Spring Cloud - Netflix

    Spring Cloud Netflix常用组件 服务注册与发现:Eureka 服务负载均衡:Ribbon 服务声明式客户端:Feign 服务熔断:Hystrix 服务网关: Zuul Eureka: ...

  7. RedisHelper Redis帮助类

    using StackExchange.Redis; using System; using System.Collections.Generic; using System.IO; using Sy ...

  8. Spring cloud微服务安全实战-8-1课程总结

    总结 首先讲了api的安全.安全常见的风险.安全措施.然后我们把简单的api演化成一个这种微服务的架构. 首先讲了在网关上可以做哪些安全的措施.然后讲了如何搭建一个安全中心,也就是认证服务器,包括一些 ...

  9. Qt开发经验小技巧11-20

    获取类的属性 const QMetaObject *metaobject = object->metaObject(); int count = metaobject->propertyC ...

  10. Shell流程控制语句if

    (1).if语句 语法格式: if 判断条件 ; then 命令 fi 或 if 判断条件 then 命令 fi if语句流程图: 实例:判断命令是否执行成功,成功则输出语句This is ok. [ ...