我的qq 2038373094

1、安装

cnpm install --save vue-axios

1.2、如果是跨域请求，则需要安装

cnpm install --save axois

---

什么是跨域？

疑问？

http://localhost:8088/user和http://localhost:8080/PsychoSys是一个域么？

是一个域名但不是一个端口号！

域名相同端口号不同是跨域请求么？

是跨域请求！

vue-cli前端项目+axois请求+java后端项目，来实现前后台交互；（跨域请求）

1、设置config文件夹下面的index.js配置文件

在proxyTable里面加上

 '/api/**': {
        target: 'http://localhost:8080',
        pathRewrite:{
            '^/api': '/'
        }

目的：方便书写，在发送请求的时候，我不用写"http://localhost:8080/项目名/请求"；我只需要写"/api/项目名/请求"

 

2、在入口文件main.js里面引入如下代码

import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Vue.config.productionTip = false

 目的：不引用，别想用axios

3、html页面，一个点击事件

---

在这个页面里面导入

import axios from 'axios'

这里面的username和password和后台的属性是对应的

 

测试

点击提交

XHR地址是http://localhost:8088/api/PsychoSys/regedit.action

有人会问，你的后台不是http://localhost:8080/PsychoSys/regedit.action么？为什么端口号是8088呢？

这个就是这样的，跨域请求之后，表面是域名是前端的，实际转动到了后台

我们来看看后端是否真的有数据传进来了，控制台的信息告诉我们，前后台交互成功了