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

面包屑效果（首页>邮件发送）