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 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
为什么node.js不适合大型项目
Apr 28 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取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
python通过文件头判断文件类型
2015/10/30 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
基于python 字符编码的理解
2017/09/02 Python
对python实现二维函数高次拟合的示例详解
2018/12/29 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
学生会主席演讲稿
2014/04/25 职场文书
打架检讨书
2015/01/27 职场文书
小学生家长意见
2015/06/03 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
Javascript之datagrid查询详解
2021/09/15 Javascript
vue项目支付功能代码详解
2022/02/18 Vue.js
Java详细解析==和equals的区别
2022/04/07 Java/Android