[技术分享]Mock.js 带参数请求

xperia发布于6 个月前 • 301 次阅读

Mock.js的作用

mock.js的作用是生成随机数据,拦截 Ajax 请求,总的来说就是使用前端的方式来实现模拟后端的api获取的数据。

使用方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mock使用</title>
        <style>

        </style>
    </head>
    <body>
        <pre></pre>
        <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script>
            //定义数据
            const list = Mock.mock({
                "list|10-20":[
                    {
                        "id|+1":0,
                        "name|+1":["a","b","c"]
                    }
                ]
            })

            //定义mock的接口,请求方式,数据
            Mock.mock("www.baidu.com","get",list);

            //请求数据
            $.ajax({
                url: 'www.baidu.com',
                type: "get",
                success: function(data) {
                    $("pre").text(data);
                },
                error: function() {
                    console.log("error");
                }
            })
        </script>
    </body>
</html>

那么post的方式也是一样,不过post的方式一般都是需要带参数params,请转移Mock.js的api中的Mock.mock(),从中我们可以看到Mock.mock(url,type,function( options ) )中的function(options)函数,其中的options就是我们请求数据的信息,其中包括url,params,type。请看实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mock使用</title>
        <style>

        </style>
    </head>
    <body>
        <h3></h3>
        <p></p>
        <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script>
            //定义数据
            const list = function (options){
                $("h3").text("请求的参数(data):" + JSON.stringify(options,null,3) );
                return Mock.mock({
                "list|10-20":[
                    {
                        "id|+1":0,
                        "name|+1":["a","b","c"]
                    }
                ]
            })
            } 

            //定义mock的接口,请求方式,数据
            Mock.mock("www.baidu.com","post",list);

            //请求数据
            $.ajax({
                url: 'www.baidu.com',
                data:{
                    start:0,
                    end:10
                },
                type: "post",
                success: function(data) {
                    $("p").text("数据:" + data);
                },
                error: function() {
                    console.log("error");
                }
            })
        </script>
    </body>
</html>

实例:带参数post请求

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mock使用</title>
        <style>

        </style>
    </head>
    <body>
        <h3></h3>
        <p></p>
        <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script>
            //定义数据
            const list = function(options) {
                $("h3").text("请求的参数(data):" + JSON.stringify(options, null, 3));

                const arr = options.body.split("&");
                let params = Object();
                arr.forEach(function(item, index) {
                    let arrItem = item.split("=");
                    params[arrItem[0]] = parseInt(arrItem[1]);
                })

                let list = Mock.mock({
                    "list|10-20": [{
                        "id|+1": 0,
                        "name|+1": ["a", "b", "c"]
                    }]
                })

                return list.list.slice(params.start,params.end);
            }

            //定义mock的接口,请求方式,数据
            Mock.mock("www.baidu.com", "post", list);

            //请求数据
            $.ajax({
                url: 'www.baidu.com',
                data: {
                    start: 0,
                    end: 10
                },
                type: "post",
                success: function(data) {
                    $("p").text("数据:" + data);
                },
                error: function() {
                    console.log("error");
                }
            })
        </script>
    </body>
</html>

实现增删数据

上面我们已经使用过带参数进行请求数据了,那么实现增删除数据该如何操作呢? 增删除实现思路:

  • 增删除的数据是规定的,所以在定义数据是写死的。
  • 增删除数据是接受字段和标志,比如删除对应id的数据。

实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mock使用</title>
        <style>

        </style>
    </head>
    <body>
        <h3>删除了id=2和id=3的2项</h3>
        <pre></pre>
        <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script>
            //定义数据
            const data = [{
                name: "ll",
                id: 0
            }, {
                name: "oo",
                id: 1
            }, {
                name: "hh",
                id: 2
            }, {
                name: "uu",
                id: 3
            }];

            let list = function(options){
                console.log(options);
                let id = parseInt(options.body.split("=")[1]);//获取删除的id

                for(let i=0 ; i<data.length ; i++){
                    if(data[i].id === id){
                        data.splice(i,1);
                    }
                }
                console.log(data);
                return data;
            }

            //定义mock的接口,请求方式,数据
            Mock.mock("/removeItem", "post", list);

            //请求数据
            $.ajax({
                url: '/removeItem',
                data: {
                    id: 2
                },
                type: "post",
                success: function(data) {
                    $("pre").text("数据:" + data);
                },
                error: function() {
                    console.log("error");
                }
            })

            //请求数据
            $.ajax({
                url: '/removeItem',
                data: {
                    id: 3
                },
                type: "post",
                success: function(data) {
                    $("pre").text("数据:" + data);
                },
                error: function() {
                    console.log("error");
                }
            })

        </script>
    </body>
</html>

共收到 1 条回复
y

完美