vue项目中使用Mock.js踩坑记录

最新推荐文章于 2023-06-02 17:31:05 发布
最新推荐文章于 2023-06-02 17:31:05 发布
阅读量926 收藏
点赞数 4
分类专栏： Vue 文章标签： ajax javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TrainTu/article/details/120545225
版权

Mock.js的说明文档：http://mockjs.com/examples.html

Mock.js的作用就是：生成随机数据，拦截 Ajax请求

使用情形：
模拟接口，生成随机数据（也可以自定义），不需要等后端写好接口再进行前端开发，提高开发效率。

此处不记录mock具体使用方法（有很多博客有教程），只记录几点比较坑问题（导致拦截不到ajax请求）：

1.启动vue本地服务时，url一定要带上代理标识，如：“/apis/account-op/sys-account/list”中的apis

2.由于get请求参数在url之后，会影响到url匹配，所有最好使用正则

TrainTu
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue2中使用mockjs出现报错proxy error: could not proxy request xxx from xxx to xxx 和404，500问题
qq_43210082的博客
05-23 2901
问题说明 出现proxy error: could not proxy request报错，应该是因为devServer代理的服务器未开启，或者地址错误，改正就好。 404 not found，找不到请求的资源。应该检查发送请求的api地址是否错误。 项目配置 vue.config.js: devServer: { proxy: { "/api": { target: "http://localhost:8080", changeOrigin: true,
Vue中使用mock数据后，无法使用后端数据，请求失败
m0_54630400的博客
03-27 3340
目录 1、问题描述： 2、问题解析： 3、解决方法： 1、问题描述： 在项目中的vue.config.js中使用mock数据，导致登录不上，请求超时。 2、问题解析： 登录不上的原因是使用mock数据用before，使用后端接口用after，否则会请求失败报超时5000ms。 3、解决方法： 在vue.config.js中，将before改为after，或者把使用mock数据删掉即可。 ...
Vue使用Mock拦截
gcfkh的博客
12-19 1776
Vue使用Mock拦截 // 注意：本文适用 VUE状态机的情况下使用 axios 发送请求,其他情况暂未测试 一、在vue项目中安装 Mock.js npm i mockjs 二、在main.js同级目录新建mock.js文件 三、在main.js文件中引入刚刚新建的mock.js文件 require('./mock') //引入mock 拦截 四、在mock.js文件中引入安装好的 m...
webpack手动搭建vue项目（五）—— 引入mockjs
weixin_42735794的博客
05-15 1173
在我们实际开发中，以前需要等待后台开发完成才能联调，现在只需先协商好数据结构字段等，然后引入mockjs,就可以先一步开发，另外mockjs在单元测试的时候也很重要。 1.安装mockjs >npm install mockjs --save-dev 2.添加mock目录 |---src/ | |---index.js | |---mock/ | |---demo //...
vue2整合高德地图JS API v2.0页面不展示问题也没有任何报错(MOCKJS冲突)
qq_31745863的博客
03-08 1581
那么检查一下vue项目中是否使用过mockjs如果使用了mockjs只需要去除mockjs相关依赖即可。如果一下内容中都是正确的。
vue项目中mock.js的使用及基本用法
12-09
这里主要讨论在vue项目中，使用axios发送ajax请求，mock.js模拟数据的流程。 vue-cli搭建项目后，安装axios和mock.js npm install -S axios npm install -D mockjs 在项目中新建mock.js文件夹，来设置要产生的模拟...
vue+mock.js实现前后端分离
10-16
在Vue项目中使用Mock.js，首先需要通过npm 安装： ``` npm install mockjs ``` **基础使用示例** 以下是一个简单的Vue组件示例，展示了如何使用Mock.js 模拟后端数据： ```html import Mock from "mockjs"; ...
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
12-01
使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合，便于调用 公钥为后端提供，如前端需要解密数据...
vue+axios+mock.js环境搭建的方法步骤
10-18
本文将详细介绍如何在Vue项目中结合axios和mock.js搭建这样的开发环境。 首先，我们来安装必要的依赖。`axios`是一个基于Promise的HTTP库，可以方便地发起网络请求。在项目目录中运行以下命令安装axios： ```bash ...
在vue项目中使用Nprogress.js进度条的方法
10-18
NProgress.js是轻量级的进度条组件，使用简便，可以很方便集成到单页面应用中。这篇文章主要介绍了在vue项目中使用Nprogress.js进度条的方法,需要的朋友可以参考下
vue-element-admin:本项目是基于vue、Element、vuex、mockjs、axios构建的，其中引入了高德地图、Echarts、Excel表格导出、富文本编辑器的第三方组件
05-09
模拟测试 一个Vue.js项目 构建设置 # install dependencies npm install or cnpm install # serve with hot reload at localhost:3000 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 有关工作原理的详细说明，请查看的和。
Cesium地图不加载或者加载有问题怎么办
阿小绿的博客
02-26 6876
如上图所示，没有显示地球。 主要原因是因为 地球影像图层出错了是必然了，我们人眼都可以看出来。解决办法去创建一个属于自己的token，放到项目里面去 影像图层错了，cesium ion token过期啦 注册秘钥https://cesium.com/ion/signin 点击箭头所指方向进行注册账户，如果有账户直接登录就好了。 登录进来【Access Tokens】下面的默认秘钥，拿到我们需要的页面 Cesium.Ion.defaultAccessToken = '你的秘钥' 然后重新清除浏览.
mockjs——mockjs定义、mockjs安装、mockjs使用、mockjs方法、mockjs语法、代码示例
热门推荐
TKY666的博客
08-07 2万+
拦截ajax请求，生成伪数据应用场景:在工作中,后端已经出接口文档,还没有实现代码由前端依照接口文档模拟伪数据,实现前端开发功能。
Mock.js与前端导出的冲突
最新发布
qq_41555989的博客
06-02 378
项目中如果引入了mock.js，前端下载excel文件会打不开该文件，因为mock会拦截请求使返回的文件流blob变成字符串。将下载交给浏览器去处理（window.open）
Vue2 + mockjs
m0_60838883的博客
02-03 3000
​ 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口。
vue中mock的使用及mock无侵入解决方案
weixin_44036130的博客
04-19 3381
一、什么是mock？ 看了官网的介绍，对前端来说“前后端分离”这点，大大提高了前端开发的效率 前端开发在商讨完需求、接口及数据格式后，就可以直接利用mock模拟后台返回的数据来进行代码开发 二、为什么要用到mock？ 下面我在画个流程图，帮助大家理解mock在项目中的处理逻辑 由此可以看出，前端可以利用mock服务来模拟请求后台数据，只要接口文档出来，就可以按照接口文档的api和数据...
基于arco框架 cesium开发
王小四的博客
02-11 664
react 基于arco 框架，create-react-app 创建的项目。
mock的使用
qq_41552648的博客
07-23 1525
mock的基本使用
项目中使用高德地图, 地图加载不出来,只有高德Logo
a42558444的博客
03-03 1734
项目是vue2的，我把相同的代码复制到另外一个项目中，发现可以正常显示。 如果出现类似情况，请检查你是否使用了mockjs，我吧mockjs关闭后地图就正常加载了, 如果出现地图不能加载控制台报错, Invalid Object: LngLat(NaN, NaN), 很有可能是你的地图容器也就是container的DIV没有设置宽高, 以上是我遇到的问题, 希望可以帮到你
vue3如何使用mock.js呢？
05-27
要在Vue3中使用Mock.js可以遵循以下步骤： 1. 首先，安装Mock.js和Axios，可以使用以下命令： ``` npm install mockjs axios --save-dev ``` 2. 在Vue3的main.js（或你的入口文件）中，引入Mock.js和Axios： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值