vue-element-admin 从 mock 数据过渡到使用后台接口

最新推荐文章于 2024-06-23 09:41:49 发布
最新推荐文章于 2024-06-23 09:41:49 发布
阅读量2.3k 收藏 27
点赞数 5
分类专栏： # Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YKenan/article/details/116261726
版权
本文详细介绍了如何将vue-element-admin项目从使用Mock数据切换到实际后台接口。步骤包括修改vue.config.js以移除Mock并配置代理，更新src/main.js中的API请求，以及调整.env.development文件中的变量。同时，删除mock文件夹，确保所有请求指向真实服务器。通过这些步骤，开发者可以顺利地在项目中实现前后端分离并进行实际的接口调用。
摘要由CSDN通过智能技术生成

vue-element-admin 从 mock 数据过渡到使用后台接口

1. 移除 mock

修改 vue.config.js 文件

在这里插入图片描述

1. 首先将 before: require("./mock/mock-server.js") 注释掉
2. 添加一下内容

    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://192.168.81.129:${port}`,
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: ""
        }
      }
      // "/api": {
      //   target: `http://192.168.81.129:${port}`,
      //   changeOrigin: true,
      //   pathRewrite: {
      //     "^/api": ""
      //   }
      // }
    }

修改 src/main.js 文件

在这里插入图片描述

2. 替换 mock 为后台接口请求

修改 src/api/*.js 文件

在这里插入图片描述

3. 补全请求，状态参数

改动变量，.env.development 文件

在这里插入图片描述

修改 src/utils/request.js 文件

在这里插入图片描述在这里插入图片描述

删除 mock 文件夹

YKenan
关注
专栏目录
vue-element-admin源码解读——数据Mock
星留影的刹那间
06-09 1859
MOCK是指模拟服务器按照一定的规则或者设定的数据，对客户端的请求进行响应。换个说法就是可以不用搭建后台服务器，就可以实现前端对数据的请求的响应。在vue-element-admin框架中采用的是MockJS。 MockJS的原理是拦截了所有的请求并代理到本地，然后进行数据模拟，所以你会发现 network 中没有发出任何的请求。不过在vue-element-admin框架中是利用webpack-dev-serve来实现的,在你启动前端服务的同时，mock-server就会自动启动，而且这里还通过 chok
vue-element-template devServer proxy 兼容真实数据和mock数据遇到的问题
莫扎特不唱摇篮曲
12-03 1348
vue-element-template 工程在开发过程中，后端人员已经完成了部分接口，这时，需要将这部分接口切换至后端真实接口，而未开发完毕的接口，还使用 mock 数据 devServer 兼容配置 devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, before: require('./mock/mock-server.js'.
尚硅谷后台管理系统开启mock数据之后页面无法登录问题解决
urnotwang的博客
01-16 1354
vue-element-admin使用mock数据，要修改环境变量为development
探索Vue后端管理界面的新天地 - ElementUIAdmin
最新发布
gitblog_00093的博客
06-23 409
探索Vue后端管理界面的新天地 - ElementUIAdmin 项目地址:https://gitcode.com/imxiaoer/ElementUIAdmin 在前端开发的世界里，高效且美观的框架总能激发开发者无尽的创作灵感。今天，我们聚焦于一个特别的开源项目——ElementUIAdmin，为所有渴望深入了解Vue生态，特别是Element-UI框架的开发者们带来福音。 项目介绍 Eleme...
VUE开发环境下mock模拟数据与后端接口对接示例
guoyp2126的博客
09-20 1915
在以往的前端开发中，前端严重依赖后端，必须等待后端接口开发出来才能继续开发。使用mock，可以使得前后端开发异步进行，互不影响。Mock.js 是一个模拟数据生成器，使用它可以拦截ajax请求，直接模拟返回数据，这样前后端只要约定好数据格式即可。这样前端就不需要依赖后端的接口，使用模拟的数据独立的完成开发，以下使用vue+mock.js的一个例子。 安装mock 打开命令行窗口，进入工程目录，输入以下命令，完成mock.js安装。 npm install mockjs --save-dev 只在开发环境使用
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中使用Mock.js来模拟后端数据
qq_43235503的博客
02-10 458
Vue中使用Mock.js来模拟后端数据
vue-element-admin 移除 mock 接入后端接口
有来技术
09-08 2976
本篇文章基于有来商城youlai-mall微服务项目，介绍了如何使用Vue和element-ui技术搭建一个后台前端管理平台，并通过解决方案vue-element-admin实现前后端分离。文章详细讲解了如何改造vue-element-admin工程，以接入微服务接口，实现前后端分离的优化。通过本篇文章，读者可以了解到如何将现有的前端管理平台与微服务项目结合，提升系统的可维护性和扩展性。
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue3-element-admin:vue3-element-admin后台管理系统前端解决方案
04-17
Vue3 Element Admin 是一个免费开源的中后台模版。基于vue3+ElementPlus+Vite开发，是一个开箱即用的中后台前端解决方案，它可以帮助你快速搭建企业级中后台产品原型，也可用于学习参考。 视频教程 技术储备 提前...
学习vue-element-admin，优化了大量融入代码，添加中文注释
05-16
Vue-element-admin是基于Vue.js和Element UI的后台管理系统模板，它提供了丰富的功能组件和优雅的UI设计，便于快速搭建企业级后台系统。 在“学习vue-element-admin，优化了大量融入代码，添加中文注释”的项目中，...
vue-element-admin-master.zip
12-02
Vue Element Admin 是一个基于 Vue.js 和 Element UI 的后台管理框架，它提供了丰富的预设组件、权限管理、动态路由、Mock 数据等，使得开发者能够快速构建出美观且功能强大的后台管理系统。"vue-element-admin-...
修改 vue-admin-template mock数据为请求本地接口
cyt
08-02 6547
1、后端接口 登录接口 此处需要返回的是用户信息以及登录后的token ， 后端配置： port : 8001 路径：/api @GetMapping("/user/info") public ResultVO<HashMap> getInfo(String token) { log.info("get user info : " + token); String username = jwtConfig.getUsernameFromTo
vue mock模拟后台接口数据
GeniusXYT的博客
01-08 433
一、Json server 轻量级，将已有的json文件跑在服务器上供前端调用 npm install -g json-server 启动JSON数据服务器： json-server --watch json文件名 或 json-server --watch json文件 --port 指定端口 二、Mock 服务 很多前端框架，如 Reactor、 Angular、Vue 等都带有 mock 服务，将已有的json文件跑在服务器上供前端调用。 支持 GET / POST / PUT 支持返回 j
vue-admin-templete连接后台 + 更改权限
又菜又爱玩的博客
12-24 1479
1.关闭mock 在vue.config.js中注释如下内容 在main.js中注释如下 2.更改连接源 在config下的setting.config中将 原本为mock改为自己的后台地址就好了 3.后台传递 将mock文件下的controller中的user按照相同格式从后台往前台传输 前台mock传递数据 const accessTokens = { admin: 'admin-accessToken', editor: 'editor-accessToken', test: 'te
在Vue项目中使用mock假数据模拟后端接口
weixin_43724230的博客
03-13 2421
vue mock
前端开发如何同时使用Mock和后台真实数据
chicong3044的博客
04-27 3405
前端开发过程中可能存在这样的场景，后端接口不稳定，Mock又无法模拟真实的操作结果。每次修改了后台接口的配置地址，我们的单页应用例如VUE和React都需要重启才会生效。这里提供一种同时使用Mock数据和真实数据调试的方法。 环境准备：node，nodemon，nginx 环境搭建（使用Moc...
使用 mock.js 后 再也不用追着后端要接口啦
cchhllll的博客
03-22 1116
生成随机数据，拦截 Ajax 请求 当前端开发程序员写好了接口文档，没有实现接口文档，就可以先自己造数据，模拟后端，开发前端的功能。等待后端接口做好，和后端联调，更改baseURL，实现切换接口服务器。 安装 npm i mockjs -D 使用 可以在 src 中新建一个 mock 目录，在里面新建一个 mock.js 然后在 main.js 中导入 import '@/mock/mock.js' mock的三种写法 Mock(url,method,data) Mock(..
vue-element-admin 去掉mock数据，用后台接口登录
weixin_45835850的博客
04-28 5829
文章目录前言需要修改的文件1、/src/main.js2、.env.development3、vue.config.js4、src/api/user.js5、src/store/modules/user.js6、src/utils/request.js 前言 记录一下去掉mock数据，用自己接口登录 需要修改的文件 1、/src/main.js 代码如下： 注释掉 // if (process.env.NODE_ENV === 'production') { // const { mockXHR
vue-element-admin 打包后怎么使用mock数据
05-05
Vue-element-admin是一个基于Vue.js和element-ui的后台管理系统解决方案，它并没有内置Mock数据的功能，而是使用了Mockjs库来生成随机数据。因此，在打包后使用Mock数据需要按照以下步骤进行： 1. 安装Mockjs库 在项目中安装Mockjs ``` npm install mockjs --save-dev ``` 2. 创建Mock数据 在项目中创建一个mock文件夹，然后创建一个mock.js文件，用于编写Mock数据。 ```javascript import Mock from 'mockjs' Mock.mock('/api/data', { 'data|10': [{ 'id|+1': 1, 'name': '@cname', 'age|18-30': 20, 'address': '@city' }] }) ``` 3. 在main.js中引入mock数据 在main.js中引入mock数据，并且在开发环境下启用Mock数据。 ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' // 引入Mock数据 if (process.env.NODE_ENV === 'development') { require('./mock/mock.js') } Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app') ``` 4. 使用Mock数据 在需要使用Mock数据的地方，发起请求时请求的地址应该和Mock数据中定义的地址一致。 ```javascript axios.get('/api/data').then(res => { console.log(res.data) }) ``` 这样，打包后就可以使用Mock数据了。需要注意的是，Mock数据只能在开发环境下使用，不能在生产环境中使用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值