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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
用js计算页面执行时间的函数
Dec 07 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
js实现无缝滚动图
Feb 22 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
微信小程序自定义胶囊样式
Dec 27 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
详解redux异步操作实践
2018/08/15 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python 函数返回值的示例代码
2019/03/11 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python如何使用函数做字典的值
2019/11/30 Python
python实现mean-shift聚类算法
2020/06/10 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
社会实践感言
2014/01/25 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
利用Python多线程实现图片下载器
2022/03/25 Python