VUE 集成 Mockjs

news/2024/7/19 13:52:12 标签: vue.js, 前端, javascript, js

一、集成方式

在项目目录中执行以下命令:

npm i -D mockjs

二、配置

(1)在项目src目录下创建mock目录,并创建index.js文件,在index.js文件中添加以下代码:

javascript">import Mock from 'mockjs'

// 配置需要mock的url、method及响应数据,详见(一手资料):http://mockjs.com/examples.html 及 https://github.com/nuysoft/Mock/wiki
Mock.mock(/\/trip\/order\/by-customer\/(.*)/,'get', {
  data: [{
    "id|+1": 1
  }] 
})

// 此处必不可少,缺少会造成不生效
Mock.setup({
  timeout: 200 - 400
})

(2)在main.js中添加以下代码:

javascript">import '@/mock'

三、避坑

(1)造成文件下载异常,如:zip包大小异常无法解压,文本文件内容乱码

解决办法:在node_modules/mockjs/dist/mock.js中进行以下修改:

javascript">// 可以通过直接搜索“custom.xhr.send”找到以下代码
if (!this.match) {
	this.custom.xhr.send(data)
	return
}
// 修改为下边的代码
if (!this.match) {
	this.custom.xhr.responseType = this.responseType //添加本行代码,解决文件下载异常问题
	this.custom.xhr.send(data)
	return
}

http://www.niftyadmin.cn/n/5114976.html

相关文章

执行Maven项目时,无法解析项目的依赖关系

报错[ERROR] Failed to execute goal on project pdms-services: Could not resolve dependencies for project ..... 在IDEA ----> setting ---->Remote Jar Repositories ----> Maven jar repositories中添加远程仓库的http地址。 再次进行maven的clean和install就好…

Linux本地RStudio工具安装指南及远程访问配置安装RStudio Server

文章目录 前言1. 安装RStudio Server2. 本地访问3. Linux 安装cpolar4. 配置RStudio server公网访问地址5. 公网远程访问RStudio6. 固定RStudio公网地址 前言 RStudio Server 使你能够在 Linux 服务器上运行你所熟悉和喜爱的 RStudio IDE,并通过 Web 浏览器进行访问…

AI智慧安防智能监控平台EasyCVR隔天设备录像播放失败是什么原因?该如何解决?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等,能对外分发RTMP、RTSP、HTTP-FLV、…

几千粉丝的视频账号播放量只有几百怎么办?借助批量剪辑快速提升播放量

为什么很多人的短视频账号明明有几千粉丝,但是发的作品却只有几百的播放量? 其实原因很简单,大多数人在起号的时候都会犯一个低级错误——盲目追求粉丝数量,而不在意粉丝质量。 做付费流量都懂:越是便宜的粉&#xf…

前端播放器使用(含画中画效果)

使用&#xff1a; <VideoPlayer src{domainUrl preViewItem.videoUrl} autoplay{true} controls{true} />源代码&#xff1a; import React, {memo, useEffect, useState, forwardRef, useImperativeHandle} from react; import videojs from video.js; import video.js…

负载均衡的算法(静态算法与动态算法)

1.静态算法 静态算法是不考虑服务器动态负载的算法&#xff0c;包括&#xff1a; &#xff08;1&#xff09;轮转算法&#xff1a;轮流将服务请求&#xff08;任务&#xff09;调度给不同的节点&#xff08;即&#xff1a;服务器&#xff09;。 &#xff08;2&#xff09;加…

可视化滚动表格

基于antd中Table组件进行二次封装&#xff0c;其中css变量–height高度-55的原因是antd默认表格大小的行高是55&#xff0c;行高可自行基于antd的size重新计算减去的高度 import React, { useEffect } from "react"; import { Table } from "antd"; import…

Anaconda创建新的虚拟环境及Jupyter Notebok中、PyCharm中环境的使用

Anaconda创建新的虚拟环境 在windows开始菜单中【徽标键】&#xff0c;查找Anaconda文件夹并打开【Anaconda Prompt】 查看已有虚拟环境 conda env list1.创建 conda create --name mytest python3.7 # 创建一个名称为mytest&#xff0c;python版本为3.7的虚拟环境输入【…