Antdv+Asp.net WebApi開發學生信息管理系統（一）

在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】，本文先講解前端web項目相關內容。

創建前端項目

通過命令vue create vsims.web 創建學生管理系統前端項目，在創建過程中，選擇手動創建模式，選擇Babel，TypeScripe和Router等，如下所示：

安裝Antdv組件

切換到項目目錄，然後安裝Antdv組件，命令如下：

1 npm i --save ant-design-vue

安裝組件示例截圖如下所示：

vsims.web項目組成

通過腳手架創建項目且安裝Antdv組件後，在HbuilderX中打開，如下所示：

註冊Antdv組件

在安裝組件後，並不能直接使用，需要進行註冊後，才可以在項目中使用，註冊分為全局完整註冊，全局部分註冊，和局部註冊，本文為了簡便，採用全局完整註冊的方式。

通過主文件【main.js】進行註冊，如下所示：

1 import { createApp } from 'vue'
2 import App from './App.vue'
3 import router from './router'
4 //1. 引入Antdv組件和樣式
5 import Antd from 'ant-design-vue';
6 import 'ant-design-vue/dist/antd.css';
7 const app = createApp(App);
8 app.use(router).use(Antd).mount('#app')

定製主題

由於本項目使用VUE3.0，所以定製主題，需要在項目中創建vue.config.js文件，然後添加主題配置代碼，如下所示：

 1 const {
 2     defineConfig
 3 } = require('@vue/cli-service')
 4 module.exports = defineConfig({
 5     css: {
 6         loaderOptions: {
 7             less: {
 8                 lessOptions: {
 9                     modifyVars: {
10                         'primary-color': '#1DA57A',
11                         'link-color': '#1DA57A',
12                         'border-radius-base': '2px',
13                     },
14                     javascriptEnabled: true,
15                 },
16             },
17         },
18     },
19     chainWebpack: config => {
20         config
21         .plugin('html')
22         .tap(args => {
23             args[0].title = 'SIMS'
24             return args
25         })
26     },
27     transpileDependencies: true
28 })

運行項目（一）

在項目目錄下，打開命令行，運行npm run serve啟動項目，如下所示：

在瀏覽器中輸入網址http://localhost:8080/，打開如下所示：

如上圖所示，則表示上述配置成功。

添加路由

刪除掉App.vue中預設生成的代碼，然後添加路由視圖【router-view】，代碼如下所示：

1 <template>
2   <div id="app">
3     <router-view></router-view>
4   </div>
5 </template>
6 <style>
7     
8 </style>

註意：因為路由在創建項目時已經添加，所以可以直接使用。

系統佈局

在學生信息管理系統中，採用傳統的上，中【左右】，下佈局。在views視圖文件中，新建HomeView.vue視圖文件，如下所示：

 1 <template>
 2     <div id="layout">
 3         <a-layout>
 4             <a-layout-header>Header</a-layout-header>
 5             <a-layout>
 6                 <a-layout-sider>Sider</a-layout-sider>
 7                 <a-layout-content>Content</a-layout-content>
 8             </a-layout>
 9             <a-layout-footer>Footer</a-layout-footer>
10         </a-layout>
11     </div>
12 </template>
13 
14 <script>
15     export default {
16         name: 'App',
17         components: {
18 
19         }
20     }
21 </script>
22 
23 <style>
24     #app{
25         height: inherit;
26     }
27     #layout{
28         height: inherit;
29     }
30     .ant-layout{
31         height: inherit;
32     }
33     #layout .code-box-demo {
34         text-align: center;
35     }
36 
37     #layout .ant-layout-header,
38     #layout .ant-layout-footer {
39         color: #fff;
40         background: #7dbcea;
41     }
42 
43     [data-theme='dark'] #layout .ant-layout-header {
44         background: #6aa0c7;
45     }
46 
47     [data-theme='dark'] #layout .ant-layout-footer {
48         background: #6aa0c7;
49     }
50 
51     #layout .ant-layout-footer {
52         line-height: 1.5;
53     }
54 
55     #layout .ant-layout-sider {
56         color: #fff;
57         line-height: 120px;
58         background: #3ba0e9;
59     }
60 
61     [data-theme='dark'] #layout .ant-layout-sider {
62         background: #3499ec;
63     }
64 
65     #layout .ant-layout-content {
66         min-height: 120px;
67         color: #fff;
68         line-height: 120px;
69         background: rgba(16, 142, 233, 1);
70     }
71 
72     [data-theme='dark'] #layout .ant-layout-content {
73         background: #107bcb;
74     }
75 
76     #layout>.code-box-demo>.ant-layout+.ant-layout {
77         margin-top: 48px;
78     }
79 </style>

重新打開瀏覽器，如下所示：

添加菜單

在預設佈局中創建成功後，在左側佈局容器中，添加菜單內容，如下所示：

 1 <a-layout-sider v-model:collapsed="collapsed">
 2     <a-button type="primary" style="margin-bottom: 5px" @click="toggleCollapsed">
 3         <MenuUnfoldOutlined v-if="collapsed" />
 4         <MenuFoldOutlined v-else />
 5     </a-button>
 6     <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark" :inline-collapsed="collapsed">
 7         <a-menu-item key="1">
 8             <template #icon><HomeOutlined /></template>
 9             <router-link to="/main">首頁</router-link>
10         </a-menu-item>
11         <a-sub-menu key="sub1">
12             <template #icon>
13                 <ReadOutlined />
14             </template>
15             <template #title>
16                 <span class="onemenu">學生管理</span>
17             </template>
18             <a-menu-item key="5">
19                 <img src="../assets/icon_student.png" class="icon" />
20                 <router-link to="/student">學生管理</router-link>
21             </a-menu-item>
22             <a-menu-item key="6">
23                 <img src="../assets/icon_classes.png" class="icon" />
24                 <router-link to="/classes">班級管理</router-link>
25             </a-menu-item>
26             <a-menu-item key="7">
27                 <img src="../assets/icon_course.png" class="icon" />
28                 <router-link to="/course">課程管理</router-link>
29                 </a-menu-item>
30             <a-menu-item key="8">
31                 <img src="../assets/icon_score.png" class="icon" />
32                 <router-link to="score">成績管理</router-link>
33                 </a-menu-item>
34         </a-sub-menu>
35         <a-sub-menu key="sub2">
36             <template #icon>
37                 <AppstoreOutlined />
38             </template>
39             <template #title>
40                 <span class="onemenu">系統管理</span>
41             </template>
42             <a-menu-item key="9">
43                 <img src="../assets/icon_personal.png" class="icon" />
44                 <router-link to="/personal">個人信息</router-link>
45                 </a-menu-item>
46             <a-menu-item key="10">
47                 <img src="../assets/icon_user.png" class="icon" />
48                 <router-link to="/user">用戶管理</router-link>
49                 </a-menu-item>
50             <a-menu-item key="11">
51                 <img src="../assets/icon_role.png" class="icon" />
52                 <router-link to="/role">角色管理</router-link>
53                 </a-menu-item>
54         </a-sub-menu>
55     </a-menu>
56 </a-layout-sider>

在內容佈局中，添加路由視圖，作為二級視圖，如下所示：

1 <a-layout-content>
2     <router-view></router-view>
3 </a-layout-content>

添加菜單對應的視圖

根據系統設計，主要包含學生管理，成績管理，班級管理，課程管理，以及系統管理等相關內容，每一個功能對應一個頁面視圖，如下所示：

每一個視圖對應以路由，視圖創建完成後，修改router\index.ts文件，添加路由，如下所示：

 1 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 2 import HomeView from '../views/HomeView.vue'
 3 import LoginView from '../views/LoginView.vue'
 4 import MainView from '../views/MainView.vue'
 5 import StudentView from '../views/StudentView.vue'
 6 import ClassesView from '../views/ClassesView.vue'
 7 import CourseView from '../views/CourseView.vue'
 8 import ScoreView from '../views/ScoreView.vue'
 9 import PersonalView from '../views/PersonalView.vue'
10 import MenuView from '../views/MenuView.vue'
11 import RoleView from '../views/RoleView.vue'
12 import UserView from '../views/UserView.vue'
13 
14 const routes: Array<RouteRecordRaw> = [
15   {
16     path: '/',
17     name: 'home1',
18     component: HomeView
19   },
20   {
21     path: '/home',
22     name: 'home',
23     component: HomeView,
24     children:[
25         {
26             path:'/main',
27             name:'main',
28             component:MainView
29         },
30         {
31             path:'/student',
32             name:'student',
33             component:StudentView
34         },
35         {
36             path:'/classes',
37             name:'classes',
38             component:ClassesView
39         },
40         {
41             path:'/course',
42             name:'course',
43             component:CourseView
44         },
45         {
46             path:'/score',
47             name:'score',
48             component:ScoreView
49         },
50         {
51             path:'/personal',
52             name:'personal',
53             component:PersonalView
54         },
55         {
56             path:'/menu',
57             name:'menu',
58             component:MenuView
59         },
60         {
61             path:'/user',
62             name:'user',
63             component:UserView
64         },
65         {
66             path:'/role',
67             name:'role',
68             component:RoleView
69         }
70     ]
71   },
72   {
73     path:'/login',
74     name:'login',
75     component:LoginView
76   },
77   
78 ]
79 
80 const router = createRouter({
81   history: createWebHistory(process.env.BASE_URL),
82   routes
83 })
84 
85 export default router

創建登錄視圖

在學生信息管理系統中，進入主頁面之前，需要先進行登錄，如下所示，

 1 <template>
 2     <div id="login">
 3         <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
 4             <div id="title">
 5                 <h1>學生信息管理系統</h1>
 6             </div>
 7             <a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
 8                 <a-input v-model:value="formState.username" />
 9             </a-form-item>
10 
11             <a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
12                 <a-input-password v-model:value="formState.password" />
13             </a-form-item>