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 相关文章推荐
js 实现 input type="file" 文件上传示例代码
Aug 07 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
JavaScript 作用域实例分析
Oct 02 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
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
JS身份证信息验证正则表达式
2017/06/12 Javascript
ReactNative短信验证码倒计时控件的实现代码
2017/07/20 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
Python清空文件并替换内容的实例
2018/10/22 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
python里dict变成list实例方法
2019/06/26 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
Python内置加密模块用法解析
2019/11/25 Python
python读取ini配置文件过程示范
2019/12/23 Python
pytorch之添加BN的实现
2020/01/06 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
大学生个人简历自我评价
2013/11/16 职场文书
工程管理英文求职信
2014/03/18 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
2019思想汇报范文
2019/05/21 职场文书