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 相关文章推荐
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
屏蔽script注入小例子
Nov 12 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
理解javascript闭包
Dec 15 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
如何在JS文件中获取Vue组件
Sep 16 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多层数组与对象的转换实例代码
2013/08/05 PHP
php实现计数器方法小结
2015/01/05 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
jquery $.ajax入门应用一
2008/11/19 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
javascript读写json示例
2014/04/11 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
js闭包用法实例详解
2016/12/13 Javascript
redux.js详解及基本使用
2019/05/24 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
Python列表(List)知识点总结
2019/02/18 Python
python对execl 处理操作代码
2020/06/22 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
财产公证书样本
2014/04/04 职场文书
护理专业自荐书
2014/06/04 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
大学生入党自荐书
2015/03/05 职场文书
初三毕业感言
2015/07/31 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
Redis 常见使用场景
2021/08/30 Redis