在B/S系統開發中，前后端分離開發設計已成為一種標準，而VUE作為前端三大主流框架之一，越來越受到大家的青睞，Antdv是Antd在Vue中的實作，本系列文章主要通過Antdv和Asp.net WebApi開發學生資訊管理系統，簡述前后端分離開發的主要相關內容，僅供學習分享使用，如有不足之處，還請指正，
在本示例專案中，主要包含兩大部分：1.前端web專案【vsims.web】2.后端webapi專案【vsims.webapi】，經過前四篇文章的講解，已經對前端專案的架構和組成部分，以及后端webapi專案的開發有了大致了解，熟悉了學生管理模塊所涉及到的串列，表單開發的相關內容，并且對學生管理其他幾個模塊【如：班級管理，課程管理，成績管理】的講解，今天繼續講解系統管理專案模塊的開發，希望能對大家有所幫助，
整體布局
系統整體功能分為學生管理【包括：學生管理，成績管理，課程管理，班級管理】和系統管理【包括：個人資訊，用戶管理，角色管理，選單管理】，關于系統管理各個模塊的詳細說明，下面分別進行講解【由于篇幅有限，僅貼出頁面Html代碼，其他代碼可通過下載原始碼進行查看】，整體頁面布局，如下所示：
個人資訊
個人資訊主要展示當前登錄用戶的個人資訊，包括個人賬戶，昵稱，角色等，如下所示：
1 <template> 2 <a-card hoverable style="width: 300px;"> 3 <template #cover> 4 <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" /> 5 </template> 6 <a-card-meta title="個人資訊" description="個人資訊展示"> 7 <template #avatar> 8 <a-image :width="30" :height="30" src="/images/icon_student.png" /> 9 </template> 10 </a-card-meta> 11 <p>用戶名: {{userName}}</p> 12 <p>昵 稱: {{nickName}}</p> 13 <p>角 色: {{roleName}}</p> 14 </a-card> 15 </template>
個人資訊截圖，如下所示：
用戶管理
用戶管理主要用于創建用戶，修改用戶，及授權角色等功能，具體如下所示：
1 <template> 2 <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="用戶管理" sub-title="用戶資訊基本操作" /> 3 <a-form :model="formState" name="horizontal_query" layout="inline" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed"> 4 <a-form-item label="用戶名"> 5 <a-input v-model:value="formState.userName"></a-input> 6 </a-form-item> 7 <a-form-item> 8 <a-button type="primary" html-type="submit">查詢</a-button> 9 </a-form-item> 10 <a-form-item> 11 <a-button type="primary" @click="add">新增</a-button> 12 </a-form-item> 13 </a-form> 14 <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :row-key="record => record.id"> 15 <template #bodyCell="{ column, text, record }"> 16 <template v-if="[ 'name','teacher', 'createUser','lastEditUser'].includes(column.dataIndex)"> 17 <div>{{ text }}</div> 18 </template> 19 <template v-else-if="[ 'createTime','lastEditTime'].includes(column.dataIndex)"> 20 <div>{{formatDateString(text)}}</div> 21 </template> 22 <template v-else-if="column.dataIndex === 'operation'"> 23 <div class="editable-row-operations"> 24 <a @click="edit(record.id)">編輯</a> 25 | 26 <a @click="edit1(record.id)">授權</a> 27 </div> 28 </template> 29 </template> 30 </a-table> 31 <a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" /> 32 <a-modal ref="modalUserRef" v-model:visible="visible" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk"> 33 <div> 34 <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="用戶管理" sub-title="新增或編輯用戶資訊" /> 35 <br /> 36 <a-form :model="addEditFormState"> 37 <a-form-item label="用戶名"> 38 <a-input v-model:value="addEditFormState.userName" /> 39 </a-form-item> 40 <a-form-item label="昵稱"> 41 <a-input v-model:value="addEditFormState.nickName" /> 42 </a-form-item> 43 <a-form-item label="密碼"> 44 <a-input-password v-model:value="addEditFormState.password" /> 45 </a-form-item> 46 <a-form-item label="確認密碼"> 47 <a-input-password v-model:value="addEditFormState.confirmPassword" /> 48 </a-form-item> 49 </a-form> 50 </div> 51 </a-modal> 52 <a-modal ref="modalRoleRef" v-model:visible="visible1" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk1"> 53 <div class="userrole"> 54 <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="用戶授權" sub-title="用戶權限資訊" /> 55 <br /> 56 <div> 57 <div style="margin-bottom: 16px"> 58 <span style="margin-left: 8px"> 59 <template v-if="hasSelected"> 60 {{ `選擇了 ${selectedRowKeys.length} 個角色` }} 61 </template> 62 </span> 63 </div> 64 <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columnRoles" :data-source="roleDataSource" :pagination="false" :row-key="record => record.id" /> 65 </div> 66 </div> 67 </a-modal> 68 </template>
用戶管理示例截圖
角色管理
角色管理主要用于對角色的創建，編輯，查詢，及分配選單等操作，代碼如下所示：
1 <template> 2 <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="角色管理" sub-title="角色資訊基本操作" /> 3 <a-form :model="formState" name="horizontal_query" layout="inline" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed"> 4 <a-form-item label="角色名"> 5 <a-input v-model:value="formState.roleName"></a-input> 6 </a-form-item> 7 <a-form-item> 8 <a-button type="primary" html-type="submit">查詢</a-button> 9 </a-form-item> 10 <a-form-item> 11 <a-button type="primary" @click="add">新增</a-button> 12 </a-form-item> 13 </a-form> 14 <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :row-key="record => record.id"> 15 <template #bodyCell="{ column, text, record }"> 16 <template v-if="[ 'name','teacher', 'createUser','lastEditUser'].includes(column.dataIndex)"> 17 <div>{{ text }}</div> 18 </template> 19 <template v-else-if="[ 'createTime','lastEditTime'].includes(column.dataIndex)"> 20 <div>{{formatDateString(text)}}</div> 21 </template> 22 <template v-else-if="column.dataIndex === 'operation'"> 23 <div class="editable-row-operations"> 24 <a @click="edit(record.id)">編輯</a> 25 | 26 <a @click="edit1(record.id)">分配選單</a> 27 </div> 28 </template> 29 </template> 30 </a-table> 31 <a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" /> 32 <a-modal ref="modalRoleRef" v-model:visible="visible" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk"> 33 <div> 34 <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="角色管理" sub-title="新增或編輯角色資訊" /> 35 <br /> 36 <a-form :model="addEditFormState"> 37 <a-form-item label="角色名"> 38 <a-input v-model:value="addEditFormState.name" /> 39 </a-form-item> 40 <a-form-item label="描述"> 41 <a-input v-model:value="addEditFormState.description" /> 42 </a-form-item> 43 </a-form> 44 </div> 45 </a-modal> 46 <a-modal ref="modalMenuRef" v-model:visible="visible1" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk1"> 47 <div class="rolemenu"> 48 <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="角色分配選單" sub-title="選單分配資訊" /> 49 <br /> 50 <div> 51 <div style="margin-bottom: 8px"> 52 <span style="margin-left: 8px"> 53 <template v-if="hasSelected"> 54 {{ `選擇了 ${selectedRowKeys.length} 個選單` }} 55 </template> 56 </span> 57 </div> 58 <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columnMenus" :data-source="menuDataSource" :pagination="false" :row-key="record => record.id" /> 59 </div> 60 </div> 61 </a-modal> 62 </template>
角色模塊，截圖如下所示：
選單管理
選單管理，主要用于管理導航相關配置，包括圖示，順序，層級等相關內容，如下所示：
1 <template> 2 <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="選單管理" sub-title="慘淡資訊基本操作" /> 3 <a-form :model="formState" name="horizontal_query" layout="inline" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed"> 4 <a-form-item label="選單名"> 5 <a-input v-model:value="formState.menuName"></a-input> 6 </a-form-item> 7 <a-form-item> 8 <a-button type="primary" html-type="submit">查詢</a-button> 9 </a-form-item> 10 <a-form-item> 11 <a-button type="primary" @click="add">新增</a-button> 12 </a-form-item> 13 </a-form> 14 <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :row-key="record => record.id"> 15 <template #bodyCell="{ column, text, record }"> 16 <template v-if="[ 'name','id','parentId','sortId','description','url'].includes(column.dataIndex)"> 17 <div>{{ text }}</div> 18 </template> 19 <template v-else-if="[ 'icon'].includes(column.dataIndex)"> 20 <div> 21 <a-image :width="20" :height="20" :src="text"/> 22 </div> 23 </template> 24 <template v-else-if="column.dataIndex === 'operation'"> 25 <div class="editable-row-operations"> 26 <a @click="edit(record.id)">編輯</a> 27 </div> 28 </template> 29 </template> 30 </a-table> 31 <a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" /> 32 <a-modal ref="modalRef" v-model:visible="visible" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk"> 33 <div> 34 <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="選單管理" sub-title="新增或編輯選單資訊" /> 35 <br /> 36 <a-form :model="addEditFormState"> 37 <a-form-item label="選單名"> 38 <a-input v-model:value="addEditFormState.name" /> 39 </a-form-item> 40 <a-form-item label="描述"> 41 <a-input v-model:value="addEditFormState.description" /> 42 </a-form-item> 43 <a-form-item label="Url"> 44 <a-input v-model:value="addEditFormState.url" /> 45 </a-form-item> 46 <a-form-item label="圖示"> 47 <a-input v-model:value="addEditFormState.icon" /> 48 </a-form-item> 49 <a-form-item label="父ID"> 50 <a-input v-model:value="addEditFormState.parentId" /> 51 </a-form-item> 52 <a-form-item label="排序"> 53 <a-input v-model:value="addEditFormState.sortId" /> 54 </a-form-item> 55 </a-form> 56 </div> 57 </a-modal> 58 </template>
選單管理，截圖如下所示：
關于原始碼
關于原始碼下載，可點擊CSDN上的鏈接 或者關注個人公眾號【老碼識途】進行下載，如下所示：
備注
以上就是VUE3.0+Antdv+Asp.net WebApi開發學生資訊管理系統系列課程的全部內容了，通過幾個功能模塊的講解，雖然各個模塊雖功能略有差異，但總歸萬變不離其宗，開發方法也大同小異，復雜的功能都是普通的功能累加起來的，這也是本系列文章由淺入深的漸進安排，希望能夠拋磚引玉，不局限于某一功能，而是能夠舉一反三，自我理解，以達到自我開發的能力，
學習編程，從關注【老碼識途】開始！！！
作者：小六公子
出處：http://www.cnblogs.com/hsiang/
本文著作權歸作者和博客園共有，寫文不易，支持原創，歡迎轉載【點贊】，轉載請保留此段宣告，且在文章頁面明顯位置給出原文連接，謝謝，
關注個人公眾號，定時同步更新技術及職場文章
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503217.html
標籤：其他
上一篇：提桶跑路前一天——整理組件