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

兜兜零元 发表于 2024-9-3 16:10:09

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

目次

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

一.什么是ElementUI？

ElementUI是一种网站快速成型工具，一套为开辟者，设计师准备的基于Vue2.0的桌面端组件库。
ElementUI官方网站如下：Element - 网站快速成型工具
此中ElementUI提供了很多种组件的原型，以及源码供开辟者们使用。
https://i-blog.csdnimg.cn/direct/367d16f795b343ee892a8b7920cadaf3.png
二.使用ElementUI和Vue-cli搭建前端页面

目标页面如下：
https://i-blog.csdnimg.cn/direct/47cb641fa8264fe1acb1e19fceb0c9d0.png
https://i-blog.csdnimg.cn/direct/72400fb729bc4198929fd74a2144b0cd.png
https://i-blog.csdnimg.cn/direct/c79f9eedf6fa4b37bb0c38e45833c320.png
https://i-blog.csdnimg.cn/direct/9b66d6d331ad46e8946a10f27929f325.png
三.具体步调

1.创建vue-cli项目

https://i-blog.csdnimg.cn/direct/fb08b2054b1c4b4c9504506d32c4b6dc.png
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中查看是否导入乐成。
https://i-blog.csdnimg.cn/direct/953f3a92b2664af99c76d1a4e75e3892.png
导入乐成后在main.js中设置：
https://i-blog.csdnimg.cn/direct/ee25a2cbe7334b88b6218faa91153006.png
3.创建组件

首先我们先来创建前端首页的第一个登岸界面：
留意：1.账号和密码为空时点击登录要提示信息。
https://i-blog.csdnimg.cn/direct/8939a076a222496ab9573b4c7eaa17cb.png
2.密码框要接纳隐蔽式
https://i-blog.csdnimg.cn/direct/1ddc175261c748cd8f1d9299bf9fb488.png
各人也可以添加其他的组件到Login.vue中，使得页面更加新奇耐看。

<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.点击右侧系统按钮会弹出选项，并且点击安全退出就会跳转到登录界面。
https://i-blog.csdnimg.cn/direct/79f1e87c351c4ffaaefaca6e2a7df41d.png
3.点击安全退出会弹出警告消息，让用户确认退出。
https://i-blog.csdnimg.cn/direct/fa8c78b97ec34eec98a655386a2a3f78.png
<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中还需要加上画布。
https://i-blog.csdnimg.cn/direct/113a8814c22e4757a4d914d212058570.png
下面两个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都是非常小的细节部分，我们做步伐员必须要细节一些的。到这里呢，就要和各人说再见了，期待我们的下次再见，对于本篇博客有问题的同砚可以在批评区留言大概私信博主嗷，我们一起进步！！！制作不易，还请各人可以多多支持，一键三连，谢谢各人！！！

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

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

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