Antdv+Asp.net WebApi开发学生信息管理系统（一）
2022/8/8 1:23:12
本文主要是介绍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>
14
15 <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
16 <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
17 </a-form-item>
18
19 <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
20 <a-button style="margin-right: 10px;">Cancel</a-button>
21 <a-button type="primary" html-type="submit">Submit</a-button>
22 </a-form-item>
23 </a-form>
24 </div>
25 </template>
26 <script lang="ts">
27 import {
28 defineComponent,
29 reactive,
30 } from 'vue';
31 import {
32 useRouter,
33 //useRoute
34 } from 'vue-router'
35
36 interface FormState {
37 username: string;
38 password: string;
39 remember: boolean;
40 }
41 export default defineComponent({
42 setup() {
43 const router = useRouter();
44 //const route= useRoute();
45 const formState = reactive < FormState > ({
46 username: '',
47 password: '',
48 remember: true,
49 });
50 const onFinish = (values: any) => {
51 console.log(values);
52 console.log('Success:', values);
53 router.push('/home');
54 //this.$router.push('/home');
55 };
56
57 const onFinishFailed = (errorInfo: any) => {
58 console.log('Failed:', errorInfo);
59 };
60 return {
61 formState,
62 onFinish,
63 onFinishFailed,
64 };
65 },
66 });
67 </script>
68 <style>
69 body{
70 background-image: url(../assets/bg.gif);
71 background-repeat: no-repeat;
72 background-size: 100% 100%;
73 }
74 #login{
75 position: absolute;
76 left: 35%;
77 top: 30%;
78 }
79 #title h1{
80 color: #FFFFFF;
81 }
82 .ant-form{
83 width: 60vh;
84 height: 35vh;
85 background-color:rgba(10,10,10,0.2);
86 padding: 0.625rem !important;
87 }
88 </style>
运行项目（二）
当系统搭建完成后，启动项目，然后在浏览器中打开，如下所示：
以上就是Antdv+Asp.net WebApi开发学生信息管理系统的开篇介绍，因为是前后端分离项目，还未涉及到后端内容，所以有些是写成固定值，后续会进一步优化成动态加载内容。
备注
新的开始，新的篇章。
这篇关于Antdv+Asp.net WebApi开发学生信息管理系统（一）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2022-03-01沐雪多租宝商城源码从.NetCore3.1升级到.Net6的步骤
- 2024-11-18微软研究：RAG系统的四个层次提升理解与回答能力
- 2024-11-15C#中怎么从PEM格式的证书中提取公钥？-icode9专业技术文章分享
- 2024-11-14云架构设计——如何用diagrams.net绘制专业的AWS架构图？
- 2024-05-08首个适配Visual Studio平台的国产智能编程助手CodeGeeX正式上线！C#程序员必备效率神器！
- 2024-03-30C#设计模式之十六迭代器模式（Iterator Pattern）【行为型】
- 2024-03-29c# datetime tryparse
- 2024-02-21list find index c#
- 2024-01-24convert toint32 c#
- 2024-01-24Advanced .Net Debugging 1：你必须知道的调试工具
