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以及缩短后端的访问路径
配置后：
