vue 运用mock数据的示例代码


Posted in Javascript onNovember 07, 2017

本文介绍了vue 运用mock数据的示例代码,分享给大家,具体如下:

初始化你的项目

话不用??拢?紫瘸跏蓟?愕南钅浚?罴虻サ木褪鞘褂?ue-cli啦

vue init webpack

引入mock.js

安装 mockjs

npm install --save-dev mockjs

引入到Vue原型上,方便使用

import mockjs from 'mockjs'
 Vue.prototype.$mock = Vue.$mock = mockjs.mock

以上引入到Vue原型上,可以使用 this.$mock直接产生mock数据

请看这里Vue.prototype

请看这里mockjs

在项目开发中,前后台分离,做了假数据,项目使用vue2.0重构,后台也推到重来了,为了不耽误开发进程,我做了虚拟的数据请求,使用vue-cli脚手架搭建的项目文件中dev-server搭建虚拟api请求,访问自己mock的假数据虚拟请求后台的模式,具体做法如下

在build/dev-server.js文件中

在var app = express()这个实例的下面添加如下代码

// 本地json-server服务器搭建代码
// 引入数据库文件
var appData = require('../mock.json')
// 引入数据库
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
// 使用api的方法来创建连接时候的请求
apiRoutes.post('/getBoardList', function (req, res) {
 res.json({
 errno: 0 ,
 data: getBoardList
 });
})
// 调用api
app.use('/api', apiRoutes)

其中 appData 依赖的mock.json文件是自己mock的假数据的文件,根据前后台需求自己mock或者使用mock.js制作假数据

getBoardList是一个接口,var getBoardList = appData.getBoardList 就是在appData定义了这一个接口数据。

var apiRoutes = express.Router() 是创建了一个api的路由,apiRoutes.post是创建一个post接口,这个post接口有一个req和一个res参数,分别执行请求和返回,当返回的时候会给我们一个json,这个json包括一个状态码errno和返回的数据data(data指向了接口数据getBoardList)。

然后当我们调用api的时候app.use('/api', apiRoutes),就能正常使用这个服务了

这里我使用了vue2.0推荐的axios请求数据,代码如下

this.$http.post('/api/getBoardList')
 .then(function (response) {
  console.log(response.data.data);
  alert('成功了');
 })
 .catch(function (code) {
  alert('失败了');
  console.log(code);
 });

打开浏览器的控制台的network,你会发现已经产生了网络请求

vue 运用mock数据的示例代码

同时,数据也愉快的返回回来了:

vue 运用mock数据的示例代码

如果想添加接口数据,继续在dev-server.js中添加就可以了,post,get等等都可以。

注意,每次更改dev-server.js后需要重新npm run dev启动项目

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJs使用IFrame的实现代码
Mar 24 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
vue环境搭建简单教程
Nov 07 #Javascript
用Webpack构建Vue项目的实践
Nov 07 #Javascript
vue双花括号的使用方法 附练习题
Nov 07 #Javascript
vue组件生命周期详解
Nov 07 #Javascript
Angular2的管道Pipe的使用方法
Nov 07 #Javascript
浅谈react 同构之样式直出
Nov 07 #Javascript
vue组件watch属性实例讲解
Nov 07 #Javascript
You might like
PHP中常用的转义函数
2014/02/28 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
详解Python中的strftime()方法的使用
2015/05/22 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
python实现人民币大写转换
2018/06/20 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python之yield和Generator深入解析
2019/09/18 Python
Python属性和内建属性实例解析
2020/01/14 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
金讯Java笔试题目
2013/06/18 面试题
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
面试求职的个人自我评价
2013/11/16 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
护理专科自荐书范文
2014/02/18 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
班级口号大全
2014/06/09 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
公司离职证明标准格式
2014/11/18 职场文书