axios的简单使用
Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架,它的主要作用就是实现Ajax异步通信。
1.安装axios
npm install axios vue-axios --save
2.在main.js中引入axios
import axios from 'axios'
Vue.config.productionTip = false;
//设置默认请求的路径(http://localhost:8088为请求后端的路径)
axios.defaults.baseURL = "http://localhost:8088"
Vue.prototype.$axios = axios;
3.使用axios请求后端数据
<script>
export default {
name: "UserManager",
data(){
return{
//声明student数组
student:[]
}
},
//vue生命周期钩子函数,用来初始数据
mounted(){
//初始化student
this.getStudent();
},
methods : {
//通过调用后端接口得到student集合
getStudent(){
//get为请求方式,请求路径为baseURL+''即http://localhost:8088/student/index
//then回调函数,res为请求返回的结果
this.$axios.get('/student/index').then(res =>{
console.log(res);
//将res.data里面的数据赋值给student数组
this.student = res.data;
})
},
del(id){
if (confirm("您确定要删除吗?")) {
//带参用+号连接即可
this.$axios.get('/student/delete/'+id).then(res =>{
if(res){
for (var i = 0; i <this.student.length ; i++) {
if(id==this.student[i].id){
this.removeTodo(i)
}
}
}
})
} else {
return false;
}
},
removeTodo (index){
this.student.splice(index, 1);
}
}
}
</script>
4.vue绑定数据
<template>
<div>
用户首页
<table border="1px">
<thead>
<tr>
<th>
<div><input type="checkbox"></div>
</th>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
//使用v-for循环遍历
<tr v-for = "stu in student" :key="stu.id">
<td>
<div><input type="checkbox"/></div>
</td>
//mustache语法{{}}获取对象属性数据
<td>{{stu.id}}</td>
<td>{{stu.name}}</td>
<td>{{stu.age}}</td>
<td>{{stu.classroom}}</td>
<td>{{stu.sex}}</td>
<td>
<a title="编辑" onclick="" href="javascript:;">编辑</a>
<a title="删除" href="#" @click="del(stu.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</template>