昨日我们已经设计了一个简单的功能页面，但是里面显示的数据是假的固定死的，主要是为了展示功能实现后的实际效果。这个也就是大部分前端程序员在开发中遇到的一个阶段，前端开发完成就差后端给数据，但是后端有可能还没开发完成，客户又想看实际什么效果那么就得造一点假数据来填充页面，这样给客户看开发成果就比较直观，当然现在前端老哥办法多，就算后端api还未开发完成，也能使用一些模拟数据接口工具，比如mock、json-server等工具，模拟一些数据接口返回数据，便于前端程序正常运行和测试，等到后端开发完成就替换为真实接口即可。所以说前后端分离也有这个好处，就是能自己开发完成后不需要等待后端，提升了开发效率，当然实际过程中就算前后端分离，但是前后端联调也是一言难尽啊。这个咱在这就不说了。
今天来看看，我们如何在vue框架中使用axios调用后端数据，然后将后端返回的数据，进行前端的渲染，实现前后端数据交互。至于前后端数据交互的流程已在昨天的文章中讲过了，感兴趣的朋友可以一看。那么我们就先看看如何在vue中使用axios，主要也还是两大步，安装和引用：
1、安装
先摆出官方文档：
代码语言：javascript复制https://axios-http.com/docs/intro使用npm或者yarn包管理器安装 npm install axios，官网上还有其他方法，比如使用cdn、或者bower安装等。
2、在vue项目中引用axios，一般在main.js中或单独的组件中引入，这里一般会封装axios为一个js插件，在main.js中注册使用。
官方也给出如何使用的例子，那么我们这边只说说在我们这个项目中是如何使用的。
3、在说说如何封装一个axios插件，为啥要封装？因为咱们可以用这个axios组件来管理整个项目的网络请求，使得代码更加清晰和易复用。下面是具体的步骤：
（1）先在项目根目录下创建一个名为 "api" 的文件夹，并在该文件夹下创建一个 "axios.js" 文件（也可以取其他名字，只是一般都叫api）。
（2）在 "axios.js" 文件中引入 axios，然后创建一个 axios 实例。可以在实例创建时进行一些默认配置，例如设置基本 URL、超时时间和请求头等。
代码语言：javascript复制import axios from 'axios'
const apiservice = axios.create({
baseURL: 'http://localhost:9090', // 就是请求的基础路径
timeout: 10000, // 设置请求的超时时间
headers: {
'Content-Type': 'application/json' // 请求头，这部分也可以在请求拦截器中设置
}
})（3）给 axios 实例添加请求拦截器和响应拦截器。
请求拦截器可以在每个请求之前对请求进行一些处理，例如添加请求头或者请求参数等；
代码语言：javascript复制apiservice.interceptors.request.use(
config => {
// 添加请求头
config.headers['Authorization'] = localStorage.getItem('token') || ''可以全局设置接口请求header中带token
return config
},
error => {
return Promise.reject(error)
}
)（4）响应拦截器可以在每个请求之后对响应进行一些处理，例如根据响应结果判断用户是否登录过期等。
代码语言：javascript复制apiservice.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) {
console.log('请求失败')
}
else {
return res
}
},
error => {
console.log(error)
return Promise.reject(error)
}
)（5）最后，将封装好的 axios 实例作为一个插件，在 main.js 中进行注册即可。
代码语言：javascript复制import axios from './api/axios'
Vue.use(axios)（6）在需要使用网络请求的组件中，可以通过如下方式调用封装好的请求方法。
代码语言：javascript复制import apiserver from '@/api/axios.js';
export default {
methods: {
getUserList() {
http.get('/user/list').then(res => {
console.log(res.data); // 处理返回结果
}).catch(err => {
console.error(err); // 处理错误信息
});
},
addUser(user) {
http.post('/user/add', user).then(res => {
console.log(res.data); // 处理返回结果
}).catch(err => {
console.error(err); // 处理错误信息
});这就是在 Vue 项目中封装axios组件的基本步骤，可以根据实际需求进行自定义扩展，例如设置公共请求参数、接口返回码统一处理等。
那么将axios封装好后，我们就到咱们昨天设计的功能页面中使用axios，调用后端数据到前端展示。
先看看效果图:
这里显示了节点的名字以及具体的信息，我们再直接看看是否和k8s的集群信息一致，直接登录这个节点查看，如下图：
这里只写了一个关于k8s里node信息的接口，这个后面再讲，就是说，到这里，前端已经获取到后端的数据了。
那么，具体找个简单的例子来讲，怎么用：
直接粘代码：
代码语言：javascript复制<template>
<div class="home">
我是k8s的node节点信息
</div>
<p>{{node}}</p>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
node:[]
}
},
created () {
axios.get('http://localhost:9090/api/k8s/nodes')
.then(response => {
this.node = response.data
})
.catch(error => {
console.log(error)
})
}
}
</script>这里的node就是后端返回给前端的数据集，功能就是将node的信息都展现在页面上。
我们来看看：
那么这一周前端的基础学习到这里就已经结束了，大家已经具备前端简单功能页面开发的能力了，关于前端高阶玩法，后期会随着学习深入给大家分享。接下来一周我们就要研究如何开发后端api了，因为没有后端数据的支撑，前端的页面就是个空壳子而已，所以，感兴趣的朋友可以接着学习，别忘了点赞关注呀！
