ajax第三天（模板引擎）

最新推荐文章于 2022-07-06 20:53:04 发布

qfCSDN

最新推荐文章于 2022-07-06 20:53:04 发布

阅读量184

点赞数

分类专栏： ajax基础文章标签： ajax

本文链接：https://blog.csdn.net/qfCSDN/article/details/110297642

版权

ajax基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

模板引擎

作用：动态渲染数据时代替拼接字符串的操作

1-引入

遍历data数组生成动态结构–以拼接字符串的方式来生成动态结构

结构代码不能复用
没有语法高亮
没有代码提示
代码没有报错
代码没有层次结构

2-创建模板结构

模板仅仅是一个结构上的参照，我们并不需要在进行默认的解析，意味在页面中不应该出现模板结构

所以我们的需求 :

1.能够描述我们想要的结构

2.能够在需要的时候自由的获取

3.不需要在页面中自动的渲染出来

所以我们可以将这个结构添加到script标签中

script 也是一个标签，可以通过标签获取里面的结构
script标签中还可以进行一些逻辑处理
script标签中的内容之所以会进行js解析，是因为它有默认的type属性，为type="text/ javascript "，意味着我们只要设置一个自定义的type值，不让浏览器进行js的处理,我们一般会将这个type设置为模板专用类型：text/template
同时为了能够方便的获取这个模板结构，我们会为模板结构script设置一个id号

<script type="text/template" id='userlistTemp'>

3-artTemplate 原生 js 模板语法

1.引入插件

<script src="template-web.js"></script>

2.添加模板结构

<script type="text/template" id='userTemp'>

3.添加输出表达式

目的就是为了数据的替换，意味着我们应该在模板结构中标记到底数据应该如何进行替换

对内容编码输出：<%=content%> ：原样输出： text()
不编码输出：<%=#content%>:解码输出，会解析内容

4.核心方法

template(模板id,数据对象)：返回动态生成的页面结构

5.注意：

逻辑代码，以后会被当成js解析,所以不要在<%%>之间包含任何的非js代码

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
  <script src="./js/template-web.js"></script>
</head>
<body>
 <button>替换</button>
 <ul>
  <!-- <li>jack</li>
  <li>20</li> -->
 </ul>
  <script type="text/template" id='userTemp'>
 <!-- 下面代码的意思是：以后这个结构<%=name%>需要被 你传入的数据对象的name属性的值替换 -->
 <li><%=#name%></li>
 <li><%=age%></li>

 </script>
  <script>
  let obj = {
   name: 'rose123<hr>',
   age: 18
  }
  document.querySelector('button').onclick = function () {
   // 通过模板引擎的方式来实现元素的内容的替换
   // 调用模板引擎的方法实现动态结构的生成
   // 所传递的数据是对象(如果数据是数组，也建议你包装为对象)
   // let str = template(模板id, 数据对象)
   let str = template('userTemp', obj)
   document.querySelector('ul').innerHTML = str
  }
 </script>
</body>
</html>

4-artTemplate 简洁语法（重点掌握）

1.引入插件

<script src="./js/jquery.min.js"></script>
<script src="template-web.js"></script>：可以原生和简洁语法

2.逻辑表达式：

{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式

3.输出表达式：(编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击)

对内容编码输出：{{content}}
不编码输出：{{#content}}

4.循环遍历表达式： 无论数组或者对象都可以用 each 进行遍历

arr.forEach(function(value,index){})

5.注意：

{{each data}} // 键和索引的名称只能是$value和$index
或者自定义键和索引，如
{{each data v i}}

案例

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11-使用字符串拼接的方式生成动态网页</title>
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/template-web.js"></script>
  <style type="text/css">
    .hero-list img {
      width: 50px;
      height: 50px;
      display: block
    }

    .hero-list td {
      height: 50px;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <header>
    <div class="page-header container">
      <h1>王者荣耀 <small>英雄管理器</small></h1>
    </div>
  </header>
  <div class="container hero-list">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>性别</th>
          <th>头像</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbody">
        <!-- 添加动态渲染内容区域 -->
      </tbody>
    </table>
  </div>

  <script type="text/template" id='userlistTemp'>
    {{each data value index}}
      {{if i%2 !== 0}}
        <tr style='background:#ccc'> 
      {{else}}
        <tr style='background:#ff0'> 
      {{/if}}
        <td>{{index + 1}}</td>
        <td>{{value.name}}</td>
        <td>{{value.gender=='男'?'男生':'女生'}}</td>
        <td><img src="http://127.0.0.1:3002/images/{{value.img}}"></td>
        <td>
            <a href="#">查看</a>
            <a href="javascript:;">修改</a>
            <a href="javascript:;">删除</a>
        </td>
      </tr>
    {{/each}}
  </script>
  <script type="text/javascript">
    $(function () {
      console.log('我认识你')
      // 9：“英雄”案例获取所有数据
      // - 请求路径：http://127.0.0.1:3002/getalldata
      // - 请求方法：get

      // 动态渲染：发送请求  分析数据>>log  创建模板  调用模板引擎  填充到指定位置
      $.ajax({
        url: 'http://127.0.0.1:3002/getalldata',
        dataType: 'json',
        success: function (res) {
          console.log(res) // res.data
          if (res.code == 200) {
            //  let str = template(模板id,数据对象)
            let str = template('userlistTemp', res)
            // console.log(str)
            $('#tbody').html(str)
          }
        }
      })

    })
  </script>
</body>
</html>