vue-element-admin如何能同时使用自带的mock接口和外部接口

最新推荐文章于 2024-08-24 07:28:14 发布
最新推荐文章于 2024-08-24 07:28:14 发布
阅读量4.6k 收藏 9
点赞数 4
文章标签： vue-element-admin
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyz002/article/details/103400675
版权

1，首先在/src/api中创建一个接口
在这里插入图片描述
2，接口编写模仿其他页面即可，url地址是把host去掉的部分，在这里插入图片描述
3，在vue.config.js中找到devServer,找到代理所在，把url拉出来，单独拦截，如果遇到了该url会拼接target的host，然后changeorigin是解决跨域问题，pathrewrite是重写路径
在这里插入图片描述
就是重写这个路径
在这里插入图片描述
4，在使用接口的组件页面引用该接口，要带上{}大括号，然后就可以在不删除mock接口下，引入部分外部接口了，方便逐步替换掉项目的接口
在这里插入图片描述
,

不喜欢it的程序猿
关注
vue-element-admin同时使用mock和真实API
何浩翔的博客
01-30 586
vue-element-admin同时使用mock和真实API
vue-element-admin中使用mock数据和真实接口同时存在
欢迎欢迎
04-10 646
下面有两种方法1.统一两种方案的code编码,我选择把mock的返回code统一为2002.在request.js文件中同时添加200和20000的放行条件。
探索现代前端的新边界：ElementAdmin —— Vue3时代的高效后台模版
最新发布
gitblog_00713的博客
08-24 846
探索现代前端的新边界：ElementAdmin —— Vue3时代的高效后台模版 Element-Admin基于 Vue3、TypeScript、Vite、Pinia、Element-Plus、Unocss 的一套后台管理框架。项目地址:https://gitcode.com/gh_mirrors/elem/Element-Admin 在快速迭代的Web开发领域，找到一个既符合最新技术趋势又便于...
vue//VUE中mock模拟数据和后台接口同时使用
weixin_37877794的博客
09-08 2035
https://www.jianshu.com/p/5d97d5e4af2c vue.config.js devServer: { port: port, open: true, host: '0.0.0.0', overlay: { warnings: false, errors: true }, before: require('./mock/mock-server.js'), proxy: { [proce
element-admin同时使用mock数据和真实后端接口
zmjのblog
03-11 1385
背景 系统接入了真实后端接口进行登录，但业务接口还没开发完成，需要mock数据。 方案 一般来说有两种方案 多个server， 启用纯前端mock 这里建议我采取的是第二种方案。 具体操作步骤如下 启用src/main.js下的mockXHR方法，并将环境改成development 在mock文件夹下创建dashboard.js编写mock数据 具体的书写方法可以参考生成的几个mockjs文件，如arcticle.js等 export default [ { url: `/
Vue 使用mockjs模拟后台接口数据
树上骑个猴的博客
12-29 517
前后端分离开发，有时候前端页面很快就写出来了，需要接口数据来测试页面交互功能是否正常，但是后端接口还迟迟未出来，此时就可以使用mock模拟数据了。又或者有时候自己写个前端demo缺乏接口，这时也可以使用Mock来模拟接口数据。 1.npm安装mock插件 cd项目目录，执行： npm install mockjs --save-dev 2.在项目的src目录下新建mock.js文件，并引入mockjs import Mock from 'mockjs' function getData(){ l.
VUE开发环境下mock模拟数据与后端接口对接示例
guoyp2126的博客
09-20 1917
在以往的前端开发中，前端严重依赖后端，必须等待后端接口开发出来才能继续开发。使用mock，可以使得前后端开发异步进行，互不影响。Mock.js 是一个模拟数据生成器，使用它可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式即可。这样前端就不需要依赖后端的接口，使用模拟的数据独立的完成开发，以下使用vue+mock.js的一个例子。 安装mock 打开命令行窗口，进入工程目录，输入以下命令，完成mock.js安装。 npm install mockjs --save-dev 只在开发环境使用
vue mock 前台模拟后台数据联动
Future1994的博客
06-28 420
https://www.cnblogs.com/jasonwang2y60/p/7302449.html 第一步：npm install mockjs --save-dev 第二步： 设置mock文件夹 如下： index.js是首页 mock.js是具体的针对axios方法对应的处理 npm install axios-mock-adapter --save-dev a...
vue中使用mock模拟后端数据
不积跬步何以至千里
07-21 1099
mock
vue-element-admin中文版本
07-20
Vue.js 是一款轻量级且功能强大的前端JavaScript...总的来说，Vue-element-admin 是一个功能完备的后台管理解决方案，结合了 Vue.js 的灵活性和 Element UI 的实用性，让开发者能够快速地构建高效、稳定的管理平台。
学习vue-element-admin，优化了大量融入代码，添加中文注释
05-16
通过学习和实践这个项目，开发者不仅可以掌握Vue.js的基本原理和使用，还能深入了解vue-element-admin的架构设计，同时通过中文注释加深对源码的理解，提升代码阅读和编写能力。这对于提升个人在前端开发领域的专业...
vue3-element-admin:vue3-element-admin后台管理系统前端解决方案
04-17
Vue3 Element Admin 中文 | 简介 Vue3 Element Admin 是一个免费开源的中后台模版。基于vue3+ElementPlus+Vite开发，是一个开箱即用的中后台前端解决方案，它可以帮助你快速搭建企业级中后台产品原型，也可用于学习...
vue-element-admin-master.zip
12-02
Vue Element Admin 是一个基于 Vue.js 和 Element UI 的后台管理框架，它提供了丰富的预设组件、权限管理、动态路由、Mock 数据等，使得开发者能够快速构建出美观且功能强大的后台管理系统。"vue-element-admin-...
vue-element-admin v4.4 指南.pdf
02-28
《vue-element-admin v4.4 指南》是一份详细的文档，主要针对基于Vue.js和Element-UI的后台前端解决方案vue-element-admin的v4.4版本进行深入讲解。这个项目旨在提供一个集成化的后台管理界面，包含了众多实用功能，...
Vue中使用Mock.js来模拟后端数据
qq_43235503的博客
02-10 458
Vue中使用Mock.js来模拟后端数据
vue-admin 如何让mock和请求后台接口同时存在（登录用的mock数据。页面是后台请求数据）
weixin_42402812的博客
03-26 2613
开发环境走mock-server 在开发环境中，vue-config-js我们配置代理的时候开了一个叫 before: require('./mock/mock-server.js')或 bafter: require('./mock/mock-server.js') 所以会走mock-server 但是当我们请求后台的时候我们封装的request.js的时候 baseURL: process.env.VUE_APP_BASE_API, 然后我们把.env.development，.env.stagi
vue-admin-beautiful 同时使用Api和MockJs
weixin_69518525的博客
04-04 272
把baseURL设置为。
mock数据和后端请求接口如何共存
weixin_42401141的博客
01-08 3609
mock数据和后端请求接口如何共存 要开发一个vue项目，直接在以前其他项目的代码上改，项目基础模块包括登录已经完成，所以是带后台的，增加新的模块时想先采用mock来模拟后台数据，所以就要考虑到mock数据和后端接口共存的问题。 然后在网上查到的方法都如下： 具体参考：http://www.bubuko.com/infodetail-3099079.html 在项目根路径下的vue.config.js中配置如下： devServer: { port: port, open: tr...
Vue和Vue-Element-Admin（十二）：proxy解决dev跨域
叶子叶来
05-21 1366
跨域一般后端解决，中间加一层nginx就ok，dev开发环境npm run dev后默认使用9527端口，注释掉mockjs拦截增加api配置就会涉及跨域问题，因为开发中前后端分离，后端接口肯定不是9527，可以使用proxy配置解决跨域问题，在9527上运行的前端api都转成本地的api； 修改vue.config.js，后端是9904端口，新增proxy里面把process.env.VUE_APP_BASE_API路径转发： devServer: { port: port, o
vue-element-admin mock的使用
07-28
vue-element-admin是一个基于Vue.js和Element UI的开源后台管理系统模板。在vue-element-admin中使用mock可以模拟后端接口的返回数据，方便前端开发和调试。 要在vue-element-admin中使用mock，可以按照以下步骤进行操作： 1. 首先，在`/src/main.js`文件中注释掉相关代码。这段代码通常用于在生产环境中关闭mock功能。注释掉后，即可在开发环境中使用mock数据。 2. 接下来，在`/vue.config.js`文件中注释掉相关代码。这段代码通常用于在开发环境中启用mock服务器。注释掉后，即可使用mock数据。 3. 在`src/api`文件夹中创建一个新的文件，例如`charts.js`，并添加需要的接口方法。可以参考引用\[2\]中的示例代码。在这个文件中，可以使用`Mock.js`来模拟接口返回的数据。 4. 在`src/mock`文件夹中创建一个新的文件，例如`charts.js`，并创建mock接口。可以参考引用\[2\]中的示例代码。在这个文件中，可以使用`Mock.js`来定义接口的返回数据。 5. 找到`src/mock/index.js`文件，将新创建的`charts.js`引入其中。 6. 在需要使用mock数据的页面中，引入需要的接口方法。可以参考引用\[3\]中的示例代码。在这个页面中，可以调用接口方法并使用返回的数据进行相应的操作。 通过以上步骤，你就可以在vue-element-admin中使用mock来模拟后端接口的返回数据了。这样可以方便地进行前端开发和调试。 #### 引用[.reference_title] - *1* [vue-element-admin：不使用内置mock功能.](https://blog.csdn.net/liangxiaomanbu/article/details/122984448)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue Element Admin 用mock模块模拟数据](https://blog.csdn.net/Hero_rong/article/details/102952251)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值