标签：WebApi Asp layout name ant vue 所示 import Antdv
在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开发学生信息管理系统的开篇介绍，因为是前后端分离项目，还未涉及到后端内容，所以有些是写成固定值，后续会进一步优化成动态加载内容。
备注
新的开始，新的篇章。
标签：WebApi,Asp,layout,name,ant,vue,所示,import,Antdv 来源： https://www.cnblogs.com/hsiang/p/16557381.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。