登录界面添加背景图
通过在登录界面的vue文件中，设置div标签的background-image属性，加载背景图
系统登录
</
根据用户身份动态设置路由
在router文件夹下的index.js中，添加路由表及每个路由对应的用户身份，将其与选择结构结合，根据逐级判断，让用户与路由表对应起来。前端设计部分，利用vue框架的特点{
{}}获取属性值，实现动态路由效果
{
{item.name}}
{
{children.name}}
首页
{
{this.$router.currentRoute.name}}
正在定位..
<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>
AI 代码解读
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++];
}
}
})
面包屑效果（首页>邮件发送）
文章知识点与官方知识档案匹配，可进一步学习相关知识
Vue入
