<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<style>
td,tr{
width: 50px;
height: 30px;
border: 1px solid black;
text-align: center;
line-height: 30px;
}
input{
width: 40px;height: 30px;
border:none;
outline: none;
}
</style>
</head>
<body>
<div id="box">
<table>
<tr>
<td>名字</td>
<td>
<input type="text" v-model="name">
</td>
<td>年龄</td>
<td>
<input type="text" v-model="age">
</td>
</tr>
<tr v-for='item in list' :key="item.id">
<td>
{{item.name}}
</td>
<td>
{{item.age}}
</td>
<td>
<button @click='del(item.id)'>del</button>
</td>
<td>
<button @click='update(item.id)'>update</button>
</td>
</tr>
<tr>
<td>
<button @click='add'>add</button>
</td>
<td colspan="3">
{{msg}}
</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#box',
data:{
list:[],
name:'',
age:'',
msg:''
},
created() {
this.getData();
},
methods:{
init(){
this.name='';
this.age='';
},
getData(){
axios.get('http://localhost:3000/users').then((res)=>{
this.list = res.data;
})
},
add(){
if(this.name&&this.age){
axios.post('http://localhost:3000/users',{
"name": this.name,
"age": this.age,
},{
Headers:{ "Content-Type":'application/json' }
}).then((res)=>{
this.init();
this.msg='添加成功';
this.getData();
})
}else{
this.msg='输入不能为空';
}
},
del(id){
axios.delete('http://localhost:3000/users/'+id).then((res)=>{
this.getData();
})
},
update(id){
let updateMsg = {};
if( this.name){
updateMsg.name = this.name;
}
if(this.age){
updateMsg.age = this.age;
}
axios.patch('http://localhost:3000/users/'+id,updateMsg,{
Headers:{"Content-Type":'application/json' }
}).then((res)=>{
this.init();
this.msg='修改成功';
this.getData();
})
}
}
})
</script>
</body>
</html>
