vue实战——vue中发送AJAX请求

川长思鸟来 2022-02-03 16:29 575阅读 0赞

### 我的qq 2038373094 ###

### **1、安装** ###

> **cnpm install --save vue-axios**

![20190510074511401.png][]

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

> **cnpm install --save axois**

![20190510080354998.png][]

--------------------

### ***什么是跨域？*** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

### ***疑问？*** ###

[http://localhost:8088/user和][http_localhost_8088_user][http://localhost:8080/PsychoSys是一个域么？][http_localhost_8080_PsychoSys]

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

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

是跨域请求！

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

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

***在proxyTable里面加上***

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

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

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

*** 目的：不引用，别想用axios***

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

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

![20190510090752465.png][]

--------------------

在这个页面里面导入

import axios from 'axios'

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4][]

## ***测试*** ##

***点击提交***

***XHR地址是***[http://localhost:8088/api/PsychoSys/regedit.action][http_localhost_8088_api_PsychoSys_regedit.action]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 6][]

[20190510074511401.png]: /images/20220203/0aee9810cd1b45499bb0ddf2d7b273be.png
[20190510080354998.png]: /images/20220203/82851e2a87024eee944e226f66fddb64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220203/dddddaa035fe4173a0e52f552380144d.png
[http_localhost_8088_user]: http://localhost:8088/user
[http_localhost_8080_PsychoSys]: http://localhost:8080/PsychoSys
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220203/f5ce102832b14ce7b8ee080c0ee88fd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220203/a033ef1ca423456c8a1788b9fdc1e9a8.png
[20190510090752465.png]: /images/20220203/31178699f3fa493aaffcfec8ecfd0edf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 3]: /images/20220203/f8af7230621e4580a773b6d4bd052eab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 4]: /images/20220203/436637fa75044569ad317644b71a3e97.png
[http_localhost_8088_api_PsychoSys_regedit.action]: http://localhost:8088/api/PsychoSys/regedit.action
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 5]: /images/20220203/236ab50994e04d0289553ea1bf183434.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 6]: /images/20220203/da07cb31cf94476e933bcf6ea9b5c912.png