安装
npm install art-template --save
导入art-template
var template = require('art-template')
查看文档 api
https://github.com/aui/art-template
完整代码 + 效果
模版引擎不关心你的字符串内容,只关心自己能识别的标记语法
template.js
// https://github.com/aui/art-template
// art-template 一种模版引擎
// art-template 不仅可以在浏览器使用,也可以在node使用
// 模版引擎最早就是诞生于服务器领域,后来才发展到了前端
// 1 安装 npm install art-template --save
// 生成了 package-lock.json node_modules
// 2 在需要的文件模块中引用 art-template
// 3 查看文档 api
// 浏览器使用art-template template.html
// node使用模版引擎
// 使用 require 方法加载
var template = require('art-template')
var path = require("path")
var http = require("http");
var fs = require("fs");
var server = http.createServer();
// 响应请求
server.on('request',(req,res)=>{
var url = req.url;//请求路径
res.setHeader("Content-type","text/plain;charset=utf-8");
// 将模板源代码编译成函数
// template.compile(source, options);
// 将模板源代码编译成函数并立刻执行
// 模版字符串 替换对象
// template.render(source, data, options);
// 默认读取的 data是二进制数据 要把二进制数据转为字符串
fs.readFile('./tpl.html',function(err,data){
if(err){ return res.end("读取失败") }
var set = template.render(data.toString(),{
title:'个人信息',
name:"小明",
age:18,
pagehtml:data.toString()
})
res.setHeader("Content-type","text/html;charset=utf-8");
res.end(set)
console.log(set)
})
// 或者
// template(模板路径[绝对路径],data)
// 返回拼接好的字符串
var html = template(path.join(__dirname,'tpl.html'),{
title:'个人信息',
name:"小明",
age:18
})
res.setHeader("Content-type","text/html;charset=utf-8");
res.end(html)
})
// 绑定端口
server.listen(3000,()=>{
console.log("服务器启动成功,可以通过 http://127.0.0.1:3000 进行访问");
})
tpl.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{title}}</title>
</head>
<body>
<h1>hello {{ name }} {{ age }}<h1>
<p>{{pagehtml}}</p>
<script>
var foo = '{{title}}'
</script>
</body>
</html>
效果
运行
node template.js
原文输出
// name='<div>div</div>'
// 标准语法
{{@ name }}
// 原始语法
<%- name %>