大二毕设.1-学生信息管理系统

    学生信息管理系统

    学生列表

        添加学生

              编辑
              删除

                添加
                重置

                修改

    new Vue({
        el: "#div",
        data:{
            dialogTableVisible4add: false,  // 添加窗口显示状态
            dialogTableVisible4edit: false,  // 编辑窗口显示状态
            formData:{},  // 添加表单的数据
            editFormData: {},  // 编辑表单的数据
            tableData:[],  // 表格数据
            pagination: {
                currentPage: 1, // 当前页
                pageSize: 5,    // 每页显示条数
                total: 0        // 总条数
            },
            rules: {
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                age: [
                    {required: true, message: '请输入年龄', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                numbersss: [
                    {required: true, message: '请输入电话', trigger: 'blur'},
                    {min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur'}
                ],
            }
        },
        methods: {
            // 改变每页显示条数时执行的函数
            handleSizeChange(pageSize) {
                // 修改分页查询的参数
                this.pagination.pageSize = pageSize;
                // 重新执行查询
                this.selectByPage();
            },
            // 改变当前页码时执行的函数
            handleCurrentChange(pageNum) {
                // 修改分页查询的参数
                this.pagination.currentPage = pageNum;
                // 重新执行查询
                this.selectByPage();
            },
            // 分页查询功能
            selectByPage() {
                axios.post("studentServlet", "method=selectByPage&currentPage="+this.pagination.currentPage
                    +"&pageSize="+this.pagination.pageSize)
                .then(resp => {
                    // 将查询结果返回给tableData
                    this.tableData = resp.data.list;
                    // 设置分页参数
                    this.pagination.currentPage = resp.data.pageNum;  // 当前页
                    this.pagination.total = resp.data.total;  // 总条数
                })
            },
            showAddStu() {
                // 弹出窗口
                this.dialogTableVisible4add = true;
            },
            // 添加学生的方法
            addStu() {
                let param = "method=addStu&name="+this.formData.name+"&age="+this.formData.age
                    +"&address="+this.formData.address+"&numbersss="+this.formData.numbersss+"&currentPage="
                    +this.pagination.currentPage+"&pageSize="+this.pagination.pageSize;
                axios.post("studentServlet", param)
                    .then(resp => {
                        // 将查询出的数据赋值给tableData
                        this.tableData = resp.data.list;
                        // 设置分页参数
                        this.pagination.currentPage = resp.data.pageNum;  // 当前页
                        this.pagination.total = resp.data.total;  // 总条数
                    })
                // 关闭添加窗口
                this.dialogTableVisible4add = false;
            },
            resetForm(addForm) {
                // 双向绑定，输入的数据都赋值给了formData，清空formData数据
                this.formData = {};
                // 清除表单的校验数据
                this.$refs[addForm].resetFields();
            },
            showEditStu(row) {
                // 1. 弹出窗口
                this.dialogTableVisible4edit = true;
                // 2. 显示表单数据
                this.editFormData = {
                    name:row.name,
                    age:row.age,
                    address:row.address,
                    numbersss:row.numbersss,
                }
            },
            // 修改数据
            updateStu() {
                let param = "method=updateStu&name="+this.editFormData.name+"&age="+this.editFormData.age
                    +"&address="+this.editFormData.address+"&numbersss="+this.editFormData.numbersss+"&currentPage="
                    +this.pagination.currentPage+"&pageSize="+this.pagination.pageSize;
                axios.post("studentServlet", param)
                    .then(resp => {
                        // 将查询出的数据赋值给tableData
                        this.tableData = resp.data.list;
                        // 设置分页参数
                        this.pagination.currentPage = resp.data.pageNum;  // 当前页
                        this.pagination.total = resp.data.total;  // 总条数
                    })
                // 关闭添加窗口
                this.dialogTableVisible4edit = false;
            },
            // 删除数据
            deleteStu(row) {
                if (confirm("确定要删除"+row.name+"数据？")) {
                    let param = "method=deleteStu&name="+row.name+"&currentPage="
                        +this.pagination.currentPage+"&pageSize="+this.pagination.pageSize;
                    axios.post("studentServlet", param)
                    .then(
                        resp => {
                            // 将查询出的数据赋值给tableData
                            this.tableData = resp.data.list;
                            // 设置分页参数
                            this.pagination.currentPage = resp.data.pageNum;  // 当前页
                            this.pagination.total = resp.data.total;  // 总条数
                        }
                    )
                }
            }
        },
        // mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作
        // created的dom还没被vue的dom替换
        mounted() {
            // 调用分页查询功能
            this.selectByPage();
        }
    });

Original: https://blog.csdn.net/weixin_59624686/article/details/128294089
Author: 汤键.
Title: 大二毕设.1-学生信息管理系统