avatar

Catalog
art-template

一、前端如何引用

  • 可以使用npm方式
  • 可以使用script标签

这里我们使用script标签

html
<script type='text/template' id='box'>
<p>{{test}}</p>
</script>
<script>
let obj = {
test: 'h',
};
let html = template('box',obj);
document.body.innerHTML = html;
</script>

以上就是一个模板引擎的基本使用。首先我们先写一个模板,注意不要忘记给id值,里面是我们要创建的模板,接着我们要创建一个模板对象(一定要是对象)然后创建一个模板,第一个参数是id值,第二参数是创建模板对象名。向文档中插入模板。

如果我们想要多个模板,这时候就可以使用到遍历,(个人感觉这里 有点像vue中的v-for指令)

javascript
<script type='text/template' id='wrap'>
<ul>
{{each test}}
<li>{{$value}}<li>
{{/each}}
</script>

let obj = {
test : ['z','h','s'],
}
let value = template('wrap',obj);
console.log(value);
document.body.innerHTML = value;

这样就可在页面中创建三个li标签,他们的值分别是数组中的值,当然出来each遍历,我们还有判断

if (可去官方文档中查阅)对于模板引擎也只是一点点的了解!😭

浏览器中的模板引擎的应用,和jq中的ajax实例

html
<input type="text" placeholder="出发站" id="start">
<input type="text" placeholder="终点站" id="end">
<input type="button" value="查询">
<table width="400" border="1">
<tr>
<td>车次</td>
<td>类型</td>
<td>出发站</td>
<td>到达站</td>
<td>出发时间</td>
<td>到达时间</td>
<td>距离</td>
</tr>
</table>
<script type="text/template" id="templateId">
{{each list}}
<tr>
<td>{{$value.trainno}}</td>
<td>{{$value.type}}</td>
<td>{{$value.station}}</td>
<td>{{$value.endstation}}</td>
<td>{{$value.departuretime}}</td>
<td>{{$value.arrivaltime}}</td>
<td>{{$value.sequenceno}}</td>
</tr>
{{/each}}
</script>
<script src="public/node_modules/art-template/lib/template-web.js"></script>

<script>
$(function(){
$("input[type=button]").on("click",function(){
var start = $("#start").val();
let end = $("#end").val();
$.ajax({
url: "https://api.jisuapi.com/train/station2s",
type: "GET",
data: { //此时的data是相当于字符串拼接在url中
appkey: "6543d2444cbc0776",
start: start,
end: end
},
dataType: "jsonp",
success: function(data){
console.log(data);
let obj = {
list: data.result.list
}
let html = template("templateId",obj);
console.log(html);
$("table").append(html);
}

})
})
})
</script>

二、node中的模板引擎

最近发现模板引擎真是个好东西,它竟然还可以继承和引入??牛批,这里的挖坑和填坑,我又感觉像是vue中的插槽。。

1. 先看下我们的目录树

  • public 是存放我们的静态资源库
  • views 存放我们的视图

    • _ layout文件夹存放我们的母版_
    • _ partials 存放我们的公共头部,尾部,导航栏
    • index .html login.html register.html(渲染文件默认到views文件夹下)
  • app.js 入口文件

2.如何用公共的头部和尾部

​ app.js中

javascript
app.engine('html',require('express-art-template'))
//配置插件开始
let bodyParser = require('body-parser')
//配置body-parser
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())
//插件配置结束
app.get('/',(req,res)=>{
res.render('index.html',{
title: 'hello wolrd'
})
})
app.listen(3000,()=>{
console.log('server is running')
})

​ home.html

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>Document</title>
<!-- 留个样式的插槽 这样我就可以有自己单独的样式了, -->
{{block 'style'}}
{{/block}}
</head>
<body>
{{include '../_partials/header.html'}}
<!-- 一个页面基本的头部和尾部都有,但是只有我们的内容不一样,所以我们就要留个坑,无论哪一个页面需要的话,填坑就行了 -->
{{block 'content'}}
<h3>默认坑里的内容</h3>
{{/block}}
{{include '../_partials/footer.html'}}


<!-- 留个script插槽 -->
{{block 'script'}}
{{/block}}
</body>
</html>

​ index.html

html
<!-- 继承home模板 -->
{{extend './_layout/home.html'}}
<!-- 填坑样式 -->
{{block 'style'}}
<style>
body{
background: brown;
}
</style>
{{/block}}
<!-- 填坑操作 -->
{{block 'content'}}
<p>主要内容,我会把默认内容覆盖掉</p>
{{/block}}

​ footer.html

html
<footer>
<h4>公共尾部</h4>
</footer>

​ header.html

html
<div>
<h3>公共的头部</h3>
</div>

三、结果

Author: Yo
Link: https://powerlrl.gitee.io/2019/03/09/前端/笔记/art-template/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Donate
  • 谢谢你请我吃糖果
    谢谢你请我吃糖果

Comment