想法很简单,简单应用vue获取后端数据。
实例化Vue对象并在method里面加上动态更新的函数add,实例化Axios对象并调用get方法,在get方法里面调用add以实现对vue data的更新
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<body>
<!--<div id="myDiv"><h2>内容</h2></div>-->
<button type="button" onclick="loadXMLDoc()">改变</button>
<ul id="app" >
<li v-for="student in students" :key="student.username">
{{ student.username }}
</li>
</ul>
</body>
<script>
var vm=new Vue({
el: '#app',
data:{
students:[]
},
methods: {
adddata: function (Data) {
this.students=Data
}
}
})
function loadXMLDoc(){
const instance = axios.create({
url: '/admin/index',
method: 'get', // 默认值
baseURL: 'http://localhost:8080/admin/login',
});
axios.get('/admin/index')
.then(function (response) {
vm.adddata(response.data);
});
}
</script>
</html>