在B/S系統開發中，前後端分離開發設計已成為一種標準，而VUE作為前端三大主流框架之一，越來越受到大家的青睞，Antdv是Antd在Vue中的實現。本系列文章主要通過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）等控制項。關於具體每一個控制項的使用，可參考官網說明示例。
功能劃分
在本示例中，學生管理模塊功能主要分為4個部分：
- 查詢功能：根據輸入的查詢條件進行查詢，此功能是一個form表單。
- 數據展示：將查詢出的結果進行展示，此功能是一個table列表。
- 分頁功能：數據數據較多，需要分頁展示，每次展示一頁數據。
- 新增，編輯功能：可以添加學生信息，也可以編輯信息，此功能是一個彈出對話框，嵌套一個form表單。
查詢功能
在學生管理模塊中，查詢功能主要通過學號，姓名兩個條件進行查詢，代碼如下所示：
1 <a-form :model="formState" name="horizontal_query" layout="inline" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed"> 2 <a-form-item label="學號" name="no"> 3 <a-input v-model:value="formState.no"></a-input> 4 </a-form-item> 5 <a-form-item label="姓名" name="name"> 6 <a-input v-model:value="formState.name"></a-input> 7 </a-form-item> 8 <a-form-item> 9 <a-button type="primary" html-type="submit">查詢</a-button> 10 </a-form-item> 11 <a-form-item> 12 <a-button type="primary" @click="addStudent">新增</a-button> 13 </a-form-item> 14 </a-form>
註意：form表單的提交事件為submit，finish為提交成功後的響應事件，在此事件中可以進行介面調用，如下所示：
1 const onFinish = (values: any) => { 2 var no = values.no; 3 var name = values.name; 4 getStudents(no, name); 5 console.log('Success:', values); 6 }; 7 8 const onFinishFailed = (errorInfo: any) => { 9 console.log('Failed:', errorInfo); 10 }; 11 12 const getStudents = (no, name) => { 13 dataSource.length = 0; 14 getD('/api/Student/GetStudents', { 15 "pageSize": pagination.pageSize, 16 "pageNum": pagination.current, 17 "no": no, 18 "name": name 19 }).then(res => { 20 console.log(res); 21 if (res.status == 200) { 22 pagination.total = res.data.count; //總記錄數 23 console.log(pagination.total); 24 for (let i = 0; i < res.data.items.length; i++) { 25 dataSource.push({ 26 id: res.data.items[i].id, 27 key: res.data.items[i].id.toString(), 28 no: res.data.items[i].no, 29 name: res.data.items[i].name, 30 age: res.data.items[i].age, 31 sex: res.data.items[i].sex ? "男" : "女", 32 sexValue: res.data.items[i].sex, 33 classesId: res.data.items[i].classesId, 34 classesName: res.data.items[i].classesName, 35 }); 36 } 37 state.dataSource = [...dataSource]; 38 } 39 }); 40 };
其中getStudents方法，多個地方會進行調用，所以進行了封裝，主要用於學生列表查詢介面訪問。
數據展示
數據展示主要使用a-table控制項，其中columns定義需要顯示的列，data-source綁定數據源，如下所示：
1 <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :row-key="record => record.id"> 2 <template #bodyCell="{ column, text, record }"> 3 <template v-if="[ 'no','name', 'sge', 'dex','classesName'].includes(column.dataIndex)"> 4 <div>{{ text }}</div> 5 </template> 6 <template v-else-if="column.dataIndex === 'operation'"> 7 <div class="editable-row-operations"> 8 <a @click="edit(record.key)">Edit</a> 9 </div> 10 </template> 11 </template> 12 </a-table>
註意：預設情況下，當數據源發生更新時，a-table控制項不會信息頁面刷新，需要綁定row-key屬性才可以。
分頁功能
分頁功能主要才用分頁控制項a-pagination，其中current表示當前頁，total表示總頁碼，change表示綁定分頁事件，如下所示：
1 <a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" />
關於change事件功能，主要用於調用getStudents函數，如下所示：
1 const change = (pagination) => { 2 var no = formState.no; 3 var name = formState.name; 4 getStudents(no, name); 5 console.log(pagination); 6 };
新增編輯功能
新增學生和編輯學生都是對單個學生實體進行操作，採用form表單進行提交到後臺介面。其中visible用於控制彈窗的顯示與隱藏。ok表示彈窗的確定事件。班級下拉框（a-select）顯示班級列表，需要在載入頁面時進行預載入。如下所示：
1 <a-modal ref="modalRef" v-model:visible="visible" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk"> 2 <div> 3 <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="學生管理" sub-title="新增或編輯學生" /> 4 <a-form :model="addEditFormState"> 5 <a-form-item label="學號"> 6 <a-input v-model:value="addEditFormState.no" /> 7 </a-form-item> 8 <a-form-item label="姓名"> 9 <a-input v-model:value="addEditFormState.name" /> 10 </a-form-item> 11 <a-form-item label="年齡"> 12 <a-input v-model:value="addEditFormState.age" /> 13 </a-form-item> 14 <a-form-item label="性別"> 15 <a-radio-group v-model:value="addEditFormState.sex"> 16 <a-radio :value="true">男</a-radio> 17 <a-radio :value="false">女</a-radio> 18 </a-radio-group> 19 </a-form-item> 20 <a-form-item label="班級"> 21 <a-select ref="select" v-model:value="addEditFormState.classes" style="width: 200px"> 22 <a-select-option :value="item.id" v-for="(item) in dataClasses" :key="item.id">{{item.name}}</a-select-option> 23 </a-select> 24 </a-form-item> 25 </a-form> 26 </div> 27 </a-modal>
新增編輯提交事件handleOk代碼，其中根據id值判斷是新增學生和編輯學生，如下所示：
1 const handleOk = (e: MouseEvent) => { 2 console.log(e); 3 console.log(addEditFormState); 4 var url = ""; 5 if (addEditFormState.id >0) { 6 url = "/api/Student/UpdateStudent"; //編輯 7 } else { 8 url = "/api/Student/AddStudent"; //新增 9 } 10 postD(url, { 11 "id": addEditFormState.id>0?addEditFormState.id:null, 12 "no": addEditFormState.no, 13 "name": addEditFormState.name, 14 "age": addEditFormState.age, 15 "sex": addEditFormState.sex, 16 "classesId": addEditFormState.classes, 17 "createTime": "2022-08-15T15:31:12.224Z", 18 "createUser": 0, 19 "lastEditTime": "2022-08-15T15:31:12.224Z", 20 "lastEditUser": 0 21 }).then(res => { 22 console.log(res); 23 if(res.status==200){ 24 if(res.data==0){ 25 message.success('保存成功！'); 26 visible.value = false; 27 var no = formState.no; 28 var name = formState.name; 29 getStudents(no, name); 30 }else{ 31 message.error('保存失敗！'); 32 } 33 } 34 }); 35 36 };
關於學生管理模塊的全部代碼，如下所示：
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="學號" name="no"> 5 <a-input v-model:value="formState.no"></a-input> 6 </a-form-item> 7 <a-form-item label="姓名" name="name"> 8 <a-input v-model:value="formState.name"></a-input> 9 </a-form-item> 10 <a-form-item> 11 <a-button type="primary" html-type="submit">查詢</a-button> 12 </a-form-item> 13 <a-form-item> 14 <a-button type="primary" @click="addStudent">新增</a-button> 15 </a-form-item> 16 </a-form> 17 <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" :row-key="record => record.id"> 18 <template #bodyCell="{ column, text, record }"> 19 <template v-if="[ 'no','name', 'sge', 'dex','classesName'].includes(column.dataIndex)"> 20 <div>{{ text }}</div> 21 </template> 22 <template v-else-if="column.dataIndex === 'operation'"> 23 <div class="editable-row-operations"> 24 <a @click="edit(record.key)">Edit</a> 25 </div> 26 </template> 27 </template> 28 </a-table> 29 <a-pagination v-model:current="pagination.current" :total="pagination.total" @change="change" /> 30 <a-modal ref="modalRef" v-model:visible="visible" okText="保存" cancelText="取消" :wrap-style="{ overflow: 'hidden' }" @ok="handleOk"> 31 <div> 32 <a-page-header style="border: 1px solid rgb(235, 237, 240)" title="學生管理" sub-title="新增或編輯學生" /> 33 <a-form :model="addEditFormState"> 34 <a-form-item label="學號"> 35 <a-input v-model:value="addEditFormState.no" /> 36 </a-form-item> 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.age" /> 42 </a-form-item> 43 <a-form-item label="性別"> 44 <a-radio-group v-model:value="addEditFormState.sex"> 45 <a-radio :value="true">男</a-radio> 46 <a-radio :value="false">女</a-radio> 47 </a-radio-group> 48 </a-form-item> 49 <a-form-item label="班級"> 50 <a-select ref="select" v-model:value="addEditFormState.classes" style="width: 200px"> 51 <a-select-option :value="item.id" v-for="(item) in dataClasses" :key="item.id">{{item.name}}</a-select-option> 52 </a-select> 53 </a-form-item> 54 </a-form> 55 </div> 56 </a-modal> 57 </template> 58 <script lang="ts"> 59 import { 60 defineComponent, 61 reactive, 62 toRefs, 63 ref, 64 toRaw 65 } from 'vue'; 66 import type { 67 UnwrapRef 68 } from 'vue'; 69 import { message } from 'ant-design-vue'; 70 import { 71 getD, 72 postD 73 } from '../api/index.js'; 74 75 const columns = [ 76 { 77 title: '學號', 78 dataIndex: 'no', 79 key: 'no', 80 align: 'center', 81 width: '20%', 82 }, 83 { 84 title: '姓名', 85 dataIndex: 'name', 86 key: 'name
