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 });
