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

已于 2022-08-30 22:10:51 修改
阅读量993 收藏 4
点赞数
分类专栏： 一起学Vue .Net技术 全栈开发 文章标签： asp.net vue.js 前端 Antdv 学生信息管理系统
于 2022-08-30 22:09:24 首次发布
本文版权归作者和CSDN共有，写文不易，支持原创，欢迎转载【点赞】，转载请保留此段声明，且在文章页面明显位置给出原文连接，谢谢。
本文链接：https://blog.csdn.net/fengershishe/article/details/126613792
版权

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

在本示例项目中，主要包含两大部分：1.前端web项目【vsims.web】2.后端webapi项目【vsims.webapi】，经过前四篇文章的讲解，已经对前端项目的架构和组成部分，以及后端webapi项目的开发有了大致了解，熟悉了学生管理模块所涉及到的列表，表单开发的相关内容，并且对学生管理其他几个模块【如：班级管理，课程管理，成绩管理】的讲解。今天继续讲解系统管理项目模块的开发，希望能对大家有所帮助。

整体布局

系统整体功能分为学生管理【包括：学生管理，成绩管理，课程管理，班级管理】和系统管理【包括：个人信息，用户管理，角色管理，菜单管理】。关于系统管理各个模块的详细说明，下面分别进行讲解【由于篇幅有限，仅贴出页面Html代码，其他代码可通过下载源码进行查看】。整体页面布局，如下所示：

个人信息

个人信息主要展示当前登录用户的个人信息，包括个人账户，昵称，角色等，如下所示：

<template>
    <a-card hoverable style="width: 300px;">
        <template #cover>
            <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
        </template>
        <a-card-meta title="个人信息" description="个人信息展示">
            <template #avatar>
                <a-image :width="30" :height="30" src="/images/icon_student.png" />
            </template>
        </a-card-meta>
        <p>用户名: {{userName}}</p>
        <p>昵  称: {{nickName}}</p>
        <p>角  色: {{roleName}}</p>
    </a-card>
</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="用户名">
            <a-input v-model:value="formState.userName"></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)">编辑</a>
                     | 
                    <a @click="edit1(record.id)">授权</a>
                </div>
            </template>
        </template>
    </a-table>
    <a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" />
    <a-modal ref="modalUserRef" 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="新增或编辑用户信息" />
            <br />
            <a-form :model="addEditFormState">
                <a-form-item label="用户名">
                    <a-input v-model:value="addEditFormState.userName" />
                </a-form-item>
                <a-form-item label="昵称">
                    <a-input v-model:value="addEditFormState.nickName" />
                </a-form-item>
                <a-form-item label="密码">
                    <a-input-password v-model:value="addEditFormState.password" />
                </a-form-item>
                <a-form-item label="确认密码">
                    <a-input-password v-model:value="addEditFormState.confirmPassword" />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
    <a-modal ref="modalRoleRef" v-model:visible="visible1" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk1">
        <div class="userrole">
            <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="用户授权" sub-title="用户权限信息" />
            <br />
            <div>
                <div style="margin-bottom: 16px">
                    <span style="margin-left: 8px">
                        <template v-if="hasSelected">
                            {{ `选择了 ${selectedRowKeys.length} 个角色` }}
                        </template>
                    </span>
                </div>
                <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columnRoles" :data-source="roleDataSource" :pagination="false" :row-key="record => record.id" />
            </div>
        </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="角色名">
            <a-input v-model:value="formState.roleName"></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)">编辑</a>
                     | 
                    <a @click="edit1(record.id)">分配菜单</a>
                </div>
            </template>
        </template>
    </a-table>
    <a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" />
    <a-modal ref="modalRoleRef" 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="新增或编辑角色信息" />
            <br />
            <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.description" />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
    <a-modal ref="modalMenuRef" v-model:visible="visible1" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk1">
        <div class="rolemenu">
            <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="角色分配菜单" sub-title="菜单分配信息" />
            <br />
            <div>
                <div style="margin-bottom: 8px">
                    <span style="margin-left: 8px">
                        <template v-if="hasSelected">
                            {{ `选择了 ${selectedRowKeys.length} 个菜单` }}
                        </template>
                    </span>
                </div>
                <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columnMenus" :data-source="menuDataSource" :pagination="false" :row-key="record => record.id" />
            </div>
        </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="菜单名">
            <a-input v-model:value="formState.menuName"></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','id','parentId','sortId','description','url'].includes(column.dataIndex)">
                <div>{{ text }}</div>
            </template>
            <template v-else-if="[ 'icon'].includes(column.dataIndex)">
                <div>
                    <a-image :width="20" :height="20" :src="text"/>
                </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
                    <a @click="edit(record.id)">编辑</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="新增或编辑菜单信息" />
            <br />
            <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.description" />
                </a-form-item>
                <a-form-item label="Url">
                    <a-input v-model:value="addEditFormState.url" />
                </a-form-item>
                <a-form-item label="图标">
                    <a-input v-model:value="addEditFormState.icon" />
                </a-form-item>
                <a-form-item label="父ID">
                    <a-input v-model:value="addEditFormState.parentId" />
                </a-form-item>
                <a-form-item label="排序">
                    <a-input v-model:value="addEditFormState.sortId" />
                </a-form-item>
            </a-form>
        </div>
    </a-modal>
</template>

菜单管理，截图如下所示：

关于源码

关于源码下载，可点击CSDN上的链接或者关注个人公众号【老码识途】进行下载，如下所示：

备注

以上就是VUE3.0+Antdv+Asp.net WebApi开发学生信息管理系统系列课程的全部内容了，通过几个功能模块的讲解，虽然各个模块虽功能略有差异，但总归万变不离其宗，开发方法也大同小异，复杂的功能都是普通的功能累加起来的。这也是本系列文章由浅入深的渐进安排。希望能够抛砖引玉，不局限于某一功能，而是能够举一反三，自我理解，以达到自我开发的能力。

学习编程，从关注【老码识途】开始！！！

老码识途呀
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Ant Design Blazor入门（使用ant模板初始化项目及运行github代码）
qq_40600379的博客
03-21 3058
Ant Design Blazor支持MIT开源协议，Ant Design Blazor Pro支持Apache2.0开源协议。​ 使用CMD安装ant模板，可以帮助我们获取到一个项目模板。​
2024年Web前端最新学生信息管理系统 —— 前端篇(1)，2024年最新面试中Handler这些必备知识点你都知道吗
2401_84411072的博客
05-12 573
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
＜s-table＞、＜a-table＞接收后端数据
qq_59833893的博客
02-11 1141
template #bodyCell=“{column, record, index}”>，一直以来都是只使用，column为列属性，record为每行数据记录，而index为每行索引，从0开始，想要获得直接使用ndex即可，不同行index值不同，0、1、2…并不是实体类中所有的属性名称，而是 columns 中定义的数据；record 为集合中每一条数据，相当于一个实体类中所有的数据；title: 用户名,
学生信息管理系统（纯前端页面）———无后端数据库
热门推荐
ybbgrain的历程
01-03 3万+
无后端数据库版本的----学生信息管理系统 文末下载地址 这学期的前端作业很奇怪，不用数据库实现学生信息管理系统，随便写了下。 具体功能如下： 实现了查看信息（单击查看按钮，查看具体信息，且为不可修改格式） 实现了修改信息功能（单击修改按钮，可以对学生的信息进行修改） 实现了新增功能（可以新增加一个学生的信息，添加到最后边） 实现了删除功能（在复选框中选择几个就删除几个） 实现了全...
html+css+js 学生信息管理系统
jinxiaofei8的博客
05-23 1万+
利用Web前端开发技术完成管理系统后台管理功能，主要包括用户登录、系统主界面
VUE3.0+Antdv+Asp.net webapi学生信息管理系统
08-30
VUE3.0+Antdv+Asp.net webapi开发的学生信息管理系统，主要包括学生管理，班级管理，成绩管理，课程管理，以及个人信息，用户管理，角色管理，菜单管理等组成部分，SQL Server 2012数据库，具体详细内容可参考本人的...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
基于vue3.0 + typescript + 网易云音乐api 开发的web音乐播放器
最新发布
05-28
基于vue3.0 + typescript + 网易云音乐api 开发的web音乐播放器 更新 Vue3、Element-plus 版本为正式版本并替换部分新语法； 优化前期未设计好的路由结构； 使用 pinia 代替 vuex4； 全部替换为 vue3.2 的代码为...
C#基于.netcore6.0+vue3.0+elementUI3.0实现的教务管理系统源码.zip
05-18
C#基于.netcore6.0+vue3.0+elementUI3.0实现的教务管理系统源码.zip
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
学生信息管理系统模板 HTML模板 整套模板
01-03
学生信息管理系统模板，全套模板，DIV+CSS布局，清新简约。有个人中心、我的信息、班级信息、短信息、学院通知、我的异议、教务中心、我的报考、我的成绩、我的书籍、学习中心、资料下载、学习历程、财务中心、我的财务、教学系统等系统功能菜单。
学生信息管理系统 —— 前端篇
SongyangJi
12-15 3677
文章目录Vue单文件组件结构反向代理配置axios路由store路由钩子函数ElementUI Vue 采用 Vue-CLi创建的项目的结构（有后期项目的更新，可能具体文件与实际不符，但结构基本不变）。 ├── App.vue ├── assets │ └── logo.png ├── components │ ├── BottomBar.vue │ ├── HeadBar.vue │ ├── SiderBar.vue │ ├── UpLoad.vue │ ├── UpLoadIma
Vue3+Element-ul学生管理系统(第二十二课)
qq_56248592的博客
12-16 1720
Vue3+Vue2+element-ui组件库的综合使用 主要实现对数据表的数据增删改查
Web前端 学习知识点总结（十三）学生管理系统案例
weixin_45118229的博客
11-25 2261
系列文章目录 文章目录系列文章目录前言一、系统设计思路二、系统代码2.1 html2.2 Javascript2.3 Css 前言 前端的基本内容到此就到结束了，主要是四部分的学习html5，css3，JavaScript，和jQuery的学习。通过不断的学习，笔者现在认为，如果需要做一名程序员，就需要不断的练习，并根据需要不断学习。之后得JavaSE中继续学习Java的基础，提高编程能力。 一、系统设计思路 对于该系统 总体分为两部分： 1.删除功能 横向删除 $(":button[na
从零开始的VUE项目-02（创建后台ASP.NET Web API项目和连接数据库）
木卯彳亍的博客
04-14 2717
今天我们来创建后台和数据库 1，创建ASP.NET Web API项目 生成完毕，项目结构： 运行看一下 2，数据库建表 我们对数据库的操作就在Controllers里的文件里，想一想这一篇原来是要做读取数据库数据生成菜单和登录登出的，所以要开始创建数据库了，菜单一张表，用户一张表，先做这两张表吧 菜单表的数据 用户表的数据 3，后台构建 在Controllers文件夹里新建MenuController.cs文件(新建控制器)，代码： using Newtonsoft.Json; using S
关于在Asp.net中编写接口并在Vue中进行调用
MoZhaoyun的博客
12-28 748
我们在VisualStudio中新建的是ASP.NET Web 应用程序（.NET Framework）项目。在项目中添加一个类，命名为Login在项目中“右键-添加”一个一般处理程序函数HttpContextJsonStringTo其中，函数的作用是，将httpcontext中的由前端传过来的参数数据经过StreamReader和JavaScriptSerializer类解析赋值到我们的Login类中，并返回一个Login实例。函数ProcessRequest其中，函数。
Asp.net+Vue2构建简单记账WebApp之三（使用Vue-cli构建vue.js应用）
易兒善
09-13 1万+
一、前提 1、安装好node.js 2、安装好npm 3、安装好vue-cli 如何安装这里就跳过，网上一大推。 当然装上npm的淘宝镜像更好 二、构建项目 1、进入项目文件夹 2、生成项目 执行 vue init webpack MyBill 3、查看 利用vue-cli 构建的文件夹如下 4、初始化项目 cd mybill npm
学生信息管理系统java webjdbc
12-27
学生信息管理系统是一个用于管理学生信息的系统，使用Java Web和JDBC技术来实现。它可以帮助学校或其他教育机构有效地管理学生的个人信息、课程信息、成绩信息等。 在Java Web中，使用JDBC（Java Database Connectivity）技术可以连接数据库，并通过执行SQL语句来实现对数据库的增删改查操作。JDBC提供了一组API，可以让Java应用程序与各种关系型数据库进行交互。 以下是一个简单的示例，演示如何使用Java Web和JDBC来实现学生信息管理系统： 1. 首先，需要创建一个数据库，并在数据库中创建一个学生信息表。可以使用MySQL数据库来存储学生信息。 2. 在Java Web项目中，需要导入JDBC驱动程序，以便能够连接到MySQL数据库。可以使用MySQL Connector/J作为JDBC驱动程序。 3. 在Java代码中，使用JDBC连接到数据库，并执行SQL语句来实现对学生信息表的增删改查操作。例如，可以使用PreparedStatement对象来执行SQL语句，并使用ResultSet对象来获取查询结果。 4. 在Java Web项目中，可以使用Servlet或JSP来处理HTTP请求，并将请求转发到相应的Java代码中进行处理。可以使用Tomcat作为Java Web服务器来运行项目。 5. 在学生信息管理系统中，可以实现以下功能： - 添加学生信息：通过表单输入学生的个人信息，并将信息插入到数据库中的学生信息表中。 - 修改学生信息：通过表单输入学生的学号或其他唯一标识符，并根据标识符查询数据库中的学生信息，然后更新相应的字段。 - 删除学生信息：通过表单输入学生的学号或其他唯一标识符，并根据标识符从数据库中删除相应的学生信息。 - 查询学生信息：通过表单输入学生的学号或其他条件，并根据条件查询数据库中的学生信息，并将查询结果显示在页面上。 请注意，以上只是一个简化版的学生信息管理系统示例，实际的系统可能包含更多功能和复杂的业务逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老码识途呀

写作不易，多谢支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值