分页控件-Antdv+Asp.net WebApi开发学生信息管理系统（三）

行业资讯 2 年前 0 13

在B/S系统开发中，前后端分离开发设计已成为一种标准，而VUE作为前端三大主流框架之一，越来越受到大家的青睐，Antdv是Antd在Vue中的实现。本系列文章主要通过Antdv和Asp.net WebApi开发学生信息管理系统，简述前后端分离开发的主要相关内容，仅供学习分享使用，如有不足之处，还请指正。

分页控件-Antdv+Asp.net WebApi开发学生信息管理系统（三）

在本示例项目中分页控件，主要包含两大部分：1.前端web项目【vsims.web】2.后端webapi项目【vsims.webapi】，经过前两篇文章的讲解，已经对前端项目的架构和组成部分，以及后端webapi项目的开发有了大致了解。今天继续开发学生管理模块，主要讲解列表，表单开发的相关内容。

涉及知识点

在本示例中，涉及知识点，主要是前端开发相关：

功能划分

在本示例中，学生管理模块功能主要分为4个部分：

查询功能

在学生管理模块中，查询功能主要通过学号，姓名两个条件进行查询，代码如下所示：

【 88个实操.项目】iled="onFinishFailed">                                            查询                新增

注意：form表单的提交事件为submit，finish为提交成功后的响应事件，在此事件中可以进行接口调用，如下所示：

const onFinish = (values: any) => {    var no = values.no;    var name = values.name;    getStudents(no, name);    console.log('Success:', values);};const onFinishFailed = (errorInfo: any) => {    console.log('Failed:', errorInfo);};const getStudents = (no, name) => {    dataSource.length = 0;    getD('/api/Student/GetStudents', {        "pageSize": pagination.pageSize,        "pageNum": pagination.current,        "no": no,        "name": name    }).then(res => {        console.log(res);        if (res.status == 200) {            pagination.total = res.data.count; //总记录数            console.log(pagination.total);            for (let i = 0; i < res.data.items.length; i++) {                dataSource.push({                    id: res.data.items[i].id,                    key: res.data.items[i].id.toString(),                    no: res.data.items[i].no,                    name: res.data.items[i].name,                    age: res.data.items[i].age,                    sex: res.data.items[i].sex ? "男" : "女",                    sexValue: res.data.items[i].sex,                    classesId: res.data.items[i].classesId,                    classesName: res.data.items[i].classesName,                });            }            state.dataSource = [...dataSource];        }    });};

其中getStudents方法，多个地方会进行调用，所以进行了封装，主要用于学生列表查询接口访问。

数据展示

数据展示主要使用a-table控件，其中columns定义需要显示的列，data-source绑定数据源，如下所示：

注意：默认情况下，当数据源发生更新时，a-table控件不会显示页面刷新，需要绑定row-key属性才可以。

分页功能

分页功能主要通过分页控件a-pagination实现，其中current表示当前页，total表示总页码，change表示绑定分页事件，如下所示：

关于change事件功能，主要用于调用getStudents函数，如下所示：

const change = (pagination) => {    var no = formState.no;    var name = formState.name;    getStudents(no, name);    console.log(pagination);};

新增编辑功能

新增学生和编辑学生都是对单个学生实体进行操作，采用form表单进行提交到后台接口。其中visible用于控制弹窗的显示与隐藏。ok表示弹窗的确定事件。班级下拉框（a-select）显示班级列表，需要在加载页面时进行预加载。如下所示：

                                                                                                                                                                                            男                    女                                                                            {{item.name}}

新增编辑提交事件handleOk代码，其中根据id值判断是新增学生和编辑学生，如下所示：

const handleOk = (e: MouseEvent) => {    console.log(e);    console.log(addEditFormState);    var url = "";    if (addEditFormState.id >0) {        url = "/api/Student/UpdateStudent"; //编辑    } else {        url = "/api/Student/AddStudent"; //新增    }    postD(url, {        "id": addEditFormState.id>0?addEditFormState.id:null,        "no": addEditFormState.no,        "name": add【78个搞钱项目】EditFormState.name,        "age": addEditFormState.age,        "sex": addEditFormState.sex,        "classesId": addEditFormState.classes,        "createTime": "2022-08-15T15:31:12.224Z",        "createUser": 0,        "lastEditTime": "2022-08-15T15:31:12.224Z",        "lastEditUser": 0    }).then(res => {        console.log(res);        if(res.status==200){            if(res.data==0){                message.success('保存成功！');                visible.value = false;                var no = formState.no;                var name = formState.name;                getStudents(no, name);            }else{                message.error('保存失败！');            }        }    });};