美文网首页码农的世界Java 杂谈Java
Spring Boot + Vue 前后端分离开发,前端网络请求

Spring Boot + Vue 前后端分离开发,前端网络请求

作者: 702ea074a7fa | 来源:发表于2019-08-27 20:34 被阅读0次

    前端网络访问,主流方案就是 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 如下:

    image.png

    代码解释:

    •首先导入 axios 和 Massage 组件

    •接下来定义一个请求拦截器

    •最后定义一个响应拦截器,这个拦截器有两个参数,第一个参数 data 表示服务端处理成功的响应,第二个 err 表示服务端处理失败的响应。对照着 jQuery 中的 Ajax ,第一个相当于 success 回调,第二个相当于 error 回调。

    •响应的 data 表示服务端返回的数据,数据格式是 {data:{status:200,msg"",obj:{}},status:200} 其中,data 中的对象就是服务端返回的具体的 JSON ,外面的 status 表示 HTTP 响应码,里边的 status 是自定义的 RespBean 中返回的数据

    •首先判断 HTTP 响应码为 200 ,并且服务端返回的 status 为 500 ,表示业务逻辑错误,此时直接通过 Message 将错误信息展示出来,然后 return 即可。

    •如果服务端返回的字段中包含 msg ,则将 msg 显示出来,这个 msg 一般是成功的提示。

    •最后返回 data.data ,即将服务端返回的数据 return ,这个数据最终会来到请求调用的地方。

    •当 HTTP 响应码大于等于 400 时,进入 err 中。

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

    image.png

    由于在前后端分离项目中,大多数情况下,后端接口都采用 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,如下:

    image.png

    官方给出了 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 文件中配置:

    image.png

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

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

    相关文章

      网友评论

        本文标题:Spring Boot + Vue 前后端分离开发,前端网络请求

        本文链接:https://www.haomeiwen.com/subject/onuyectx.html