一、项目下载
1、下载安装vue-element-admin,
Github中星级最高的
2、目录结构说明:
二、项目运行
进入项目目录npm install安装依赖,npm run dev运行项目即可看到vue-element-admin内容
三、二次开发
1、版本选择
想要使用vue-element-admin进行二次开发,由于其内容繁杂较多,不适用,利用vue-admin-template进行二次开发,这里边包含了最基础的配置及内容,简洁适用
2、登录(后端接口)
①在vue.config.js中,修改proxy,target为服务器地址及端口(例:http://10.201.88.41:8012),代码如下
'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = defaultSettings.title || 'vue Admin Template' // page title
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
/**
* You will need to set publicPath if you plan to deploy your site under a sub path,
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then publicPath should be set to "/bar/".
* In most cases please use '/' !!!
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
// [process.env.VUE_APP_BASE_API]: {
// target: `http://127.0.0.1:${port}/mock`,
// changeOrigin: true,
// pathRewrite: {
// ['^' + process.env.VUE_APP_BASE_API]: ''
// }
// }
[process.env.VUE_APP_BASE_API]: {
target: `http://10.201.88.41:8012`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
// after: require('./mock/mock-server.js')
},
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
}
},
chainWebpack(config) {
config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
// set preserveWhitespace
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
config
// https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
)
config
.when(process.env.NODE_ENV !== 'development',
config => {
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
.end()
config
.optimization.splitChunks({
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
})
config.optimization.runtimeChunk('single')
}
)
}
}
②在请求拦截类utils/request.js中修改请求拦截内容,如果需要后台反问需要token做身份标识在request的config中设置config.headers.Authorization,后端返回的响应码和默认不一致在response中进行修改,代码如下
import axios from 'axios'
import { Message } from 'element-ui'
// import store from '@/store'
import { getToken } from './auth'
// import { MessageBox, Message } from 'element-ui'
// import store from '@/store'
// import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
// if (store.getters.token) {
// // let each request carry token
// // ['X-Token'] is a custom headers key
// // please modify it according to the actual situation
// config.headers['X-Token'] = getToken()
// }
console.log('info request token:' + getToken())
if (getToken()) {
config.headers.Authorization = 'Bearer ' + getToken()
} else {
config.headers.Authorization = 'Basic ZGlwczpzd2QtZGlwcw=='
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.msgCode !== '000000') {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// // to re-login
// MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
// confirmButtonText: 'Re-Login',
// cancelButtonText: 'Cancel',
// type: 'warning'
// }).then(() => {
// store.dispatch('user/resetToken').then(() => {
// location.reload()
// })
// })
// }
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err:' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
console.log(error.message)
return Promise.reject(error)
}
)
export default service
③在spi/user.js 修改登录对应后端接口的url,添加参数params
import request from '@/utils/request'
export function login(data) {
return request({
url: '/auth-server/oauth/user/token',
method: 'post',
params: data
})
}
export function getInfo(account) {
return request({
url: '/sysadmin-server/menus/current',
method: 'get',
params: { account }
})
}
export function logout() {
return request({
url: '/user/logout',
method: 'post'
})
}
以上便可正常访问到后端接口数据
3、动态路由(权限划分)
一般的管理系统都会涉及到权限的划分问题,根据用户获取其对应的菜单,在页面中只展现对应的菜单即可,那么此时就涉及到动态路由的问题
路由=基础路由(所有用户共有)+ 动态路由(根据用户从后端获取来的路由)
①基础路由
router/index.js中只需要保留基础路由,其他的需要动态显示的路由全部删除掉,404页面的路由必须放在所有路由的最底端
【注】:路由取消显示#的问题:mode: ‘history’
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
{
path: '/views/example',
component: Layout,
redirect: '/views/example/table',
name: 'Example',
meta: { title: 'Example', icon: 'example' },
children: [
{
path: 'table',
name: 'Table',
component: () => import('@/views/table/index'),
meta: { title: 'Table', icon: 'table' }
},
{
path: 'tree',
name: 'Tree',
component: () => import('@/views/tree/index'),
meta: { title: 'Tree', icon: 'tree' }
}
]
},
{
path: '/views/form',
component: Layout,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/form/index'),
meta: { title: 'Form', icon: 'form' }
}
]
},
{
path: '/views/external-link',
component: Layout,
children: [
{
path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
meta: { title: 'External Link', icon: 'link' }
}
]
},
// 404 page must be placed at the end !!!
{
path: '*',
redirect: '/404',
hidden: true
}
]
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes,
// 去除路由中的#问题
mode: 'history'
})
const router = createRouter()
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
export default router
②动态路由的获取
store/modules/user.js,在登录之后,通过getInfo这个接口,获取到后端传来的菜单,并保存(commit)在vuex中
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken, getAccount, setAccount, removeAccount } from '@/utils/auth'
import { resetRouter } from '@/router'
const state = {
token: getToken(),
name: getAccount(),
avatar: '',
menus: []
}
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
// SET_NAME: (state, name) => {
// state.name = name
// },
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_MENUS: (state, menus) => {
state.menus = menus
},
SET_NAME: (state, name) => {
state.name = name
}
}
const actions = {
// user login
login({ commit }, userInfo) {
const { account, password } = userInfo
return new Promise((resolve, reject) => {
login({ account: account.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data.access_token)
// commit('SET_NAME', account.trim())
commit('SET_NAME', account.trim())
setToken(data.access_token)
setAccount(account.trim())
resolve()
}).catch(error => {
reject(error)
})
})
},
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.name).then(response => {
const { data } = response
if (!data) {
reject('Verification failed, please Login again.')
}
const menus = data
console.log(data)
// 获取到的菜单json如注释内容
// const menus = [{
// path: '/testIndex',
// component: 'Layout',
// redirect: '/testIndex/table',
// name: 'TestIndex',
// meta: { title: '多级菜单测试', icon: 'link' },
// children: [
// {
// path: 'firstMenu',
// name: 'FirstMenu',
// component: '/test/firstMenu',
// meta: { title: '第一个菜单', icon: 'table' }
// },
// {
// path: 'secondMenu',
// name: 'SecondMenu',
// component: '/test/secondMenu',
// meta: { title: '第二个菜单', icon: 'tree' }
// }
// ]
// }]
// const menus = []
// commit('SET_NAME', name)
// commit('SET_AVATAR', avatar)
commit('SET_MENUS', menus)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
// user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
removeToken()
resetRouter()
removeAccount()
resolve()
}).catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
在保存到vuex中后需要设置对外获取途径store/getters.js
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
menus: state => state.user.menus
}
export default getters
③动态生成权限路由(核心)
a、根据环境配置导入组件,在vue中,将菜单路径作为参数,实现路由地址的注入
在 src/router 文件夹下,建立两个文件,各只需添加一行代码, 定义导入方法,此时设置@/,那么在后端传来的路由数据中就需要标明/views这个目前项目中放置组件的目录结构
src/router/_import_development.js
// 开发环境导入组件
module.exports = file => require('@/' + file + '.vue').default // vue-loader at least v13.0.0+
src/router/_import_production.js
// 生产环境导入组件
module.exports = file => () => import('@/' + file + '.vue')
b、动态菜单配置文件permission.js
->获取组件
import Layout from ‘@/layout’
const _import = require(’./router/import’ + process.env.NODE_ENV + ‘.js’) // 获取组件的方法
->在router.beforeEach路由钩子中,过滤路由,并生成路由
// 1.过滤路由:const menus = filterAsyncRouter(store.getters.menus)
// 2.动态添加路由:router.addRoutes(menus)
// 3.将路由数据传递给全局变量,做侧边栏菜单渲染工作:global.antRouter = menus
代码如下:
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
import Layout from '@/layout'
const _import = require('./router/_import_' + process.env.NODE_ENV + '.js') // 获取组件的方法
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = ['/login'] // no redirect whitelist
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} else {
if (store.getters.menus && store.getters.menus.length > 0) {
next()
} else {
try {
// get user info
await store.dispatch('user/getInfo')
if (store.getters.menus.length < 1) {
global.antRouter = []
next()
}
const menus = filterAsyncRouter(store.getters.menus) // 1.过滤路由
router.addRoutes(menus) // 2.动态添加路由
global.antRouter = menus // 3.将路由数据传递给全局变量,做侧边栏菜单渲染工作
next({
...to,
replace: true
}) // hack方法 确保addRoutes已完成 ,set the replace
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})
function filterAsyncRouter(asyncRouterMap) {
const accessedRouters = asyncRouterMap.filter(route => {
if (route.component) {
if (route.component === 'Layout') {
route.component = Layout
} else {
route.component = _import(route.component) // 导入组件
}
}
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children)
}
return true
})
return accessedRouters
}
c、最后一步合并路由侧边栏渲染
return this.$router.options.routes.concat(global.antRouter) // 最后渲染时,基础路由和动态路由合并
layout/components/Sidebar/index.vue
<template>
<div :class="{'has-logo':showLogo}">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
export default {
components: { SidebarItem, Logo },
computed: {
...mapGetters([
'sidebar'
]),
routes() {
// return this.$router.options.routes
return this.$router.options.routes.concat(global.antRouter) // 最后渲染时,基础路由和动态路由合并
},
activeMenu() {
const route = this.$route
const { meta, path } = route
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
showLogo() {
return this.$store.state.settings.sidebarLogo
},
variables() {
return variables
},
isCollapse() {
return !this.sidebar.opened
}
}
}
</script>
此时动态菜单全部设置完成
3A、页面刷新,会出现500,并没有像预期刷新页面获取用户信息正常显示
原因:用户信息保存在token中,每次刷新页面后token会变化,此时将没有用户信息,获取不到数据,所以需要存放在cookie中
utils/auth.js 编写account操作的内容
import Cookies from 'js-cookie'
const TokenKey = 'vue_admin_template_token'
const AccountKey = 'Account'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
export function getAccount() {
return Cookies.get(AccountKey)
}
export function setAccount(account) {
return Cookies.set(AccountKey, account)
}
export function removeAccount() {
return Cookies.remove(AccountKey)
}
在接口返回信息的时候setAccount进用户名即可
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken, getAccount, setAccount, removeAccount } from '@/utils/auth'
import { resetRouter } from '@/router'
const state = {
token: getToken(),
name: getAccount(),
avatar: '',
menus: []
}
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
// SET_NAME: (state, name) => {
// state.name = name
// },
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_MENUS: (state, menus) => {
state.menus = menus
},
SET_NAME: (state, name) => {
state.name = name
}
}
const actions = {
// user login
login({ commit }, userInfo) {
const { account, password } = userInfo
return new Promise((resolve, reject) => {
login({ account: account.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data.access_token)
// commit('SET_NAME', account.trim())
commit('SET_NAME', account.trim())
setToken(data.access_token)
setAccount(account.trim())
resolve()
}).catch(error => {
reject(error)
})
})
},
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.name).then(response => {
const { data } = response
if (!data) {
reject('Verification failed, please Login again.')
}
const menus = data
console.log(data)
// const menus = [{
// path: '/testIndex',
// component: 'Layout',
// redirect: '/testIndex/table',
// name: 'TestIndex',
// meta: { title: '多级菜单测试', icon: 'link' },
// children: [
// {
// path: 'firstMenu',
// name: 'FirstMenu',
// component: '/test/firstMenu',
// meta: { title: '第一个菜单', icon: 'table' }
// },
// {
// path: 'secondMenu',
// name: 'SecondMenu',
// component: '/test/secondMenu',
// meta: { title: '第二个菜单', icon: 'tree' }
// }
// ]
// }]
// const menus = []
// commit('SET_NAME', name)
// commit('SET_AVATAR', avatar)
commit('SET_MENUS', menus)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
// user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_TOKEN', '')
removeToken()
resetRouter()
removeAccount()
resolve()
}).catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}