• Antdv+Asp.net WebApi开发学生信息管理系统（一）

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

    什么是Antdv ？

    Antdv【ant-design-vue】是Antd在Vue中的实现，为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。

    在本示例项目中，主要包含两大部分：1.前端web项目【vsims.web】2.后端webapi项目【vsims.webapi】，本文先讲解前端web项目相关内容。

    创建前端项目

    通过命令vue create vsims.web 创建学生管理系统前端项目，在创建过程中，选择手动创建模式，选择Babel，TypeScripe和Router等，如下所示：

    安装Antdv组件

    切换到项目目录，然后安装Antdv组件，命令如下：

    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>Headera-layout-header>
    5.             <a-layout>
    6.                 <a-layout-sider>Sidera-layout-sider>
    7.                 <a-layout-content>Contenta-layout-content>
    8.             a-layout>
    9.             <a-layout-footer>Footera-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 mea-checkbox>
    17.             a-form-item>
    18.  
    19.             <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
    20.                 <a-button style="margin-right: 10px;">Cancela-button>
    21.                 <a-button type="primary" html-type="submit">Submita-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开发学生信息管理系统的开篇介绍，因为是前后端分离项目，还未涉及到后端内容，所以有些是写成固定值，后续会进一步优化成动态加载内容。

    备注

    新的开始，新的篇章。学习编程，从关注【老码识途】开始！！！

  • 相关阅读:
    natapp内网穿透-将本地运行的程序/服务器通过公网IP供其它人访问
    【算法与数据结构】236、LeetCode二叉树的最近公共祖先
    [oeasy]python0013_ASCII码表_英文字符编码_键盘字符
    ansible的主机清单和Playbook（剧本）
    【操作系统】Lesson1-什么是操作系统
    B+树的生成过程 怎么去看懂B+树
    微服务远程调用之拦截器实战
    dump备份命令
    STM32-Project17-18:NVIC中断应用概述；EXTI外部中断控制实验；
    黑马头条知识点总结
  • 原文地址：https://blog.csdn.net/fengershishe/article/details/126218928