mock.js模拟前后台交互


Posted in Javascript onJuly 25, 2019

本文实例为大家分享了mock.js模拟前后台交互的具体代码,供大家参考,具体内容如下

使用背景: vue项目 axios

使用详情:

1、首先安装

# 在项目中安装
 npm install mockjs

2、在项目中使用

在项目中src文件夹下 新建mock文件夹 新建mock.js 和index.js文件 这里面用来生成基础的接口
项目结构截图:

mock.js模拟前后台交互

数据
mock.js 文件

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

// 创建模拟数据 具体的数据生成方法 请查看文档http://mockjs.com/examples.html
function creatPostMock () {
 const list = []
 const mockdata = {
 id: '@increment', // 数据定义 @increment
 'object|1': {
 '310000': '上海市',
 '320000': '江苏省',
 '330000': '浙江省',
 '340000': '安徽省'
 },
 name: '@pick(["a", "e", "i", "o", "u"])',
 m1: '@integer(60, 100)',
 m2: '@integer(60, 100)',
 m3: '@integer(60, 100)',
 m4: '@integer(60, 100)',
 m5: '@integer(60, 100)',
 m6: '@integer(60, 100)',
 m7: '@integer(60, 100)',
 m8: '@integer(60, 100)',
 m9: '@integer(60, 100)'
 }
 for (var i = 0; i < 10; i++) {
 const a = Mock.mock(mockdata)
 list.push(a)
 }
 const data = {
 data: {},
 size: 1,
 pagesize: 10
 }
 data.data = list
 return data
}

// 创建模拟数据
function creatGetMock () {
 const getMock = Mock.mock({
 'list|1-10': [{
 'id|+1': 1
 }]
 })
 return getMock
}

// 将模拟好的数据输出出去;
export {creatPostMock, creatGetMock}

index.js 文件

// ------------index.js---------------
// 引入mockjs
import Mock from 'mockjs'
// 引入生成的模拟数据
import {creatPostMock, creatGetMock} from './mock'

// 设置请求延时时间
Mock.setup({
 // timeout: 2000 方式一 直接设置值
 timeout: '2000 - 5000' // 方式二 设置区间 注意这个是一个字符串形式
})

// 设置拦截的接口 格式请看文档 https://github.com/nuysoft/Mock/wiki/Mock.mock()
// 注意: 这里拦截的地址 最好使用正则匹配 如果直接使用字符串接口 就有可能拦截不到带参数的请求 报错404
Mock.mock(/\/api\/mock(|\?\S*)$/, 'post', creatPostMock)
// Mock.mock('/api/mock', 'get', creatGetMock) // 方式一
Mock.mock(/\/api\/mock(|\?\S*)$/, 'get', creatGetMock) // 方式二

然后在main.js 文件里面引入我们写好的mock/index.js文件 用于拦截请求

//------------------main.js-------------------
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios' // 引入axios
import('./mock/index') // 引入设置好基础的mock, 用于拦截请求

// 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false

// 在vue项目中 axios中无法直接使用vue.use() 所以将axios直接添加到Vue的原型上
Vue.prototype.axios = axios

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

接下来我们就可以定义api了 在api文件下 新建一个自定义接口文件 如questMock.js 里面是我们需要请求数据的模拟接口;

//-------------questMock.js----------------
// 引入axios
import axios from 'axios'
// 使用
this.axios = axios
// 封装的post
function postMockList (data) {
 return this.axios.post('/api/mock', {
 data
 })
}
// 封装的get
function getMockList (data) {
 return this.axios.get('/api/mock', {
 data
 })
}
// 输出
export { postMockList, getMockList }

最后在组件中使用

// ----------------------HelloWorld---------------------
<template>
 <div class="hello">
 <div class="mask" :class="{boxNone:isMask }"></div>
 <div>
 <p>这是获取mock 数据</p>
 <button @click="getMockData">get模拟数据</button>
 <button @click="postMockData">post模拟数据</button>
 </div>
 </div>
</template>

<script>
import { postMockList, getMockList } from '../api/questMock.js'
export default {
 name: 'HelloWorld',
 data () {
 return {
 msg: '模拟前后台交互',
 getMock: getMockList,
 postMock: postMockList,
 isMask: true
 }
 },
 methods: {
 getMockData () {
 this.isMask = false
 this.getMock({
 params: {
  name: '隔壁老王'
 }
 }).then(res => {
 this.isMask = true
 console.log('GET模拟数据', res)
 }).catch(e => {
 console.log('错误', e)
 })
 },
 postMockData () {
 this.isMask = false
 this.postMock({
 name: 'xiaoming',
 age: '5'
 }).then(res => {
 this.isMask = true
 console.log('POST模拟数据', res)
 }).catch(e => {
 console.log('错误', e)
 })
 }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
.mask {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1000;
 background-color: green;
 opacity: 0.5;
}
.mask.boxNone {
 display: none;
}
</style>

遇到的问题

1、在设置模拟接口时 使用get请求 发现报错404 后来查资料发现是因为直接使用字符串接口会导致mockjs 拦截不到地址 解决办法就是使用 正则去匹配请求接口
2、如何设置请求延时 由于mockjs 是在本地模拟数据所以并未发起真正的请求,无法看到请求的加载效果,解决办法就是使用Mock.setup({timeout: 加载时间}) 来设置每次的模拟请求时间
也可参考以下:

服务器端数据模拟,支持请求转发、返回JSON静态数据、返回JS可变数据 .

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext 今日学习总结
Sep 19 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 #Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 #Javascript
vue使用代理解决请求跨域问题详解
Jul 24 #Javascript
Vue父组件如何获取子组件中的变量
Jul 24 #Javascript
mock.js模拟数据实现前后端分离
Jul 24 #Javascript
vue+mock.js实现前后端分离
Jul 24 #Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 #Javascript
You might like
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
php swoft框架实例用法
2020/12/22 PHP
js tab 选项卡
2009/04/26 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python执行子进程实现进程间通信的方法
2015/06/02 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python 转义字符详细介绍
2017/03/21 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
python安装gdal的两种方法
2019/10/29 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
2014年小班元旦活动方案
2014/02/16 职场文书
门前三包责任书
2014/04/15 职场文书
暑期实践个人总结
2015/03/06 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android