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 相关文章推荐
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
javascript中的面向对象
Mar 30 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
解决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
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
财务会计专业求职信范文
2013/12/31 职场文书
公司晚会主持词
2014/03/22 职场文书
擅自离岗检讨书
2014/09/12 职场文书
行政处罚听证告知书
2015/07/01 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏