浅谈vue项目用到的mock数据接口的两种方式


Posted in Javascript onOctober 09, 2019

1.使用devServer.before进行数据mock

//通过配置devServer.before选项,设置url访问路径及response响应数据,进行mock数据。
const { data } = require('./data.json')
// 引入json数据对象

//vue.config.js配置文件中进行Vue CLI的配置
module.exports = {
 //...
 devServer: {
  before: function(app, server) {
   app.get('/api/data', function(req, res) {
    res.json({ data: data, errno: 0 });
   });
  }
 }
};
import axios from 'axios'
const ERRNO = 0

//通过函数柯力化,接收url作为参数,以返回新的函数接收额外的参数作为axios配置项
function get (url) {
 return function (params) {
  return axios.get(url, {
   params
  }).then((res) => {
   const { errno, data } = res.data
   if (errno === ERRNO) {
    return data
   }
  }).catch((e) => {
  })
 }
}

const getData = get('api/data')

getSeller().then(res => {
 console.log(res)
})

2.使用Mock.js进行数据mock

使用Mock.mock(),根据数据模板生成模拟数据。

import Mock from 'mockjs'
import data from './bookHome'
//导入存放模拟json数据的js文件


Mock.mock(/\/api\/data/, 'get', home)
//表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。
//表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
//表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
/* axios获取mock数据 */
import axios from 'axios'

export function getData() {
 return axios({
  method: 'get',
  url: `${process.env.VUE_APP_BOOK_URL}/api/data`
  //通过环境指定的默认地址设定接口url,方便后续调用
 })
}


 //接口方法返回promise对象,最终获取mock数据
 getData().then(response => {
  if (response && response.status === 200) {
   const data = response.data
   console.log(data)
  }
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
Vue3.0数据响应式原理详解
Oct 09 #Javascript
Vue分页插件的前后端配置与使用
Oct 09 #Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 #Javascript
将RGB值转换为灰度值的简单算法
Oct 09 #Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 #Javascript
解决Vue动态加载本地图片问题
Oct 09 #Javascript
Vue3 中的数据侦测的实现
Oct 09 #Javascript
You might like
PHP系统流量分析的程序
2006/10/09 PHP
浅析PHP Socket技术
2013/08/02 PHP
php实现的http请求封装示例
2016/11/08 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
JavaScript 基础篇(一)
2012/03/30 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python的依赖管理的实现
2019/05/14 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
竞聘上岗演讲稿范文
2014/01/10 职场文书
个性与发展自我评价
2014/02/11 职场文书
请假条怎么写
2014/04/10 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
行政文员岗位职责
2015/02/04 职场文书
面试通知邮件
2015/04/20 职场文书
教师节班会开场白
2015/06/01 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
学校学期工作总结
2015/08/13 职场文书
高一化学教学反思
2016/02/22 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL