热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

SpringBoot+Vue前后端分离开发之前端网络请求封装与配置

这篇文章主要介绍了SpringBoot+Vue前后端分离开发之前端网络请求封装与配置方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个项目本身也停止维护,目前建议使用的方案是 axios。今天松哥就带大家来看看 axios 的使用。

axios 引入

axios 使用步骤很简单,首先在前端项目中,引入 axios:

npm install axios -S

装好之后,按理说可以直接使用了,但是,一般在生产环境中,我们都需要对网络请求进行封装。

因为网络请求可能会出错,这些错误有的是代码错误导致的,也有的是业务错误,不管是哪一种错误,都需要开发者去处理,而我们不可能在每一次发送请求时都去枚举各种错误情况。

因此我们需要对前端请求进行封装,封装完成后,将前端错误统一处理,这样,开发者只需要在每一次发送请求的地方处理请求成功的情况即可。

请求封装

在 axios 中,我们可以使用 axios 自带的拦截器来实现对错误的统一处理。

在 axios 中,有请求拦截器,也有响应拦截器。

请求拦截器中可以统一添加公共的请求参数,例如单点登录中前端统一添加 token 参数。

响应拦截器则可以实现对错误的统一处理。

另外一个需要注意的地方则是错误的展示需要使用一种通用的方式,而不可以和页面绑定(例如,登录失败,在用户名/密码输入框后面展示错误信息,不支持这种错误显示方式),这里推荐使用 ElementUI 中的 Massage 来展示错误信息,这是一个页面无关的组件。

封装后的 axios 如下:

import axios from 'axios'
import {Message} from 'element-ui'
axios.interceptors.request.use(cOnfig=> {
 return config;
}, err => {
 Message.error({message: '请求超时!'});
})
axios.interceptors.response.use(data => {
 if (data.status && data.status == 200 && data.data.status == 500) {
 Message.error({message: data.data.msg});
 return;
 }
 if (data.data.msg) {
 Message.success({message: data.data.msg});
 }
 return data.data;
}, err => {
 if (err.response.status == 504 || err.response.status == 404) {
 Message.error({message: '服务器被吃了⊙﹏⊙∥'});
 } else if (err.response.status == 403) {
 Message.error({message: '权限不足,请联系管理员!'});
 } else if (err.response.status == 401) {
 Message.error({message: err.response.data.msg});
 } else {
 if (err.response.data.msg) {
  Message.error({message: err.response.data.msg});
 }else{
  Message.error({message: '未知错误!'});
 }
 }
})

代码解释:

1.首先导入 axios 和 Massage 组件
2.接下来定义一个请求拦截器
3.最后定义一个响应拦截器,这个拦截器有两个参数,第一个参数 data 表示服务端处理成功的响应,第二个 err 表示服务端处理失败的响应。对照着 jQuery 中的 Ajax ,第一个相当于 success 回调,第二个相当于 error 回调。
4.响应的 data 表示服务端返回的数据,数据格式是 {data:{status:200,msg"",obj:{}},status:200} 其中,data 中的对象就是服务端返回的具体的 JSON ,外面的 status 表示 HTTP 响应码,里边的 status 是自定义的 RespBean 中返回的数据
5.首先判断 HTTP 响应码为 200 ,并且服务端返回的 status 为 500 ,表示业务逻辑错误,此时直接通过 Message 将错误信息展示出来,然后 return 即可。
6.如果服务端返回的字段中包含 msg ,则将 msg 显示出来,这个 msg 一般是成功的提示。
7.最后返回 data.data ,即将服务端返回的数据 return ,这个数据最终会来到请求调用的地方。
8.当 HTTP 响应码大于等于 400 时,进入 err 中。

方法封装

请求封装完成后,还需要对方法进行封装,方便调用:

let base = '';
export const postRequest = (url, params) => {
 return axios({
 method: 'post',
 url: `${base}${url}`,
 data: params,
 headers: {
  'Content-Type': 'application/json'
 }
 });
}
export const putRequest = (url, params) => {
 return axios({
 method: 'put',
 url: `${base}${url}`,
 data: params,
 headers: {
  'Content-Type': 'application/json'
 }
 });
}
export const deleteRequest = (url) => {
 return axios({
 method: 'delete',
 url: `${base}${url}`
 });
}
export const getRequest = (url) => {
 return axios({
 method: 'get',
 url: `${base}${url}`
 });
}

由于在前后端分离项目中,大多数情况下,后端接口都采用 RESTful 风格来设计,所以前端主要封装 GET\POST\PUT\DELETE 方法,然后所有的请求参数都是用 JSON。

这里一开始定义了一个 base 变量,这是请求的前缀,方便后期维护(如果需要统一修改请求前缀)。

制作 Vue 插件

封装好的方法已经可以直接使用了,但是比较麻烦,每次使用时,都需要在相关的 vue 文件中引入方法,像下面这样:
import {postRequest} from "../utils/api";

但是这种操作方式太麻烦,所以我们可以考虑将方法进一步封装成 Vue 的插件,这样在每一个 vue 文件中,不需要引入方法就能够直接调用方法了。

参考 Vue 官方文档 https://cn.vuejs.org/v2/guide/plugins.html,如下:

官方给出了 5 种插件制作方式,我们这里采用第 4 种方案。

 具体操作就是在 main.js 中引入所有的封装好的方法,然后挂载到 Vue.prototype 上即可,如下:

import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";
import {getRequest} from "./utils/api";
Vue.prototype.getRequest = getRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.postRequest = postRequest;

封装完成后,以后在 vue 文件中,直接通过 this 就可以获取到网络请求方法的引用了,如下:

this.postRequest("/doLogin", this.user).then(msg=>{
 if (msg) {
 //登录成功,页面跳转
 }
})

注意 ,then 中的 msg 就是响应拦截器中返回的 msg ,这个 msg 如果没有值,表示请求失败(失败已经在拦截器中进行处理了),如果有值,表示请求成功!

配置请求转发

在前后端分离中,前端和后端在不同的端口或者地址上运行,如果前端直接向后端发送请求,这个请求是跨域的。

但是在项目部署时,前端打包编译后拷贝到 Java 项目中,和 Java 项目一起运行,此时不存在跨域问题。

所以这里我们的解决思路不是解决跨域问题,而是通过配置 NodeJS 的请求转发,来实现网络请求顺利发送。

请求转发在 vue 项目的 config/index.js 文件中配置:

添加了请求转发配置之后,一定要重启前端项目才会生效。

此时启动前端项目,就可以顺利发送网络请求了。

总结

本文主要和大伙分享了在前后端分离的情况下,如何对前端网络请求进行封装,并且如何配置请求转发,这是前后端分离中的基础课,小伙伴们有问题欢迎留言讨论。松哥将自己封装的网络请求库已经放在 GitHub 上,欢迎大家参考 https://github.com/lenve/javaboy-code-samples。


推荐阅读
  • 本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例,帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]
  • 本文详细介绍了在企业级项目中如何优化 Webpack 配置,特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]
  • 本文详细介绍了网络存储技术的基本概念、分类及应用场景。通过分析直连式存储(DAS)、网络附加存储(NAS)和存储区域网络(SAN)的特点,帮助读者理解不同存储方式的优势与局限性。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 本文详细介绍如何使用CSS自定义HTML5视频播放器的样式,涵盖常见属性及跨浏览器兼容性问题。发布时间:2020-09-14 14:46:29;来源:亿速云;阅读量:58;作者:小新。 ... [详细]
  • 当unique验证运到图片上传时
    2019独角兽企业重金招聘Python工程师标准model:public$imageFile;publicfunctionrules(){return[[[na ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 理解文档对象模型(DOM)
    本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • Composer Registry Manager:PHP的源切换管理工具
    本文介绍了一个用于Composer的源切换管理工具——Composer Registry Manager。该项目旨在简化Composer包源的管理和切换,避免与常见的CRM系统混淆,并提供了详细的安装和使用指南。 ... [详细]
  • 在网页开发中,页面加载速度是一个关键的用户体验因素。为了提升加载效率,避免在PageLoad事件中进行大量数据绑定操作,可以采用异步加载和特定控件来优化页面加载过程。 ... [详细]
  • 作为一名 Ember.js 新手,了解如何在路由和模型中正确加载 JSON 数据是至关重要的。本文将探讨两者之间的差异,并提供实用的建议。 ... [详细]
  • 自 Node.js 6.3 版本起,调试功能已内置在核心模块中,无需额外安装 node-inspector 等工具。通过简单的命令即可启动调试模式,并利用 Chrome 浏览器进行高效的代码调试。 ... [详细]
  • 本文探讨了在使用Selenium进行自动化测试时,由于webdriver对象实例化位置不同而导致浏览器闪退的问题,并提供了详细的代码示例和解决方案。 ... [详细]
  • 本文探讨了如何在iOS开发环境中,特别是在Xcode 6.1中,设置和应用自定义文本样式。我们将详细介绍实现方法,并提供一些实用的技巧。 ... [详细]
author-avatar
星寴
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有