1、引入Axios:网络请求使用 Axios,首先安装Axios依赖
npm i axios -S
对于网络请求,由于在每一次请求时都需要判断各种异常情况,然后提示用户,例如请求是否成功、失败的原因等,考虑到这些判断基本上都使用重复的代码,因此可以将网络请求封装,做成Vue的插件方便使用。由于封装的代码比较长,这里就不贴出来了,读者可以在GitHub 上查看,地址为https://github.com/lenve/vhr/blob/master/vuehr/src/utils/api.js 。配置完成后,在main.js中导入封装的方法,然后配置为Vue 的prototype,代码如下:
import { getRequest } from './utils/api' import { postRequest } from './utils/api' import { deleteRequest } from './utils/api' import { putRequest } from './utils/api' Vue.prototype.getRequest = getRequest; Vue.prototype.postRequest = postRequest; Vue.prototype.deleteRequest = deleteRequest; Vue.prototype.putRequest = putRequest;
配置完成后,接下来对于任何需要使用网络请求的地址,都可以使用this.XXX执行一个网络请求,例如要执行登录请求,就可以通过this. postRequest(url,param)执行。
2. 配置请求转发
由于前端项目和后端项目在不同的端口下启动,前端的网络请求无法直接发送到后端,因此需要配置请求转发。下面介绍配置方式。
修改config目录下的index.js 文件,修改proxyTable,代码如下:
proxyTable: { // 配置HTTP请求转发 '/': { target: 'http://192.168.84.72:8080', changeOrigin: true, pathRewrite: { '^/': '' } }, // 配置WebSocket请求转发 '/ws/*': { target: 'ws://127.0.0.1:8082', ws: true } }
这里配置了两条规则,第一条是配置HTTP 请求转发,第二条是配置WebSocket 请求转发,WebSocket 请求在本项目的即时通信模块中会用到。
评论前必须登录!
注册