服务器端
const template = require('art-template');
const path = require('path');
// 要拼接的路径
const views = path.join(__dirname, 'views', '01.art');
//设置模板根目录
//template.defaults.root = path.join(__dirname, 'views');
// 设置模板根目录
//template.defaults.extname = '.html'
// 向模板中导入变量，以便在模板中使用
//template.defaults.imports.sd = sd;
const html = template(views, {
name: '张三',
age: 18,
content: '<h1>我是标题</h1>'
});
//const html = template('02.art', {
// time: new Date()
//});
//console.log(template('07', {}));
console.log(html);
01.art模板中内容
<!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>Document</title>
</head>
<body>
<p>{{name}}</p>
<p>{{ 1+1 }}</p>
<p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
<p>{{content}}</p>
<p>{{@content}}</p>
<p>-------------------------------</p>
<p> <%= name %></p>
<p><%= 1+2 %></p>
<p><%= 1 + 1 == 3 ? '相等' : '不相等' %></p>
<p><%= content %> </p>
<p><%- content %></p>
</body>
</html>
服务器端模板引擎express下面
const express = require('express');
const path = require('path');
const app = express();
//告诉express框架使用什么模板引擎渲染什么后缀的文件
app.engine('art', require('express-art-template'));
//告诉express框架模板存放位置
app.set('views', path.join(__dirname, 'views'))
//告诉express框架模板的默认后缀
app.set('view engine', 'art');
app.get('/index', (req, res) => {
res.render('index', {
msg: 'message'
})
});
app.get('/list', (req, res) => {
res.render('list', {
msg: 'listPage'
})
})
app.listen(3000);
index.art list.art
//index.art
{{msg}}
//list.art
{{msg}}
客户端模板引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 1. 将模板引擎的库文件引入到当前页面 -->
<script src="/js/template-web.js"></script>
</head>
<body>
<div id="container"></div>
<!-- 2.准备art-template模板 -->
<script type="text/html" id="tpl">
<h1>{{username}} {{age}}</h1>
</script>
<script type="text/javascript">
// 3.告诉模板引擎将那个数据和哪个模板进行拼接
// 1) 模板id 2)数据 对象类型
// 方法的返回值就是拼接好的html字符串
var html = template('tpl', {username: 'zhangsan', age: 30});
document.getElementById('container').innerHTML = html;
</script>
</body>
</html>
标签：const,服务器端,app,express,引擎,template,art,模板 From： https://www.cnblogs.com/wangxianwen/p/16736782.html