1. nodejs中使用
1.1 安装 art-template
npm install art-template --save
1.2 在需要使用的文件模块中加载 art-template
var template = require('art-template')
1.3 使用
/**
* app.js 在nodejs中使用art-template
*/
var fs = require('fs')
// 引入第三方模块 art-template
var template = require('art-template')
// 读取index.html 模板文件
fs.readFile('./index.html', function(err, data) {
/**
* data默认读取到的是 二进制数据，而模板引擎的 render 方法需要接收的是字符串，所以在这里需要把 data 二进制数据转为 字符串
*/
if (err) {
return console.log('读取文件失败了')
}
// 模板引擎的 render 方法需要接收的是字符串
var ret = template.render(data.toString(), {
name: '李思雨',
age: 18,
province: '北京市',
hobbies: [
'写代码',
'唱歌',
'打游戏'
],
title: '个人信息'
})
console.log(ret)
})
index.html 模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在nodejs中使用art-template</title>
</head>
<body>
<h1>这是我的 {{title}}</h1>
<h3>大家好，我的名字是 {{name}}</h3>
<h3>我今年 {{age}} 岁了</h3>
<h3>我现在在{{province}}上学呢</h3>
<h3>我最喜欢： {{each hobbies}} {{$value}} {{/each}}
</h3>
</body>
</html>
1.4 执行
node app.js
2. 在浏览器中使用
template-web.js ： 引入第三方文件（或者从node_module中引入 node_module/art-template/lib/art-template）
模板引擎不关心你的字符串内容，只关心自己能认识的模板标记语法，例如 {{}} 。在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在浏览器中使用art-template</title>
</head>
<body>
<!-- 1. 引入art-template.js -->
<script src="./template-web.js"></script>
<!-- 2. 定义模板 -->
<script id="tpl-user" type="text/html">
<p>大家好，我叫：{{ name }}</p>
<p>我今年 {{ age }} 岁了</p>
<h1>我来自 {{ province }}</h1>
<p>我的爱好是：{{each hobbies}} {{ $value }} {{/each}}</p>
</script>
<!-- 3. 定义源数据 -->
<script type="text/javascript">
var user = template('tpl-user', {
name: '李思雨',
age: 20,
province: '北京市',
hobbies: [
'写代码',
'唱歌',
'打游戏'
]
})
console.log(user)
</script>
</body>
</html>
3. nodejs结合express使用express-art-template（重点）
3.1 下载安装包
npm install --save express
npm install --save art-template
npm install --save express-art-template
3.2 引入并创建http服务器
var path = require('path')
var express = require('express')
var app = express()
3.3 指定.html使用的解析引擎(官方给出的是art)
app.engine('html', require('express-art-template'))
3.4 使用模板传值
// 请求与响应
app.get('/', function(req, res) {
// 使用模板传值
res.render('index.html', {
name: '李思雨',
age: 18,
province: '北京市',
hobbies: [
'写代码',
'唱歌',
'打游戏'
],
title: '个人信息'
});
});
3.5 案例展示
/www/index.html 模板文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在nodejs中结合express使用art-template</title>
</head>
<body>
<h1>这是我的 {{title}}</h1>
<h3>大家好，我的名字是 {{name}}</h3>
<h3>我今年 {{age}} 岁了</h3>
<h3>我现在在{{province}}上学呢</h3>
<h3>我最喜欢： {{each hobbies}} {{$value}} {{/each}}
</h3>
</body>
</html>
app.js
var path = require('path')
var express = require('express')
// 创建web服务器
var app = express()
// 指定.html使用的解析引擎(官方给出的是art)，表示当渲染以 .html 结尾的文件的时候，使用 art-template 模板引擎
app.engine('html', require('express-art-template'))
// express-art-template 默认的渲染的目录是 views下面的，如果需要修,则设置如下：
app.set('views', path.join(__dirname, 'www')); // www目录是放置模板html的位置
// 4. 统一处理网站静态资源，你就可以直接通过 /public/xx 的方式访问 public 目录中的所有资源了
// 当以 /public/ 开头的时候，去 ./public/ 目录中找找对应的资源
app.use('/public/', express.static('./public/'))
// 请求与响应
app.get('/', function(req, res) {
// 使用模板传值
res.render('index.html', {
name: '李思雨',
age: 18,
province: '北京市',
hobbies: [
'写代码',
'唱歌',
'打游戏'
],
title: '个人信息'
});
});
app.listen(3000, function() {
console.log('server is running ......')
})
3.6 解析
3.6.1 加载解析模板引擎art-template，需要配合 render使用
// Express 为 Response 相应对象提供了一个方法：render
// render 方法默认是不可以使用，但是如果配置了模板引擎就可以使用了
// res.render('html模板名', {模板数据})
render("文件名",{模板数据})
注意：第一个参数不能写路径，一般会默认去项目中的views文件夹下去找模板文件，这是Express的约定
3.6.2 配置模板引擎的后缀名
app.engine('html', require('express-art-template'));
第一个参数表示将使用模板引擎文件的后缀名，默认是art，在我们的项目中，我们使用的是html
3.6.3 修改默认的模板文件目录
app.set('views', path.join(__dirname, 'www')); // www目录是放置模板html的位置
__dirname ： 就是你执行项目 node app.js 的 所在目录
express-art-template 默认的渲染的目录是 views下面的，如果修改，则参考上面
4. art-template使用模板继承和子模板案例
4.1 项目初始化
npm init -y
4.2 安装项目包
# 安装express服务框架包
npm i express
# 安装art-template 和 express-art-template
npm i art-template express-art-template
4.3 项目其他文件
app.js
var express = require('express')
var path = require('path')
// 创建web服务器
var app = express()
// 开放网站统一静态资源
app.use('/public/', express.static(path.join(__dirname, './public')))
app.use('/node_modules/', express.static(path.join(__dirname, './node_modules')))
// 配置art-template模板引擎
app.engine('html', require('express-art-template'))
// express-art-template 默认的渲染的目录是 views
app.set('views', path.join(__dirname, './views'));
app.get('/', function(req, res) {
res.render('index.html', {
name: 'hello nodejs'
})
})
app.listen(3000, function() {
console.log('Server is runing at http://localhost:3000/')
})
views目录文件
header.html
<link rel="stylesheet" type="text/css" href="/public/css/header.css" />
<header class="section_header">
<h1>公共头部</h1>
</header>
footer.html
<link rel="stylesheet" type="text/css" href="/public/css/footer.css" />
<footer class="section_footer">
<h1>公共尾部</h1>
</footer>
index.html
<!-- 1. 继承模板 layout.html -->
{{extend './layout.html'}}
<!-- 2. 设置自定义模块title -->
{{block 'title'}}
<title>首页</title>
{{/block}}
<!-- 2. 设置自定义模块head -->
{{block 'head'}}
<link rel="stylesheet" type="text/css" href="/public/css/index.css" />
{{/block}}
<!-- 2. 设置自定义模块cont -->
{{block 'cont'}}
<h1 class="title">{{name}}</h1>
{{/block}}
layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
{{block 'title'}}
<title>art-template模板继承和子模板</title>
{{/block}}
<link rel="stylesheet" type="text/css" href="/public/css/reset.css" />
<link rel="stylesheet" type="text/css" href="/public/css/general.css" />
{{block 'head'}}{{/block}}
</head>
<body>
<!-- 引入公共头部---子模板 -->
{{include './header.html'}}
<article class="section_container">
{{block 'cont'}}{{/block}}
</article>
<!-- 引入公共尾部---子模板 -->
{{include './footer.html'}}
</body>
</html>
