目录

一.什么是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的组件进行导入

//导入router组件
npm i vue-router@3.5.3
//导入ElementUI组件

npm i element-ui -S

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

导入成功后在main.js中配置:

3.创建组件

首先我们先来创建前端首页的第一个登陆界面:

注意:1.账号和密码为空时点击登录要提示信息。

2.密码框要采用隐藏式

大家也可以添加其他的组件到Login.vue中,使得页面更加新颖耐看。

<!-- 一个.vue文件是一个组件,可以理解为一个页面,但是和页面不同 
  内容都写在一个template标签中,
  template标签必须有一个根标签
-->
<template>
	 <div class="login_container">
	     <!-- 登录盒子-->
	     <div class="login_box">
	          <!-- 头像盒子-->
	          <div class="img_box">
	                <img src="./assets/tx.jpg" />
	          </div>
			  <!-- 登录表单-->
			 <div style="margin-top: 100px; padding-right: 20px;">
				<el-form ref="form" label-width="80px" >
				<el-form-item label="账号">
				    <el-input v-model="account" ></el-input>
				  </el-form-item>
				<el-form-item label="密码" >
				      <el-input show-password v-model="password"></el-input>
				    </el-form-item>
				<el-form-item>
				    <el-button type="primary" @click="login()" >登录</el-button>
				    <el-button>取消</el-button>
				  </el-form-item>
				</el-form>
			 </div>
			
				
		
	     </div>
	  </div>
</template>

<script>
/* 导出组件,并为组件定义数据,函数,生命周期函数 */
 export default{
	 data(){
		 return{
			 account:"",
			 password:""
		 }
	 },
	 methods:{
		 login(){
			 //进行前端判断账号密码不能为空
			 if(this.account.length==0){
				this.$message({ message: '账号不能为空', type: 'warning'});
				return;
			 }
			 if(this.password.length==0){
				this.$message({ message: '密码不能为空', type: 'warning'});
				return;
			 }
			 
			 //与后端交互
			 //后端响应回来一个数据,用来判断是否登陆成功,如果登陆成功就跳转下个页面
			 //this.$router.push("路由地址")  用来跳转页面
			 
			 this.$router.push("/main");
			 
		 },
	 }
 }
</script>

<style>
  .login_container{
    height: 100vh;
    margin: 0px;
    padding: 0px;
	background-image: url(assets/vue-cli.png);
  }

    .login_box{
      width: 450px;
      height: 350px;
      background-color: #fff;
      border-radius: 10px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
	  opacity: 0.95;
    }

    .img_box{
       width: 130px;
       height: 130px;
       position: absolute;
       left: 50%;
       transform: translate(-50%,-50%);
       background-color: #fff;
       border-radius: 50%;
       padding: 5px;
       border: 1px solid #eee;
    }
    
    .img_box img{
         width: 100%;
         height: 100%;
         border-radius: 50%;
         background-color: #eee;
     }
</style>

下面我们要来写管理系统平台的页面

注意:1.左侧为导航栏,下拉选择,并且每点击一个选择都会跳转到对应的界面,但是不会重新开一个界面(这里就要用到路由嵌套)。

2.点击右侧系统按钮会弹出选项,并且点击安全退出就会跳转到登录界面。

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

<template>
	<div>
		<el-container>
		  <el-header style="text-align: right; font-size: 12px">
			  <div class="header-title">后台管理系统</div>
		        <el-dropdown>
		          <i class="el-icon-setting" style="margin-right: 15px"></i>
		          <el-dropdown-menu slot="dropdown">
		            <el-dropdown-item >修改密码</el-dropdown-item>
		            <el-dropdown-item ><span @click="logout()">安全退出</span></el-dropdown-item>
		          </el-dropdown-menu>
		        </el-dropdown>
		        <span>赵逸康</span>
		      </el-header>
		  <el-container>
		    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
		        <el-menu :default-openeds="['1', '3']" router>
		          <el-submenu index="1" >
		            <template slot="title"><i class="el-icon-message"></i>操作菜单</template>
		            <el-menu-item-group>
		              <el-menu-item index="/majorlist">专业管理</el-menu-item>
		              <el-menu-item index="/studentlist">学生管理</el-menu-item>
		            </el-menu-item-group>
		          </el-submenu>
		        </el-menu>
		      </el-aside>
			  
		    <el-main>
				<router-view></router-view>
			</el-main>
		  </el-container>
		</el-container>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			logout(){
				this.$confirm('您确定要退出吗?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          this.$router.push("/login");
				        })
			}
		}
	}
</script>

<style>
	.el-header {
	    background-color: #00a7fa;
	    color: #333;
	    line-height: 60px;
	  }
	  .el-main {
	    background-color: aliceblue;
	    height: 100vh;
	  }
	  .header-title{
		  width: 300px;
		  float: left;
		  text-align: left;
		  font-size: 20px;
		  color: white;
	  }
	  
</style>

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

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

MajorList.vue:

<template>
	<el-table
	      :data="tableData"
	      style="width: 35%">
	      <el-table-column
	        prop="grade"
	        label="年级"
	        width="180">
	      </el-table-column>
	      <el-table-column
	        prop="major"
	        label="专业"
	        width="180">
	      </el-table-column>
	      <el-table-column
	        prop="students"
	        label="学生人数">
	      </el-table-column>
	    </el-table>
</template>

<script>
	export default{
		data(){
			return{
				tableData: [{
				            grade: '20级',
				            major: '计算机科学与技术',
				            students: 300
				          }, {
				            grade: '21级',
				            major: '计算机科学与技术',
				            students: 350
				          }, {
				            grade: '22级',
				            major: '计算机科学与技术',
				            students: 330
				          }, {
				            grade: '23级',
				            major: '计算机科学与技术',
				            students: 360
				          }]
			}
		},
		methods:{
			
		}
	}
</script>

<style>
</style>

 StudentList.vue:

<template>
	 <el-table
	    :data="tableData"
	    border
	    style="width: 100%">
	    <el-table-column
	      fixed
	      prop="id"
	      label="学号"
	      width="200">
	    </el-table-column>
	    <el-table-column
	      prop="name"
	      label="姓名"
	      width="120">
	    </el-table-column>
	    <el-table-column
	      prop="major"
	      label="专业"
	      width="170">
	    </el-table-column>
	    <el-table-column
	      prop="class"
	      label="班级"
	      width="150">
	    </el-table-column>
	    <el-table-column
	      prop="address"
	      label="家庭地址"
	      width="530">
	    </el-table-column>
	    <el-table-column
	      prop="zip"
	      label="邮编"
	      width="120">
	    </el-table-column>
	    <el-table-column
	      fixed="right"
	      label="操作"
	      width="100">
	      <template slot-scope="scope">
	        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
	        <el-button type="text" size="small">编辑</el-button>
	      </template>
	    </el-table-column>
	  </el-table>
</template>

<script>
	export default{
		data(){
			return{
				tableData: [{
				          id: "1001",
				          name: '张三',
				          major: '计算机科学与技术',
				          class: '计科2201',
				          address: '陕西省渭南市大荔县666号',
				          zip: 111111
				        }, {
				          id: '1002',
				          name: '王小虎',
				          major: '计算机科学与技术',
				          class: '计科2201',
				          address: '上海市普陀区金沙江路 1517 弄',
				          zip: 200333
				        }, {
				          id: '1003',
				          name: '李四',
				          major: '网络工程',
				          class: '网络2201',
				          address: '陕西省延安市宝塔区888号',
				          zip: 222222
				        }, {
				          id: '1004',
				          name: '王小虎',
				          major: '人工智能',
				          class: '智能2201',
				          address: '陕西省西安市未央区777号',
				          zip: 333333
				        }]
			}
		},
		methods:{
			handleClick(row) {
			        console.log(row);
			      }
		}
	}
</script>

<style>
</style>

四.总结

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

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部