vue项目: 布局组件开发-TabView删除&进度条

14_Vue项目/day-4/vue2-shop/package-lock.json

@@ -11,9 +11,11 @@
         "axios": "^1.3.0",
         "core-js": "^3.8.3",
         "element-ui": "^2.4.5",
+        "nprogress": "^0.2.0",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
-        "vuex": "^3.6.2"
+        "vuex": "^3.6.2",
+        "vuex-plugin-persistedstate": "^1.0.6"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -7612,6 +7614,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
@@ -10371,6 +10378,14 @@
         "vue": "^2.0.0"
       }
     },
+    "node_modules/vuex-plugin-persistedstate": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/vuex-plugin-persistedstate/-/vuex-plugin-persistedstate-1.0.6.tgz",
+      "integrity": "sha512-LSWiePK4L4JjFi04pAV0kYqQ3DhNLwdy8OU3+9+Mn+NjQY3ZY1guhZn9k4ESRON7JAmDSEEOR1gOU9MpmqxXWg==",
+      "peerDependencies": {
+        "vuex": "^3.0 || ^4.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
@@ -16998,6 +17013,11 @@
         "path-key": "^2.0.0"
       }
     },
+    "nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
     "nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
@@ -19140,6 +19160,12 @@
       "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
       "requires": {}
     },
+    "vuex-plugin-persistedstate": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmmirror.com/vuex-plugin-persistedstate/-/vuex-plugin-persistedstate-1.0.6.tgz",
+      "integrity": "sha512-LSWiePK4L4JjFi04pAV0kYqQ3DhNLwdy8OU3+9+Mn+NjQY3ZY1guhZn9k4ESRON7JAmDSEEOR1gOU9MpmqxXWg==",
+      "requires": {}
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",

14_Vue项目/day-4/vue2-shop/package.json

@@ -11,9 +11,11 @@
     "axios": "^1.3.0",
     "core-js": "^3.8.3",
     "element-ui": "^2.4.5",
+    "nprogress": "^0.2.0",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
-    "vuex": "^3.6.2"
+    "vuex": "^3.6.2",
+    "vuex-plugin-persistedstate": "^1.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

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

@@ -34,6 +34,7 @@ export default {
           // 当点击退出登录时
           // 1 清除本地存储的数据
           localStorage.clear();
+          sessionStorage.clear();
           // 2 将页面导航到登录上
           this.$router.push({ name: 'login' });
           break;

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

@@ -29,10 +29,10 @@
       </el-menu-item>
     </el-submenu>
     <el-menu-item index="03" route="/profile">
-      <i class="el-icon-tickets"></i> <span>个人信息</span>
+      <i class="el-icon-document"></i> <span>个人信息</span>
     </el-menu-item>
     <el-menu-item index="04" route="/profile-setting">
-      <i class="el-icon-tickets"></i> <span>个人设置</span>
+      <i class="el-icon-edit-outline"></i> <span>个人设置</span>
     </el-menu-item>
   </el-menu>
 </template>

14_Vue项目/day-4/vue2-shop/src/main.js

@@ -5,6 +5,8 @@ import store from './store';
 import './plugins/element.js';
 import './plugins/http';
 
+import './nprogress.css';
+
 // console.log(Vue.$http);
 
 Vue.config.productionTip = false;

14_Vue项目/day-4/vue2-shop/src/nprogress.css

@@ -0,0 +1,74 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+

14_Vue项目/day-4/vue2-shop/src/router/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Layout from '@/layout/index.vue';
+import NProgress from 'nprogress';
+NProgress.configure({ showSpinner: false });
 
 Vue.use(VueRouter);
 
@@ -42,6 +44,7 @@ const router = new VueRouter({
 //  因此这里要拦截所有的路由，校验用户是否登录
 
 router.beforeEach((to, from, next) => {
+  NProgress.start();
   // 无论什么情况下 都要确保next被调用一次
   const token = sessionStorage.getItem('token');
 
@@ -63,4 +66,8 @@ router.beforeEach((to, from, next) => {
   }
 });
 
+router.afterEach(() => {
+  NProgress.done();
+});
+
 export default router;

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

@@ -45,4 +45,5 @@ export default new Vuex.Store({
   modules: {
     system: systemModule,
   },
+  plugins: [],
 });

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

@@ -1,3 +1,5 @@
+import router from '../../router';
+
 export default {
   namespaced: true,
   state: {
@@ -15,7 +17,27 @@ export default {
       }
     },
     deleteTab(state, tabName) {
-      state.tabs = state.tabs.filter((tab) => tab.name !== tabName);
+      // 当前删除的tab是否为 选中的tab
+      const delTabIndex = state.tabs.findIndex((t) => t.name === tabName);
+      const currentTabUrl = state.tabs[delTabIndex].url;
+
+      if (state.activedTabValue === tabName) {
+        // 删除就是选中tab
+
+        // 如果当前 tabs中 只有一个tab
+        //  两种设计方案 ：1· 不可删除；2 可以删除，删除后 添加工作台tab
+        if (state.tabs.length === 1) {
+          state.tabs.push({ label: '工作台', name: '01', url: '/dashboard' });
+        }
+
+        const nextActivedTab =
+          state.tabs[delTabIndex ? delTabIndex - 1 : delTabIndex + 1];
+        state.activedTabValue = nextActivedTab.name;
+
+        currentTabUrl !== nextActivedTab.url && router.push(nextActivedTab.url);
+      }
+
+      state.tabs.splice(delTabIndex, 1);
     },
   },
 };

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

@@ -84,7 +84,11 @@ export default {
         let result = await login(this.userForm);
         // 如果服务器返回的数据中code属性值为 200 表示登录成功
         let { code, msg, data } = result.data;
-        alert(msg);
+        this.$message({
+          showClose: true,
+          message: msg,
+          type: 'success',
+        });
         if (code === 200) {
           // localStorage只能存储字符串类型
           sessionStorage.setItem('token', data.token);