<!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{ 50px; height: 30px; border: 1px solid black; text-align: center; line-height: 30px; } input{ 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>