Vue前端框架的基础配置
登录界面添加背景图
通过在登录界面的vue文件中，设置div标签的background-image属性，加载背景图
<style scoped>
.myvue{
width:100%;
height: 750px;
//添加背景图的地址
background-image: url(../assets/oa.jpeg);
background-size: cover;
background-position: center;
//相对布局
position: relative;
}
.loginContainer{
margin-top:200px;
border-radius: 15px;
background-clip: padding-box;
margin: 0px auto;
width:350px;
padding:15px 35px 15px 35px;
background-color: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
position: relative;
}
.loginTitle{
margin: 0px auto 40px auto;
text-align: center;
}
#main{
padding-top:200px
}
.loginRemember{
text-align: left;
margin: 0px 0px 15px 0px;
}
.el-form-item__content{
display:flex;
align-items: center;
}
.code
{
width:80px;
height:30px;
display: inline-block;
font-family:Arial;
font-style:italic;
color:blue;
border:1px solid #dedede;
border-radius:5px;
padding:2px 3px;
letter-spacing:1px;
font-weight:bolder;
cursor:pointer;
text-align:center;
vertical-align:middle;
}
</style><template>
<div class="myvue">
<div id="main">
<el-form ref="loginForm" :model="loginForm" class="loginContainer" :rules="rules">
<h3 class="loginTitle">系统登录</h3>
<el-form-item prop="username">
<el-input type='text' auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名">
</el-input>
</<el-form-item>
</el-form>
</div>
</div>
</template>
根据用户身份动态设置路由
在router文件夹下的index.js中，添加路由表及每个路由对应的用户身份，将其与选择结构结合，根据逐级判断，让用户与路由表对应起来。前端设计部分，利用vue框架的特点{{}}获取属性值，实现动态路由效果
<el-container>
<el-aside width="300px">
<!-- 导航栏 -->
<!--设置导航栏的选项跳转，根据不同的index跳转到不同的界面 -->
<el-menu router >
<el-submenu v-for="(item,index1) in this.$router.options.routes" :key="index1" v-if="!item.hidden" :index="index1">
<!-- <el-submenu v-for="(item,index1) in routes" :key="index1" :index="index1"> -->
<template slot="title">
<i class="el-icon-location" style="color:#1accff;margin-right:5px"></i>
<span>{{item.name}}</span>
</template>
<el-menu-item :index="children.path" v-for="(children,indexj) in item.children">{{children.name}}</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<!-- 在右上方设置面包屑效果，并增加超链接 -->
<el-breadcrumb v-if="this.$router.currentRoute.path!='/home'" separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
<el-breadcrumb-item >{{this.$router.currentRoute.name}}</el-breadcrumb-item>
</el-breadcrumb>
<div class='welcome' v-if="this.$router.currentRoute.path=='/home'">
<div class="wer">
<el-card class="box-card" style="width:400px">
<div slot="header" class="clearfix">
<i class="el-icon-location" style="color:#1accff;margin-right:5px" ></i>
<span id="text">正在定位..</span>
</div>
<div id="weather" ><el-empty :image-size="50"></el-empty></div>
</el-card>
</div>
<div class="news">
<el-card class="box-card" style="width:400px">
<div slot="header" class="clearfix" >
<i class="el-icon-location" style="color:#1accff;margin-right:5px;margin-botton:10px" ></i>
<span class="news-text">时政新闻</span>
</div>
<div id="content" style="text-decoration: none;"><el-empty :image-size="50"></el-empty></div>
</el-card>
</div>
</div>
<router-view class="routerView"></router-view>
</el-main>
</el-container>
</el-container>var routes;
routes = [
{
path: '/',
//设置每个模块的用户身份
meta:{
roles:['admin1','admin2']
},
name: 'Login',
component: Login,
hidden:true
},
{
path: '/home',
// name属性和网页点击的文字相关联，动态地渲染组件
name: '个人中心',
component:Home,
hidden:true,
children:[
// // 设置子路由
{
path: '/userinfo',
name: '个人中心',
component:AdminInfo
},
]
},
{
path: '/home',
// name属性和网页点击的文字相关联，动态地渲染组件
name: '新闻管理',
component: Home,
hidden:true,
children:[
// 设置子路由
{
path: '/NewsList',
name: '时政新闻',
component: superAdmin
},
{
path: '/inform',
name: '通知内容',
component: SysData
},
]
},
{
path: '/home',
name: '常用服务',
component:Home,
meta:{
roles:['admin2','admin1','user']
},
hidden:false,
children:[
{
path: '/mail',
name: '邮件发送',
component:Mail
},
{
path: '/sys/config',
name: '我的通知',
component:SysConfig
},
]
},
{
path: '/home',
name: '常用服务-员工',
component:Home,
meta:{
roles:['admin2','admin1']
},
hidden:false,
children:[
{
path: '/mail',
name: '邮件发送',
component:Mail
},
{
path: '/sign',
name: '签到管理',
component:Sign
},
{
path: '/sys/admin',
name: '重要通知',
component:SysAdmin
}
]
},
{
path: '/home',
// name属性和网页点击的文字相关联，动态地渲染组件
name: '请假管理',
meta:{
roles:['admin2','admin1']
},
component: Home,
hidden:false,
children:[
// 设置子路由
{
path: '/apply/applyUp',
name: '请假申请',
component: ApplyUp
}
]
},
{
path: '/home',
// name属性和网页点击的文字相关联，动态地渲染组件
name: '员工管理',
component: Home,
hidden:false,
meta:{
roles:['admin2']
},
children:[
{
path: '/emp/basic',
name: '基本资料',
component: EmpBasic
}
]
},
{
path: '/home',
// name属性和网页点击的文字相关联，动态地渲染组件
name: '薪资管理',
component: Home,
hidden:false,
meta:{
roles:['admin1','admin2']
},
children:[
// 设置子路由
{
path: '/sal/table',
name: '工资表管理',
component: SalTable
}
]
},
{
path: '/home',
meta:{
roles:['admin1']
},
// name属性和网页点击的文字相关联，动态地渲染组件
name: '统计管理',
component: Home,
hidden:false,
children:[
// 设置子路由
{
path: '/sta/all',
name: '员工信息统计',
component:chart
}
]
}
]
}
]
export const getRole=()=>{
var name=JSON.parse(window.sessionStorage.getItem('username'));
getRequest('/role?name='+name).then(resp=>{
// 获取当前用户的角色
var role=resp.role;
var human=resp.human;
window.sessionStorage.setItem('role',role);
window.sessionStorage.setItem('human',human);
// 根据角色，设置动态路由
if(role==='admin1'){
var roleList=[false,true,false,true,true,true,false,true,false,true,true];
var index=0;
for(var i=3;i<routes.length;i++){
routes[i].hidden=roleList[index++];
}
}
else if((role==='admin2')){
var roleList=[false,true,false,true,false,false,true,true,true,true,true];
var index=0;
for(var i=3;i<routes.length;i++){
routes[i].hidden=roleList[index++];
}
}
else if((role==='user')){
var roleList=[true,false,true,false,true,true,true,true,false,true,false];
var index=0;
for(var i=3;i<routes.length;i++){
routes[i].hidden=roleList[index++];
}
}
})
面包屑效果（首页>邮件发送）
原文地址：https://blog.csdn.net/qq_57417926/article/details/142714079
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！