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"); //属性的设置 $( ...
随机推荐
- Android HIDL学习（2） ---- HelloWorld【转】
本文转载自: 写在前面 程序员有个癖好,无论是学习什么新知识,都喜欢以HelloWorld作为一个简单的例子来开头,咱们也不例外. OK,咱这里都是干货,废话就不多说啦,学习HIDL呢咱们还是需要一些 ...
- 【深入学习linux】VMware新建虚拟机教程
新建虚拟机 1. 点击创建新的虚拟机 2.进入新建向导,选择典型安装,点击下一步 3.为什么不选择第二个选项是因为系统会默认帮助我们安装一个简单配置,这里我们需要学习配置安装所以选择第三项,然后点击下 ...
- 上传图片 展示进度条 bootstrap
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bo ...
- LoadRunner之录制你的第一个脚本
LoadRunner安装完成之后,肯定就迫不及待的想要上手试用了.下面就是讲一下LR脚本录制的流程和基本的设置. 1.先放一张脚本录制以及运行的流程图 2.脚本录制步骤 1)以管理员身份打开LR软件, ...
- python离线包下载地址
https://pypi.org/project/pdfconv/ https://pypi.org/search/?q=major&o=
- HTTP协议复习
HTTP请求/响应的步骤: 客户端连接到WEB服务器:浏览器与web服务器的HTTP端口建立一个TCP套接字连接,例如:http://www.baidu.com 发送HTTP请求:通过TCP套接字,客 ...
- Laya微信小游戏的动态资源
版本2.1.1. 由于有4m包限制,所以一般小游戏项目分成主包+远程资源. 现在我新建一个remote目录,该目录下资源不发布到微信小游戏目录下,而是服务器远程加载. 发布时,勾线是否提取本地包 远程 ...
- 【网络开发】详谈socket请求Web服务器过程
最开始我们需要明白一件事情,因为这是这篇文章的前提: HTTP协议只是一个应用层协议,它底层是通过TCP进行传输数据的.因此,浏览器访问Web服务器的过程必须先有"连接建立"的发生 ...
- Python中IO编程-StringIO和BytesIO
Python在内存中读写数据,用到的模块是StringIO和BytesIO StringIO >>> from io import StringIO >>> f = ...
- flask,scrapy,django信号
简介 Django.Flask.scrapy都包含了一个“信号分配器”,使得当一些动作在框架的其他地方发生的时候,解耦的应用可以得到提醒. 通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒 ...