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

最新推荐文章于 2023-12-12 14:17:35 发布
最新推荐文章于 2023-12-12 14:17:35 发布
阅读量998 收藏
点赞数 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
关注
专栏目录
vue2中使用mockjs出现报错proxy error: could not proxy request xxx from xxx to xxx 和404，500问题
qq_43210082的博客
05-23 3014
问题说明 出现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萌新入坑指北
qq_45910045的博客
01-07 224
Mock原理 你好！ Mock其实是需要Axios配套使用的，本地数据模拟器，是以Js或Json的方式提供数据，利用Axios的拦截器性质，拦截固定的接口返回给相同的数据，这样我们就可以不依赖后端而进行独立开发。达到快速开发的效果，后期禁用Mock就可以正常访问接口了，直接进入调试阶段！ 安装 npm install mock npm install axios 安装完成后，我们需要在和src同级别的路径创建Mock文件夹（记得全小写mock），同时创建mock.js文件，如下 引入Mock 在Main.
Vue中使用mock数据后，无法使用后端数据，请求失败
m0_54630400的博客
03-27 3455
目录 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 1838
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 1227
在我们实际开发中，以前需要等待后台开发完成才能联调，现在只需先协商好数据结构字段等，然后引入mockjs,就可以先一步开发，另外mockjs在单元测试的时候也很重要。 1.安装mockjs >npm install mockjs --save-dev 2.添加mock目录 |---src/ | |---index.js | |---mock/ | |---demo //...
vue使用qiankun框架心得和踩坑记录
m0_67401153的博客
03-06 2214
**其他网站有很多如何引入，使用的案例，但是按部就班的做了还是有一些问题，因此来此在总结下： vue2x使用qiankun框架经历 实现： 1、父子组件相互跳转 2、父-子传参，子接收 3、子使用父的组件 遇到问题： 1、路由跳转不成功 2、父子样式冲突 3、this.$router.push跳转问题，改为window.history.pushState跳转后，除了第一次主跳子，第二次会跳转到错误页面问题解决 ** 第一步 ：安装 npm i qiankun -S 第二步：在主应用src目录下创建文件夹mi
Vue+TS 踩坑记录与方案总结
HTML网页设计
08-08 1288
vue 和 TypeScript 结合的情况下，很多写法和我们平时的写法都不太一样，这里总结我项目开发过程中遇到的问题和问题的解决方案。
vue2.x 项目 webpack升级vite避坑总结
var_deng的博客
09-26 6323
前言 目前一个用webpack构建的vue2.X 项目由于业务扩展越来越大，导致项目在本地编译时热更新很慢，页面更新需要10几秒以上。为提高团体开发速度和效率，最近打算把底部打包构建的环境由webpack迁移为vite。 为什么 Vite 启动这么快 底层实现上， Vite 是基于 esbuild 预构建依赖的 esbuild 使用 go 编写，并且比以 js 编写的打包器预构建依赖, 快 10 - 100 倍。 因为 js 跟 go 相比实在是太慢了，js 的一般操作都是毫秒计，go 则是纳秒
vue2项目，踩坑Jest单元测试
「 虚幻私塾」
03-02 2486
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 目前的项目已经维护了挺久，由于客户要求，我们要为项目加上单元测试，挑选一番后选择了Jest（配置简便，开箱即用），下面记录了此次为项目添加Jest作为单元测试的经历。 安装Jest 在项目目录下，执行命令vue add @vue/cli-plugin-unit-jest，这个
Vue实现商品飞入购物车效果(电商项目)
10-15
在项目中使用rem作为像素单位，可以方便地进行响应式设计。 7. Easy-Mock：这是一个快速方便地搭建模拟API的平台，可以用于前后端分离项目的开发中，方便地模拟后台数据接口。 8. 组件化与模块化：项目中通过组件...
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 有关工作原理的详细说明，请查看的和。
vue2整合高德地图JS API v2.0页面不展示问题也没有任何报错(MOCKJS冲突)
qq_31745863的博客
03-08 1882
那么检查一下vue项目中是否使用过mockjs如果使用了mockjs只需要去除mockjs相关依赖即可。如果一下内容中都是正确的。
Cesium地图不加载或者加载有问题怎么办
阿小绿的博客
02-26 7635
如上图所示，没有显示地球。 主要原因是因为 地球影像图层出错了是必然了，我们人眼都可以看出来。解决办法去创建一个属于自己的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 428
项目中如果引入了mock.js，前端下载excel文件会打不开该文件，因为mock会拦截请求使返回的文件流blob变成字符串。将下载交给浏览器去处理（window.open）
Vue2使用mock.js拦截不了请求
qq_39376487的博客
10-22 4289
Vue2使用mock.js拦截不了请求 今天用到mock.js，按理它应该会拦截所有的AJAX请求，但是运行起来没拦截，记录一下： 1.安装mock.js 2.创建/src/mock.js const Mock = require("mockjs") let Result = { code:200, msg:'成功', data:null } Mock.mock('/api/getVerifyCode','get',()=>{ console.log("mock执行ge
Vue2 + mockjs
m0_60838883的博客
02-03 3227
​ 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口。
mockjs 导致cesium地图无法加载
最新发布
qq_37312180的博客
12-12 533
发现请求数据http状态是304，而且是由mock.js发起的请求。
vue中mock的使用及mock无侵入解决方案
weixin_44036130的博客
04-19 3535
一、什么是mock？ 看了官网的介绍，对前端来说“前后端分离”这点，大大提高了前端开发的效率 前端开发在商讨完需求、接口及数据格式后，就可以直接利用mock模拟后台返回的数据来进行代码开发 二、为什么要用到mock？ 下面我在画个流程图，帮助大家理解mock在项目中的处理逻辑 由此可以看出，前端可以利用mock服务来模拟请求后台数据，只要接口文档出来，就可以按照接口文档的api和数据...
Vue项目中axios与mock.js的实战模拟数据
在Vue项目中，mock.js是一个强大的工具，用于在后端接口尚未开发完成时为前端提供虚拟数据，使得开发者可以在实际接口上线前进行前端开发和测试。官方网址为<http://mockjs.com/>。mock.js通过拦截axios发送的Ajax...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值