diff --git a/README.md b/README.md index 92d63e1..8767e3e 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ @@ -54,3 +54,7 @@ FEATURE FIX - 修复 搜索时页码错误的问题 - 完成 禁入类别api交互,添加、查询、修改；添加清除小按钮 +FEATURE +- 增加 localStorage存储 src\store\localStorage.js +- 增加 页面显示用户名 +- 修改 首页背景图 \ No newline at end of file diff --git a/src/assets/bg.jpeg b/src/assets/bg.jpeg new file mode 100644 index 0000000..10c39a2 Binary files /dev/null and b/src/assets/bg.jpeg differ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index aae9253..3dd081e 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -8,14 +8,14 @@ -
- 当前用户:{{name}} +
+ 当前用户:{{currentUser}}
- +
@@ -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 { diff --git a/src/main.js b/src/main.js index 8e33793..3431e56 100644 --- a/src/main.js +++ b/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) }) diff --git a/src/store/localStore.js b/src/store/localStore.js new file mode 100644 index 0000000..5e72c39 --- /dev/null +++ b/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: {} +}) diff --git a/src/utils/clear-local-storage.js b/src/utils/clear-local-storage.js new file mode 100644 index 0000000..adf2e5a --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index ab8086b..a008939 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,7 +1,7 @@ @@ -21,16 +21,22 @@ export default { 'name' ]) }, - mounted() { - console.log(this.$store.getters.name); - } + mounted() {} }