在自家的生龙活虎篇有关智能搜索框异步加载数据的稿子中,有博友给本身留言,以为作者手写字符串拼接成效过低,轻巧出错。在通过少年老成段时间的研究和读书之后,发掘现在拼接字符串的措施都不在是友好去书写了,而是使用Javascript引擎。而javascript引擎的庐山真面目目就是帮我们把带有JavaScript代码的伪THTML语句编写翻译为HTML。

 

template.js 生龙活虎款 JavaScript
模板引擎,轻易,好用。提供风度翩翩套模板语法,客户能够写三个模板区块,每一遍依照传入的多少,生成对应数据爆发的HTML片段,渲染差异的意义。

 

插件介绍:template
是二个高质量的JavaScript模板引擎。

1、特性

  借使有不精通的爱人,可以前往这两篇小说:

 

(1)、性能杰出,试行进程常常是 Mustache 与 tmpl 的 20
多倍(品质测量试验)(2)、接济运转时调节和测验,可准分明位卓殊模板所在言语(演示)

  天猫商城购物车页面
PC端和活动端实战

插件天性:

(3)、对 NodeJS Express
友好扶植(4)、安全,暗许对输出举行转义、在沙箱中运作编译后的代码(Node版本能够无牵无挂执行客户上传的沙盘)

  Taobao购物车页面
智能寻觅框Ajax异步加载数据

  1、质量卓绝,试行进程快(mustache
与 tmpl 的20多倍);

(5)、支持include语句

  源码地址:

  2、支持运转时调节和测量检验,可精准定位特别模板所在言语;

(6)、可在浏览器端完结按路线加载模板(实际情况)

  GitHub:Uncle-Keith

  3、对 NodeJS Express
有很好的支撑;

(7)、援救预编译,可将模板调换来为那个简短的 js 文件

 

  4、安全,暗中同意对输出进行转义;

(8)、模板语句简洁,无需前缀引用数据,有简短版本与原生语法版本可选

  回归正题,以下对artTemplate模板引擎的介绍会分为如下几片段剧情:

  5、可在浏览器端完结按路线加载模板;

(9)、扶助具有流行的浏览器

  1.artTemplate模板引擎的骨干语法结构

  6、帮衬预编写翻译,可将模板调换来为特别轻易的
js 文件;

2、语法

  2.artTemplate模板引擎的主题使用方法

  7、模板语句简要介绍,无需前缀援引数据,具备简洁版本和原生版本可供选取;

(1)、使用

    2.1:使用一个type="text/html"script标签贮存模板

  8、帮助具备流行的浏览器;

引用简洁语法的发动机版本,举例: <script
src=”dist/template.js”></script> 

    2.2:在javascript中贮存模板

 

(2)、表达式

    2.3:嵌入子模板(include)

发轫运用(有三种语法,
此作品介绍的是简要介绍语法)

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

  3.artTemplate模板引擎使用实战

  1) artTemplate
模板必需运用一个type=”text/html” 的 script
标签用来存放在模板(标签中写的是HTML);

(3)、输出表明式

 

 <script type="text/html"></script>

对剧情编码输出: {{content}} 
不编码输出: {{#content}} 
编码能够免御数据中包涵 HTML 字符串,制止引起 XSS 攻击。

1.artTemplate着力语法结构

 

(4)、条件表达式

  artTemplate的语法结构比极粗略,就是{{}}。`{{}}“`
符号包裹起来的口舌则为模板的表达式。表明式又分为
输出表达式,条件表达式,遍历表达式,模板包括表明式。具体的能够看看GitHub:artTemplate
简洁语法版。官方网址对语法介绍的还足以,然而在这里地想在说一句,要深深记住表达式的写法和表明式有哪些分类,对于领会引擎很有帮忙。

  2)
初叶编写制定本人的沙盘

{{if admin}} 
 <p>admin</p> 
{{else if code > 0}} 
 <p>master</p> 
{{else}} 
 <p>error!</p> 
{{/if}} 

 

 <script id="model" type="text/html">
     <h1>{{title}}</h1>
     <ul>
         {{each list as value index}}
             <li>{{index+1}}、{{value}}</li>
         {{/each}}
     </ul>
 </script>

(5)、遍历表达式

2.artTemplate模板引擎的采纳情势

 

无论数组也许目的都足以用 each 进行遍历。

  首先,需求去官方网址下载
简短语法版,下一场在body后面部分加载script文件。文件非常的小,独有2.7kb,可是功能极其刚劲。

  3)
使用数据渲染模板

{{each list as value index}} 
 <li>{{index}} - {{value.user}}</li> 
{{/each}} 

*  *2.1:使用三个type="text/html"script标签存放模板

 var data ={
     title: '热爱的游戏',
     list: ['LOL','王者农药','梦三国','魔兽争霸','其它']
 };

 var html = template('model',data);
 document.getElementById('box').innerHTML = html

亦能够被简写:

    行使script寄放模板的时候要细心三个方面。

 

{{each list}} 
 <li>{{$index}} - {{$value.user}}</li> 
{{/each}} 

    一方面是必需给script标签署义id,何况只好是id,不能够是class。因为在采取template(id,data)方法的时候,该方法会依据id渲染模板,引擎内部会基于document.getElementById(id)搜寻模板。要是利用class作为参数,artTemplate引擎会报错。若无data 参数,将赶回朝气蓬勃渲染函数。

到了这一步,打开页面就足以见到成效了。

(6)、模板包蕴表明式

    此外二只是在<!DOCTYPE
html>script标签中的type类型默以为type/javascript。在script标签中,必得另行注脚type类型为text/html,不然会并未有效应。

 

用以嵌入子模板。

    使用办法如下

artTemplate
简洁语法介绍:

{{include ‘template_name’}} 

     <script id="test" type="text/html">
        <h1>{{title}}</h1>
        <ul>
            {{each list as value i}}
                <li>索引{{i+1}} : {{value}}</li>
            {{/each}}
        </ul>
     </script>
     <script>
         var data = {
             title:'My Life',
             list:['篮球','桌球','游泳','滑轮','读书']
         };
         var html = template('test',data);
         $('.rascal').html(html);
     </script>

1)
使用以前供给引用简洁语法的本子,譬喻:

子模板默许分享当前数量,亦能够钦点数量:{{include ‘template_name’ news_list}} 

    渲染的页面如下:

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

(7)、扶持方法

    图片 1

2) 表达式:

选择template.helper(name, callback)注册公用支持方法:

  2.2:在Javascript中寄放模板

  {{ 和 }} 符号包裹起来的讲话则为模板的表明式。

template.helper('dateFormat', function (date, format) { 
 // .. 
 return value; 
}); 

    在Js中寄放模板应该会超少用到,因为在前面贰个领域有一条军规,结构体制和行为三者必需分开。如果把模版放在js文件内,会损坏那条规定。

3) 输出表明式:

模板中采用的方式: {{time |
dateFormat:’yyyy-MM-dd hh:mm:ss’}} 
支撑传入参数与嵌套使用: {{time |
say:’cd’ | ubb | link}} 

    看看例子,知道一下调用的法规。实质上便是风姿罗曼蒂克段拼接字符串的长河。

  对剧情编码输出: {{
title }}

3、实例

     <script type="text/javascript">
         var source ="<ul>"
         + "{{each list as value i}}"
         + "<li>索引{{i+1}}:{{value}}</li>"
         + "{{/each}}"
         + "</ul>";

         var render = template.compile(source);
         var html = render({
             list:['篮球','桌球','游泳','滑轮','读书']
         });

         $('.rascal').html(html);
     </script>

  对剧情不编码输出: {{
#title }}

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>basic-demo</title> 
<script src="../dist/template.js"></script> 
</head> 
<body> 
<div id="content"></div> 
<script id="test" type="text/html"> 
{{if isAdmin}} 
<h1>{{title}}</h1> 
<ul> 
 {{each list as value i}} 
  <li>索引 {{i + 1}} :{{value}}</li> 
 {{/each}} 
</ul> 
{{/if}} 
</script> 
<script> 
var data = { 
 title: '基本例子', 
 isAdmin: true, 
 list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] 
}; 
var html = template('test', data); 
document.getElementById('content').innerHTML = html; 
</script> 
</body> 
</html>

    图片 2

  区别:

 图片 3

  2.3:嵌入子模板(include)

 // 假如有这样一段数据,title 内出现了标签 
 var data ={
      title: '<i>热爱的</i>游戏',
      list: ['LOL','王者农药','梦三国','魔兽争霸','其它']
 };

 {{ title }}  // 显示内容为:<i>热爱的</i>游戏

 {{ #title }} // 显示内容为:热爱的游戏
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>no escape-demo</title> 
<script src="../dist/template.js"></script> 
</head> 

<body> 
 <h1>不转义HTML</h1> 
 <div id="content"></div> 
 <script id="test" type="text/html"> 
 <p>不转义:{{#value}}</p> 
 <p>默认转义: {{value}}</p> 
 </script> 

 <script> 
 var data = { 
  value: 'hello world!' 
 }; 
 var html = template('test', data); 
 document.getElementById('content').innerHTML = html; 
 </script> 
</body> 
</html> 

    嵌套模板跟第生龙活虎种方法原理相符,只可是在三个模板中调用了此外三个模板而已。

 

图片 4

     <script id='test' type='text/html'>
         <h1>My Life</h1>
         {{include 'list'}}
     </script>
     <script id='list' type='text/html'>
         <ul>
             {{each list as value i}}
                     <li>索引{{i+1}}:{{value}}</li>
             {{/each}}
         </ul>
     </script>
     <script>
         var data = {
             "list":['篮球','桌球','游泳','滑轮','读书']
         };
         var html = template('test',data);
         $('.rascal').html(html);
     </script>

4) 条件表明式

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>include-demo</title> 
<script src="../dist/template.js"></script> 
</head> 

<body> 
<div id="content"></div> 
<script id="test" type="text/html"> 
<h1>{{title}}</h1> 
{{include 'list'}} 
</script> 
<script id="list" type="text/html"> 
<ul> 
 {{each list as value i}} 
  <li>索引 {{i + 1}} :{{value}}</li> 
 {{/each}} 
</ul> 
</script> 

<script> 
var data = { 
 title: '嵌入子模板', 
 list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] 
}; 
var html = template('test', data); 
document.getElementById('content').innerHTML = html; 
</script> 
</body> 
</html> 

    图片 5

<script id="model" type="text/html">
    <h1>{{ title }}</h1>
    <ul>
     // 判断条件自定
        {{if list.length>0}}
            {{each list as value index}}
                <li>{{index+1}}、{{value}}</li>
            {{/each}}
        {{else}}
            <p>没有内容</p>
        {{/if}}
    </ul>
</script>

图片 6

3.artTemplate模板引擎使用实战

 

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>helper-demo</title> 
<script src="../dist/template.js"></script> 
</head> 

<body> 
<h1>辅助方法</h1> 
<div id="content"></div> 
<script id="test" type="text/html"> 
{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}} 
</script> 

<script> 
/** 
 * 对日期进行格式化, 
 * @param date 要格式化的日期 
 * @param format 进行格式化的模式字符串 
 *  支持的模式字母有: 
 *  y:年, 
 *  M:年中的月份(1-12), 
 *  d:月份中的天(1-31), 
 *  h:小时(0-23), 
 *  m:分(0-59), 
 *  s:秒(0-59), 
 *  S:毫秒(0-999), 
 *  q:季度(1-4) 
 * @return String 
 * @author yanis.wang 
 * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/ 
 */ 
template.helper('dateFormat', function (date, format) { 

 if (typeof date === "string") { 
  var mts = date.match(/(\/Date(\d+)\/)/); 
  if (mts && mts.length >= 3) { 
   date = parseInt(mts[2]); 
  } 
 } 
 date = new Date(date); 
 if (!date || date.toUTCString() == "Invalid Date") { 
  return ""; 
 } 

 var map = { 
  "M": date.getMonth() + 1, //月份 
  "d": date.getDate(), //日 
  "h": date.getHours(), //小时 
  "m": date.getMinutes(), //分 
  "s": date.getSeconds(), //秒 
  "q": Math.floor((date.getMonth() + 3) / 3), //季度 
  "S": date.getMilliseconds() //毫秒 
 }; 


 format = format.replace(/([yMdhmsqS])+/g, function(all, t){ 
  var v = map[t]; 
  if(v !== undefined){ 
   if(all.length > 1){ 
    v = '0' + v; 
    v = v.substr(v.length-2); 
   } 
   return v; 
  } 
  else if(t === 'y'){ 
   return (date.getFullYear() + '').substr(4 - all.length); 
  } 
  return all; 
 }); 
 return format; 
}); 

// -------- 

var data = { 
 time: 1408536771253, 
}; 
var html = template('test', data); 
document.getElementById('content').innerHTML = html; 
</script> 
</body> 
</html> 

  artTemplate官方网址给出的每贰个例证其实都已很好了,能够让每壹个人都比较轻易的领悟。不过笔者以为唯风流倜傥的顽固的病魔便是,例子中的数据完全是团结定义的。在实质上支付中,客户观看的每二个商品数量是这么来的:第风度翩翩后端工程师通过特定语法连接数据库,然后将从数据库中获取的多寡调换来JSON格式,最终前端程序员在通过有个别办法将JSON数据渲染到页面上。所以我们的数量无法和睦瞎造,而是通过Ajax异步加载。

5) 遍历表达式

图片 7

  在本身的后生可畏篇 天猫商城购物车页面
智能寻找框Ajax异步加载数据
小说中,后生可畏初阶是使用手写拼接字符串的诀窍去拼接字符串,这种办法功能低,轻便出错。后来一切改成了js模板引擎的措施。所以小编会以天猫商城购物车页面中智能寻找框Ajax异步加载商品数量的例证来注脚artTemplate模板引擎。

{{each list as value index}}
    <li>{{index+1}}、{{value}}</li>
{{/each}}

// 也可以被简写为

{{each list}}
    <li>{{$index+1}}、{{$value}}</li>
{{/each}}

以上就是本文的全体内容,希望对我们的求学抱有助于,也愿意大家多多支持脚本之家。

  先放上后生可畏段代码。首要照旧想经过那么些大致的例子表明接下去要追究的难点。

 

您恐怕感兴趣的稿子:

  • Json2Template.js 基于jquery的插件
    绑定JavaScript对象到Html模板中
  • template.js前端模板引擎使用详解
     <script id="test" type="text/html">
        <h1>{{title}}</h1>
        <ul>
            {{each list as value i}}
                <li>索引{{i+1}} : {{value}}</li>
            {{/each}}
        </ul>
     </script>
     <script>
         var data = {
             title:'My Life',
             list:['篮球','桌球','游泳','滑轮','读书']
         };
         var html = template('test',data);
         $('.rascal').html(html);
     </script>

artTemplate
方法:

  上边代码中,要专心几点的就是:

  template
函数中有七个参数值。

  ♥
遍历表明式中的list必得与剧本中data对象中的list同名,何况遍历表明式中的list必得是data对象中的多个性格。循环表明式中,要循环的是每多个data对象中的list数组,并非data对象,这一点很关键。

  第一个参数表示须要编写翻译的沙盘(填写的是模板的
ID)

  在这里个事例中,data对象中list属性是叁个数组,数组中的每二个值都以简约数据类型,篮球台球等。当然,可以后数组中传入复杂数据类型,如目的。表明那一个关键是因为在循环表达式中循环的数据和给template()传入第3个参数的时候超轻便出错。

  第叁个参数是急需向模板填充的多寡,重回值是编写翻译之后的HTML字符串;

  ♥ 使用template方法时,第叁个参数必得是id,而无法是class。

  //
前段时间理解到那边

  

 

  放上大器晚成段json数据代码。

artTemplate
私下认可配置

图片 8图片 9

图片 10

[
    [
        {
            "Query":"lan",
            "Results":[
                {
                    "Type":"AS",
                    "Suggests":[
                        {
                            "Txt":"李宁2016新款男子篮球鞋音速3高帮反弹篮球场地鞋ABAL031",
                            "num":339,
                            "max":764,
                            "discount":200,
                            "label":"liningBas",
                            "shop":"李宁官方网店",
                            "image":"csslining-bas.png",
                            "color":"颜色分类:荧光果粉/木梅红",
                            "size":"鞋码:42",
                            "nonDiscount":"¥539.00",
                            "bandCard":"cssnkCard.png",
                            "sevenDay":"csssevenDay.png",
                            "guarantee":"cssguarantee.png"
                        },
                        {
                            "Txt":" adidas阿迪达斯篮球男子篮球鞋Regulate",
                            "num":419,
                            "max":18,
                            "discount":120,
                            "label":"adidas",
                            "nonDiscount":"¥539.00",
                            "image":"cssidas.png",
                            "color":"颜色分类:银金属/深藏青蓝",
                            "shop":"adidas官方旗舰店",
                            "size":"鞋码:43.5",
                            "bandCard":"cssnkCard.png",
                            "sevenDay":"csssevenDay.png",
                            "guarantee":"cssguarantee.png"
                        }
                    ]
                }
            ]
        }
    ],
    [
        {
            "Query":"音速3",
            "Results":[
                {
                    "Type":"AS",
                    "Suggests":[
                        {
                            "Txt":"李宁2016新款男子篮球鞋音速3高帮反弹篮球场地鞋ABAL031",
                            "num":339,
                            "max":764,
                            "label":"liningBas",
                            "shop":"李宁官方网店",
                            "image":"csslining-bas.png",
                            "color":"颜色分类:荧光果粉/木梅红",
                            "size":"鞋码:42",
                            "nonDiscount":"¥539.00",
                            "bandCard":"cssnkCard.png",
                            "sevenDay":"csssevenDay.png",
                            "guarantee":"cssguarantee.png"
                        }
                    ]
                }
            ]
        }
    ]
]

 

basketBallShoes.json

示例:

  上边代码中,是生龙活虎段要求被Ajax异步加载数据的商品数量。

<script id="people" type="text/html">
    <h1>{{title}}</h1>
    <ul>
        {{if peos.length>0}}
            {{each peos as p index}}
                <li>
                    {{index+1}}、
                    选手姓名:{{p.name}&#x3000;
                    年龄:{{p.age}}
                </li>
            {{/each}}
        {{else}}
            <p>没有内容</p>
        {{/if}}
    </ul>
</script>

<script>
    var data2 ={
        title: '喜欢的职业选手',
        peos: [
            {
                name: "<b>Uzi</b>",
                age: 20
            },
            {
                name: 'Clearlove7',
                age: 20
            },
            {
                name: 'Korol',
                age: 21
            }
        ]
    }
    // 默认为true 不编译 输出为 <b>Uzi</b>
  //  false 编译 是否编码输出 HTML 字符
    template.config("escape",false); 
    var html2 = template('people',data2);
    document.getElementById('box2').innerHTML = html2;
</script>

  再放上使用贰个type="text/html"script标签寄放模板的代码。

 

图片 11图片 12

 

    <script id='basketBallShoes' type="text/html">
        {{each Suggests as value i}}
            <div class="mainCommodity">
                <div class="shopInfo">
                    <div class="shopMsg">
                            <input type="checkbox" name="shopMsg" id='{{value.label}}' class='shopMsg-input' autocomplete="off">
                            <label for="{{value.label}}">店铺:
                        <a href="#">{{value.shop}}</a>
                    </div>
                </div>
                <div class="commodityInfo">
                    <ul>
                        <li class='td-chk'>
                            <div class="td-inner">
                                <input type="checkbox" name='checkbox' autocomplete="off" >
                            </div>
                        </li>
                        <li class='td-item'>
                            <div class="td-inner">
                                <a href="#" class='desImg'>
                                    <img src="{{value.image}}" alt='{{value.Txt}}'>
                                </a>
                                <div class="item-info">
                                    <div class="item-basis-info">
                                        <a href="#">{{value.Txt}}</a>
                                    </div>
                                    <div class="item-other-info">
                                        <div class="item-other-space"></div>
                                        <div class="item-other-list">
                                            <a href="#" title='支持信用卡支付'>
                                                <img src="{{value.bandCard}}" alt="支持信用卡支付">
                                            </a>
                                            <a href="#" class='sevenDay' title='7天无理由'>
                                                <img src="{{value.sevenDay}}" alt="7天无理由">
                                            </a>
                                            <a href="#" title='消费者保障服务'>
                                                <img src="{{value.guarantee}}" alt="消费者保障服务">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class='td-info'>
                            <div class="td-info-msg">
                                <p>{{value.color}}</p>
                                <p>{{value.size}}</p>
                            </div>
                        </li>
                        <li class='td-price'>
                            <div class="td-inner">
                                <p class='non-discount'>{{value.nonDiscount}}</p>
                                <p class='discount'>¥{{value.num}}.00</p>
                                <div class="promotion">
                                    卖家促销
                                    <i class='promotionIcon'></i>
                                </div>
                                <div class="proSlidedown">
                                    <p class='newPro'>卖家促销:新品大特价</p>
                                    <p>优惠:¥200.00</p>
                                </div>
                            </div>
                        </li>
                        <li class='td-amount'>
                            <div class="item-amount">
                                <a href="#" class='amount-left amount-color'>-</a>
                                <input type="text" name='amountNum' value='1' autocomplete="off">
                                <a href="#" class="amount-right">+</a>
                            </div>
                            <div class="stock">
                                {{value.max}}
                            </div>
                            <div class="outNum">
                                最多只能购买
                                <!--
                                --><em>件</em>
                            </div>

                            </li>
                        <li class='td-sum'>
                            <em>¥</em><!--
                            -->{{value.num}}
                        </li>
                        <li class='td-operation'>
                            <p><a href="#" class='delete'>删除</a></p>
                        </li>
                    </ul>
                </div>
            </div>
        {{/each}}
    </script>
    <script id="search" type="text/html">
        <ul>
            {{each Suggests as value i}}
                <li>{{value.Txt}}</li>
            {{/each}}
        </ul>
    </script>
    <script id='delete' type='text/html'>
        <div class="undo-wrapper">
            <div class="deleteCom">
                <p>
                    成功删除
                    <em>1</em>
                    件宝贝,如果有无,可
                    <a href="#" class='turnBack'>撤销本次删除</a>
                </p>
            </div>
        </div>
    </script>

 

JS模板引擎

  下边代码中是急需被渲染的模版。比手写拼接字符串轻易比相当多,而且成效高,错误率低。

  最终放上js完结相应成效的一些至关心珍视要代码。

$.get('search.json',{'Query':$val}, function(data) {
    for (var i = 0; i < data.length; i++) {
        //如果值与json中的query字段匹配,动态加载html
        if ($val === data[i][0].Query) {
        var results = data[i][0].Results[0];
        //js模板引擎
        var $html = template('search',results);
        $('.list').html($html)
        }
    }
});

  这里想说的是给template方法的第三个参数和循环表达式要求被循环的字段。

  第一点是给template方法的第1个参数。第贰个参数字传送入了results,这里的results实质上正是在地点例子中data对象。只但是在JSON数据中results是八个数组。

  第二点是在JS模板引擎中。在模板中是如此写的:{{each
Suggests as value
i}},这里的Suggests其实就一定于data对象中的list属性。在data对象中,list是一个数组,并且各类值都以字符串;而在results数组中,Suggests是二个数组,但是它的每贰个值都是目迷五色数据类型,是目标。纵然对数据类型不亮堂的,可早前往那篇小说:Javascript对象

图片 13

  

  artTemplate使用实战就介绍完了。在template方法的第一个参数和遍历表达式中须求被遍历的数额比较轻巧写错,希望同学能够小心那一点。

  假使有不知情恐怕写错的地点,能够给自身留言。

 

  参谋小说

  artTemplate

  atc-前端模板预编写翻译器

  高质量JavaScript模板引擎原理分析

  最简便的JavaScript模板引擎

  简短JavaScript模版引擎优化

  javascript模板引擎原理,几行代码的事儿

  三叔手记(7):构建筑组织和的JavaScript模板小引擎

  基于HTML模板和JSON数据的JavaScript交互

 

  源码地址:GitHub:Uncle-Keith

  转发请注明出处:

 

  完。谢谢我们的阅读。

相关文章