Mock数据实现增删改查

逃离我推掉我的手 2021-09-16 10:06 1162阅读 0赞

mock的增删改查

demo.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div>
           <h2>看你这波13装的，给你82分，多了怕你骄傲，剩下的给你来个666.</h2>
            <div>
                <button id="delet">删除</button><hr />
                <ul id="deleteData"></ul>
                <button id="add">增加</button><hr />
                <ul id="addData"></ul>
                <button id="change">修改</button><hr />
                <ul id="changeData"></ul>
                <button id="finds">查找</button>
                <ul id="findsData"></ul>
            </div>
        </div>
    </body>
    <script src="Mock.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
    
    var arr=[
        {name:'fei',age:20,id:1},
        {name:'liang',age:30,id:2},
        {name:'jun',age:40,id:3},
        {name:'ming',age:50,id:4}
    ]
    
    /*参数处理*/
    function parseQueryStr(queryStr){
          let queryData={};
          
        console.log("queryStr==",queryStr)
     
        let queryStrList = queryStr.split('&');//去除所有的&连接符
            console.log(queryStrList); 
      
      for( let [index,queryStr] of queryStrList.entries() ){
            let itemList = queryStr.split('=');
            queryData[itemList[0]] = decodeURIComponent(itemList[1]);
        } 
    return queryData
    }
    /*模拟删除数据的方式*/
    Mock.mock('http://www.bai.com/delet','delete',function(options){
        console.log(options.body.params)
        const datas= parseQueryStr(options.body);
        var id = datas.id;
        var name=datas.name;
        var index;
        for(var i in arr){
            if(arr[i].id==id || arr[i].name===name){//在数组arr里找到这个id
                console.log(i)
                index=i;
                arr.splice(index,1)//把这个id对应的对象从数组里删除
            }
        }
        const data= {
            data:arr,
            status:1,
            message:"删除成功！"
        }
        return data;//返回这个数组,也就是返回处理后的假数据
    })
    
    /*模拟添加数据的方式*/
    Mock.mock("http://www.bai.com/add",'post',function(options){
        console.log(options.body)
        const datas= parseQueryStr(options.body);
        console.log(datas)
        var id = datas.id;
        var ishave=true;
        for(var i in arr){
            if(arr[i].id==id){//在数组arr里找到这个id
                ishave=!ishave;
              }  
        }
        arr.push(datas);
             data={
                data:ishave?arr:null,
                status:1,
                message:ishave?"添加成功！":"数据已存在"
        }
        return data
    })
    /*模拟查找数据的方式*/
    Mock.mock("http://www.bai.com/finds",'post',function(options){
        console.log(options.body)
        const datas= parseQueryStr(options.body);
        console.log(datas)
        var id = datas.id;
        var item={};
        for(var i in arr){
            if(arr[i].id==id){//在数组arr里找到这个id
                item=arr[i];
              }  
        }
             data={
                data:item,
                status:1,
                message:"搜索成功！"
        }
        return data
    })
    /*模拟修改数据方式*/
    Mock.mock("http://www.bai.com/change",'post',function(options){
        console.log(options.body)
        const datas= parseQueryStr(options.body);
        console.log(datas)
        var id = datas.id;
       
        for(var i in arr){
            if(arr[i].id==id){//在数组arr里找到这个id
                arr[i]=datas;
              }  
        }
             data={
                data:arr,
                status:1,
                message:"修改成功！"
        }
        return data
    })
    /*删除*/
    $("#delet").on('click',function(){
        $.ajax({
            url:'http://www.bai.com/delet',
            type:"DELETE",
            data:{
                id:1,//假设需要删除id=1的数据
                name:'jun'
            },
            dataType:'json',
            success:function(e){
                var lilist = "";
                if (e.status===1) {
                    alert(e.message)
                    e.data.map(item=>{
                        lilist+='<li id='+item.id+'><span>序号'+item.id+'</span>   <span><span>姓名：'+item.name+'</span>   <span>年龄：'+item.age+'</span></li>';
                    })
                    $("#deleteData").append(lilist)
                } 
                console.log(e.data)
            }
        })
    })
    /*添加*/
    $("#add").on('click',function(){
        $.ajax({
            url:'http://www.bai.com/add',
            type:"POST",
            data:{
                id:parseInt(Math.random()*100),//假设需要删除id=1的数据
                name:'张金宝',
                age:33+parseInt(Math.random()*100)
            },
            dataType:'json',
            success:function(e){
                var lilist="";
                if (e.status===1) {
                    alert(e.message)
                    e.data.map(item=>{
                        lilist+='<li id='+item.id+'><span>序号'+item.id+'</span>   <span><span>姓名：'+item.name+'</span>   <span>年龄：'+item.age+'</span></li>';
                    })
                    $("#addData").append(lilist)
                } 
                console.log(e.data)
            }
        })
    })
    /*查询数据*/
    $("#finds").on('click',function(){
        $.ajax({
            url:'http://www.bai.com/finds',
            type:"POST",
            data:{
                id:1,//假设需要删除id=1的数据
            },
            dataType:'json',
            success:function(e){
                var lilist="";
                if (e.status===1) {
                    alert(e.message)
                    var item =e.data;
                        lilist='<li id='+item.id+'><span>序号'+item.id+'</span>   <span><span>姓名：'+item.name+'</span>   <span>年龄：'+item.age+'</span></li>';
                    $("#findsData").append(lilist)
                } 
                console.log(e.data)
            }
        })
    })
    
    /*修改数据*/
    $("#change").on('click',function(){
        $.ajax({
            url:'http://www.bai.com/change',
            type:"POST",
            data:{ 
                name:'张金宝',
                age:33+parseInt(Math.random()*10),
                id:1,//假设需要删除id=1的数据
               
            },
            dataType:'json',
            success:function(e){
                var lilist="";
                if (e.status===1) {
                    alert(e.message)
                    e.data.map(item=>{
                        lilist+='<li id='+item.id+'><span>序号'+item.id+'</span>   <span><span>姓名：'+item.name+'</span>   <span>年龄：'+item.age+'</span></li>';
                    })
                    $("#changeData").append(lilist)
                } 
                console.log(e.data)
            }
        })
    })
    </script>
    </html>

效果图如下：

![70][]

[70]: /images/20210908/41e2bb67fda34f578df5e08b1e91e256.png