mock.js简单使用

安装mock,js

1.script标签引入

<script src="http://mockjs.com/dist/mock.js"></script>

2.npm安装

npm install mockjs

在vue中使用

1.新建test.js文件

// 引入Mock.js
import Mock from 'mockjs'

2.使用mock()方法模拟请求接口

mock() 第一个参数填写请求地址(自定义)；第二个参数是请求到的数据

3.在vue项目main.js中引入

4.mock使用具体代码

模拟获取数据

// 模拟数据
let classify = [{id: 0，name: '鞋包'},{id: 1，name: '裤子'},{id: 2,name: '衣服'}]
// 写法一
Mock.mock('https://www.api.com/class',classify)
// 写法二
Mock.mock('https://www.api.com/class', 'get', () => {return classify
})// 发起请求实例
axios({method: 'get',url:'https://www.api.com/class',data: {}
})

模拟删除数据

// 模拟数据
let classify = [{id: 0，name: '鞋包'},{id: 1，name: '裤子'},{id: 2,name: '衣服'}]Mock.mock('https://www.api.com/deleteclass','delete',function(classify){var id = parseInt(options.body.split("=")[1])//获取ajax转递的idvar index;for(var i in classify){if(classify[i].id===id){//在数组arr里找到这个idindex=ibreak;}}classify.splice(index,1)//把这个id对应的对象从数组里删除return classify;//返回这个数组,也就是返回处理后的假数据
})// 发起请求实例
axios({method: 'delete',url:'https://www.api.com/deleteclass',data: {id: 1 //假设需要删除id=1的数据}
})

模拟编辑数据

Mock.mock('https://www.api.com/edit','post',function(res){let id = parseInt(res.body.split("=")[1]);for(let i = 0;i<arr.length;i++){if(arr[i].id == id){arr[i].name = decodeURI(res.body.split("=")[2])}}return arr;
})// 发起请求示例
axios({url:'https://www.api.com/edit',method: 'post',responseType: 'json',data:{id:3,name:'修改'}
}).then(function(res) {console.log(res)});

模拟新增数据

Mock.mock('https://www.api.com/add','post',function(res){let id = parseInt(res.body.split("=")[1]);console.log(res);var name = decodeURI(res.body.split("=")[2])var obj = {id:id,name:name}arr.push(obj);return arr;
})  axios({url:'https://www.api.com/add',method: 'post',responseType: 'json',data:{id:4,name:'添加'}
})

mock.js简单使用相关推荐

mock.js+vue的简单使用
1 安装 npm install mockjs --save 2 在mock文件夹,并在mock文件夹下新建index.js. 3 在main.js中引入. // main.jsVue.config. ...
mock.js 使用说明（简单而有效）
一.Mock.js 初入门径 1．什么是mock.js? Mock.js (官网http://mockjs.com/)是一款模拟数据生成器,旨在帮助前端攻城狮独立于后端进行开发,帮助编写单元测试. ...
Mock.js的简单使用
Mock.js的简单使用简述 Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试. 功能根据数据模板生成模拟数据. 模拟 Ajax 请求,生成并返回模拟 ...
mock.js如何使用？简单易懂，一学就会，一篇文章即可出师
1,mock.js是什么? mockjs是生成随机数据的一款前端工具,用来模拟 Ajax 请求,生成并返回模拟数据 2,为什么用mockjs? 当程序员做项目开发时,前端工程师要请求后端做好的数据时, ...
Mock.js 和Node.js详细讲解
原文地址:http://www.manongjc.com/article/10503.html <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开 ...
mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据
Easy Mock以及Vue+Mock.js模拟数据一.Mock.js简介 Mock.js是一个可以模拟后端数据,也可以模拟增删改查操作的js库基础语法规范数据模板中的每个属性由 3 部分构成: ...
Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
一统江湖的大前端（2）—— Mock.js + Node.js 如何与后端潇洒分手
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
dva ajax请求,dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
Mock.js有什么用
Mock.js有什么用下载印象笔记 Mock.js有什么用 Mock.js 前后端分离开发开发过程当中,经常会遇到以下几个尴尬的场景: 1. 老大,接口文档还没输出,我的好多活干不下去啊 ...

mock.js简单使用

安装mock,js

在vue中使用

mock.js简单使用相关推荐

最新文章

热门文章