mock.js详细用法

mock.js使用方法

MOCK.JS 是前端的一个模拟数据的库。这个库的使用，可以在前端开发时，就避免大量的后端请求。

1.定义

随机生成相应格式的数据。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

官方文档：Mock.js

2.安装

npm install mockjs --save

3. 使用方法

方法一，直接使用一个mock.js文件的情况下：

01 编写一个mock.js文件

const Mock = require('mockjs') //   这个是引用库const Random = Mock.Random    // 生成随机数let Result = {code: 200,msg: '操作成功',data: null
}// mock.mock的目的就是拦截目的，这样axios的访问，就可以被拦截了。但是一定要记得， 在main.js当中引入，只有引入了才生效。
Mock.mock('/captcha', 'get', () => {Result.data = {token: Random.string(32),captchaImg: Random.dataImage('120x40', 'p7n5w')}return Result
})Mock.mock('/login', 'post', () => {// 无法在header中传入数jwt// Result.code = 400// Result.msg = "验证码错误"return Result
})
Mock.mock('/sys/userInfo', 'get', () => {Result.data = {id: "1",username: "test",avatar: "https://image-1300566513.cos.ap-guangzhou.myqcloud.com/upload/images/5a9f48118166308daba8b6da7e466aab.jpg"}return Result
})Mock.mock('/logout', 'post', () => {return Result
})// 获取用户菜单以及权限接口
Mock.mock('/sys/menu/nav', 'get', () => {let nav = [{name: 'SysManga',title: '系统管理',icon: 'el-icon-s-operation',component: '',path: '',children: [{name: 'SysUser',title: '用户管理',icon: 'el-icon-s-custom',path: '/sys/users',component: 'sys/User',children: []},{name: 'SysRole',title: '角色管理',icon: 'el-icon-rank',path: '/sys/roles',component: 'sys/Role',children: []},{name: 'SysMenu',title: '菜单管理',icon: 'el-icon-menu',path: '/sys/menus',component: 'sys/Menu',children: []}]},{name: 'SysTools',title: '系统工具',icon: 'el-icon-s-tools',path: '',component: '',children: [{name: 'SysDict',title: '数字字典',icon: 'el-icon-s-order',path: '/sys/dicts',component: '',children: []},]}]let authoritys = ['sys:user:list', "sys:user:save", "sys:user:delete"]Result.data = {nav: nav,authoritys: authoritys}return Result
})

02 在main.js 经mock.js引入。

require("./mock.js")

03 在 vue的组件当中直接，axios就可以了。

getCaptcha() {this.$axios.get('/captcha').then(res => {console.log("/captcha")console.log(res)this.loginForm.token = res.data.data.tokenthis.captchaImg = res.data.data.captchaImgthis.loginForm.code = ''})}

方法二，就是如何调用一个目录的方式

01 创建一个mock目录，然后将可以提供mock数据的JS文件编写好。这里边编写了两个JS文件。

注意观察两个文件的关系。

把getHomeData给作为JS的函数导出了。

仔细看了，你就会发现，其实就是一个文件的分组。第二个文件要把JS的函数给导出，然后第一个文件再引用。有点类似于打包的概念。

02 一定要在main.js当中引入

import './mock'

03 在页面当中引用

这个部分没有特别的只是直接使用就可以了。或者说就是使用axios直接调用就可以了。不需要特殊处理。

methods：
{getShipData(){this.$http.get('/home/getData').then(res =>{if(res.data.code === '200'){this.shipList = res.data.data.shipList;            }        })    }}

mock.js详细用法相关推荐

RAP、Mock.js、Vue.js、Webpack
最近做项目使用的是RAP1的接口,但是昨天开始,RAP1 出现了问题,接口都不能用了. 所以补充一下Mock.js的用法,以便在这种突发的情况时候时自己通过Mock的方式来处理接口. npm init ...
Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
Mock.js 和Node.js详细讲解
原文地址:http://www.manongjc.com/article/10503.html <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开 ...
vue-vue项目中mock.js的使用
mock.js 官网地址:mockjs.com/ mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发.我们可以使用真实的url,mockjs可以拦截ajax请求,返 ...
dva ajax请求,dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...
html 假数据,mock.js实现模拟生成假数据功能示例
本文实例讲述了mock.js实现模拟生成假数据功能.分享给大家供大家参考,具体如下: mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地h ...
mock.js模拟假数据
mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地html文件, 双击打开即可生成你想要的数据 <!DOCTYPE html> ...
使用Mock.js进行独立于后端的前端开发
概述 Mock.js实现的功能基于数据模板生成数据基于 HTML模板生成数据拦截并模拟 Ajax请求用法浏览器:  <scri ...
html网页中使用mock,关于Mock.js使用
目前在做一个个人网站,写了一半没有数据填充,也不知道写啥了,就顺带学习下mockjs这个东西,官网上主要介绍它是一个可以随机生成各种类型数据,拦截ajax请求等优点.接下来就近距离结束下mockjs吧 ...

mock.js详细用法

mock.js详细用法相关推荐

最新文章

热门文章