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 相关文章推荐
常用js脚本
Dec 03 Javascript
国外的为初学者写的JavaScript教程
Jun 09 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
layui的select联动实现代码
2019/09/28 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
python集合类型用法分析
2015/04/08 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
django-allauth入门学习和使用详解
2019/07/03 Python
利用python实现周期财务统计可视化
2019/08/25 Python
财务会计应届生求职信
2013/11/24 职场文书
家长会主持词开场白
2014/03/18 职场文书
关于读书的演讲稿
2014/05/07 职场文书
党员个人公开承诺书
2014/08/29 职场文书
小学教育见习报告
2014/10/31 职场文书
未中标通知书
2015/04/17 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS