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

然后就可以成功请求数据

总结

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

赞 (0)

相关推荐

  • 详解vue2.0模拟后台json数据

    详解vue2.0模拟后台json数据

    最近在跟着做vue2.0以上版本的一个购物平台,在涉及到模拟后台数据交互的时候,视频里讲的是通过json-server这个插件和express,由于之前的配置都是在build/dev-server.js文件夹下,在vue2.0都没有了,全部整合到了build/webpack.dev.conf.js文件里,通过不断查阅资料后终于模拟成功. 1.首先 npm install vue-resource  --save安装vue-resourse,并且在页面上引用(--save 会把依赖包名称添加到 p

  • vue本地模拟服务器请求mock数据的方法详解

    vue本地模拟服务器请求mock数据的方法详解

    目录 原因 场景 方法 mock资源 配置 vue.config.js + settings.js .env.development + .env.production mock-request.js table.js mockDataTest 代码 总结 原因 1.mockjs本地开发的时候用还好,mock数据需要生产时候用就不大行了 2.mock的数据通过module.exports.export实现的时候,npm run build 生产打包的时候,这些假数据会打包进app.js文件里面,

  • vue-cli实现异步请求返回mock模拟数据

    vue-cli实现异步请求返回mock模拟数据

    在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. 网上有不少使用mockjs模拟数据的文章,但基本都是本地拦截请求返回数据,在network中没有发出任何的请求,本地调试起来很不好,只能通过console.log来调试.为了实现真正的异步请求,那么

  • 详解vue-cli中模拟数据的两种方法

    在main.js中引入vue-resource模块,Vue.use(vueResource). 1.使用json-server(不能用post请求) 接下来找到build目录下的webpack.dev.conf.js文件,在const portfinder = require('portfinder')后面引入json-server. /*引入json-server*/ const jsonServer = require('json-server') /*搭建一个server*/ const

  • Vue模拟数据,实现路由进入商品详情页面的示例

    一.路由 首先需要配置路由,就是点击good组件进入goodDetail组件 配置路由如下 { path: '/goodDetail', component:goodDetail } 同时在good组件中写入如下点击事件,路由中加入查询参数,也就是商品的id //点击路由到商品详细信息页 selectGood(){ router.push({ path: 'goodDetail', query:{goodId:this.goodDetail.id}}) } 二.在goodDetail组件中接收路

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

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

    1.框架结构 mock是模拟数据文件夹,文件夹中有index.js,里面包含所模拟的接口数据:如下所示 const Mock = require("mockjs"); const { param2Obj } = require("./utils"); const user = require("./user"); //调用方式 const mocks = [...user]; function mockXHR() { // mock patch

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • ThinkPHP框架中使用Memcached缓存数据的方法

    本文实例讲述了ThinkPHP框架中使用Memcached缓存数据的方法.分享给大家供大家参考,具体如下: ThinkPHP默认使用文件缓存数据,支持Memcache等其他缓存方式,有两个PHP扩展:Memcache和Memcached,Memcahe官方有说明,主要说一下Memcached. 相对于PHP Memcache,php Memcached是基于原生的c的libmemcached的扩展,更加完善,建议替换为php memcached. 版本3.2.2开始内置了Memcached驱动(

  • Vue之使用mockjs生成模拟数据案例详解

    Vue之使用mockjs生成模拟数据案例详解

    目录 在项目中安装mockjs 在Vue项目中使用mockjs的基本流程 Mock语法规范 数据模板定义规范(Data Template Definition,DTD) 数据占位符定义规范(Data Placeholder Definition,DPD) Mock.mock() Mock.Random() 在项目中安装mockjs 在项目目录下执行以下安装命令 npm install mockjs --save 在Vue项目中使用mockjs的基本流程 安装完成后,在项目src/utils目录下

  • Vue项目中接口调用的详细讲解

    Vue项目中接口调用的详细讲解

    在企业开发过程中,往往有着明确的前后端的分工,前端负责接收.使用接口,后端负责编写.处理接口. 对于前端如何使用接口,今天在Vue中进行讲解. 一个项目往往由这几个部分组成. 其中在src文件夹中, ,有这么些内容. 我们常常把接口文件,新建一个文件夹在src下,命名为api,api内的文件便是接口文件. 通常把后端的接口写在api文件夹下,自己命名为xxx.js // 登录 export function login(data) { return request({ url: '/api/co

  • Vue框架中正确引入JS库的方法介绍

    本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 错误示范 全局变量法 最不靠谱的方式就是将导入的库挂在全部变量window 对象下: // entry.js: window._ = require('lodash'); // MyComponent.vue: export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'U

  • vue.js中使用echarts实现数据动态刷新功能

    在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新? 这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础.我们再设想一下, 如果想要支持数据的自动刷新,必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据. 所幸Vue为我们提供了==watcher==功能,通过它我们可以很方便的实现上述功能: watch:{ option:function(newval

  • vue组件中使用props传递数据的实例详解

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

  • vue框架中props的typescript用法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 在vue中使用typescript时,需要引入vue-pro

  • vite+vue3中使用mock模拟数据问题

    目录 1.安装mockjs和vite-plugin-mock 2.在vite.config.ts文件中配置 3.在根目录下创建mock文件夹 4.在文件中调用 5.其他 总结 1.安装mockjs和vite-plugin-mock npm i mockjs vite-plugin-mock --save-dev 2.在vite.config.ts文件中配置 vite-plugin-mock使用方式 import { defineConfig } from 'vite' import vue fr

随机推荐