Node学习之（第三章：art-template模板引擎的使用）
前言
大家之前都有使用过浏览器中js模板引擎，其实在Node.js中也可以使用模板引擎，最早使用模板引擎的概念是在服务端新起的。
art-template
art-template是一款高性能的JavaScript 模板引擎，不仅可以在浏览器（前端）使用，同时也可以在Node中使用。
GitHub地址：art-template
文档：官方中文
本章节我们来探讨下Node中使用art-template模板引擎生成一个标准的HTML文档。
主体
art-template原理就是将一个字符串数据按照模板引擎的语法替换掉其中的某些特定格式数据，然后产出我们所需的HTML文档。art-template支持两种语法：标准语法，原始语法，标准语法多以{{}}常见，原始语法多以<% %>常见。对于不清楚art-template语法的同学可以去官方文档看下，这里不做详细叙述。安装
art-template第三方包
在项目当前目录npm install art-template，默认会安装在项目当前node_modules文件夹下。
- 在项目中创建
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的标准语法，编写的时候一定按照正确的模板语法，否则会导致结果有误。
- 项目中创建
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('服务器已经启动，可以访问。。。')
})
- 启动服务器后，浏览器访问后，效果如下：
到这里就已经实现了我们起初的效果，应该比较简单吧，哈哈。如果喜欢的话，希望小伙伴们给个star哟，你们的点赞是我持续更新的动力。
说明
本仓库是自己Node.js学习过程的真实记录，以后会每天更新一些新的知识点，希望可以对想要学Node.js的同学有一些帮助，欢迎star，你们的点赞是我更新的持久动力。同时如果你觉得本仓库中的一些知识点有错误也可以issue我，方便后期我订正！
本仓库同时在博客园和掘金更新，欢迎写博客的朋友一起学习交流。
博客园
掘金
GitHub
Node学习之（第三章：art-template模板引擎的使用）的更多相关文章
- The Road to learn React书籍学习笔记(第三章)
The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...
- python学习心得第三章
python学习心得第三章 1.三元运算 变量=值1 if 条件 else 值2 由图如果条件成立则赋值1给变量,如果条件不成立则赋值2给变量. 2.数据类型 集合:set() class set(o ...
- 《DOM Scripting》学习笔记-——第三章 DOM
<Dom Scripting>学习笔记 第三章 DOM 本章内容: 1.节点的概念. 2.四个DOM方法:getElementById, getElementsByTagName, get ...
- [HeadFrist-HTMLCSS学习笔记]第三章构建模块：Web页面建设
[HeadFrist-HTMLCSS学习笔记]第三章构建模块:Web页面建设 敲黑板!! <q>元素添加短引用,<blockquote>添加长引用 在段落里添加引用就使用< ...
- JVM学习笔记-第三章-垃圾收集器与内存分配策略
JVM学习笔记-第三章-垃圾收集器与内存分配策略 tips:对于3.4之前的章节可见博客:https://blog.csdn.net/sanhewuyang/article/details/95380 ...
- python学习笔记——第三章 串
第三章 字符串学习 1.字符串不灵活, 它不能被分割符值 >>> format = "hello, %s. %s enough for ya?" >> ...
- Spring 学习指南 第三章 bean的配置 (未完结)
第三章 bean 的配置 在本章中,我们将介绍以下内容: bean 定义的继承: 如何解决 bean 类的构造函数的参数: 如何配置原始类型 (如 int .float 等) .集合类型(如 ja ...
- Windows程序设计(第五版)学习：第三章 窗口与消息
第三章 窗口与消息 1,windows窗口过程:应用程序所创建的每一个窗口都有一个与之关联的窗口过程,用于处理传递给窗口的消息. 2,窗口依据窗口类来创建.窗口类标识了用于处理传递给窗口的消息 ...
- 好记心不如烂笔头之JQuery学习，第三章
第三章中主要讲了几个对DOM进行操作的方法. 归纳如下: 属性的获取和设置: //属性的获取 $("li").attr("title"); //属性的设置 $( ...
随机推荐
- Python集成开发环境（IDE：Integrated Development Environment）: PyCharm
原文地址:https://www.runoob.com/python/python-install.html IDE下载安装 PyCharm 是由 JetBrains 打造的一款 Python IDE ...
- Nginx配置SSL证书部署HTTPS网站（颁发证书）
一.Http与Https的区别HTTP:是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从WWW服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高 ...
- Innodb的redo log block
- 如何查看window 7/window 8 等系统 的激活状态？
http://www.officezhushou.com/office-key/ Office激活密钥 Win+R 输入: slmgr.vbs -dlv 显示:最为详尽的激活信息,包括:激活ID. ...
- C语言 sscanf函数补充
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <assert.h&g ...
- [译]Pandas列数据展示不全解决方法？
Pandas数据展示列太多会显示...不显示具体数据. 设置参数可以显示全部数据: pd.set_option('display.expand_frame_repr', False)
- 上传base64图片并压缩
elementUI+react 布局 <Dialog title="充值" visible={ dialogVisible } onCancel={ () => thi ...
- LeetCode：缺失的第一个正数【41】
LeetCode:缺失的第一个正数[41] 题目描述 给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0] 输出: 3示例 2: 输入: [3,4,-1,1] ...
- 【转】Spring中@Async
Spring中@Async 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实, ...
- qt creator的使用总结
每一个不曾起舞的日子,都是对生命的辜负----------尼采 1. HELP功能: 1)有时点击"HELP"之后,对应的页面里没有左侧的搜索栏.比较理想的状态是将左侧导航栏划分 ...