信息录入系统_资料管理系统

 1 <script src="lib/vue.js"></script>  2 <script src="lib/vue-resource.js"></script>  3 <script>  4 new Vue({  5 el: '#app',  6  mounted() {  7 this.getStudentList();  8  },  9  data: { 10  students: [ 11 { name: '张三', sex: '女', age: 19, phone: '18921212121' }, 12 { name: '李四', sex: '男', age: 29, phone: '18921221121' }, 13 { name: '王五', sex: '女', age: 39, phone: '18921788721' }, 14 { name: '赵六', sex: '男', age: 49, phone: '18921556121' } 15  ], 16 newStudent: { name: '', sex: '男', age: 0, phone: '' } 17  }, 18  methods: { 19  createNewStu() { 20 // 4. 插入新纪录 21 this.students.unshift(this.newStudent); 22 // 5. 清空数据 23 this.newStudent = { name: '', sex: '男', age: 0, phone: '' } 24  }, 25 // 删除记录 26  delStudent(index) { 27 this.students.splice(index, 1); 28  } 29  } 30 });

 1 <div id="app">  2 <fieldset>  3 <legend>学生录入系统</legend>  4 <div>  5 <span>姓名:</span>  6 <input type="text" placeholder="请输入姓名" v-model="newStudent.name">  7 </div>  8 <div>  9 <span>年龄:</span> 10 <input type="text" placeholder="请输入年龄" v-model="newStudent.age"> 11 </div> 12 <div> 13 <span>性别:</span> 14 <select v-model="newStudent.sex"> 15 <option value="男">男</option> 16 <option value="女">女</option> 17 </select> 18 </div> 19 <div> 20 <span>手机:</span> 21 <input type="text" placeholder="请输入手机号码" v-model="newStudent.phone"> 22 </div> 23 <button @click="createNewStu()">创建新用户</button> 24 </fieldset> 25 <table> 26 <thead> 27 <tr> 28 <td>姓名</td> 29 <td>性别</td> 30 <td>年龄</td> 31 <td>手机</td> 32 <td>删除</td> 33 </tr> 34 </thead> 35 <tbody> 36 <tr v-for="(stu, index) in students" :key="index"> 37 <td>{{stu.name}}</td> 38 <td>{{stu.sex}}</td> 39 <td>{{stu.age}}</td> 40 <td>{{stu.phone}}</td> 41 <td> 42 <button @click="delStudent(index)">删除</button> 43 </td> 44 </tr> 45 </tbody> 46 </table> 47 </div>

 1 <script src="lib/vue.js"></script>  2 <script src="lib/vue-resource.js"></script>  3 <script>  4 new Vue({  5 el: '#app',  6  mounted(){  7 this.getStudentList();  8  },  9  data: { 10  students: [], 11 newStudent: {name: '', sex: '男', age: 0, phone: ''} 12  }, 13  methods: { 14  getStudentList(){ 15 this.$http.get('http://127.0.0.1:3000/api/getStuList').then(response => { 16 this.students = response.body.message; 17 }, response => { 18 alert('网络发生错误!'); 19  }); 20  }, 21  createNewStu(){ 22 this.$http.post('http://127.0.0.1:3000/api/insertStuList', this.newStudent, {emulateJSON:true}).then(response => { 23 // 4.1 判断 24 if(response.body.success_code === 200){ // 插入成功 25 this.getStudentList(); 26  } 27 }, response => { 28 alert('插入数据失败') 29  }); 30 // 5. 清空数据 31 this.newStudent = {name: '', sex: '男', age: 0, phone: ''} 32  }, 33 // 删除记录 34  delStudent(index){ 35 // this.students.splice(index, 1); 36 this.$http.post('http://127.0.0.1:3000/api/delStuList', {id:index}, {emulateJSON:true}).then(response => { 37 // 4.1 判断 38 if(response.body.success_code === 200){ // 插入成功 39 this.getStudentList(); 40  } 41 }, response => { 42 alert('插入数据失败') 43  }); 44  } 45  } 46  }); 47 </script>

 1 new Vue({  2 el: '#app',  3  mounted(){  4 this.getStudentList();  5  },  6  data: {  7  students: [],  8 newStudent: {name: '', sex: '男', age: 0, phone: ''}  9  }, 10  methods: { 11 // 获取学生列表 12  getStudentList(){ 13 //字符串转为json 14 this.students = JSON.parse(window.localStorage.getItem('students') || '[]'); 15  }, 16 // 插入记录 17  createNewStu(){ 18 // 4. 插入新纪录 19 this.students.unshift(this.newStudent); 20 //对象转为字符串 21 localStorage.setItem('students', JSON.stringify(this.students)); 22 // 5. 清空数据 23 this.newStudent = {name: '', sex: '男', age: 0, phone: ''} 24  }, 25 // 删除记录 26  delStudent(index){ 27 this.students.splice(index, 1); 28 localStorage.setItem('students', JSON.stringify(this.students)); 29  } 30  } 31 });