VUE笔记（八）项目实战

一、后台首页

1、首页布局

用于布局的容器组件，方便快速搭建页面的基本结构：

：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列。

：顶栏容器。

：侧边栏容器。

：主要区域容器。

：底栏容器。

2、顶部栏

    
        
            
                
                
                
           
          
            
                首页
                控制面板
                工作台
            
          
       
    
    
         
              
                  
              
              个人中心
                 退出系统
              
      

二、菜单栏

1、静态菜单

2、动态菜单

• 更改request.js文件

需要在请求拦截器中为头信息中添加Authorization,它的值是从localStorage中获取的token的信息

axios.interceptors.request.use(config => {
    config.headers.Authorization=localStorage.getItem('token')
    return config
})

• 在api/modules/users.js文件中编写获取权限菜单的方法

export default{
    getAuthMenus:()=>request.get('/menus/getAuthMenus')
}

• 在Home页面中，在created生命周期函数中调用获取权限菜单的方法

export default {
  data(){
    return{
      menudata:[]
    }
  },
  methods:{
    async getAuthMenus(){
      let result=await this.$api.users.getAuthMenus() 
      console.log(result);
      this.menudata=result.data
    }
  },
  created(){
    this.getAuthMenus()
  }
}

• 在页面中进行渲染

    
    
        
        
            
            {{subitem.title}}
        
                
 

3、路由鉴权

• 在api/modules/users.js文件中编写获取用户信息的api方法

import request from '@/api/request'
​
export default{
    getUserInfo:()=>request.get('/users/getUserInfo')
}

• 在router/index.js中通过导航独享守卫完成路由鉴权

{
        path:'/home',
        component:()=>import('@/views/Home.vue'),
        beforeEnter:async(to,from,next)=>{
          //从localstroage获取token信息
          let token=localStorage.getItem('token')
          if(!token){
            // Message.error('您还没有登录，请先登录')
            Vue.prototype.$message.error('您还没有登录，请先登录')
            router.replace('/login')
          }else{
            let result=await Vue.prototype.$api.users.getUserInfo()
            if(result.code){
                next()
            }
          }
        }
 }

• 在request.js文件中对于401错误进行处理

axios.interceptors.response.use(response => {
    return response.data
}, ({ response }) => {
    if (response) {
        switch (response.status) {
            case 401:
                Message.error('您的token已失效，请重新登录') 
                router.replace('/login')
                break
            case 404:
                break
            case 500:
                break
        }
    }
})

4、菜单的路由跳转

• 在Home.vue组件的el-menu中设置router="true"

• 在el-menu下的el-menu-item中将index的值改为subItem.path

 
         
         {{subitem.title}}
  

• 在el-main中配置二级路由出口

• 在router/index.js中配置动态路由操作

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
Vue.use(VueRouter)
​
const addRoutes=async(data)=>{
  router.addRoute({
    path:'/home',
    component:Home,
    children:data.map(item=>{
      return{
        path:item.path.substring(item.path.lastIndexOf("/")+1),
        component:()=>import(`@/views${item.permission}.vue`)
      }
    })
  })
}
​
const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue')
  }
]
const router = new VueRouter({
  routes
})
router.beforeEach(async(to,from,next)=>{
  console.log('********全局守卫**********');
  if(to.path=="/login"){
    next()
  }else{
    let token=localStorage.getItem('token')
    if(!token){
      Vue.prototype.$message.error('您还没有登录，请先登录')
      router.replace('/login')
    }else{
      let result=await Vue.prototype.$api.users.getUserInfo()
      console.log('result',result);
      if(result.code){
        next()
        if(Vue.prototype.$code!=1){
          addRoutes(result.data.permissionList)
          Vue.prototype.$code=1
        }
      }
    }
  }
})
​
export default router

5、菜单折叠

• 在Home.vue文件中定义数据isCollpase

export default {
  data(){
    return{
      isCollapse:false,
    }
  }
}

• 在区域添加折叠和展开按钮,并根据isCollapse的值控制这两个按钮的显示或隐藏

• 为展开和折叠按钮添加绑定单击事件

     
     
       

methods: {
    toggleCollpase(){
      this.isCollapse=!this.isCollapse;
    }
}

• 在标签中添加collpase属性来控制菜单的折叠或展开

• 在中动态设置菜单栏的宽度，同时删除掉之前style="width: 200px"

• 取消切换动画

三、样式穿透

1、组件之间的样式冲突问题

默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题

导致组件之间样式冲突的根本原因是

• 单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的。

• 每个组件的样式，都会影响整个index.html页面中的DOM元素。

2、scoped的底层实现原理

解决样式冲突问题的办法是在

其实scoped的底层原理是使用了css的属性选择器来完成的。

3、样式穿透

复制elementui案例中的样式，复制后边框出不来，要想解决样式穿透问题

样式穿透只存在于局部样式中，即v