信息录入系统

<script src="lib/vue.js"></script>
<script src="lib/vue-resource.js"></script>
 <script>
        new Vue({
            el: '#app',
            mounted() {
                this.getStudentList();
            },
            data: {
                students: [
                    { name: '张三', sex: '女', age: 19, phone: '18921212121' },
                    { name: '李四', sex: '男', age: 29, phone: '18921221121' },
                    { name: '王五', sex: '女', age: 39, phone: '18921788721' },
                    { name: '赵六', sex: '男', age: 49, phone: '18921556121' }
                ],
                newStudent: { name: '', sex: '男', age: 0, phone: '' }
            },
            methods: {
                createNewStu() {
                    // 4. 插入新纪录
                    this.students.unshift(this.newStudent);
                    // 5. 清空数据
                    this.newStudent = { name: '', sex: '男', age: 0, phone: '' }
                },
                // 删除记录
                delStudent(index) {
                    this.students.splice(index, 1);
                }
            }
        });

<div id="app">
        <fieldset>
            <legend>学生录入系统</legend>
            <div>
                <span>姓名:</span>
                <input type="text" placeholder="请输入姓名" v-model="newStudent.name">
            </div>
            <div>
                <span>年龄:</span>
                <input type="text" placeholder="请输入年龄" v-model="newStudent.age">
            </div>
            <div>
                <span>性别:</span>
                <select v-model="newStudent.sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div>
                <span>手机:</span>
                <input type="text" placeholder="请输入手机号码" v-model="newStudent.phone">
            </div>
            <button @click="createNewStu()">创建新用户</button>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>手机</td>
                    <td>删除</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(stu, index) in students" :key="index">
                    <td>{{stu.name}}</td>
                    <td>{{stu.sex}}</td>
                    <td>{{stu.age}}</td>
                    <td>{{stu.phone}}</td>
                    <td>
                        <button @click="delStudent(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

 

<script src="lib/vue.js"></script>
<script src="lib/vue-resource.js"></script>
<script>
    new Vue({
        el: '#app',
        mounted(){
           this.getStudentList();
        },
        data: {
            students: [],
            newStudent: {name: '', sex: '男', age: 0, phone: ''}
        },
        methods: {
            getStudentList(){
                this.$http.get('http://127.0.0.1:3000/api/getStuList').then(response => {
                    this.students = response.body.message;
                }, response => {
                    alert('网络发生错误!');
                });
            },
            createNewStu(){
                this.$http.post('http://127.0.0.1:3000/api/insertStuList', this.newStudent, {emulateJSON:true}).then(response => {
                    // 4.1 判断
                    if(response.body.success_code === 200){ // 插入成功
                         this.getStudentList();
                    }
                }, response => {
                   alert('插入数据失败')
                });
                // 5. 清空数据
                this.newStudent = {name: '', sex: '男', age: 0, phone: ''}
            },
            // 删除记录
            delStudent(index){
                // this.students.splice(index, 1);
                this.$http.post('http://127.0.0.1:3000/api/delStuList', {id:index}, {emulateJSON:true}).then(response => {
                    // 4.1 判断
                    if(response.body.success_code === 200){ // 插入成功
                        this.getStudentList();
                    }
                }, response => {
                    alert('插入数据失败')
                });
            }
        }
    });
</script>

 

 new Vue({
        el: '#app',
        mounted(){
           this.getStudentList();
        },
        data: {
            students: [],
            newStudent: {name: '', sex: '男', age: 0, phone: ''}
        },
        methods: {
            // 获取学生列表
            getStudentList(){
                //字符串转为json
                this.students = JSON.parse(window.localStorage.getItem('students') || '[]');
            },
            // 插入记录
            createNewStu(){
                // 4. 插入新纪录
                this.students.unshift(this.newStudent);
                //对象转为字符串
                localStorage.setItem('students', JSON.stringify(this.students));
                // 5. 清空数据
                this.newStudent = {name: '', sex: '男', age: 0, phone: ''}
            },
            // 删除记录
            delStudent(index){
                this.students.splice(index, 1);
                localStorage.setItem('students', JSON.stringify(this.students));
            }
        }
    });