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中的Truthy和Falsy介绍
Jan 01 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
如何正确理解PHP的错误信息
2006/10/09 PHP
PHP6 mysql连接方式说明
2009/02/09 PHP
form自动提交实例讲解
2017/07/10 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
jquery 实现的全选和反选
2009/04/15 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
学习Python列表的基础知识汇总
2020/03/10 Python
基于python实现对文件进行切分行
2020/04/26 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
医院党员公开承诺书
2014/08/30 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
Golang日志包的使用
2022/04/20 Golang