Merge pull request #1 from herozhou/master

doge update

Author: bxychy

README.md

@@ -1,7 +1,7 @@
 # vue-framework-wz #
 
 
-[![TeamCity CodeBetter](https://img.shields.io/teamcity/codebetter/bt428.svg)]() [![npm](https://img.shields.io/npm/dw/localeval.svg)]() [![npm](https://img.shields.io/npm/v/npm.svg)]() [![Chrome Web Store](https://img.shields.io/chrome-web-store/stars/nimelepbpejjlbmoobocpfnjhihnpked.svg)]()
+[![TeamCity CodeBetter](https://img.shields.io/teamcity/codebetter/bt428.svg)]() [![npm](https://img.shields.io/npm/dw/localeval.svg)]() [![npm](https://img.shields.io/npm/v/npm.svg)]() [![Chrome Web Store](https://img.shields.io/chrome-web-store/stars/nimelepbpejjlbmoobocpfnjhihnpked.svg)]()[![Sourcegraph for Repo Reference Count](https://img.shields.io/sourcegraph/rrc//github.com/gorilla/mux.svg)]()[![GitHub watchers](https://img.shields.io/github/watchers/badges/shields.svg?style=social&label=Watch)]()
 
 **[立即体验(国内)](http://herozhou.coding.me/vue-framework-wz/#/dashboard)**
 
@@ -18,6 +18,7 @@
 - **自适应布局**（完美适配大中小屏）
 - `登录/注销`
 - `权限验证`
+- **👉多TAB导航**（没有多TAB怎么能称为后台管理界面呢？）
 - `Tinymce 编辑器`
 - `Markdown 编辑器`
 - `动态侧边栏`（支持多级路由）
@@ -30,6 +31,39 @@
 - mock数据
 - 炫酷hover特效
 
+
+## Preview 效果图
+
+#### 自适应布局
+
+![自适应布局](https://github.com/herozhou/JAVA-HTML-/blob/master/src/gifs/index.gif)
+
+#### 多TAB效果
+
+![自适应布局](https://github.com/herozhou/JAVA-HTML-/blob/master/src/gifs/tab.gif)
+
+#### 丰富功能表格
+
+![丰富功能表格](https://github.com/herozhou/JAVA-HTML-/blob/master/src/gifs/table.gif)
+
+#### 炫酷登录界面
+
+![炫酷登录界面](https://github.com/herozhou/JAVA-HTML-/blob/master/src/gifs/login.gif)
+
+#### 炫酷图表
+
+![炫酷图表](https://github.com/herozhou/JAVA-HTML-/blob/master/src/gifs/echart.gif)
+
+
+#### 编辑器
+
+![丰富功能表格](https://github.com/herozhou/JAVA-HTML-/blob/master/src/gifs/editor.gif)
+
+
+
+**[更多demo](http://herozhou.coding.me/vue-framework-wz/#/dashboard)**
+
+
 ## 系列教程
 
 [《一步步带你做vue后台管理框架》第一课：介绍框架](http://www.cnblogs.com/herozhou/p/7434931.html)
@@ -119,31 +153,7 @@
 └── package.json               // package.json
 
 ```
-## Preview 效果图
-
-#### 自适应布局
-
-![自适应布局](https://github.com/herozhou/JAVA-HTML-/blob/master/src/gifs/index.gif)
-
-#### 丰富功能表格
 
-![丰富功能表格](https://github.com/herozhou/JAVA-HTML-/blob/master/src/gifs/table.gif)
-#### 炫酷登录界面
-
-![炫酷登录界面](https://github.com/herozhou/JAVA-HTML-/blob/master/src/gifs/login.gif)
-
-#### 炫酷图表
-
-![炫酷图表](https://github.com/herozhou/JAVA-HTML-/blob/master/src/gifs/echart.gif)
-
-
-#### 编辑器
-
-![丰富功能表格](https://github.com/herozhou/JAVA-HTML-/blob/master/src/gifs/editor.gif)
-
-
-
-**[更多demo](http://herozhou.coding.me/vue-framework-wz/#/dashboard)**
 
 ## About me 关于作者
 

favicon.ico

@@ -8,6 +8,66 @@
       </li>
 
     </ul>
+
+    <ul class="nav navbar-nav d-md-down-none">
+      
+       <li class="nav-item header-item">
+  
+
+          <router-link tag="div" to='/'  style="height:55px;" class="nav-link">
+            <p><Icon type="compose" size='30' color="#2d8cf0"></Icon></p>
+            <p  style="color:white"> 留言管理 </p>
+        </router-link> 
+      </li>
+        <li class="nav-item header-item">
+        
+        <router-link tag="div" to='/home1'  style="height:55px;" class="nav-link">
+            <p><Icon type="stats-bars" size='30' color="#2d8cf0"></Icon></p>
+            <p  style="color:white"> 浏览排行 </p>
+        </router-link> 
+
+
+      </li>
+
+   <li class="nav-item header-item">
+        <!--   -->
+
+        <Dropdown>
+      <router-link tag="div" to='/'  style="height:55px;" class="nav-link">
+            <p><Icon type="android-cloud" size='30' color="#2d8cf0"></Icon></p>
+            <p  style="color:white"> 云服务器 </p>
+        </router-link>
+        <DropdownMenu slot="list">
+            <DropdownItem>Linux</DropdownItem>
+            <DropdownItem>Mac OS X</DropdownItem>
+            <DropdownItem>Windows</DropdownItem>
+            
+            <DropdownItem>Core OS</DropdownItem>
+        </DropdownMenu>
+    </Dropdown>
+
+
+
+      </li>
+
+
+        <li class="nav-item header-item">
+      
+
+         <router-link tag="div" to='/home1'  style="height:55px;" class="nav-link">
+            <p><Icon type="trophy" size='30' color="#2d8cf0"></Icon></p>
+            <p  style="color:white"> 销量排行 </p>
+        </router-link> 
+
+
+      </li>
+
+
+
+     
+    </ul>
+
+
     <ul class="nav navbar-nav ml-auto">
 
       <li class="nav-item d-md-down-none">
@@ -100,10 +160,27 @@ export default {
 }
 </script>
 
-<style type="text/css">
+<style type="text/css" scoped>
   .dropdown-itemp{
     text-align: left;
     font-size: 15px;
     padding: 10px;
   }
+ .header-item .ivu-dropdown-item{
+  padding: 15px;
+}
+  .header-item{
+    width: 130px;
+    /*background-color: #20a8d8;*/
+    /*background-color: white;*/
+
+    height: 55px;
+    
+    
+  }
+  .header-item a{
+        color:white !important;
+
+  }
+
 </style>

src/components/Header.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="app">
+    <AppHeader/>
+    <div class="app-body">
+      <Sidebar/>
+      <main class="main">
+        <breadcrumb :list="list"/>
+        <div class="container-fluid">
+          <router-view></router-view>
+        </div>
+      </main>
+      <AppAside/>
+    </div>
+    <AppFooter/>
+  </div>
+</template>
+
+<script>
+import AppHeader from '../components/Header'
+import Sidebar from '../components/Sidebar'
+import AppAside from '../components/Aside'
+import AppFooter from '../components/Footer'
+import Breadcrumb from '../components/Breadcrumb'
+
+export default {
+  name: 'full',
+  components: {
+    AppHeader,
+    Sidebar,
+    AppAside,
+    AppFooter,
+    Breadcrumb
+  },
+  computed: {
+    name () {
+      return this.$route.name
+    },
+
+    list () {
+      return this.$route.matched
+    }
+  }
+}
+</script>

src/containers/Full2.vue

@@ -1,5 +1,6 @@
 import router from './router'
 import store from './store'
+import vue from 'vue'
 import NProgress from 'nprogress' // Progress 进度条
 import 'nprogress/nprogress.css'// Progress 进度条样式
 
@@ -21,23 +22,28 @@ router.beforeEach((to, from, next) => {
       if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
         store.dispatch('GetInfo').then(res => { // 拉取user_info
           const roles = res.data.role
+
           store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
             next({ ...to }) // hack方法 确保addRoutes已完成
           })
+          
         }).catch(() => {
           store.dispatch('FedLogOut').then(() => {
             next({ path: '/login' })
           })
         })
       } else {
-        // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
+        
+        store.dispatch('getNowRoutes', to);
+
         if (hasPermission(store.getters.roles, to.meta.role)) {
           next()//
+
+          console.log("has userinfo")
         } else {
           next({ path: '/', query: { noGoBack: true }})
         }
-        // 可删 ↑
       }
     }
   } else {

src/login.js

@@ -3,12 +3,9 @@ import App from './App';
 import router from './router';
 import store from './store';
 import './mock/index.js';  // 该项目所有请求使用mockjs模拟
-
 import './login.js' 
 import './ui.js' 
-
 Vue.config.productionTip = false;
-
 var vm=new Vue({
   el: '#app',
   router,

src/main.js

@@ -2,6 +2,8 @@ import Vue from 'vue';
 import Router from 'vue-router';
 const _import = require('./_import_' + process.env.NODE_ENV);
 import Full from '@/containers/Full'
+import Full2 from '@/containers/Full2'
+
 import Buttons from '@/views/components/Buttons'
 
 // Views - Pages
@@ -79,6 +81,21 @@ export const asyncRouterMap = [
 
     ]
   },
+
+   {
+    path: '/home1',
+    redirect: '/home1/introduction',
+    name: '首页2',
+    component: Full2,
+    hidden:false,
+    children: [
+     {path: '/home1/dashboard',name: 'Dashboard2',icon:'speedometer',component: _import('Dashboard2')},
+     {path: '/home1/introduction',name: '介绍2',icon:'thumbsup',component: _import('Introduction')},
+    
+    ]
+  },
+
+
   { path: '*', redirect: '/pages/404', hidden: true }
 
 ];

src/router/index.js

@@ -21,6 +21,7 @@ function hasPermission(roles, route) {
 function filterAsyncRouter(asyncRouterMap, roles) {
   const accessedRouters = asyncRouterMap.filter(route => {
     if (hasPermission(roles, route)) {
+
       if (route.children && route.children.length) {
         route.children = filterAsyncRouter(route.children, roles)
       }
@@ -31,6 +32,21 @@ function filterAsyncRouter(asyncRouterMap, roles) {
   return accessedRouters
 }
 
+
+function getNowRouter(asyncRouterMap, to) {
+  return asyncRouterMap.some(route => {
+      if(to.path.indexOf(route.path) !==-1) {
+          return true;
+      }
+      else if (route.children && route.children.length) { //如果有孩子就遍历孩子
+        return  getNowRouter(route.children, to)
+      }
+  })
+
+}
+
+
+
 const permission = {
   state: {
     routers: constantRouterMap,
@@ -41,15 +57,31 @@ const permission = {
     SET_ROUTERS: (state, routers) => {
       state.addRouters = routers;
       state.routers = constantRouterMap.concat(routers);
-      state.routers.forEach(function(e){
-          if(e.name==="首页"){
-          state.siderbar_routers=e;
+      // state.routers.forEach(function(e){
+      //     if(e.name==="首页"){
+      //     state.siderbar_routers=e;
 
+      //     }
+
+      // })
+
+    },
+     SET_NOW_ROUTERS: (state, to) => {
+       
+          
+          // 递归访问 accessedRouters，找到包含to 的那个路由对象，设置给siderbar_routers
+          console.log(state.addRouters)
+        state.addRouters.forEach(e => {
+          if(e.children&& e.children.length ){
+           if( getNowRouter(e.children,to)===true)
+                  state.siderbar_routers=e;
           }
+      
+        })
+      
 
-      })
+     }
 
-    }
   },
   actions: {
     GenerateRoutes({ commit }, data) {
@@ -66,8 +98,16 @@ const permission = {
         commit('SET_ROUTERS', accessedRouters);
         resolve();
       })
-    }
-  }
+    },
+ 
+  getNowRoutes({ commit }, data) {
+      return new Promise(resolve => {
+        //data => to
+        commit('SET_NOW_ROUTERS', data);
+        resolve();
+      })
+  },
+   },
 };
 
 export default permission;