欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2022-08-15 10:28:52|栏目: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中进行调用:如图

在这里插入图片描述

然后就可以成功请求数据

在这里插入图片描述

总结

上一篇:Mint UI 基于 Vue.js 移动端组件库

栏    目:vue

下一篇:vue中this.$http.post()跨域和请求参数丢失的解决

本文标题:Vue框架中如何调用模拟数据你知道吗

本文地址:http://www.codeinn.net/misctech/210852.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有