mock.js增删改查的用法

向右看齐 2022-12-28 09:05 293阅读 0赞

今天对mock.js了解了一下，觉得还可以，然后把增删改查用mock.js做了一遍，有什么不对，希望大家指出来哈，好，废话不多说上代码。  
先引入文件

HTML页面增删改查按钮

假数据

/*模拟假数据的方式*/
    		var arr = [
    		{
        name: 'fei',age: 20,id: 1},
    		{
        name: 'liang',age: 30,id: 2},
    		{
        name: 'jun',age: 40,id: 3},
    		{
        name: 'ming',age: 50,d: 4}
    		]

添加

$("#add").click(function() {
        
    			Mock.mock('http://www.bai.com', 'push', function(options) {
        
    				arr.push({
        name:'jia',age:18,id:5}) //要添加的数据
    				return arr; //返回这个数组,也就是返回处理后的假数据
    			})
    			$.ajax({
        
    				url: 'http://www.bai.com',
    				type: "PUSH",
    				data: {
        
    					id: 5//需要添加id=5的数据
    				},
    				dataType: 'json',
    				success: function(e) {
        
    					console.log(e)
    				}
    			})
    		})

删除

$("#cancel").click(function() {
        
    			Mock.mock('http://www.bai.com', 'delete', function(options) {
        
    				var id = parseInt(options.body.split("=")[1]) //获取删除的id
    				var index;
    				for (var i in arr) {
        
    					if (arr[i].id === id) {
         //在数组arr里找到这个id
    						index = i
    						break;
    					}
    				}
    				arr.splice(index, 1) //把这个id对应的对象从数组里删除
    				return arr; //返回这个数组,也就是返回处理后的假数据
    			})
    			$.ajax({
        
    				url: 'http://www.bai.com',
    				type: "DELETE",
    				data: {
        
    					id: 1 //假设需要删除id=1的数据
    				},
    				dataType: 'json',
    				success: function(e) {
        
    					console.log(e)
    				}
    			})
    		})

编辑

$("#redact").click(function(){
        
    			Mock.mock('http://www.bai.com', 'change', function(options) {
        
    				var id = parseInt(options.body.split("=")[1]) //获取编辑的id
    				for (var i in arr) {
        
    					if (arr[i].id === id) {
         //在数组arr里找到这个id
    						arr[i].name = decodeURI(options.body.split("=")[2])//对其进行解码
    					}
    				}
    				return arr; //返回这个数组,也就是返回处理后的假数据
    			})
    			$.ajax({
        
    				url: 'http://www.bai.com',
    				type: "CHANGE",
    				data: {
        
    					id: 2,//需要编辑id=2的数据
    					name:"已修改"//修改过后的名字
    				},
    				dataType: 'json',
    				success: function(e) {
        
    					console.log(e)
    				}
    			})
    		})

搜索

$("#hunt").click(function(){
        
    			Mock.mock('http://www.bai.com', 'post', function(options) {
        
    				var id = parseInt(options.body.split("=")[1]) //获取查找的id
    				var item={
        }
    				for (var i in arr) {
        
    					if (arr[i].id === id) {
         //在数组arr里找到这个id
    						item=arr[i];
    					}
    				}
    				return item; //返回这个数组,也就是返回处理后的假数据
    			})
    			$.ajax({
        
    				url: 'http://www.bai.com',
    				type: "post",
    				data: {
        
    					id:1//要查找的数据的id
    				},
    				dataType: 'json',
    				success: function(e) {
        
    					console.log(e)
    				}
    			})
    		})

如果有什么不足，可以请各位大佬留言Thanks♪(･ω･)ﾉ。