使用ElementUI + Vue框架实现门生管理系统前端页面设计

目次

一.什么是ElementUI？
二.使用ElementUI和Vue-cli搭建前端页面
三.具体步调
1.创建vue-cli项目
2.分析
3.创建组件
四.总结

---

一.什么是ElementUI？

ElementUI是一种网站快速成型工具，一套为开辟者，设计师准备的基于Vue2.0的桌面端组件库。
ElementUI官方网站如下：Element - 网站快速成型工具
此中ElementUI提供了很多种组件的原型，以及源码供开辟者们使用。

二.使用ElementUI和Vue-cli搭建前端页面

目标页面如下：

三.具体步调

1.创建vue-cli项目

2.分析

 我们现在需要登录的前端页面，管理系统的前端页面，以及两个管理系统中的门生管理和专业管理界面，以是需要创建四个 .vue 组件。
还需要创建一个.js去设置路由。设置好路由一定要在main.js中导入路由对象。
首先，我们需要使用 vue-cli 和 ElementUI 就需要通过终端将 router 组件和 elementui的组件举行导入：

1. //导入router组件
2. npm i vue-router@3.5.3

复制代码

1. //导入ElementUI组件
3. npm i element-ui -S

复制代码

下载完成后在package.json中查看是否导入乐成。

导入乐成后在main.js中设置：

3.创建组件

首先我们先来创建前端首页的第一个登岸界面：
留意：1.账号和密码为空时点击登录要提示信息。

2.密码框要接纳隐蔽式

各人也可以添加其他的组件到Login.vue中，使得页面更加新奇耐看。

1. <!-- 一个.vue文件是一个组件,可以理解为一个页面,但是和页面不同
2.   内容都写在一个template标签中,
3.   template标签必须有一个根标签
4. -->
5. <template>
6.          <div class="login_container">
7.              <!-- 登录盒子-->
8.              <div class="login_box">
9.                   <!-- 头像盒子-->
10.                   <div class="img_box">
11.                         <img src="./assets/tx.jpg" />
12.                   </div>
13.                           <!-- 登录表单-->
14.                          <div style="margin-top: 100px; padding-right: 20px;">
15.                                 <el-form ref="form" label-width="80px" >
16.                                 <el-form-item label="账号">
17.                                     <el-input v-model="account" ></el-input>
18.                                   </el-form-item>
19.                                 <el-form-item label="密码" >
20.                                       <el-input show-password v-model="password"></el-input>
21.                                     </el-form-item>
22.                                 <el-form-item>
23.                                     <el-button type="primary" @click="login()" >登录</el-button>
24.                                     <el-button>取消</el-button>
25.                                   </el-form-item>
26.                                 </el-form>
27.                          </div>
28.                        
29.                                
30.                
31.              </div>
32.           </div>
33. </template>
35. <script>
36. /* 导出组件,并为组件定义数据,函数,生命周期函数 */
37. export default{
38.          data(){
39.                  return{
40.                          account:"",
41.                          password:""
42.                  }
43.          },
44.          methods:{
45.                  login(){
46.                          //进行前端判断账号密码不能为空
47.                          if(this.account.length==0){
48.                                 this.$message({ message: '账号不能为空', type: 'warning'});
49.                                 return;
50.                          }
51.                          if(this.password.length==0){
52.                                 this.$message({ message: '密码不能为空', type: 'warning'});
53.                                 return;
54.                          }
55.                          
56.                          //与后端交互
57.                          //后端响应回来一个数据，用来判断是否登陆成功，如果登陆成功就跳转下个页面
58.                          //this.$router.push("路由地址")  用来跳转页面
59.                          
60.                          this.$router.push("/main");
61.                          
62.                  },
63.          }
64. }
65. </script>
67. <style>
68.   .login_container{
69.     height: 100vh;
70.     margin: 0px;
71.     padding: 0px;
72.         background-image: url(assets/vue-cli.png);
73.   }
75.     .login_box{
76.       width: 450px;
77.       height: 350px;
78.       background-color: #fff;
79.       border-radius: 10px;
80.       position: absolute;
81.       left: 50%;
82.       top: 50%;
83.       transform: translate(-50%,-50%);
84.           opacity: 0.95;
85.     }
87.     .img_box{
88.        width: 130px;
89.        height: 130px;
90.        position: absolute;
91.        left: 50%;
92.        transform: translate(-50%,-50%);
93.        background-color: #fff;
94.        border-radius: 50%;
95.        padding: 5px;
96.        border: 1px solid #eee;
97.     }
98.    
99.     .img_box img{
100.          width: 100%;
101.          height: 100%;
102.          border-radius: 50%;
103.          background-color: #eee;
104.      }
105. </style>

复制代码

下面我们要来写管理系统平台的页面：
留意：1.左侧为导航栏，下拉选择，并且每点击一个选择都会跳转到对应的界面，但是不会重新开一个界面（这里就要用到路由嵌套）。
2.点击右侧系统按钮会弹出选项，并且点击安全退出就会跳转到登录界面。

3.点击安全退出会弹出警告消息，让用户确认退出。

1. <template>
2.         <div>
3.                 <el-container>
4.                   <el-header style="text-align: right; font-size: 12px">
5.                           <div class="header-title">后台管理系统</div>
6.                         <el-dropdown>
7.                           <i class="el-icon-setting" style="margin-right: 15px"></i>
8.                           <el-dropdown-menu slot="dropdown">
9.                             <el-dropdown-item >修改密码</el-dropdown-item>
10.                             <el-dropdown-item ><span @click="logout()">安全退出</span></el-dropdown-item>
11.                           </el-dropdown-menu>
12.                         </el-dropdown>
13.                         <span>赵逸康</span>
14.                       </el-header>
15.                   <el-container>
16.                     <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
17.                         <el-menu :default-openeds="['1', '3']" router>
18.                           <el-submenu index="1" >
19.                             <template slot="title"><i class="el-icon-message"></i>操作菜单</template>
20.                             <el-menu-item-group>
21.                               <el-menu-item index="/majorlist">专业管理</el-menu-item>
22.                               <el-menu-item index="/studentlist">学生管理</el-menu-item>
23.                             </el-menu-item-group>
24.                           </el-submenu>
25.                         </el-menu>
26.                       </el-aside>
27.                           
28.                     <el-main>
29.                                 <router-view></router-view>
30.                         </el-main>
31.                   </el-container>
32.                 </el-container>
33.                
34.         </div>
35. </template>
37. <script>
38.         export default{
39.                 data(){
40.                         return{
41.                                
42.                         }
43.                 },
44.                 methods:{
45.                         logout(){
46.                                 this.$confirm('您确定要退出吗?', '提示', {
47.                                           confirmButtonText: '确定',
48.                                           cancelButtonText: '取消',
49.                                           type: 'warning'
50.                                         }).then(() => {
51.                                           this.$router.push("/login");
52.                                         })
53.                         }
54.                 }
55.         }
56. </script>
58. <style>
59.         .el-header {
60.             background-color: #00a7fa;
61.             color: #333;
62.             line-height: 60px;
63.           }
64.           .el-main {
65.             background-color: aliceblue;
66.             height: 100vh;
67.           }
68.           .header-title{
69.                   width: 300px;
70.                   float: left;
71.                   text-align: left;
72.                   font-size: 20px;
73.                   color: white;
74.           }
75.           
76. </style>

复制代码

再接下来就是两个专业管理和门生管理的子界面了，这两个界面都是再Main.vue下的子界面，以是在设置路由的时间就需要使用到路由嵌套，并且在Main.vue中还需要加上画布。

下面两个StudentList.vue 和 MajorList.vue两个组件就很简单了，只需要在ElementUI中挑选出自己喜欢的表格组件，公道套用即可。
MajorList.vue：

1. <template>
2.         <el-table
3.               :data="tableData"
4.               style="width: 35%">
5.               <el-table-column
6.                 prop="grade"
7.                 label="年级"
8.                 width="180">
9.               </el-table-column>
10.               <el-table-column
11.                 prop="major"
12.                 label="专业"
13.                 width="180">
14.               </el-table-column>
15.               <el-table-column
16.                 prop="students"
17.                 label="学生人数">
18.               </el-table-column>
19.             </el-table>
20. </template>
22. <script>
23.         export default{
24.                 data(){
25.                         return{
26.                                 tableData: [{
27.                                             grade: '20级',
28.                                             major: '计算机科学与技术',
29.                                             students: 300
30.                                           }, {
31.                                             grade: '21级',
32.                                             major: '计算机科学与技术',
33.                                             students: 350
34.                                           }, {
35.                                             grade: '22级',
36.                                             major: '计算机科学与技术',
37.                                             students: 330
38.                                           }, {
39.                                             grade: '23级',
40.                                             major: '计算机科学与技术',
41.                                             students: 360
42.                                           }]
43.                         }
44.                 },
45.                 methods:{
46.                        
47.                 }
48.         }
49. </script>
51. <style>
52. </style>

复制代码

 StudentList.vue：

1. <template>
2.          <el-table
3.             :data="tableData"
4.             border
5.             style="width: 100%">
6.             <el-table-column
7.               fixed
8.               prop="id"
9.               label="学号"
10.               width="200">
11.             </el-table-column>
12.             <el-table-column
13.               prop="name"
14.               label="姓名"
15.               width="120">
16.             </el-table-column>
17.             <el-table-column
18.               prop="major"
19.               label="专业"
20.               width="170">
21.             </el-table-column>
22.             <el-table-column
23.               prop="class"
24.               label="班级"
25.               width="150">
26.             </el-table-column>
27.             <el-table-column
28.               prop="address"
29.               label="家庭地址"
30.               width="530">
31.             </el-table-column>
32.             <el-table-column
33.               prop="zip"
34.               label="邮编"
35.               width="120">
36.             </el-table-column>
37.             <el-table-column
38.               fixed="right"
39.               label="操作"
40.               width="100">
41.               <template slot-scope="scope">
42.                 <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
43.                 <el-button type="text" size="small">编辑</el-button>
44.               </template>
45.             </el-table-column>
46.           </el-table>
47. </template>
49. <script>
50.         export default{
51.                 data(){
52.                         return{
53.                                 tableData: [{
54.                                           id: "1001",
55.                                           name: '张三',
56.                                           major: '计算机科学与技术',
57.                                           class: '计科2201',
58.                                           address: '陕西省渭南市大荔县666号',
59.                                           zip: 111111
60.                                         }, {
61.                                           id: '1002',
62.                                           name: '王小虎',
63.                                           major: '计算机科学与技术',
64.                                           class: '计科2201',
65.                                           address: '上海市普陀区金沙江路 1517 弄',
66.                                           zip: 200333
67.                                         }, {
68.                                           id: '1003',
69.                                           name: '李四',
70.                                           major: '网络工程',
71.                                           class: '网络2201',
72.                                           address: '陕西省延安市宝塔区888号',
73.                                           zip: 222222
74.                                         }, {
75.                                           id: '1004',
76.                                           name: '王小虎',
77.                                           major: '人工智能',
78.                                           class: '智能2201',
79.                                           address: '陕西省西安市未央区777号',
80.                                           zip: 333333
81.                                         }]
82.                         }
83.                 },
84.                 methods:{
85.                         handleClick(row) {
86.                                 console.log(row);
87.                               }
88.                 }
89.         }
90. </script>
92. <style>
93. </style>

复制代码

四.总结

本篇博客呢，带领各人做了一个简单的vue-cli框架和ElementUI的综合使用和搭建，此中还是包括很多细节的，好比嵌套路由后的添加画布以及组件切换需要加的router都是非常小的细节部分，我们做步伐员必须要细节一些的。到这里呢，就要和各人说再见了，期待我们的下次再见，对于本篇博客有问题的同砚可以在批评区留言大概私信博主嗷，我们一起进步！！！制作不易，还请各人可以多多支持，一键三连，谢谢各人！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。