vue项目: 布局组件开发-实现header&menu逻辑

14_Vue项目/day-3/vue2-shop/src/layout/components/AppHeader.vue

@@ -6,24 +6,51 @@
     </div>
     <div class="right">
       <el-avatar
-        icon="el-icon-user-solid"
+        :src="$store.state.userInfo.face"
         size="small"
         :style="{ marginRight: '4px' }"
       ></el-avatar>
-      <el-dropdown>
+      <el-dropdown trigger="click" @command="onSelect">
         <span class="el-dropdown-link">
           超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item>个人信息</el-dropdown-item>
-          <el-dropdown-item>个人设置</el-dropdown-item>
-          <el-dropdown-item>退出登录</el-dropdown-item>
+          <el-dropdown-item command="profile">个人信息</el-dropdown-item>
+          <el-dropdown-item command="setting">个人设置</el-dropdown-item>
+          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
   </div>
 </template>
 
+<script>
+export default {
+  name: 'AppHeader',
+  methods: {
+    onSelect(command) {
+      switch (command) {
+        case 'logout':
+          // 当点击退出登录时
+          // 1 清除本地存储的数据
+          localStorage.clear();
+          // 2 将页面导航到登录上
+          this.$router.push({ name: 'login' });
+          break;
+        case 'profile':
+          this.$router.push('/profile');
+          break;
+        case 'setting':
+          this.$router.push('/profile-setting');
+          break;
+
+        default:
+      }
+    },
+  },
+};
+</script>
+
 <style scoped>
 .app-header {
   color: #fff;

14_Vue项目/day-3/vue2-shop/src/layout/components/AppMenu.vue

@@ -1,31 +1,77 @@
 <template>
   <el-menu
-    default-active="0"
+    :default-active="$store.state.system.activedTabValue"
     background-color="#353743"
     text-color="#fff"
     active-text-color="#53a8ff"
     router
+    @select="onMenuSelect"
   >
-    <el-menu-item index="0" route="/dashboard">
+    <el-menu-item index="01" route="/dashboard">
       <i class="el-icon-monitor"></i>
       <span>工作台</span>
     </el-menu-item>
-    <el-submenu index="1">
+    <el-submenu index="02">
       <template #title>
         <i class="el-icon-setting"></i>
         <span>系统管理</span>
       </template>
 
-      <el-menu-item index="1-1" route="/user">
+      <el-menu-item index="0201" route="/user">
         <i class="el-icon-user"></i>
         <span>用户管理</span>
       </el-menu-item>
-      <el-menu-item index="1-2" route="/role">
-        <i class="el-icon-coordinate"></i> <span>角色管理</span></el-menu-item
-      >
-      <el-menu-item index="1-3" route="/menu">
-        <i class="el-icon-tickets"></i> <span>菜单管理</span></el-menu-item
-      >
+      <el-menu-item index="0202" route="/role">
+        <i class="el-icon-coordinate"></i> <span>角色管理</span>
+      </el-menu-item>
+      <el-menu-item index="0203" route="/menu">
+        <i class="el-icon-tickets"></i> <span>菜单管理</span>
+      </el-menu-item>
     </el-submenu>
+    <el-menu-item index="03" route="/profile">
+      <i class="el-icon-tickets"></i> <span>个人信息</span>
+    </el-menu-item>
+    <el-menu-item index="04" route="/profile-setting">
+      <i class="el-icon-tickets"></i> <span>个人设置</span>
+    </el-menu-item>
   </el-menu>
 </template>
+
+<script>
+export default {
+  name: 'AppMenu',
+  methods: {
+    findMenuByID(id) {
+      const menus = this.$store.state.menus;
+      var m;
+      for (var i = 0, l = menus.length; i < l; i++) {
+        m = menus[i];
+        if (m.id === id) {
+          return m;
+        }
+
+        if (m.children) {
+          for (var j = 0, len = m.children.length; j < len; j++) {
+            if (m.children[j].id === id) {
+              return m.children[j];
+            }
+          }
+        }
+      }
+
+      return null;
+    },
+    onMenuSelect(index) {
+      const selectedMenu = this.findMenuByID(index);
+
+      // console.log(`output->selectedMenu`, selectedMenu);
+      this.$store.commit('system/addTab', {
+        label: selectedMenu.name,
+        name: selectedMenu.id,
+      });
+
+      this.$store.commit('system/setActivedTab', selectedMenu.id);
+    },
+  },
+};
+</script>

14_Vue项目/day-3/vue2-shop/src/store/index.js

@@ -6,9 +6,38 @@ import systemModule from './modules/system';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
+  state: {
+    userInfo: {},
+    menus: [
+      { id: '01', name: '工作台', url: '/dashboard' },
+      {
+        id: '02',
+        name: '系统管理',
+        url: '',
+        icon: '',
+        children: [
+          {
+            id: '0201',
+            name: '用户管理',
+          },
+          {
+            id: '0202',
+            name: '角色管理',
+          },
+          {
+            id: '0203',
+            name: '菜单管理',
+          },
+        ],
+      },
+    ],
+  },
   getters: {},
-  mutations: {},
+  mutations: {
+    setUserInfo(state, user) {
+      state.userInfo = user;
+    },
+  },
   actions: {},
   modules: {
     system: systemModule,

14_Vue项目/day-3/vue2-shop/src/store/modules/system.js

@@ -1,16 +1,16 @@
 export default {
   namespaced: true,
   state: {
-    activedTabValue: '1', // 选中tab的标识
-    tabs: [
-      { label: '用户管理', name: '1' },
-      { label: '角色管理', name: '2' },
-    ], // 所有tab对象 {label: '用户管理',name:'id值'}
+    activedTabValue: '01', // 选中tab的标识
+    tabs: [], // 所有tab对象 {label: '用户管理',name:'id值'}
   },
   mutations: {
     setActivedTab(state, tabName) {
       state.activedTabValue = tabName;
     },
+    addTab(state, tab) {
+      state.tabs.push(tab);
+    },
     deleteTab(state, tabName) {
       state.tabs = state.tabs.filter((tab) => tab.name !== tabName);
     },

14_Vue项目/day-3/vue2-shop/src/views/Login.vue

@@ -89,9 +89,16 @@ export default {
           // localStorage只能存储字符串类型
           localStorage.setItem('token', data.token);
           localStorage.setItem('userInfo', JSON.stringify(data.userInfo));
+          // 将 登录用户信息 存储到Vuex中
+          this.$store.commit('setUserInfo', data.userInfo);
 
           // 将页面导航到主页
-          this.$router.push('/');
+          this.$router.push('/dashboard');
+
+          this.$store.commit('system/addTab', {
+            label: '工作台',
+            name: '01',
+          });
         }
 
         console.log(result);

14_Vue项目/day-3/vue2-shop/vue.config.js

@@ -14,6 +14,10 @@ module.exports = defineConfig({
         target: 'http://localhost:3000',
         changeOrigin: true,
       },
+      '/public': {
+        target: 'http://localhost:3000',
+        changeOrigin: true,
+      },
     },
   },
 });