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

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

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