From c51c7fec5f5be8fcb0d5182a159e4d468506a142 Mon Sep 17 00:00:00 2001 From: Pan Date: Wed, 28 Jun 2017 23:02:22 +0800 Subject: [PATCH] refine --- src/components/Hamburger/index.vue | 36 ++-- src/router/index.js | 16 +- src/store/modules/user.js | 25 --- src/utils/fetch.js | 9 +- src/utils/index.js | 12 -- src/views/404.vue | 331 +++++++++++++++-------------- src/views/layout/Layout.vue | 2 +- src/views/layout/Levelbar.vue | 16 +- src/views/layout/Navbar.vue | 17 +- src/views/layout/Sidebar.vue | 7 +- src/views/layout/SidebarItem.vue | 1 - src/views/login/index.vue | 157 +++++++------- src/views/table/index.vue | 41 ++-- 13 files changed, 319 insertions(+), 351 deletions(-) diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue index 8045ac2..b0d1597 100644 --- a/src/components/Hamburger/index.vue +++ b/src/components/Hamburger/index.vue @@ -1,6 +1,15 @@ @@ -21,16 +30,17 @@ diff --git a/src/router/index.js b/src/router/index.js index 63719e9..ab3edd7 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,8 +1,7 @@ import Vue from 'vue'; import Router from 'vue-router'; const _import = require('./_import_' + process.env.NODE_ENV); -// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow -// so only in production use Lazy Loading +// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow.so only in production use Lazy Loading /* layout */ import Layout from '../views/layout/Layout'; @@ -16,6 +15,7 @@ const dashboard = _import('dashboard/index'); /* error page */ const Err404 = _import('404'); +/* demo page */ const Form = _import('page/form'); const Table = _import('table/index'); @@ -23,10 +23,10 @@ Vue.use(Router); /** * icon : the icon show in the sidebar - * hidden : if hidden:true will not show in the sidebar - * redirect : if redirect:noredirect will not redirct in the levelbar - * noDropdown : if noDropdown:true will not has submenu - * meta : { role: ['admin'] } will control the page role + * hidden : if `hidden:true` will not show in the sidebar + * redirect : if `redirect:noredirect` will not redirct in the levelbar + * noDropdown : if `noDropdown:true` will not has submenu in the sidebar + * meta : `{ role: ['admin'] }` will control the page role **/ export const constantRouterMap = [ { path: '/login', component: Login, hidden: true }, @@ -35,7 +35,7 @@ export const constantRouterMap = [ path: '/', component: Layout, redirect: '/dashboard', - name: '首页', + name: 'Home', hidden: true, children: [{ path: 'dashboard', component: dashboard }] } @@ -58,6 +58,7 @@ export const asyncRouterMap = [ { path: 'index', component: Form, name: 'Form', icon: 'zonghe' } ] }, + { path: '/table', component: Layout, @@ -67,5 +68,6 @@ export const asyncRouterMap = [ noDropdown: true, children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] } }] }, + { path: '*', redirect: '/404', hidden: true } ]; diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 349a635..3459191 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -56,21 +56,6 @@ const user = { }); }, - // 第三方验证登录 - LoginByThirdparty({ commit, state }, code) { - return new Promise((resolve, reject) => { - commit('SET_CODE', code); - loginByThirdparty(state.status, state.email, state.code, state.auth_type).then(response => { - commit('SET_TOKEN', response.data.token); - Cookies.set('Admin-Token', response.data.token); - resolve(); - }).catch(error => { - reject(error); - }); - }); - }, - - // 登出 LogOut({ commit, state }) { return new Promise((resolve, reject) => { @@ -92,16 +77,6 @@ const user = { Cookies.remove('Admin-Token'); resolve(); }); - }, - - // 动态修改权限 - ChangeRole({ commit }, role) { - return new Promise(resolve => { - commit('SET_ROLES', [role]); - commit('SET_TOKEN', role); - Cookies.set('Admin-Token', role); - resolve(); - }) } } }; diff --git a/src/utils/fetch.js b/src/utils/fetch.js index a0829a0..05c5a0e 100644 --- a/src/utils/fetch.js +++ b/src/utils/fetch.js @@ -1,7 +1,7 @@ import axios from 'axios'; import { Message } from 'element-ui'; import store from '../store'; -// import router from '../router'; + // 创建axios实例 const service = axios.create({ @@ -11,9 +11,8 @@ const service = axios.create({ // request拦截器 service.interceptors.request.use(config => { - // Do something before request is sent if (store.getters.token) { - config.headers['X-Token'] = store.getters.token; // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改 + config.headers['X-Token'] = store.getters.token; // 让每个请求携带自定义token 请根据实际情况自行修改 } return config; }, error => { @@ -26,8 +25,7 @@ service.interceptors.request.use(config => { service.interceptors.response.use( response => { /** - * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页 - * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中 + * code为非20000是抛错 可结合自己业务进行修改 */ const res = response.data; if (res.code !== 20000) { @@ -36,6 +34,7 @@ service.interceptors.response.use( type: 'error', duration: 5 * 1000 }); + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; if (res.code === 50008 || res.code === 50012 || res.code === 50014) { MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', { diff --git a/src/utils/index.js b/src/utils/index.js index 3f6b15f..f13c7f3 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -56,15 +56,3 @@ return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分' } } - - export function scrollTo(element, to, duration) { - if (duration <= 0) return; - const difference = to - element.scrollTop; - const perTick = difference / duration * 10; - setTimeout(() => { - console.log(new Date()) - element.scrollTop = element.scrollTop + perTick; - if (element.scrollTop === to) return; - scrollTo(element, to, duration - 10); - }, 10); - } diff --git a/src/views/404.vue b/src/views/404.vue index a494ebe..a3e02b9 100644 --- a/src/views/404.vue +++ b/src/views/404.vue @@ -38,191 +38,192 @@ diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue index f26d0be..1c06e8d 100644 --- a/src/views/layout/Layout.vue +++ b/src/views/layout/Layout.vue @@ -48,7 +48,7 @@ } } } - .main-container{ + .main-container { margin-left: 40px; } } diff --git a/src/views/layout/Levelbar.vue b/src/views/layout/Levelbar.vue index cb40084..c0c6145 100644 --- a/src/views/layout/Levelbar.vue +++ b/src/views/layout/Levelbar.vue @@ -37,13 +37,13 @@ diff --git a/src/views/layout/Navbar.vue b/src/views/layout/Navbar.vue index a1ccb71..2fd82db 100644 --- a/src/views/layout/Navbar.vue +++ b/src/views/layout/Navbar.vue @@ -10,7 +10,7 @@ - 首页 + Home 退出登录 @@ -32,7 +32,6 @@ computed: { ...mapGetters([ 'sidebar', - 'name', 'avatar' ]) }, @@ -42,7 +41,7 @@ }, logout() { this.$store.dispatch('LogOut').then(() => { - location.reload();// 为了重新实例化vue-router对象 避免bug + location.reload(); // 为了重新实例化vue-router对象 避免bug }); } } @@ -65,11 +64,11 @@ position: absolute; right: 150px; } - .screenfull{ - position: absolute; - right: 90px; - top: 16px; - color: red; + .screenfull { + position: absolute; + right: 90px; + top: 16px; + color: red; } .avatar-container { height: 50px; @@ -78,7 +77,7 @@ right: 35px; .avatar-wrapper { cursor: pointer; - margin-top:5px; + margin-top: 5px; position: relative; .user-avatar { width: 40px; diff --git a/src/views/layout/Sidebar.vue b/src/views/layout/Sidebar.vue index 169b168..57ee036 100644 --- a/src/views/layout/Sidebar.vue +++ b/src/views/layout/Sidebar.vue @@ -18,7 +18,8 @@ diff --git a/src/views/layout/SidebarItem.vue b/src/views/layout/SidebarItem.vue index 92800fc..e635f22 100644 --- a/src/views/layout/SidebarItem.vue +++ b/src/views/layout/SidebarItem.vue @@ -24,7 +24,6 @@