VUE3.0+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"