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实现页面转发功能示例代码
Aug 05 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
jQueryUI DatePicker 添加时分秒
Jun 04 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
详解TypeScript的基础类型
Feb 18 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
实用函数2
2007/11/08 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
[00:32]DOTA2上海特级锦标赛 COL战队宣传片
2016/03/04 DOTA
Python中的进程分支fork和exec详解
2015/04/11 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
python程序封装为win32服务的方法
2021/03/07 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python 制作网站小说下载器
2021/02/20 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
巴西购物网站:Submarino
2020/01/19 全球购物
办公室主任岗位职责
2013/11/08 职场文书
公司营业员的自我评价
2014/03/04 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
企业诚信承诺书
2014/05/23 职场文书
公司任命书模板
2014/06/06 职场文书
优秀员工推荐材料
2014/12/20 职场文书
PostgreSQL存储过程实用脚本(二):创建函数入门
2021/04/05 PostgreSQL
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers