vue学习四：Axios网络请求

Axios 是一个基于 Promise 的 HTTP 客户端库，常用于浏览器和 Node.js 环境发送网络请求，是前端最常用的请求工具之一。是Ajax的优化版本。

从官网中获得安装命令

复制代码

npm install axios

并在需要使用的vue组件中，于viewmodel层加入引用

复制代码

import axios from 'axios'

axios的两大请求方式

参数可以置于？后方，或者利用params来存储多个参数，处理结果会返回给function中的参数中，成功返回给response，失败给error。

POST方法中，参数放在请求体中。post传给后端会自动转化为json格式，所以后端要注意数据接收类型。

生命周期钩子的简单介绍

生命周期钩子 = 组件从创建到销毁过程中自动触发的函数，用来在特定时机执行代码。

生命周期钩子放在目标组件的view部分，即<script>标签内。

复制代码

created() {
  // 一创建就请求数据
  console.log("App组件组件创建完，可发请求、初始化数据")
},
mounted() {
  // DOM 准备好了
  console.log("页面已被挂载，DOM 已渲染，可操作 DOM、初始化插件")
},
updated(){
  //数据变化、视图更新后触发
},
unmounted() {
  console.log("组件销毁，清除定时器、解绑事件")
},

此时在生命周期函数中，来使用axios的跨域连接操作 。

其中mounted与created为异步执行，所以mounted中的数据会被先打印。

对应的后端中的查询方法

访问前端端口http://localhost:8080/后，在控制台中得到信息跨域连接被拦截，因为违反了跨域连接安全协议，所以还需要进行额外配置

关于跨域信息的介绍如下：

若想让单个控制器可以不被浏览器阻拦，则可以在该控制器中添加@CrossOrigin注解，便解决了该单个控制器的跨域拦截问题

在浏览器中也可以查询到状态，由前端的response返回体返回如下数据，其中data则装在后端的查询返回值，对应转化为json类型。

若想要全局生效，则改为编写配置类，选择默认模板或者自适应修改

复制代码

@Configuration
public class corsconfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")//控制器的路径
                .allowedOriginPatterns("*") //端口号如8080（2.4+版本用该语句）
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(168000)
                .allowedHeaders("*") 
                .allowCredentials(true);
    }
}

axios可以作为数据导入，与之前的elementui组件相结合。

view层：

view model层：

在统一文件中需要写在data属性中

在view的部分中，对应的prop作为索引来连接view model的每一行数据部分，label是显示的表格列头的文字。

但数据应为浏览器网络传输，从数据库中得到数据，而非提前在前端中写死数据。将tableData的原始数据置空后，此时通过axios的get方法来从后端数据库中得到数据。得到的数据如下，注意每行数据字段应该与前端中表格的prop字段一致。

然后利用如下返回方法返回数据，可以确保this的父级一致。注意返回的内容只需要是response参数的data层即可。请求头以及状态等等冗余数据无需返回给页面输出。

复制代码

axios.get().then((xx)=>{ this.xxx=xx.data })

得到浏览器的返回结果：

该vue功能实现部分代码：

关于后续便于配置后端的连接：

在main.js导入axios，并配置如下配置行

复制代码

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8081'//后端的访问根路径

相当于在vue全局配置了一个叫$http的属性名，他的值是axios。

复制代码

app.config.globalProperties.$http = axios

对应在方法调用时，将axios替换为this.$http以及缩短后端的访问路径

配置后：