广告
返回顶部
首页 > 资讯 > 前端开发 > 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://www.lsjlt.com/news/144625.html(转载时请注明来源链接)

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue框架中如何调用模拟数据你知道吗
    1、框架结构 mock是模拟数据文件夹,文件夹中有index.js,里面包含所模拟的接口数据:如下所示 const Mock = require("mockjs"); const ...
    99+
    2022-11-13
  • 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
  • 你知道如何在Java容器中使用Spring框架进行大数据处理吗?
    Java容器和Spring框架是现代软件开发中不可或缺的工具。在大数据处理时,Java容器和Spring框架的使用可以显著提高开发效率和代码质量。在本文中,我们将探讨如何在Java容器中使用Spring框架进行大数据处理。 一、什么是Jav...
    99+
    2023-07-09
    容器 spring 大数据
  • 你知道如何在PHP中使用二维码框架对象吗?
    二维码是一种常用的编码方式,可以将文本、链接、电话号码等信息以图形化的方式展示出来。在PHP中,我们可以使用二维码框架对象来生成二维码,本文将介绍如何在PHP中使用二维码框架对象。 一、安装二维码框架对象 PHP中有多个二维码框架对象可供选...
    99+
    2023-07-31
    二维码 框架 对象
  • 你知道吗?Go 中使用 NumPy 框架存储数据的好处有哪些?
    在数据科学和机器学习领域,数据处理和存储是非常重要的一环。数据处理是指对数据进行清洗、转换和分析等操作,而数据存储则是指如何将数据存储在内存或硬盘中,以便于后续的处理和分析。在 Go 语言中,使用 NumPy 框架进行数据存储是一个非常好...
    99+
    2023-10-18
    存储 numy 框架
  • 你知道如何在shell中快速处理文件框架吗?
    在日常的工作中,我们经常需要处理文件框架,比如将文件转换为不同的格式、提取特定的信息等等。而在shell中,我们可以使用一些简单而又高效的命令来处理文件框架,让我们更加高效地完成工作。 本文将介绍一些常用的shell命令,帮助你更好地处理...
    99+
    2023-11-10
    文件 框架 shell
  • 你知道如何在ASP和Bash中使用框架和数组吗?看这里!
    ASP和Bash是两种非常常用的编程语言,在开发过程中,使用框架和数组可以提高开发效率和代码质量。本文将介绍如何在ASP和Bash中使用框架和数组。 一、ASP中使用框架和数组 框架 ASP中常用的框架有Classic ASP、ASP....
    99+
    2023-10-19
    bash 框架 数组
  • 你知道如何使用 Spring 框架来管理 ASP 对象吗?
    Spring 框架是一种流行的 Java 开发框架,它提供了一种简单的方法来管理 ASP 对象。在本文中,我们将探讨如何使用 Spring 框架来管理 ASP 对象,并提供一些演示代码。 ASP(Active Server Pages)是一...
    99+
    2023-10-23
    对象 unix spring
  • vue项目中如何使用mock你知道吗
    目录第一步:第二步,在request.js中进行相关配置,request.js代码如下:第三步,在mock.js中进行相关配置,mock.js代码如下:第四步,在main.js中需引...
    99+
    2022-11-12
  • 你是否知道如何用Laravel框架实现大数据分析?
    Laravel是一款广受欢迎的PHP开发框架,它提供了许多便捷的功能和工具,使得开发人员可以快速构建高质量的Web应用程序。但是,Laravel不仅仅只是用于Web应用程序的开发,它还可以用于实现大数据分析。在这篇文章中,我们将讨论如何使用...
    99+
    2023-08-11
    numpy 大数据 laravel
  • 如何在C++中调用python代码你知道吗
    目录一、环境设置二、VS项目中设置(1)首先在acaconda中找到include文件夹和libs文件夹,如图所示(2)点击链接器,然后输入,附加依赖项,添加python36_d.l...
    99+
    2022-11-12
  • 你知道Java数据类型同步在框架开发中的重要性吗?
    Java数据类型同步在框架开发中的重要性 在Java开发中,数据类型同步是一个非常重要的概念。数据类型同步是指在多个线程中使用共享数据时,确保数据的正确性和一致性。在开发框架时,正确的数据类型同步是确保框架正确性的一个关键因素。下面我们将详...
    99+
    2023-08-03
    数据类型 框架 同步
  • 你知道如何利用Shell和Git优化PHP框架开发吗?
    随着PHP框架的不断发展,越来越多的开发者开始使用Shell和Git来优化PHP框架的开发。在本文中,我们将深入探讨如何利用这两个工具优化PHP框架开发。 一、Shell Shell是一种命令行解释器,它允许用户在命令行中输入命令,并以此来...
    99+
    2023-10-20
    shell git 框架
  • 你知道使用哪个数据类型框架可以提高你的开发效率吗?
    当我们开发一个项目时,数据类型框架是我们不可或缺的一部分,它们可以帮助我们更高效地管理数据。但是,对于开发人员来说,选择一个适合自己的数据类型框架并不容易。因此,在本文中,我们将介绍几个流行的数据类型框架,并分析它们的优缺点,以帮助您选择适...
    99+
    2023-07-03
    数据类型 npm 框架
  • 你知道吗?PHP框架在Linux和Unix系统中的表现如何?
    PHP是一种流行的编程语言,它的应用广泛,包括网站开发、Web应用开发、桌面应用程序等。PHP框架是PHP编程中的一个重要部分,它提供了一种结构化的方式来编写应用程序。在本文中,我们将探讨PHP框架在Linux和Unix系统中的表现。 首先...
    99+
    2023-08-07
    框架 linux unix
  • 你知道如何在Spring框架中集成自然语言处理吗?
    Spring框架是目前最为流行的Java开源框架之一,它提供了丰富的功能和易于使用的API,能够帮助开发者快速构建高效的应用程序。在这篇文章中,我们将介绍如何在Spring框架中集成自然语言处理,以便能够更好地处理文本数据。 首先,我们需要...
    99+
    2023-08-01
    linux 自然语言处理 spring
  • 你知道如何使用 ASP 搭建自然语言处理框架吗?
    ASP 是一种常见的网页编程语言,它可以用来搭建各种网站和应用程序。除此之外,ASP 还可以用于构建自然语言处理框架。本文将介绍如何使用 ASP 搭建自然语言处理框架,并且会穿插一些演示代码以方便读者理解。 一、什么是自然语言处理? 在介绍...
    99+
    2023-10-21
    自然语言处理 框架 索引
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作