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实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 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的开发框架的现状和展望
2007/03/16 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
js实现页面转发功能示例代码
2013/08/05 Javascript
使用js画图之画切线
2015/01/12 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JS中递归函数
2016/06/17 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
用Python实现协同过滤的教程
2015/04/08 Python
简述Python中的面向对象编程的概念
2015/04/27 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
财务会计应届生求职信
2013/11/24 职场文书
公司应聘自荐书
2014/06/14 职场文书
教师求职自荐书
2014/06/14 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS