当前位置：网站首页>Antdv+Asp.net WebApi开发学生信息管理系统（一）
Antdv+Asp.net WebApi开发学生信息管理系统（一）
2022-08-09 10:57:00 【小六公子】
在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】进行注册，如下所示：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//1. 引入Antdv组件和样式
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App);
app.use(router).use(Antd).mount('#app')定制主题
由于本项目使用VUE3.0，所以定制主题，需要在项目中创建vue.config.js文件，然后添加主题配置代码，如下所示：
const {
defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
},
},
},
},
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'SIMS'
return args
})
},
transpileDependencies: true
})运行项目（一）
在项目目录下，打开命令行，运行npm run serve启动项目，如下所示：
在浏览器中输入网址http://localhost:8080/，打开如下所示：
如上图所示，则表示上述配置成功。
添加路由
删除掉App.vue中默认生成的代码，然后添加路由视图【router-view】，代码如下所示：
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
</style>注意：因为路由在创建项目时已经添加，所以可以直接使用。
系统布局
在学生信息管理系统中，采用传统的上，中【左右】，下布局。在views视图文件中，新建HomeView.vue视图文件，如下所示：
<template>
<div id="layout">
<a-layout>
<a-layout-header>Header</a-layout-header>
<a-layout>
<a-layout-sider>Sider</a-layout-sider>
<a-layout-content>Content</a-layout-content>
</a-layout>
<a-layout-footer>Footer</a-layout-footer>
</a-layout>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app{
height: inherit;
}
#layout{
height: inherit;
}
.ant-layout{
height: inherit;
}
#layout .code-box-demo {
text-align: center;
}
#layout .ant-layout-header,
#layout .ant-layout-footer {
color: #fff;
background: #7dbcea;
}
[data-theme='dark'] #layout .ant-layout-header {
background: #6aa0c7;
}
[data-theme='dark'] #layout .ant-layout-footer {
background: #6aa0c7;
}
#layout .ant-layout-footer {
line-height: 1.5;
}
#layout .ant-layout-sider {
color: #fff;
line-height: 120px;
background: #3ba0e9;
}
[data-theme='dark'] #layout .ant-layout-sider {
background: #3499ec;
}
#layout .ant-layout-content {
min-height: 120px;
color: #fff;
line-height: 120px;
background: rgba(16, 142, 233, 1);
}
[data-theme='dark'] #layout .ant-layout-content {
background: #107bcb;
}
#layout>.code-box-demo>.ant-layout+.ant-layout {
margin-top: 48px;
}
</style>重新打开浏览器，如下所示：
添加菜单
在默认布局中创建成功后，在左侧布局容器中，添加菜单内容，如下所示：
<a-layout-sider v-model:collapsed="collapsed">
<a-button type="primary" style="margin-bottom: 5px" @click="toggleCollapsed">
<MenuUnfoldOutlined v-if="collapsed" />
<MenuFoldOutlined v-else />
</a-button>
<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark" :inline-collapsed="collapsed">
<a-menu-item key="1">
<template #icon><HomeOutlined /></template>
<router-link to="/main">首页</router-link>
</a-menu-item>
<a-sub-menu key="sub1">
<template #icon>
<ReadOutlined />
</template>
<template #title>
<span class="onemenu">学生管理</span>
</template>
<a-menu-item key="5">
<img src="../assets/icon_student.png" class="icon" />
<router-link to="/student">学生管理</router-link>
</a-menu-item>
<a-menu-item key="6">
<img src="../assets/icon_classes.png" class="icon" />
<router-link to="/classes">班级管理</router-link>
</a-menu-item>
<a-menu-item key="7">
<img src="../assets/icon_course.png" class="icon" />
<router-link to="/course">课程管理</router-link>
</a-menu-item>
<a-menu-item key="8">
<img src="../assets/icon_score.png" class="icon" />
<router-link to="score">成绩管理</router-link>
</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #icon>
<AppstoreOutlined />
</template>
<template #title>
<span class="onemenu">系统管理</span>
</template>
<a-menu-item key="9">
<img src="../assets/icon_personal.png" class="icon" />
<router-link to="/personal">个人信息</router-link>
</a-menu-item>
<a-menu-item key="10">
<img src="../assets/icon_user.png" class="icon" />
<router-link to="/user">用户管理</router-link>
</a-menu-item>
<a-menu-item key="11">
<img src="../assets/icon_role.png" class="icon" />
<router-link to="/role">角色管理</router-link>
</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>在内容布局中，添加路由视图，作为二级视图，如下所示：
<a-layout-content>
<router-view></router-view>
</a-layout-content>添加菜单对应的视图
根据系统设计，主要包含学生管理，成绩管理，班级管理，课程管理，以及系统管理等相关内容，每一个功能对应一个页面视图，如下所示：
每一个视图对应以路由，视图创建完成后，修改router\index.ts文件，添加路由，如下所示：
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import LoginView from '../views/LoginView.vue'
import MainView from '../views/MainView.vue'
import StudentView from '../views/StudentView.vue'
import ClassesView from '../views/ClassesView.vue'
import CourseView from '../views/CourseView.vue'
import ScoreView from '../views/ScoreView.vue'
import PersonalView from '../views/PersonalView.vue'
import MenuView from '../views/MenuView.vue'
import RoleView from '../views/RoleView.vue'
import UserView from '../views/UserView.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home1',
component: HomeView
},
{
path: '/home',
name: 'home',
component: HomeView,
children:[
{
path:'/main',
name:'main',
component:MainView
},
{
path:'/student',
name:'student',
component:StudentView
},
{
path:'/classes',
name:'classes',
component:ClassesView
},
{
path:'/course',
name:'course',
component:CourseView
},
{
path:'/score',
name:'score',
component:ScoreView
},
{
path:'/personal',
name:'personal',
component:PersonalView
},
{
path:'/menu',
name:'menu',
component:MenuView
},
{
path:'/user',
name:'user',
component:UserView
},
{
path:'/role',
name:'role',
component:RoleView
}
]
},
{
path:'/login',
name:'login',
component:LoginView
},
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router创建登录视图
在学生信息管理系统中，进入主页面之前，需要先进行登录，如下所示，
<template>
<div id="login">
<a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
<div id="title">
<h1>学生信息管理系统</h1>
</div>
<a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
<a-input v-model:value="formState.username" />
</a-form-item>
<a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
<a-input-password v-model:value="formState.password" />
</a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
<a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
</a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button style="margin-right: 10px;">Cancel</a-button>
<a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script lang="ts">
import {
defineComponent,
reactive,
} from 'vue';
import {
useRouter,
//useRoute
} from 'vue-router'
interface FormState {
username: string;
password: string;
remember: boolean;
}
export default defineComponent({
setup() {
const router = useRouter();
//const route= useRoute();
const formState = reactive < FormState > ({
username: '',
password: '',
remember: true,
});
const onFinish = (values: any) => {
console.log(values);
console.log('Success:', values);
router.push('/home');
//this.$router.push('/home');
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
return {
formState,
onFinish,
onFinishFailed,
};
},
});
</script>
<style>
body{
background-image: url(../assets/bg.gif);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#login{
position: absolute;
left: 35%;
top: 30%;
}
#title h1{
color: #FFFFFF;
}
.ant-form{
width: 60vh;
height: 35vh;
background-color:rgba(10,10,10,0.2);
padding: 0.625rem !important;
}
</style>运行项目（二）
当系统搭建完成后，启动项目，然后在浏览器中打开，如下所示：
以上就是Antdv+Asp.net WebApi开发学生信息管理系统的开篇介绍，因为是前后端分离项目，还未涉及到后端内容，所以有些是写成固定值，后续会进一步优化成动态加载内容。
备注
新的开始，新的篇章。学习编程，从关注【老码识途】开始！！！
边栏推荐
- 在webgis中显示矢量化后的风险防控信息
- Solve 1. tensorflow runs using CPU but not GPU 2. GPU version number in tensorflow environment 3. Correspondence between tensorflow and cuda and cudnn versions 4. Check cuda and cudnn versions
- 美的数字化平台 iBUILDING 背后的技术选型
- Jmeter BeanShell post processor
- 全网最简单解决OneNote中英字体不统一
- matlab图像分割，从基因芯片荧光图像中提取阴性点（弱）和阳性点（强）
- MySQL外键在数据库中的作用
- 1007 Maximum Subsequence Sum (25分)
- Numpy常用操作博客合集
- MNIST机器学习入门
猜你喜欢
随机推荐
美的数字化平台 iBUILDING 背后的技术选型
Getting Started with MNIST Machine Learning
信息系统项目的十大管理
Missing URI template variable ‘employeeNumber‘ for method parameter of type String
UNIX Environment Programming Chapter 15 15.6 XSI IPC
性能测试(03)-JDBC Request
Qt读写.ini配置文件
华为VRRP+MSTP联动接口检测实验案例
真香！肝完Alibaba这份面试通关宝典，我成功拿下今年第15个Offer
1009 Product of Polynomials C语言多项式乘积(25分)
1003 Emergency (25分)
一键完成物联网产品注册，快速体验在线调试设备
OpenSSF的开源软件风险评估工具：Scorecards
无重复字符的最长子串
实测办公场景下，国产远程控制软件的表现力如何？（技术解析）
Oracle数据库常用函数总结
图片查看器viewer
PoseNet: A Convolutional Network for Real-Time 6-DOF Camera Relocalization Paper Reading
中断系统结构及中断控制
Product Quantization (PQ)