Vue框架中如何调用模拟数据你知道吗

 更新时间:2022年03月31日 12:53:25   作者:时间的情敌  
这篇文章主要为大家详细介绍了Vue框架中如何调用模拟数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

1、框架结构

在这里插入图片描述

mock是模拟数据文件夹,文件夹中有index.js,里面包含所模拟的接口数据:如下所示

const Mock = require("mockjs");
const { param2Obj } = require("./utils");

const user = require("./user");

//调用方式
const mocks = [...user];
function mockXHR() {
    // mock patch
    // https://github.com/nuysoft/Mock/issues/300
    Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send;
    Mock.XHR.prototype.send = function() {
        if (this.custom.xhr) {
            this.custom.xhr.withCredentials = this.withCredentials || false;

            if (this.responseType) {
                this.custom.xhr.responseType = this.responseType;
            }
        }
        this.proxy_send(...arguments);
    };

    function XHR2ExpressReqWrap(respond) {
        return function(options) {
            let result = null;
            if (respond instanceof Function) {
                const { body, type, url } = options;
                // https://expressjs.com/en/4x/api.html#req
                result = respond({
                    method: type,
                    body: JSON.parse(body),
                    query: param2Obj(url),
                });
            } else {
                result = respond;
            }
            return Mock.mock(result);
        };
    }

    for (const i of mocks) {
        Mock.mock(
            new RegExp(i.url),
            i.type || "get",
            XHR2ExpressReqWrap(i.response)
        );
    }
}

module.exports = {
    mocks,
    mockXHR,
};

2、在api中进行调用:如图

在这里插入图片描述

然后就可以成功请求数据

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容! 

相关文章

  • Ant Design moment对象和字符串之间的相互转化教程

    Ant Design moment对象和字符串之间的相互转化教程

    这篇文章主要介绍了Ant Design moment对象和字符串之间的相互转化教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue中如何把hash模式改为history模式

    Vue中如何把hash模式改为history模式

    这篇文章主要介绍了Vue中如何把hash模式改为history模式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue移动端使用canvas签名的实现

    vue移动端使用canvas签名的实现

    这篇文章主要介绍了vue移动端使用canvas签名的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • Vue中使用Scss实现配置、切换主题方式

    Vue中使用Scss实现配置、切换主题方式

    这篇文章主要介绍了Vue中使用Scss实现配置、切换主题方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue引入Excel表格插件的方法

    vue引入Excel表格插件的方法

    这篇文章主要为大家详细介绍了vue引入Excel表格插件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • vue3中实现使用element-plus调用message

    vue3中实现使用element-plus调用message

    这篇文章主要介绍了vue3中实现使用element-plus调用message,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue中正确使用Element-UI组件的方法实例

    Vue中正确使用Element-UI组件的方法实例

    这篇文章主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • Vue 级联下拉框的设计与实现

    Vue 级联下拉框的设计与实现

    在前端开发中,级联选择框是经常用到的,这样不仅可以增加用户输入的友好性,还能减少前后端交互的数据量。本文就介绍一下使用Vue实现级联下拉框,感兴趣的可以了解一下
    2021-07-07
  • Vue快速理解事件绑定是什么

    Vue快速理解事件绑定是什么

    一般在vue项目开发中,事件的处理逻辑一般很复杂,我们可以将处理的逻辑变成函数,在vue开发中,一般使用的是使用的是v-on指令进行事件的监听,事件监听的过程中触发相应的JavaScript代码
    2022-08-08
  • 解决vue项目运行npm run serve报错的问题

    解决vue项目运行npm run serve报错的问题

    这篇文章主要介绍了解决vue项目运行npm run serve报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论