VUE3.0+Antdv+Asp.net WebApi开发学生信息管理系统四

在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)等控件。关于具体每一个控件的使用,可参考官网说明示例。

课程管理


课程管理功能相对简单,是对单个表的增删改查,主要是新增课程,编辑课程,以及查询课程等功能,如下所示:

<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.courseName"></a-input>
        </a-form-item>
        <a-form-item label="老师" name="name">
            <a-input v-model:value="formState.teacher"></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="addCourse">新增</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="[ 'name','teacher', 'createUser','lastEditUser'].includes(column.dataIndex)">
                <div>{{ text }}</div>
            </template>
            <template v-else-if="[ 'createTime','lastEditTime'].includes(column.dataIndex)">
                <div>{{formatDateString(text)}}</div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
                    <a @click="edit(record.id)">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.name" />
                </a-form-item>
                <a-form-item label="授课老师">
                    <a-input v-model:value="addEditFormState.teacher" />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>

课程管理示例截图,如下所示:

班级管理


班级管理和学生管理相互关联,如学生表中的ClassesId对应班级表中的Id,班级表中的班长信息,又对应学生表中的Id,所以互相关联,在新增和查询时需要进行转换,如下所示:

<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.dept"></a-input>
        </a-form-item>
        <a-form-item label="年级" name="name">
            <a-input v-model:value="formState.grade"></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="add">新增</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="[ 'name','teacher', 'createUser','lastEditUser'].includes(column.dataIndex)">
                <div>{{ text }}</div>
            </template>
            <template v-else-if="[ 'createTime','lastEditTime'].includes(column.dataIndex)">
                <div>{{formatDateString(text)}}</div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
                    <a @click="edit(record.id)">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.dept" />
                </a-form-item>
                <a-form-item label="年级">
                    <a-input v-model:value="addEditFormState.grade" />
                </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.headTeacher" />
                </a-form-item>
                <a-form-item label="班长">
                    <a-select ref="select" v-model:value="addEditFormState.monitor" style="width: 200px">
                        <a-select-option :value="item.id" v-for="(item) in dataMonitors" :key="item.id">{{item.name}}</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>

班级管理示例截图,如下所示:

成绩管理


成绩管理功能主要记录学的各个课程的成绩,所以需要通过成绩表,关联学生表,和课程表,如下所示:

<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="name">
            <a-input v-model:value="formState.studentName"></a-input>
        </a-form-item>
        <a-form-item label="课程名称" name="no">
            <a-input v-model:value="formState.courseName"></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="add">新增</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="[ 'name','teacher', 'createUser','lastEditUser'].includes(column.dataIndex)">
                <div>{{ text }}</div>
            </template>
            <template v-else-if="[ 'createTime','lastEditTime'].includes(column.dataIndex)">
                <div>{{formatDateString(text)}}</div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
                    <a @click="edit(record.id)">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-select ref="select" v-model:value="addEditFormState.studentId" style="width: 200px">
                        <a-select-option :value="item.id" v-for="(item) in dataStudents" :key="item.id">{{item.name}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="课程名称">
                    <a-select ref="select" v-model:value="addEditFormState.courseId" style="width: 200px">
                        <a-select-option :value="item.id" v-for="(item) in dataCourses" :key="item.id">{{item.name}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="考试成绩">
                    <a-input v-model:value="addEditFormState.score" />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>

成绩管理示例截图,如下所示:

备注


通过本篇文章的班级管理模块,课程管理模块,成绩管理模块,以及上一篇文章中的学生管理模块,不难发现,每一个模块的开发都是由列表a-table,文本框a-input,下拉框a-select,单选按钮a-radio,按钮a-button等组成的,虽功能略有差异,但总归万变不离其宗。开发方法也大同小异,复杂的功能都是普通的功能累加起来的。这也是本系列文章由浅入深的渐进安排。希望能够抛砖引玉,不局限于某一功能,而是能够举一反三,自我理解,以达到自我开发的能力。

以上就是Antdv+Asp.net WebApi开发学生信息管理系统第四篇的全部内容,写文不易,多谢支持。学习编程,从关注【老码识途】开始!!!

相关文章

学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习...
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面...
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生...
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服...