vue实验报告6 表数据的CRDU操作

最新推荐文章于 2023-12-23 11:00:33 发布

lsy永烨

最新推荐文章于 2023-12-23 11:00:33 发布

阅读量1.2k

点赞数 11

分类专栏： vue实验报告文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_69194031/article/details/134893289

版权

vue实验报告专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、实验要求：

用编程实现列表的增、删、改、查，要求运用vuex的相关知识，写一段增删改查的代码，要求的数据格式是每一串数据包含ID 姓名性别年级四个信息。

二、实验结果展示：

1.初始状态：

2.删除：

3.添加：

4.编辑：

三、实验代码展示：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增删改查</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@3"></script>
</head>

<body>
    <div id="app">
        <!-- 查询输入框和添加按钮 -->
        <div>
            <input v-model="searchName" placeholder="请输入要查询的名字">
            <button @click="addStudent">添加</button>
        </div>

        <!-- 查询结果显示 -->
        <div v-for="student in filteredStudents" :key="student.id"
            style="margin-top: 10px; border: 1px solid #ccc; padding: 10px;">
            <div>
                <span>ID: {{ student.id }}</span>
                <span>姓名: {{ student.name }}</span>
                <span>性别: {{ student.gender }}</span>
                <span>年级: {{ student.grade }}</span>
                <button @click="editStudent(student)">编辑</button>
                <button @click="deleteStudent(student.id)">删除</button>
            </div>
        </div>

        <!-- 编辑弹窗 -->
        <div v-if="showEditModal">
            <h3>编辑学生信息</h3>
            <div>
                <label>姓名: </label>
                <input v-model="editedStudent.name">
            </div>
            <div>
                <label>性别: </label>
                <select v-model="editedStudent.gender">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div>
                <label>年级: </label>
                <select v-model="editedStudent.grade">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>
            <button @click="updateStudent">保存</button>
            <button @click="cancelEdit">取消</button>
        </div>
    </div>

    <script>
        const store = new Vuex.Store({
            state: {
                students: [
                    { id: 1, name: '张三', gender: '男', grade: '1' },
                    { id: 2, name: '李四', gender: '女', grade: '2' },
                    { id: 3, name: '王五', gender: '男', grade: '3' },
                    { id: 4, name: '赵六', gender: '女', grade: '4' },
                ],
                searchName: '', // 用于存储搜索关键字
                showEditModal: false, // 控制编辑弹窗的显示与隐藏
                editedStudent: {
                    id: null,
                    name: '',
                    gender: '',
                    grade: '',
                }, // 用于存储当前编辑的学生信息
            },
            mutations: {
                // 添加学生
                addStudent(state) {
                    const newStudent = {
                        id: state.students.length > 0 ? state.students[state.students.length - 1].id + 1 : 1,
                        name: '',
                        gender: '',
                        grade: ''
                    };
                    state.students.push(newStudent);
                },
                // 编辑学生
                editStudent(state, student) {
                    state.showEditModal = true; // 显示编辑弹窗
                    // 将当前编辑的学生信息保存到 editedStudent 对象中
                    state.editedStudent.id = student.id;
                    state.editedStudent.name = student.name;
                    state.editedStudent.gender = student.gender;
                    state.editedStudent.grade = student.grade;
                },
                // 保存编辑后的学生信息
                updateStudent(state) {
                    const index = state.students.findIndex(student => student.id === state.editedStudent.id);
                    if (index !== -1) {
                        // 更新学生信息
                        state.students[index].name = state.editedStudent.name;
                        state.students[index].gender = state.editedStudent.gender;
                        state.students[index].grade = state.editedStudent.grade;
                    }
                    state.showEditModal = false; // 隐藏编辑弹窗
                },
                // 取消编辑
                cancelEdit(state) {
                    state.showEditModal = false; // 隐藏编辑弹窗
                    // 重置 editedStudent 对象
                    state.editedStudent.id = null;
                    state.editedStudent.name = '';
                    state.editedStudent.gender = '';
                    state.editedStudent.grade = '';
                },
                // 删除学生
                //:key="student.id" 中的 student.id 是循环中每个学生对象的 id 属性。
                //然后，在点击删除按钮时，@click="deleteStudent(student.id)" 语法中的 
                //student.id 将这个学生对象的 id 传递给 deleteStudent 方法。
                deleteStudent(state, studentId) {
                    // 从学生数组中过滤掉要删除的学生
                    state.students = state.students.filter(student => student.id !== studentId);
                },
            },

            //在这个 Vuex 的 getter 中，state.searchName 是搜索关键字，
            //当搜索框一开始是空的时候，state.searchName 会是一个空字符串 ''。
            //在js中，includes 方法检查一个字符串是否包含另一个字符串，
            //如果被检查的字符串是空字符串 ''，它会返回 true。
            //这就意味着当搜索框为空时，student.name.includes(state.searchName) 将对每个学生都返回 true，
            //因为空字符串是每个字符串的子集。
            getters: {
                // 根据搜索关键字过滤学生信息
                filteredStudents: state => {
                    return state.students.filter(student => student.name.includes(state.searchName));
                }
            }
        });

        new Vue({
            el: '#app',
            store,
            computed: {
                // 从 store 中获取搜索关键字
                searchName() {
                    return this.$store.state.searchName;
                },
                // 通过 getters 获取过滤后的学生信息
                filteredStudents() {
                    return this.$store.getters.filteredStudents;
                },
                // 从 store 中获取编辑弹窗的显示状态
                showEditModal() {
                    return this.$store.state.showEditModal;
                },
                // 从 store 中获取当前编辑的学生信息
                editedStudent() {
                    return this.$store.state.editedStudent;
                },
            },
            methods: {
                // 触发添加学生的 mutation
                addStudent() {
                    this.$store.commit('addStudent');
                },
                // 触发编辑学生的 mutation
                editStudent(student) {
                    this.$store.commit('editStudent', student);
                },
                // 触发保存编辑后学生信息的 mutation
                updateStudent() {
                    this.$store.commit('updateStudent');
                },
                // 触发取消编辑的 mutation
                cancelEdit() {
                    this.$store.commit('cancelEdit');
                },
                // 触发删除学生的 mutation
                deleteStudent(studentId) {
                    this.$store.commit('deleteStudent', studentId);
                }
            }
        });
    </script>

</body>

</html>