在B/S系统开发中,前后端分离开发设计已成为一种标准,而VUE作为前端三大主流框架之一,越来越受到大家的青睐,Antdv是Antd在Vue中的实现。本系列文章主要通过Antdv和Asp.net WebApi开发学生信息管理系统,简述前后端分离开发的主要相关内容,仅供学习分享使用,如有不足之处,还请指正。
在本示例项目中,主要包含两大部分:1.前端web项目【vsims.web】2.后端webapi项目【vsims.webapi】,经过前两篇文章的讲解,已经对前端项目的架构和组成部分,以及后端webapi项目的开发有了大致了解。今天继续开发学生管理模块,主要讲解列表,表单开发的相关内容。
涉及知识点
在本示例中,涉及知识点,主要是前端开发相关:
- 开发工具:HbuilderX
- 项目框架:VUE3.0+Antdv
- Antdv控件应用:
- 列表(a-table):主要用于大量结构化数据的呈现。
- 表单(a-form):主要用于收集信息,然后提交到后台进行处理,以及数据进行校验等操作。
- 分页组件(a-pagination):采用分页形式分隔长列表,每次只显示一页列表。
- 弹出对话窗(a-modal):需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用
Modal
在当前页面正中打开一个浮层,承载相应的操作。 - 其他控件:文本框(a-input),按钮(a-button),单选按钮(a-radio),下拉框(a-select)等控件。关于具体每一个控件的使用,可参考官网说明示例。
功能划分
在本示例中,学生管理模块功能主要分为4个部分:
- 查询功能:根据输入的查询条件进行查询,此功能是一个form表单。
- 数据展示:将查询出的结果进行展示,此功能是一个table列表。
- 分页功能:数据数据较多,需要分页展示,每次展示一页数据。
- 新增,编辑功能:可以添加学生信息,也可以编辑信息,此功能是一个弹出对话框,嵌套一个form表单。
查询功能
在学生管理模块中,查询功能主要通过学号,姓名两个条件进行查询,代码如下所示:
<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 = 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 :columns="columns" :data-source="dataSource" bordered :pagination="false" :row-key="record => record.id">
<template #bodyCell="{ column, text, record }">
<template v-if="[ 'no','name', 'sge', 'dex','classesName'].includes(column.dataIndex)">
<div>{{ text }}</div>
</template>
<template v-else-if="column.dataIndex === 'operation'">
<div class="editable-row-operations">
<a @click="edit(record.key)">Edit</a>
</div>
</template>
</template>
</a-table>
注意:默认情况下,当数据源发生更新时,a-table控件不会信息页面刷新,需要绑定row-key属性才可以。
分页功能
分页功能主要才用分页控件a-pagination,其中current表示当前页,total表示总页码,change表示绑定分页事件,如下所示:
<a-pagination v-model:current="pagination.current" :total="pagination.total" @change="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)显示班级列表,需要在加载页面时进行预加载。如下所示:
<a-modal ref="modalRef" v-model:visible="visible" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk">
<div>
<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="学生管理" sub-title="新增或编辑学生" />
<a-form :model="addEditFormState">
<a-form-item label="学号">
<a-input v-model:value="addEditFormState.no" />
</a-form-item>
<a-form-item label="姓名">
<a-input v-model:value="addEditFormState.name" />
</a-form-item>
<a-form-item label="年龄">
<a-input v-model:value="addEditFormState.age" />
</a-form-item>
<a-form-item label="性别">
<a-radio-group v-model:value="addEditFormState.sex">
<a-radio :value="true">男</a-radio>
<a-radio :value="false">女</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="班级">
<a-select ref="select" v-model:value="addEditFormState.classes" style="width: 200px">
<a-select-option :value="item.id" v-for="(item) in dataClasses" :key="item.id">{{item.name}}</a-select-option>
</a-select>
</a-form-item>
</a-form>
</div>
</a-modal>
新增编辑提交事件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": addEditFormState.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('保存失败!');
}
}
});
};
关于学生管理模块的全部代码,如下所示:
<template>
<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="学生管理" sub-title="学生信息基本操作" />
<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>
<a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :row-key="record => record.id">
<template #bodyCell="{ column, text, record }">
<template v-if="[ 'no','name', 'sge', 'dex','classesName'].includes(column.dataIndex)">
<div>{{ text }}</div>
</template>
<template v-else-if="column.dataIndex === 'operation'">
<div class="editable-row-operations">
<a @click="edit(record.key)">Edit</a>
</div>
</template>
</template>
</a-table>
<a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" />
<a-modal ref="modalRef" v-model:visible="visible" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk">
<div>
<a-page-header style="border: 1px solid rgb(235, 237, 240)" title="学生管理" sub-title="新增或编辑学生" />
<a-form :model="addEditFormState">
<a-form-item label="学号">
<a-input v-model:value="addEditFormState.no" />
</a-form-item>
<a-form-item label="姓名">
<a-input v-model:value="addEditFormState.name" />
</a-form-item>
<a-form-item label="年龄">
<a-input v-model:value="addEditFormState.age" />
</a-form-item>
<a-form-item label="性别">
<a-radio-group v-model:value="addEditFormState.sex">
<a-radio :value="true">男</a-radio>
<a-radio :value="false">女</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="班级">
<a-select ref="select" v-model:value="addEditFormState.classes" style="width: 200px">
<a-select-option :value="item.id" v-for="(item) in dataClasses" :key="item.id">{{item.name}}</a-select-option>
</a-select>
</a-form-item>
</a-form>
</div>
</a-modal>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
toRefs,
ref,
toRaw
} from 'vue';
import type {
UnwrapRef
} from 'vue';
import { message } from 'ant-design-vue';
import {
getD,
postD
} from '../api/index.js';
const columns = [
{
title: '学号',
dataIndex: 'no',
key: 'no',
align: 'center',
width: '20%',
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
align: 'center',
width: '20%',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
align: 'center',
width: '15%',
},
{
title: '性别',
dataIndex: 'sex',
key: 'sex',
align: 'center',
width: '10%',
},
{
title: '班级',
dataIndex: 'classesName',
key: 'classesName',
align: 'center',
width: '20%',
},
{
title: '操作',
dataIndex: 'operation',
key: 'operation',
align: 'center',
},
];
interface DataItem {
id: number,
key: string,
no: string,
name: string,
age: number,
sex: string,
sexValue: boolean,
classesId: string,
classesName: string
}
interface FormState {
no: string;
name: string;
}
interface ClassesItem {
id: number,
name: string
}
const pagination = {
total: 1,
current: 1,
pageSize: 10,
};
const dataClasses: ClassesItem[] = []; //班级列表
const dataSource: DataItem[] = [];
export default defineComponent({
setup() {
const formState = reactive < FormState > ({
no: '',
name: '',
});
const addEditFormState = reactive({
id: 0,
no: '',
name: '',
age: 0,
sex: false,
classes: '',
});
const visible = ref < boolean > (false);
const addStudent = () => {
addEditFormState.id = -1;
addEditFormState.no = '';
addEditFormState.name = '';
addEditFormState.age = 0;
addEditFormState.classes = '';
visible.value = true;
};
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": addEditFormState.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('保存失败!');
}
}
});
};
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 state = reactive({
dataSource: dataSource,
dataClasses: dataClasses
});
const getClasses=()=>{
getD('/api/Classes/GetClassess', {
"dept": "",
"grade": "",
"pageSize": 0,
"pageNum": 0
}).then(res => {
console.log(res);
if (res.status == 200) {
for (let i = 0; i < res.data.items.length; i++) {
dataClasses.push({
id: res.data.items[i].id,
name: res.data.items[i].dept +res.data.items[i].grade+ res.data.items[i].name,
});
}
state.dataClasses = [...dataClasses];
}
});
};
getClasses();
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(null,null);
const editableData: UnwrapRef < Record < string, DataItem >> = reactive({});
const edit = (key: string) => {
console.log(key);
var student = dataSource.filter(item => key === item.key)[0];
addEditFormState.id = student.id;
addEditFormState.no = student.no;
addEditFormState.name = student.name;
addEditFormState.age = student.age;
addEditFormState.sex = student.sexValue;
addEditFormState.classes = student.classesId;
visible.value = true;
console.log(student);
};
const change = (pagination) => {
var no = formState.no;
var name = formState.name;
getStudents(no, name);
console.log(pagination);
};
const onSubmit = () => {
console.log('submit!', toRaw(formState));
};
return {
formState,
addEditFormState,
...toRefs(state),
columns,
editingKey: '',
editableData,
edit,
pagination,
change,
onFinish,
onFinishFailed,
onSubmit,
visible,
addStudent,
handleOk,
//modalTitleRef,
//transformStyle,
};
},
});
</script>
<style>
.editable-row-operations a {
margin-right: 8px;
}
.ant-form {
height: 6vh;
width: 100vh;
background-color: transparent;
}
.ant-modal-content {
height: 50vh;
}
.ant-modal-body .ant-input {
width: 40vh;
}
.ant-modal-body {
height: 40vh;
}
.ant-modal-body .ant-page-header {
width: 46vh;
padding: 0.5rem;
}
</style>
示例截图
学生管理模块,示例截图如下所示:
备注
以上就是Vue3.0+Antdv+Asp.net WebApi开发学生信息管理系统第三篇的全部内容,写文不易,多谢支持。学习编程,从关注【老码识途】开始!!!