前端

在B/S系统开发中，前后端分离开发设计已成为一种标准，而VUE作为前端三大主流框架之一，越来越受到大家的青睐，Antdv是Antd在Vue中的实现。本系列文章主要通过Antdv和Asp.net WebApi开发学生信息管理系统，简述前后端分离开发的主要相关内容，仅供学习分享使用，如有不足之处，还请指正。 在本示例项目中分页控件，主要包含两大部分：1.前端web项目【vsims.web】2.后端webapi项目【vsims.webapi】，经过前两篇文章的讲解，已经对前端项目的架构和组成部分，以及后端webapi项目的开发有了大致了解。今天继续开发学生管理模块，主要讲解列表，表单开发的相关内容。 涉及知识点 在本示例中，涉及知识点，主要是前端开发相关： 功能划分 在本示例中，学生管理模块功能主要分为4个部分： 查询功能 在学生管理模块中，查询功能主要通过学号，姓名两个条件进行查询，代码如下所示： <a-form :model="formState" name="horizontal_query" layout="inline" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed"> <a-form-item label="学号" name="no"> <a-input v-model:value="formState.no"></a-input> </a-form-item> <a-form-item label="姓名" name="name"> <a-input v-model:value="formState.name"></a-input> </a-form-item> <a-form-item> <a-button type="primary" html-type="submit">查询</a-button> </a-form-item> <a-form-item> <a-button type="primary" @click="addStudent">新增</a-button> </a-form-item></a-form> 注意：form表单的提交事件为submit，finish为提交成功后的响应事件，在此事件中可以进行接口调用，如下所示： const onFinish = (values: any) => { var no = values.no; var name...