vue-element-template 如何使用官方request.js请求

已于 2022-05-25 17:37:33 修改
阅读量1.3k 收藏 6
点赞数 2
分类专栏： vue 文章标签： vue.js 前端 javascript elementui java
于 2022-05-24 11:31:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41436816/article/details/124941630
版权

文章目录

vue-element-template 如何使用官方request.js请求

许多新手在使用VUE-element-template这个模板，给后台发送数据的时候，一般使用Axios请求，但是发现使用多了，并不好用，而且容易造成代码冗余，也不方便日后项目的URL地址统一管理。查询官方文档中发现里面有request.js这个文件

request.js介绍

其中，@/utils/request.js 是基于 axios 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。具体可以参看 request.js。 它封装了全局 request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等。

  • 官方推荐做法

在 vue-element-admin 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

  • UI 组件交互操作；
  • 调用统一管理的 api service 请求函数；
  • 使用封装的 request.js 发送请求；
  • 获取服务端返回；
  • 更新 data；

具体改造流程

第一步：改造config文件

改造config文件夹下的文件，里面有

  • /dev.env.js 生产环境
  • /prod.env.js 上线环境

用到那个该哪个文件，这里以dev.env.js 文件为例，修改BASE_API 值 改为自己的后台接口地址

在这里插入图片描述

第二步：改造request文件

该文件位于 src/utils/
修改里面的res.code 值为自己后台返回的状态码，这里以修改为 200 为例！
这个文件不修改就算发送请求成功也不会相应数据，本质做了拦截请求。
在这里插入图片描述

第三步：编写api接口文件

该文件位于 src/api/
以后所有的api请求接口，都可以放在这么目录下，进行统一管理，方便后期维护
下面编写fetchList请求方法为例，参数可以带也可以不带，看实际开发需求

在这里插入图片描述

第四步：使用自定义API请求方法

首先在开头需要引入上一步编写的文件，然后在方法里面进行请求获取数据

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

到此基本结束对vue-element-template的项目使用官方请求改造

以下是你可能出现的问题：

  • 改造完成之后登录页面一直登入异常
    这是由于你的项目登录页面并没有实现自己的登录接口，不更换默认使用官方的mock假数据
    ★ 解决办法如下：
    直接修改官方mock/user.js 里面的返回状态值为自己定义的状态码
    在这里插入图片描述
Elory_搬砖工
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 基于axios封装request接口请求——request.js文件
m0_67393593的博客
03-03 2319
目录 了解几个Content-type类型 第一种：application/json;charset=UTF-8 第二种：multipart/form-data 第三种： application/x-www-form-urlencoded 第一步新建request.js文件 第二步新建services/apiUrl文件 第三步新建services/index.js文件 最后如何使用封装好的request请求 了解几个Content-type类型 **Content-type类型：**代表发送端（客户端|服
在用vue-element-admin封装的request.js工具类发送post请求时，后端服务接口获取不到request请求体
weixin_50885665的博客
05-08 1779
最终，问题是出在 vue-element-admin 模板中自带mock模块上。 request请求体是流式数据，如果在其他地方消费过，不做特殊处理的话，后面的应用就消费不到了。 前端通过node转发到后端应用，思考了半天，觉得只有mock才会影响到request请求体，所以去mock-server.js中去查看。 果然，在mock中有对于request请求体的处理逻辑，此处消费了requestBody，导致在node转发时，request请求体丢失。从而导致传到后端没有请求体，但是后端在解析的时候发
vue 封装request.js （二）
最新发布
weixin_45939316的博客
04-30 257
vue 封装request.js 向后端发送请求。同样后端需要配置跨域。
Vue的request.js模块封装
wushengyong1996的博客
01-12 593
学习Vue的过程中，还是会遇到很多问题，毕竟曾经没有接触过，把这些觉得有用的都保存一下。
request.js的编写
Hlwyiner的博客
04-07 638
/将返回的数据过滤 留下有用的数据返回。// 封装方法解决 method对应的传值问题。// 因为这个方法需要将axios返回给别人用。// 第三步 配置根路径 和 超时时间。// 在发送请求之前做些什么。// 对请求错误做些什么。// 对响应数据做点什么。// 对响应错误做点什么。// post登录 / 注册。// 第一步引入axios。// delete 删除。// 第二步引入qs。// 添加请求拦截器。// 添加响应拦截器。// put 修改。
VUE传统方式开发下的 Element UI + RequreJS单页应用
lee576的专栏
11-20 1022
后端开发人员很少接触node.js，因为要花很多精力去学，不易上手，这里用RequreJS来简单代替WebPack吧，用它来记录JS库的路径，依赖关系，按需动态加载，这样一个前端工程化的架构也就初步形成了。 首先说一说RequreJS的基本用法，使用RequreJS需要两个文件，一个是JS库本身，一个是它的配置文件，下图我是这样放置的 RequreJS的配置文件我就叫require.da...
vue项目中request.js文件基础配置
weixin_57246557的博客
09-01 2928
【代码】vue项目中request.js文件基础配置。
SpringBoot实现Vue-admin-template登录.docx
06-27
`Vue-admin-template`就是一个这样的模板，它是`vue-element-admin`的精简版本，适用于Vue.js项目的基础构建。虽然官方文档和社区资源已经提供了大量帮助，但在实际自定义搭建过程中，我们仍可能遇到挑战，特别是...
EasyPlayer.js 在VUE中使用
05-22
下面我们将详细介绍如何在Vue项目中使用EasyPlayer.js，以及涉及到的相关配置文件`webpack.dev.conf.js`和`webpack.base.conf.js`的作用。 首先，我们需要了解Vue项目的构建流程。Vue.js项目通常使用Webpack作为...
基于vue+element实现全局loading过程详解
11-19
在本文中，我们将深入探讨如何基于Vue.js和Element UI库实现全局加载（loading）效果。全局加载通常用于在页面跳转或API接口调用时显示一个遮罩层，以提高用户体验，表明应用正在进行后台处理。 首先，我们需要引入...
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript进行调用。 首先，我们需要了解Vue3中的Composition API。Vue3引入了Composition API，它允许我们在组件...
vue+element_ui上传文件,并传递额外参数操作
01-18
<template> <el-upload class=upload-demo action :limit=1 :file-list=formFileList :http-request=handleUploadForm :on-exceed=formHandleExceed :on-remove=formHandleRemove :before-upload=...
uniapp 小程序 request.js 文件书写
weixin_46479579的博客
04-26 596
uniapp 小程序 request.js 文件书写
vue-element-admin request.js的http请求参数修改
记录本人工作中遇到的问题、经验总结以及分享。
04-15 1591
需要把post请求Request Payload改成Form Data 方案一：使用qs（推荐） 安装qs模块 npm install qs --save-dev 引入一下 import qs from 'qs' 方案二 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; axios.defaults.headers.get['Content-Type'] = 'ap...
vue配置路由请求 request 文件
weixin_43971788的博客
10-10 1032
配置request文件 A、在request文件下新建request.js文件 // 引入axios import axios from "axios"; // 创建axios的实例 用来请求服务器的地址 const instance = axios.create({ baseURL: "http://xxxxxxxxx", // 服务器地址 timeout: 5000, // 响应时间 }); // 请求拦截 interceptors拦截 request请求 instance.interce
vue封装请求拦截（含refreshToken），并配置vue.config.js全局基本配置（含生产和开发的环境变量）
一个咸鱼的博客
12-09 2354
【代码】vue封装请求拦截（含refreshToken），并配置vue.config.js全局基本配置（含生产和开发的环境变量）
vue-element-admin 自己项目的配置讲解
sunlizhen的专栏
10-27 4363
1. 将多余的页面删除 剩下以下几个页面； 2. 别忘了将配置路由的页面路由去掉； 3.此时配置代理，用你自己的接口申请数据需要配置的如下： vue.config.js 文件；配置代理，将mock数据注释掉； 4.request.js里面，更改的是接口的返回的code，你后台根据哪个判断你就写哪个就行 import axios from 'axios' import { MessageBox, Message } from 'element-ui' import store from '
新手入门vue-element-admin框架（三）：实例：支持后台的登录功能改造
StellaXiao98的博客
05-14 2584
前言： （一）环境配置：https://blog.csdn.net/StellaXiao98/article/details/116790478?spm=1001.2014.3001.5502 （二）vue-element-admin简介及安装：https://blog.csdn.net/StellaXiao98/article/details/116791368?spm=1001.2014.3001.5502 第三部分 实例：实现登录页面 本文将介绍vue-element-admin框架中..
Notice-Message消息提示
hrbsfdxzhq01的博客
01-25 1381
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置type字段可以定义不同的状态，默认为info。此时正文内容以message的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入type字段的情况下像open4那样直接调用。 ...
springboot整合vue-element-template 实现登录
03-29
1. 在vue-element-template中的src/api目录下新建一个user.js文件，用于定义登录接口： ``` import request from '@/utils/request' export function login(username, password) { return request({ url: '/...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值