用假数据模拟API接口

Posted 2023-03-14

参考技术A 创建一个json文件，把假数据写出来



    "data":[

           

                "id":1,

                "price":11000.00,

                "num":1,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/1.jpg"

            ,

           

                "id":2,

                "price":800.00,

                "num":2,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/2.jpg"

            ,

           

                "id":3,

                "price":990.00,

                "num":1,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/7.jpg"

            ,

           

                "id":4,

                "price":10.00,

                "num":5,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/8.jpg"

            ,

           

                "id":4,

                "price":12400.00,

                "num":3,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/9.jpg"

           

        ]



引入文件模板引擎文件和jQuery文件，引在body标签后面就行了

在html页面写接受模板引擎和json数据的标签。

<div class="xyn_view">

            <!-- 订单列表 -->

            <div class="cart_order">

                <ul class="cart_ul">

                </ul>

            </div>

</div>

写模板引擎，在html页面写，记得给script标签加ID

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

            <!-- //<![CDATA[ -->

            <!-- // 模板引擎 -->

            each data as value i

                <li>

                    <div class="cart_list">

                        <!-- mui复选框按钮 -->

                        <div class=" mui-checkbox cart_list_btn">

                            <label class="list_btn_label"></label>

                            <input name="checkbox1" value="Item 1" type="checkbox" />

                        </div>

                        <!-- 图片 -->

                        <div class="picture_wrap">

                            <img class="cart_list_picture" src="value.picture" alt="" />

                        </div>

                        <!-- 商品描述信息 -->

                        <div class="cart_list_content">

                            <span class="yichu_wrap"> <span class="yichu">value.goods_name</span>

                            </span>

                            <ul class="list_content_price">

                                <span class="priceL">￥value.price.00</span>

                                <!-- 商品数量增加 -->

                                <div class="mui-numbox">

                                    <!-- "-"按钮，点击可减小当前数值 -->

                                    <button class="mui-btn mui-numbox-btn-minus xyn_minus" type="button">-</button>

                                    <input class="mui-numbox-input xyn_num" type="number" value="value.num"/>

                                    <!-- "+"按钮，点击可增大当前数值 -->

                                    <button class="mui-btn mui-numbox-btn-plus xyn_plus" type="button">+</button>

                                </div>

                            </ul>

                        </div>

                    </div>

                </li>

            /each

            <!-- //]]> -->

        </script>

连接json文件，并把json文件里面的内容赋值到html页面。接受json数据的标签在第三步里，我这里用ul来接收。第五步写在js文件中，也可以写在html页面的script标签中

$(function()

                  $.ajax(

                      type: 'get',

                      url: './cart.json',   

                      dataType: 'json',

                      success: function(data)

                          console.log(data);

                            var html = template('mainTpl', data);

                            $('.cart_ul').html(html);

                        ,

                        error: function(data)

                            console.dir(data);

                            $("#info").html("服务器发生错误");

                       

                    );

            )