mock.js生成数据，通过template显示到HTML

首先mock生成数据需要

引入相关链接，他们有自己的模拟数据生成。在后端没有给到数据时，我们很需要这个
然后
template的好处是，有提示，不容易出错

 let obj = Mock.mock({
            'userlist|10': [
                {
                    "uid|+1": 1001,
                    name: "@cname",//名字
                    city: "@city(true)",
                    email: "@email",
                    cardid: "@id",
                    tel: "@integer(10000000000,199999999999)",
                    avatar: "@image"
                }
            ]
        })
        console.log(JSON.stringify(obj.userlist));//转换成json打印

 <table>  //对应的生成的数据，这里我们存放的是通过template生成的
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>城市</td>
            <td>邮箱</td>
            <td>身份证号</td>
            <td>电话</td>
            <td>头像</td>
        </tr>
        <tbody id="content">
            <script id="t" type="text/html">
                {{each $data item i }}
                    <tr>
                        <td>{{item.uid}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.city}}</td>
                        <td>{{item.email}}</td>
                        <td>{{item.cardid}}</td>
                        <td>{{item.tel}}</td>
                        <td>
                            <img src="{{item.avatar}}" style="width:100px;height:100px" srcset="">
                        </td>
                    </tr>
                {{/each}}
            </script>
        </tbody>
    </table>

```javascript
ajax 调用刚刚生成的json数据
 $('button').click(function () {
            $.ajax({
                type: "GET",
                url: "data.json",
                // cache
                beforeSend() {
                    $('.loading_bar').show()
                },
                success(zz) {
                    $('#content').html(template('t', zz));
                },
                error() {
                    console.log('error');
                },
                complete() {
                    setTimeout(() => {
                        $('.loading_bar').hide()
                    }, 1000);
                }
            })
        })