Mock数据实现增删改查

最新推荐文章于 2023-06-02 08:32:55 发布
最新推荐文章于 2023-06-02 08:32:55 发布
阅读量1.1w 收藏 41
点赞数 5
分类专栏： 笔记 工作知识总结 文章标签： mock mock实现增删改查
本文为博主原创文章，未经博主允许不得转载
本文链接：https://blog.csdn.net/qq_39197547/article/details/82789252
版权

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>&nbsp;&nbsp;&nbsp;<span><span>姓名：'+item.name+'</span>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<span><span>姓名：'+item.name+'</span>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<span><span>姓名：'+item.name+'</span>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<span><span>姓名：'+item.name+'</span>&nbsp;&nbsp;&nbsp;<span>年龄：'+item.age+'</span></li>';
                })
                $("#changeData").append(lilist)
            } 
            console.log(e.data)
        }
    })
})
</script>
</html>

效果图如下：

随风小薇
关注
  • 5
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-node-sqlite3:vue + node + sqlite3实现增删改查
03-19
vue-node-sqlite3 vue + node + sqlite3实现增删改查 backend后端文件 前前端文件 整体实现登录注册（jwt）增删改查都需携带令牌 网上vue + node + sqlite3完整的实现这一套功能还是很少的，期待你的Star
vue-cli+mock增删改查
08-06
使用mockjs可以事先模拟数据，前提是和后端约定好了数据接口，怎样的数据。使用mock就可以生成你要的数据了，从而实现开发时前后端分离。
Mock.js模拟数据，脱离后端独立开发，实现增删改查功能
唐策的博客
06-21 2709
　在我们的生产实际中，后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端接口呢，答案是肯定的。应该有人通过编写json文件来模拟后台数据，但是很局限，比如增删改查这些接口怎么实现呢，于是今天我们来介绍一款非常强大的插件Mock.js，可以非常方便的模拟后端的数据，也可以轻松的实...
【mock】手把手带你用mock写自定义接口+mock常用语法
这个Bug怎么解啊？
02-11 4820
mock自定义接口完整流程，任意项目都可以用，这里主要用vue3来做案例演示，其实没多大关系。包括发送请求、添加请求、删除请求以及mock的常用基本语法
Vue后台 - 利用 mockjs 完成数据的获取、编辑、增加、删除和分页
小f要努力啦的博客
09-25 1119
利用 mockjs 完成数据的获取、编辑、增加、删除和分页
使用Mock模拟接口实现增删改查、分页、多条件查询
weixin_51747462的博客
08-05 1251
使用Mock模拟接口实现增删改查、分页、多条件查询（英语）
mock.js增删改查
Y_web的博客
07-20 1440
mock.js增删改查 引入mock.js和jQuery <script src="http://mockjs.com/dist/mock.js"></script> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> 2.声明一个数组 var arr = [{ name: '1', age: 20, id: 1 },{ na
前端在项目中使用mockjs模拟数据的增删改查
weixin_45313351的博客
11-28 4568
学习使用mockjs模拟数据
Mockjs入门级操作 && 案例操作(实现增删改查功能) (一)
努力小张 https://nice_995.gitee.io/blog || https://skye-iiii.github.io/Blog/
03-27 2087
Mockjs入门级操作 && 案例操作(实现增删改查功能)
在vue中使用JSON-Server？Mock数据的增删改查
weixin_40381947的博客
06-02 1794
JSON-Server 是用于快速搭建基于 JSON 数据文件的 REST API 的工具。它可以将 JSON 数据文件作为 REST API 的后端服务，通过 HTTP 请求进行数据的增删改查操作。使用 json-server 不需要编写后端代码和数据库，仅需提供一个 JSON 文件即可快速搭建 REST API 服务，方便前端开发人员进行接口测试和模拟数据。 而Mock数据是一种虚拟的数据，用于在前端开发中模拟后端数据。在使用Axios请求Mock数据时，可以对Mock数据进行增删改查操作
vue+element ui搭建的DEMO增删改查+分页+导出
02-16
vue+element ui搭建的DEMO，实现基本功能 增删改查 分页 导出，数据为模拟数据、模拟接口，项目中依赖包需要自行下载npm install。供初学者参考。
《vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能》mock文件
06-02
对应《vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能》博客
vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能
02-14
vue3-element-plus-typescript基于vue-cli / vite + vue3.0 + element-plus +打字稿+ mock数据的后台管理系统列表页增删改查功能vue-cli版： : vite版： :系统模块数据是mock数据使用了Vue3.0全家桶，Element-plus和...
vue全套视频开发
热门推荐
wangweiruning的博客
07-11 2万+
vue全套视频开发https://pan.baidu.com/s/1aDgFkvwhCg71Vsaz5ffyvg 密码:523k 永久有效
hui框架开发APP
wangweiruning的博客
07-20 6039
hui是类似于mui框架的app构建框架，通过一段时间学习，写了个app例子 GitHub地址   等待中.......... 数据来源--------聚合数据 hui框架地址：http://www.hcoder.net/hui/docs   先看下效果吧                                   功能就这么简单 ...
微信H5页面ios分享失效
wangweiruning的博客
09-07 5480
最近开发一个微信H5页面，需要添加分享。 ios分享出去就描述变链接，缩略图也变连接，但android一切正常。   在Android上面微信分享一切正常，但是在iOS上面分享出去的却是错误的，在网上查找了很多东西。总结了下一下 1.iOS的分享图片不能超过32kb。看了下我的分享图片，没超出32kb，所以不是这个问题。&lt;/p&gt; 2.link参数带中文或者特殊字符，带中文的u...
koa文件上传下载
wangweiruning的博客
07-31 5248
上传下载在web应用中是比较常见的，无论是图片还是其他文件。在koa2中，我们可以使用中间件帮助我们快速实现功能 文件上传 在前端上传文件，我们都是通过表单来上传，而上传文件，在服务器端并不能像普通参数一样通过ctx.request.body获取 我们可以使用koa-body中间件来处理文件上传，可以将请求体拼接到ctx.request中。   //app.js const koa ...
移动端H5部分区域缩放并移动
wangweiruning的博客
06-23 4531
最近开发个项目，需要实现div内容的缩放（包含图片等内容），但不影响其他内容 开始没头绪，网上找了许多都是在index.html中实现，不满足我的需求在react里面实现 找了很久，总算发现一个写的不错的，能够满足在纯html中实现，也可以在react中实现的东西 我的react代码 import React from 'react' import {Link,withRou...
vite-plugin-mock 增删改查
最新发布
11-09
vite-plugin-mock 是一个基于 Vite 的插件，用于模拟接口数据，方便前端开发和调试。它可以实现简单的增删改查操作。下面我将分别介绍各个操作的实现方式。 1. 增加数据：在使用 vite-plugin-mock 时，我们可以在 mock 目录下创建一个 js 文件，然后在其中定义一个路由，指定请求方法和路径。在路由的处理函数中，我们可以通过获取请求的参数，然后将参数作为新的数据存储起来。例如，在处理 POST 请求时，我们可以使用 `ctx.body` 来获取请求体中的参数，然后将参数存储到一个数组或者对象中。 2. 删除数据：通过 vite-plugin-mock，我们可以在路由的处理函数中获取请求参数，然后根据参数中指定的标识符或条件，将对应的数据从存储中删除。例如，处理 DELETE 请求时，可以通过参数中的 id 来确定要删除的数据，并从存储的数组中将其删除。 3. 修改数据：在处理 PUT 或 PATCH 请求时，我们可以通过路由的处理函数获取请求参数，然后根据参数中指定的标识符或条件，找到对应的数据。接着，我们可以对数据进行修改，例如修改某个字段的值，然后将修改后的数据更新到存储中。 4. 查询数据：当处理 GET 请求时，我们可以通过路由的处理函数获取请求参数，然后根据参数中指定的标识符或条件，从存储中查询对应的数据。最后，将查询结果作为响应返回给前端。 总的来说，使用 vite-plugin-mock 可以方便地模拟增删改查操作。我们只需要定义相应的路由和处理函数，然后在函数中根据请求参数操作数据存储即可。这样，前端开发人员可以在开发阶段快速获取和操作模拟的接口数据，提高开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

随风小薇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值