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 border布局
Oct 08 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
js+canvas绘制图形验证码
Sep 21 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
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
微信小程序自定义胶囊样式
2020/12/27 Javascript
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
"序列点" 是什么
2016/07/29 面试题
我的五年职业生涯规划
2014/01/23 职场文书
教师业务学习制度
2014/01/25 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
村干部承诺书
2014/03/28 职场文书
公证委托书大全
2014/04/04 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
mysq启动失败问题及场景分析
2021/07/15 MySQL