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>

一、前端如何引用

二、node中的模板引擎

1. 先看下我们的目录树

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

三、结果