From 9768305166cd5a48d3f0f3db77745a562261055d Mon Sep 17 00:00:00 2001 From: Pan Date: Mon, 21 Aug 2017 15:55:46 +0800 Subject: [PATCH] refine main.js --- src/components/MdEditor/index.vue | 2 +- src/directive/waves.js | 81 +++++++++++----------- src/errorLog.js | 14 ++++ src/main.js | 107 +++++------------------------- src/permission.js | 56 ++++++++++++++++ src/views/components/mixin.vue | 4 ++ src/views/example/form.vue | 19 +++--- src/views/example/table/table.vue | 4 ++ src/views/theme/index.vue | 1 + 9 files changed, 146 insertions(+), 142 deletions(-) create mode 100644 src/errorLog.js create mode 100644 src/permission.js diff --git a/src/components/MdEditor/index.vue b/src/components/MdEditor/index.vue index 996262f..44f8acc 100644 --- a/src/components/MdEditor/index.vue +++ b/src/components/MdEditor/index.vue @@ -10,7 +10,7 @@ import SimpleMDE from 'simplemde'; export default { - name: 'Sticky', + name: 'simplemde-md', props: { value: String, id: { diff --git a/src/directive/waves.js b/src/directive/waves.js index 952bfa6..fc65522 100644 --- a/src/directive/waves.js +++ b/src/directive/waves.js @@ -1,47 +1,44 @@ import './waves.css'; -const vueWaves = {}; -vueWaves.install = (Vue, options = {}) => { - Vue.directive('waves', { - bind(el, binding) { - el.addEventListener('click', e => { - const customOpts = Object.assign(options, binding.value); - const opts = Object.assign({ - ele: el, // 波纹作用元素 - type: 'hit', // hit点击位置扩散center中心点扩展 - color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色 - }, customOpts), - target = opts.ele; - if (target) { - target.style.position = 'relative'; - target.style.overflow = 'hidden'; - const rect = target.getBoundingClientRect(); - let ripple = target.querySelector('.waves-ripple'); - if (!ripple) { - ripple = document.createElement('span'); - ripple.className = 'waves-ripple'; - ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; - target.appendChild(ripple); - } else { - ripple.className = 'waves-ripple'; - } - switch (opts.type) { - case 'center': - ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'; - ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'; - break; - default: - ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'; - ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'; - } - ripple.style.backgroundColor = opts.color; - ripple.className = 'waves-ripple z-active'; - return false; +export default{ + bind(el, binding) { + el.addEventListener('click', e => { + const customOpts = Object.assign({}, binding.value); + const opts = Object.assign({ + ele: el, // 波纹作用元素 + type: 'hit', // hit点击位置扩散center中心点扩展 + color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色 + }, customOpts), + target = opts.ele; + if (target) { + target.style.position = 'relative'; + target.style.overflow = 'hidden'; + const rect = target.getBoundingClientRect(); + let ripple = target.querySelector('.waves-ripple'); + if (!ripple) { + ripple = document.createElement('span'); + ripple.className = 'waves-ripple'; + ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'; + target.appendChild(ripple); + } else { + ripple.className = 'waves-ripple'; } - }, false); - } - }) -}; + switch (opts.type) { + case 'center': + ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px'; + ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px'; + break; + default: + ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px'; + ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px'; + } + ripple.style.backgroundColor = opts.color; + ripple.className = 'waves-ripple z-active'; + return false; + } + }, false); + } +} + -export default vueWaves; diff --git a/src/errorLog.js b/src/errorLog.js new file mode 100644 index 0000000..fe673d8 --- /dev/null +++ b/src/errorLog.js @@ -0,0 +1,14 @@ +import Vue from 'vue' +import errLog from '@/store/errLog' + +// 生产环境错误日志 +if (process.env.NODE_ENV === 'production') { + Vue.config.errorHandler = function(err, vm) { + console.log(err, window.location.href); + errLog.pushLog({ + err, + url: window.location.href, + vm + }) + }; +} diff --git a/src/main.js b/src/main.js index 83c6be1..6ae05f2 100644 --- a/src/main.js +++ b/src/main.js @@ -1,102 +1,27 @@ -// The Vue build version to load with the `import` command -// (runtime-only or standalone) has been set in webpack.base.conf with an alias. -import Vue from 'vue'; -import App from './App'; -import router from './router'; -import store from './store'; -import ElementUI from 'element-ui'; -import 'element-ui/lib/theme-default/index.css'; -import 'assets/custom-theme/index.css'; // 换肤版本element-ui css -import NProgress from 'nprogress'; // Progress 进度条 -import 'nprogress/nprogress.css';// Progress 进度条 样式 -import 'normalize.css/normalize.css';// normalize.css 样式格式化 -import 'assets/iconfont/iconfont'; // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki -import * as filters from './filters'; // 全局vue filter -import Multiselect from 'vue-multiselect';// 使用的一个多选框组件，element-ui的select不能满足所有需求 -import 'vue-multiselect/dist/vue-multiselect.min.css';// 多选框组件css -import Sticky from 'components/Sticky'; // 粘性header组件 -import IconSvg from 'components/Icon-svg';// svg 组件 -import vueWaves from './directive/waves';// 水波纹指令 -import errLog from 'store/errLog';// error log组件 -import './mock/index.js'; // 该项目所有请求使用mockjs模拟 -import { getToken } from 'utils/auth'; +import Vue from 'vue' +import App from './App' +import router from './router' +import store from './store' +import 'normalize.css/normalize.css'// normalize.css 样式格式化 +import ElementUI from 'element-ui' +import 'element-ui/lib/theme-default/index.css' +import '@/assets/iconfont/iconfont' // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki +import IconSvg from '@/components/Icon-svg'// svg组件 +import * as filters from '@/filters' // 全局filter +import '@/errorLog'// error log +import '@/permission' // 权限 +import '@/mock/index.js' // 该项目所有请求使用mockjs模拟 // register globally -Vue.component('multiselect', Multiselect); -Vue.component('Sticky', Sticky); Vue.component('icon-svg', IconSvg) -Vue.use(ElementUI); -Vue.use(vueWaves); +Vue.use(ElementUI) // register global utility filters. Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) -}); - -// permissiom judge -function hasPermission(roles, permissionRoles) { - if (roles.indexOf('admin') >= 0) return true; // admin权限 直接通过 - if (!permissionRoles) return true; - return roles.some(role => permissionRoles.indexOf(role) >= 0) -} - -// register global progress. -const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd'];// 不重定向白名单 -router.beforeEach((to, from, next) => { - NProgress.start(); // 开启Progress - if (getToken()) { // 判断是否有token - if (to.path === '/login') { - next({ path: '/' }); - } else { - if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息 - store.dispatch('GetInfo').then(res => { // 拉取user_info - const roles = res.data.role; - store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表 - router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 - next({ ...to }); // hack方法 确保addRoutes已完成 - }) - }).catch(() => { - store.dispatch('FedLogOut').then(() => { - next({ path: '/login' }); - }) - }) - } else { - // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓ - if (hasPermission(store.getters.roles, to.meta.role)) { - next();// - } else { - next({ path: '/401', query: { noGoBack: true } }); - } - // 可删 ↑ - } - } - } else { - if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 - next() - } else { - next('/login'); // 否则全部重定向到登录页 - NProgress.done(); // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！ - } - } -}); - -router.afterEach(() => { - NProgress.done(); // 结束Progress -}); - -Vue.config.productionTip = false; +}) -// 生产环境错误日志 -if (process.env.NODE_ENV === 'production') { - Vue.config.errorHandler = function(err, vm) { - console.log(err, window.location.href); - errLog.pushLog({ - err, - url: window.location.href, - vm - }) - }; -} +Vue.config.productionTip = false new Vue({ el: '#app', diff --git a/src/permission.js b/src/permission.js new file mode 100644 index 0000000..43c1cc5 --- /dev/null +++ b/src/permission.js @@ -0,0 +1,56 @@ +import router from './router' +import store from './store' +import NProgress from 'nprogress' // Progress 进度条 +import 'nprogress/nprogress.css'// Progress 进度条样式 +import { getToken } from '@/utils/auth' // 验权 + +// permissiom judge +function hasPermission(roles, permissionRoles) { + if (roles.indexOf('admin') >= 0) return true // admin权限 直接通过 + if (!permissionRoles) return true + return roles.some(role => permissionRoles.indexOf(role) >= 0) +} + +// register global progress. +const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd']// 不重定向白名单 +router.beforeEach((to, from, next) => { + NProgress.start() // 开启Progress + if (getToken()) { // 判断是否有token + if (to.path === '/login') { + next({ path: '/' }) + } else { + if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息 + store.dispatch('GetInfo').then(res => { // 拉取user_info + const roles = res.data.role + store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表 + router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 + next({ ...to }) // hack方法 确保addRoutes已完成 + }) + }).catch(() => { + store.dispatch('FedLogOut').then(() => { + next({ path: '/login' }) + }) + }) + } else { + // 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓ + if (hasPermission(store.getters.roles, to.meta.role)) { + next()// + } else { + next({ path: '/401', query: { noGoBack: true } }) + } + // 可删 ↑ + } + } + } else { + if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 + next() + } else { + next('/login') // 否则全部重定向到登录页 + NProgress.done() // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps：history模式下无问题，可删除该行！ + } + } +}) + +router.afterEach(() => { + NProgress.done() // 结束Progress +}) diff --git a/src/views/components/mixin.vue b/src/views/components/mixin.vue index 9fb179b..98f18d7 100644 --- a/src/views/components/mixin.vue +++ b/src/views/components/mixin.vue @@ -24,9 +24,13 @@