通过Mock随机生成得数据制作页面元素、ArtTemplate的使用

Mock

Mock支持随机生成中英文的文本、数字、布尔值、日期、图片、链接等各种数据，前端自己生成数据进行场景的模拟，并且使用十分方便。
首先需要导入Mock的js文件，可以是本地文件，也可以去BootCDN上复制在线链接。接下来是Mock数据的语法：

let obj=Mock.mock({
    'userlist|10':[//生成10个（可以在|后面写数据的数量）
        {   //冒号前的名字是变量名，后面是取值（具体数据格式名字见BootCDN的使用文档）
            'uid|+1':1,   //+1表示制造的数据+1递增显示
            'username':"@cname", //加c便是是汉字
            'city':'@city(true)',//city是城市，（true）表示数据加省份
            'email':"@email",
            'tel':"@integer(1000000000,19999999999)",//integer表示整数（最小数据，最大数据）
            'ttt|1111-2222':11111,//造数据的第二种写法，取值范围写在|后，并在：后写出示例数据
             'cardid':"@id",
             'avatar':'@image'//image表示生成图片链接    
         }
     ]
 })
console.log(JSON.stringify(obj));//将数据转换为JSON格式方便使用，并将所得到的的数据写入table.JSON文件中。

使用Mock制作表格

制作表头，数据通过Mock随机生成并添加入表格中

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            width: 100%;
            text-align: center;
            border-collapse: collapse;
        }
        td,th{
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>

 <div class="contain">
        <button>获取</button>
    </div>
    <table>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>地址</td>
            <td>邮箱</td>
            <td>电话号码</td>
            <td>身份证号</td>
            <td>头像</td>
        </tr>
    </table>

接下来是Js部分

 <script>
 $(function(){
        $('button').click(function(){
            $.get("./table.json", function(data){//通过ajax方法获取诗句
                console.log(data.userlist);
                    data.userlist.forEach(item=>{
                        let tr=$('<tr/>')
                        tr.append(`//通过使用模板字符串的方式添加数据
                        <td>${item.uid}</td>
                        <td>${item.username}</td>
                        <td>${item.city}</td>
                        <td>${item.email}</td>
                        <td>${item.tel}</td>
                        <td>${item.cardid}</td>
                        <td>${item.avatar}</td>
                        `)
                        $('table').append(tr)
                    })
                }
            )
        })
})
</script>

在JS中写HTML页面元素没有提示，有时候拼写错误很那发现，这时候使用Arttemplate，就很有必要而且很方便。例:使用Arttemplate.js将数据向制作出来的页面元素传输。
arttemplate.js文件也需要本地引入或者使用在线链接

 <div class="contain">
        <ul class="menu1">
            <script id="menu" type="text/html">
            {{each $data item i}}
            <li>{{item.username}}</li>
            {{/each}}
            //以上为模板，当重复一样的格式的时候就可以使用each，当为单一格式的时候each就可以删除。
            </script>
        </ul>
    </div>

<script>
        $(function(){
            $.get('./table.json',function(data){
                console.log(template('menu',data.userlist));
                console.log($('.menu1'));
                $('.menu1').html(template('menu',data.userlist))
                //menu为所要添加数据的容器。逗号后面为数据   
            })
        })
</script>