返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue框架中如何调用模拟数据你知道吗
  • 950
分享到

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

2024-04-02 19:04:59 950人浏览 泡泡鱼
摘要

1、框架结构 mock是模拟数据文件夹,文件夹中有index.js,里面包含所模拟的接口数据:如下所示 const Mock = require("mockjs"); const

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中进行调用:如图

在这里插入图片描述

然后就可以成功请求数据

在这里插入图片描述

总结

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

--结束END--

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

本文链接: https://lsjlt.com/news/144625.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue框架中如何调用模拟数据你知道吗
    1、框架结构 mock是模拟数据文件夹,文件夹中有index.js,里面包含所模拟的接口数据:如下所示 const Mock = require("mockjs"); const ...
    99+
    2024-04-02
  • Vue框架中怎么调用模拟数据
    本篇内容主要讲解“Vue框架中怎么调用模拟数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue框架中怎么调用模拟数据”吧!1、框架结构mock是模拟数据文件夹,文件夹中有index.js,里...
    99+
    2023-06-29
  • 你知道如何在Spring框架中使用Java函数吗?
    Spring框架是目前应用较广泛的Java开发框架之一。它提供了许多方便的功能和工具,使得Java开发变得更加高效和便捷。在Spring框架中,我们可以使用Java函数来实现一些常见的操作,如数据处理、业务逻辑处理等。本文将介绍如何在Spr...
    99+
    2023-09-16
    函数 spring 框架
  • 你知道如何使用 Python 框架打包你的文件吗?
    当你开发一个 Python 应用程序或者脚本时,你需要将其打包成一个可执行文件以便于分享给其他人使用。打包文件可以使你的应用程序运行在不同的操作系统和 Python 版本上。 Python 有很多的打包工具,但是使用 Python 框架打包...
    99+
    2023-10-11
    框架 打包 文件
  • 你知道如何在Bash中优雅地使用Spring框架吗?
    当谈到Java开发时,Spring框架一直是最流行的框架之一。它可以帮助开发人员更快、更简单地构建应用程序。在本文中,我们将介绍如何在Bash中优雅地使用Spring框架。 首先,让我们看一下如何在Bash中安装Spring框架。您可以使用...
    99+
    2023-09-10
    npm bash spring
  • 你知道如何在 Linux 上开发 PHP 框架吗?
    随着互联网的不断发展,PHP成为了一种非常流行的编程语言。很多人选择在Linux系统上开发PHP应用程序,这种操作系统可以提供稳定性、安全性和性能优势。本文将介绍如何在Linux系统上开发PHP框架。 一、安装必要的软件 在开始PHP框架开...
    99+
    2023-09-09
    框架 开发技术 linux
  • 你知道如何在Windows上安装Spring框架吗?
    当今,Spring框架被广泛应用于Java开发中。它提供了一种简单的方式,让开发者能够构建高效、可扩展且易于维护的企业应用程序。本文将介绍如何在Windows上安装Spring框架,以及如何使用它来构建应用程序。 一、下载Spring框架 ...
    99+
    2023-06-25
    windows bash spring
  • 你知道如何在Java容器中使用Spring框架进行大数据处理吗?
    Java容器和Spring框架是现代软件开发中不可或缺的工具。在大数据处理时,Java容器和Spring框架的使用可以显著提高开发效率和代码质量。在本文中,我们将探讨如何在Java容器中使用Spring框架进行大数据处理。 一、什么是Jav...
    99+
    2023-07-09
    容器 spring 大数据
  • 你知道如何在PHP中使用二维码框架对象吗?
    二维码是一种常用的编码方式,可以将文本、链接、电话号码等信息以图形化的方式展示出来。在PHP中,我们可以使用二维码框架对象来生成二维码,本文将介绍如何在PHP中使用二维码框架对象。 一、安装二维码框架对象 PHP中有多个二维码框架对象可供选...
    99+
    2023-07-31
    二维码 框架 对象
  • vue项目中如何使用mock你知道吗
    目录第一步:第二步,在request.js中进行相关配置,request.js代码如下:第三步,在mock.js中进行相关配置,mock.js代码如下:第四步,在main.js中需引...
    99+
    2024-04-02
  • 你知道如何在ASP和Bash中使用框架和数组吗?看这里!
    ASP和Bash是两种非常常用的编程语言,在开发过程中,使用框架和数组可以提高开发效率和代码质量。本文将介绍如何在ASP和Bash中使用框架和数组。 一、ASP中使用框架和数组 框架 ASP中常用的框架有Classic ASP、ASP....
    99+
    2023-10-19
    bash 框架 数组
  • 你知道如何在shell中快速处理文件框架吗?
    在日常的工作中,我们经常需要处理文件框架,比如将文件转换为不同的格式、提取特定的信息等等。而在shell中,我们可以使用一些简单而又高效的命令来处理文件框架,让我们更加高效地完成工作。 本文将介绍一些常用的shell命令,帮助你更好地处理...
    99+
    2023-11-10
    文件 框架 shell
  • 如何在C++中调用python代码你知道吗
    目录一、环境设置二、VS项目中设置(1)首先在acaconda中找到include文件夹和libs文件夹,如图所示(2)点击链接器,然后输入,附加依赖项,添加python36_d.l...
    99+
    2024-04-02
  • 你是否知道如何用Laravel框架实现大数据分析?
    Laravel是一款广受欢迎的PHP开发框架,它提供了许多便捷的功能和工具,使得开发人员可以快速构建高质量的Web应用程序。但是,Laravel不仅仅只是用于Web应用程序的开发,它还可以用于实现大数据分析。在这篇文章中,我们将讨论如何使用...
    99+
    2023-08-11
    numpy 大数据 laravel
  • 你知道如何使用 Spring 框架来管理 ASP 对象吗?
    Spring 框架是一种流行的 Java 开发框架,它提供了一种简单的方法来管理 ASP 对象。在本文中,我们将探讨如何使用 Spring 框架来管理 ASP 对象,并提供一些演示代码。 ASP(Active Server Pages)是一...
    99+
    2023-10-23
    对象 unix spring
  • 你知道吗?Go 中使用 NumPy 框架存储数据的好处有哪些?
    在数据科学和机器学习领域,数据处理和存储是非常重要的一环。数据处理是指对数据进行清洗、转换和分析等操作,而数据存储则是指如何将数据存储在内存或硬盘中,以便于后续的处理和分析。在 Go 语言中,使用 NumPy 框架进行数据存储是一个非常好...
    99+
    2023-10-18
    存储 numy 框架
  • 你知道如何在 Linux 容器上搭建 ASP 框架吗?
    当今,Linux 容器已经成为了云计算时代的标配技术。而在 Linux 容器上搭建 ASP 框架,是一件非常有意义的事情。本文将介绍如何在 Linux 容器上搭建 ASP 框架,帮助大家更好地了解这一技术。 一、ASP 简介 ASP (Ac...
    99+
    2023-08-25
    框架 linux 容器
  • 你知道如何利用Shell和Git优化PHP框架开发吗?
    随着PHP框架的不断发展,越来越多的开发者开始使用Shell和Git来优化PHP框架的开发。在本文中,我们将深入探讨如何利用这两个工具优化PHP框架开发。 一、Shell Shell是一种命令行解释器,它允许用户在命令行中输入命令,并以此来...
    99+
    2023-10-20
    shell git 框架
  • Python数据类型与git框架的完美结合,你知道吗?
    Python是一种高级编程语言,广泛应用于数据分析、机器学习、人工智能等领域。而Git则是一种分布式版本控制系统,被广泛用于协作开发和代码管理。Python数据类型和Git框架的完美结合,可以帮助开发者更高效地管理和处理代码。 Python...
    99+
    2023-07-18
    数据类型 git 框架
  • 你知道如何在NumPy中使用Python数据类型吗?
    当我们使用NumPy库进行数值计算时,我们通常使用NumPy中的数组(ndarray)来表示数据。而这些数组可以存储不同种类的数据,包括Python的内置数据类型,例如整数、浮点数、布尔值等。 在本文中,我们将介绍如何在NumPy中使用Py...
    99+
    2023-06-02
    numpy 数据类型 leetcode
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作