- 增加 localStorage存储 src\store\localStorage.js

- 增加 页面显示用户名
- 修改 首页背景图

README.md

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2021-11-29 11:14:13
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2021-12-08 15:55:14
+ * @LastEditors: JinxuChen
+ * @LastEditTime: 2021-12-08 16:55:53
  * @FilePath: \GpsCardAdmin\README.md
  * @description:
 -->
@@ -54,3 +54,7 @@ FEATURE
 FIX
 - 修复 搜索时页码错误的问题
 - 完成 禁入类别api交互,添加、查询、修改；添加清除小按钮
+FEATURE
+- 增加 localStorage存储 src\store\localStorage.js
+- 增加 页面显示用户名
+- 修改 首页背景图

src/layout/components/Navbar.vue

@@ -8,14 +8,14 @@
 
         <breadcrumb class="breadcrumb-container" />
         <!-- todo 接口暂没有名称 暂时取消显示  -->
-        <div class="left-menu" v-show="false">
-            <span class="current-user">当前用户:{{name}}</span>
+        <div class="left-menu" v-show="true">
+            <span class="current-user">当前用户:<span class="current-user-name">{{currentUser}}</span></span>
         </div>
         <div class="right-menu">
             <el-dropdown class="avatar-container" trigger="click">
                 <div class="avatar-wrapper">
                     <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar" /> -->
-                    <img :src="avatarImg" />
+                    <img :src="avatarImg" class="user-avatar" />
                     <i class="el-icon-caret-bottom" />
                 </div>
                 <el-dropdown-menu slot="dropdown" class="user-dropdown">
@@ -50,7 +50,7 @@ export default {
     },
     data() {
         return {
-            /* currentUser: this.$store.getters.name, */
+            currentUser: this.$localStore.getters.userName,
             avatarImg: require('../../assets/telpo.png')
         }
     },
@@ -94,12 +94,19 @@ export default {
     }
     .left-menu {
         float: left;
-        margin-left: 150px;
+        margin-left: 20%;
         height: 100%;
         line-height: 50px;
         // 当前用户
         .current-user {
             line-height: 50px;
+            font-size: 14px;
+            color: #97a8be;
+        }
+        .current-user-name {
+            line-height: 50px;
+            font-size: 14px;
+            color: #000;
         }
     }
     .right-menu {

src/main.js

@@ -1,7 +1,7 @@
 /*
  * @Date: 2021-11-30 15:35:16
  * @LastEditors: JinxuChen
- * @LastEditTime: 2021-12-07 10:49:30
+ * @LastEditTime: 2021-12-08 16:16:12
  * @FilePath: \GpsCardAdmin\src\main.js
  * @description:
  */
@@ -18,6 +18,7 @@ import '@/styles/index.scss' // global css
 import App from './App'
 import store from './store'
 import router from './router'
+import localStore from './store/localStore'
 
 import '@/icons' // icon
 import '@/permission' // permission control
@@ -42,10 +43,11 @@ if (process.env.NODE_ENV === 'production') {
 Vue.use(ElementUI)
 
 Vue.config.productionTip = false
-
+Vue.prototype.$localStore = localStore;
 new Vue({
   el: '#app',
   router,
   store,
+  localStore,
   render: h => h(App)
 })

src/store/localStore.js

@@ -0,0 +1,31 @@
+/*
+ * @Date: 2021-12-08 16:13:09
+ * @LastEditors: JinxuChen
+ * @LastEditTime: 2021-12-08 16:24:19
+ * @FilePath: \GpsCardAdmin\src\store\localStore.js
+ * @description: store 使用local Storage
+ */
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+const  prefix = 'gps_card_admin_';
+export default new Vuex.Store({
+    state: {
+        userName:'',
+    },
+    mutations: {
+        userName(state, userName) {
+            state.userName = userName;
+            window.localStorage[prefix + 'userName'] = userName;
+        },
+    },
+    getters: {
+        userName: state => {
+            if (state.userName != '') return state.userName;
+            else return window.localStorage[prefix + 'userName'] == null ? '' : window.localStorage[prefix + 'userName'];
+        },
+    },
+    actions: {},
+    modules: {}
+})

src/utils/clear-local-storage.js

@@ -0,0 +1,20 @@
+/*
+ * @Date: 2021-12-08 16:23:20
+ * @LastEditors: JinxuChen
+ * @LastEditTime: 2021-12-08 16:23:45
+ * @FilePath: \GpsCardAdmin\src\utils\clear-local-storage.js
+ * @description: 增加 清除local Storage的方法
+ */
+const  prefix = 'gps_card_admin_';
+const LocalStorageService = {
+    clearAll(store) {
+        for (let k in store.getters) {
+            this.clear(store, k);
+        }
+    },
+    clear(store, type) {
+        store.commit(type, '');
+        window.localStorage[ prefix + type ] = '';
+    },
+};
+export default LocalStorageService;

src/views/dashboard/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Date: 2021-11-29 11:20:35
  * @LastEditors: JinxuChen
- * @LastEditTime: 2021-12-06 14:26:50
+ * @LastEditTime: 2021-12-08 16:49:11
  * @FilePath: \GpsCardAdmin\src\views\dashboard\index.vue
  * @description:
 -->
@@ -21,16 +21,22 @@ export default {
       'name'
     ])
   },
-  mounted() {
-      console.log(this.$store.getters.name);
-  }
+  mounted() {}
 }
 </script>
 
 <style lang="scss" scoped>
 .dashboard {
   &-container {
-    margin: 30px;
+    padding: 30px;
+    height: 100vh;
+    width: 100%;
+    background-image: url('../../assets/bg.jpeg');
+    background-size: cover;
+    background-repeat:no-repeat;
+    .dashboard-text {
+        text-align: center;
+    }
   }
   &-text {
     font-size: 30px;

src/views/login/index.vue

@@ -112,6 +112,7 @@ export default {
           this.loading = true
           this.$store.dispatch('user/login', this.loginForm).then(res => {
             console.log("res", res.userName);
+            this.$localStore.commit('userName', res.userName);
             _this.$store.dispatch('user/getInfo');
             this.$router.push({ path: this.redirect || '/' })
             this.loading = false