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++];}}})