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 相关文章推荐
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
javascript中this用法实例详解
Apr 06 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
JS常用排序方法实例代码解析
Mar 03 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
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
js单例模式详解实例
2013/11/21 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
房地产公司见习自我鉴定
2014/04/28 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
公司合并协议书范本
2014/09/30 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
雷锋之歌观后感
2015/06/10 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
Java 超详细讲解hashCode方法
2022/04/07 Java/Android