vue项目中mock.js的使用及基本用法


Posted in Javascript onMay 22, 2019

官方网址:http://mockjs.com/

mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据。

vue项目中mock.js的使用及基本用法

使用方式

这里主要讨论在vue项目中,使用axios发送ajax请求,mock.js模拟数据的流程。

vue-cli搭建项目后,安装axios和mock.js

npm install -S axios
npm install -D mockjs

在项目中新建mock.js文件夹,来设置要产生的模拟数据的格式。

vue项目中mock.js的使用及基本用法

3. 设想这样一个场景,页面在打开时要从数据库获取一个新闻列表,现在我们要模拟这个列表,新闻对象包括新闻标题、新闻内容和创建时间三项。

// mock.js
// 引入mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random
// mock新闻数据,包括新闻标题title、内容content、创建时间createdTime
const produceNewsData = function () {
 let newsList = []
 for (let i = 0; i < 20; i++) {
 let newNewsObject = {
 title: Random.ctitle(), // Random.ctitle( min, max ) 随机产生一个中文标题,长度默认在3-7之间
 content: Random.cparagraph(), // Random.cparagraph(min, max) 随机生成一个中文段落,段落里的句子个数默认3-7个
 createdTime: Random.date() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;
 }
 newsList.push(newNewsObject)
 }
 return newList
}
// 请求该url,就可以返回newsList
Mock.mock('/mock/news', produceNewsData) // 后面讲这个api的使用细节

在main.js引入该mock.js文件,表明我们使用这里面产生的数据。

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
require(./mock.js)

在APP.vue里我们来发送get请求获取数据

// App.vue
<template>
 <div id="#app"></div>
</template>
<script>
import axios from 'axios' // 引入axios
export default {
 // 挂载的时候获取新闻列表
 mounted() {
 axios.get('/mock/news').then(res => { // url即在mock.js中定义的
 console.log(res.data) // 打印一下响应数据
 })
 }
}
</script>

vue项目中mock.js的使用及基本用法

运行项目打开控制台可以看到,我们拿到了模拟的数据。

Mock.mock()

Mock.mock( rurl, rtype, template|function( options ) )
rurl
可选。
表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 '/domian/list.json'。
rtype
可选。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template
可选。
表示数据模板,可以是对象或字符串。
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
例如:'name|1-10':1 会产生一个1-10之间的整数,详细规则参见官方文档
function(options)
可选。
表示用于生成响应数据的函数。
options
指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性

增加数据

之前讨论的都是产生好数据供我们获取,如果想测试增加数据的功能,mock.js也可以实现,对于 Mock.mock(url,function(ops)) ,ops参数就可以拿到传送的数据。

// App.vue
<template>
 <div id="app">
 <div>
 <input type="text" v-model="title">
 <button type="button" @click="submit">提交</button>
 <button type="button" @click="getProjects">获取</button>
 </div>
 </div>
</template>
<script>
import axios from 'axios'
export default {
 data () {
 return {
 title: ''
 }
 },
 methods: {
 submit () {
 axios.post('/mock/addProject', { // 添加数据的接口,数据为一个对象,有个title属性
 title: this.title
 })
 },
 getProjects () {
 axios.get('/mock/projects').then(res => { // 获取数据
 console.log(res.data) 
 })
 }
 }
}
</script>

我们在mock.js中模拟一个添加数据的接口,拿到数据后存到数组中。

// mock.js
// 添加信息
let projectList = []
Mock.mock('/mock/addProject', ops => { // 拦截ajax请求,调用函数
 console.log(ops) // 先看一下这个ops是什么
 projectList.push(ops)
})
// 获取信息
Mock.mock('/mock/projects', projectList)

vue项目中mock.js的使用及基本用法

在输入框中输入标题后,点击提交,数据发送到/mock/addProject, mock.js拦截到请求后,调用function(ops)方法,打印看到ops是个对象,有3个属性,url,type和body,而我们输入的数据就在body属性值里,同时因为axios默认发送的是json格式的数据,所以body里面的数据是json串,更改function(ops)函数,将数据以js对象的形式存入数组中。当然实际开发中可以看后端的数据返回格式,选择在前端进行json转js的操作,这里只是演示一下。

// mock.js
// 添加信息
let projectList = []
Mock.mock('/mock/addProject', ops => { // 拦截ajax请求,调用函数
 // console.log(ops) // 先看一下这个ops是什么
 ops = JSON.parse(ops.body)
 projectList.push(ops)
})
// 获取信息
Mock.mock('/mock/projects', projectList)

vue项目中mock.js的使用及基本用法

更改后输入标题,点击提交,再点击获取,可以看到返回了我们提交的数据,并且是js对象的形式,拿到数据后就可以做进一步的操作了。

修改功能的代码也是类似的。

删除数据

删除数据一般是把数据的id以get形式传递给后端,url形式为: /xxx/xxx?id=value, 实际开发中后端可以很好的处理id值不同的url,我们只需要关心怎么获取到id,但是使用mock.js时,拦截的url我不知道怎么写成动态的. Mock.mock('/mock/delete') ,此时使用axios.get()时就会报错:

vue项目中mock.js的使用及基本用法

所以还是改成了用post传递的方式。

不知道是不是有什么别的方法,可以使得删除时使用get请求。

总结

以上所述是小编给大家介绍的vue项目中mock.js的使用及基本用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 #Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 #Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 #Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 #Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 #Javascript
详解在React-Native中持久化redux数据
May 22 #Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 #Javascript
You might like
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
Python中实例化class的执行顺序示例详解
2018/10/14 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
Python各种扩展名区别点整理
2020/02/27 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
员工培训心得体会
2013/12/30 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
办理房产过户的委托书
2014/09/14 职场文书
技术员岗位职责范本
2015/04/11 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
python实现三次密码验证的示例
2021/04/29 Python