1.关闭mock.js
进入目录下的vue.config.js
注释掉这一行
2.使用 EIconPicker 不显示图标
手动 package.json 里面修改vue的版本 同时修改 vue-template-compiler 为相同的版本.后者在devdepen....里面. 修改为2.1.14然后npm install
3.修改左上角logo和系统名
mounted() {
this.title = process.env.VUE_APP_SYSTEM_NAME
}
require( '@/assets/logo.png' )
4有时管理员退出登陆 再次登陆普通用户 会加载上一次的页面 普通用户没有时会报404
找到
去掉划红线的部分 这样重新登陆就不会 跳转了
5.添加tagview
一、从vue-element-admin复制文件:
vue-admin-template\src\layout\components\TagsView 文件夹
vue-admin-template\src\store\modules\tagsView.js
二、修改 vue-admin-template\src\layout\components\AppMain.vue :AppMain.vue文件,新增以下内容
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<!-- <router-view :key="key" />-->
<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>
</transition>
</section>
</template>
export default {
name: 'AppMain',
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
}/*,
key() {
return this.$route.path
}*/
}
}
<style lang="scss" scoped>
.app-main {
/*50 = navbar */
min-height: calc(100vh - 50px);
width: 100%;
position: relative;
overflow: hidden;
}
.fixed-header+.app-main {
/*padding-top: 50px;*/
/* 84 = navbar + tags-view = 50 + 34 */
padding-top: 84px;
}
.hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
}
}
</style>
三、修改 vue-admin-template\src\store\getters.js,增加:
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
四、修改vue-admin-template\src\layout\components\index.js,新增如下行:
export { default as TagsView } from './TagsView'
五、vue-admin-template\src\layout\index.vue
<template>
<div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar class="sidebar-container" />
<div class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
<tags-view /> <!-- 此处增加tag-->
</div>
<app-main />
</div>
</div>
</template>
import { Navbar, Sidebar, AppMain, TagsView } from './components'
components: {
Navbar,
Sidebar,
AppMain,
TagsView
},
六、修改 vue-admin-template\src\store\index.js
import tagsView from './modules/tagsView'
const store = new Vuex.Store({
modules: {
app,
permission,
settings,
tagsView,
user
},
getters
})
七、修改vue-admin-template\src\store\modules\settings.js
const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
const state = {
showSettings: showSettings,
tagsView: tagsView,
fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo
}
八、修改vue-admin-template\src\settings.js 添加
tagsView: true,
九、f5刷新页面时保存所有的路由
//防止刷新后tabview删除
beforeUnload() {
// 监听页面刷新
window.addEventListener("beforeunload", () => {
//这里证明是执行了 f5操作 删除用户的权限信息 可以进行重新缓存操作
//deleteUserPerms()
console.log('我缓存了tagview')
// visitedViews数据结构太复杂无法直接JSON.stringify处理,先转换需要的数据
let tabViews = this.visitedViews.map(item => {
return {
fullPath: item.fullPath,
hash: item.hash,
meta: { ...item.meta },
name: item.name,
params: { ...item.params },
path: item.path,
query: { ...item.query },
title: item.title
};
});
sessionStorage.setItem("tabViews", JSON.stringify(tabViews));
});
// 页面初始化加载判断缓存中是否有数据
let oldViews = JSON.parse(sessionStorage.getItem("tabViews")) || [];
if (oldViews.length > 0) {
this.$store.state.tagsView.visitedViews = oldViews;
}
},
mounted() {
this.initTags()
this.addTags()
this.beforeUnload()
},
十、退出登陆清空所有路由
修改 src\layout\components\Navbar.vue
async logout() {
await this.$store.dispatch('user/logout')
this.$router.push('/login')
//退出登陆后删除全部tagview 避免重新登陆低权限账号显示菜单
await this.$store.dispatch('tagsView/delAllViews')
sessionStorage.removeItem('tabViews')
}
6.打开弹窗时 页面顶部偏移
在index.scss中添加如下代码
paading-right body{padding-right:0px!important} .el-popup-parent--hidden { overflow: initial !important; }
7.页面缓存 当vue文件的name 和路由name相同时 页面刷新会保留当前 操作信息
如果想每次进入页面都显示最新数据 则添加如下代码 或后台返回
meta: {
noCache: true // 如果设置为true,则不会被 <keep-alive> 缓存(默认 false)
}
8.header显示用户名和用户当前机构
修改 src\store\modules\user.js
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: '',
roles: [],
user: {},
perms: [],
settings:[]
}
}
SET_USER: (state, user) => {
state.user = user
}
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
if (!data) {
return reject('Verification failed, please Login again.')
}
console.log(data)
const { name, avatar, roles } = data
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
commit('SET_ROLES', 'ADMIN')
commit('SET_USER', data)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
修改 src\store\getters.js
user: state => state.user.user,
修改src\layout\components\Navbar.vue
<img :src="require( '@/assets/xiaoxin.jpeg' )" class="user-avatar">
<span style="cursor: pointer;">{{user.username}}({{user.deptName}})</span>
<i class="el-icon-caret-bottom" />
9.按钮权限管理
添加下面文件 web\src\utils\directive.js
import Vue from 'vue'
import store from '../store'
/**
* @export 自定义指令 https://juejin.cn/post/6844903824704929799
*/
export function directive() {
Vue.directive('hasPerms', {
//inserted dom渲染后再执行删除节点
inserted(el, binding) {
// 一行三目运算符就可
!store.getters.perms.includes(binding.value) ? el.parentNode.removeChild(el) : {}
}
})
}
修改文件web\src\store\getters.js
perms: state => state.user.perms,
修改文件 web\src\store\modules\user.js
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: '',
roles: [],
user: {},
perms: [],
settings:[]
}
}
SET_PERMS: (state, roles) => {
state.perms = roles
},
commit('SET_PERMS', authorities.map(item=>{
return item.authority;
}))
修改main.js
//执行权限指令
directive()
在需要权限管理的地方使用自定义指令
v-hasPerms="'user:add'"
10 解决密码框输入时会显示历史密码提示问题
在css评级创建密码字体文件
在index.scss中添加代码
@font-face {
font-family: 'password';
src: url(./ttf/PasswordEntry.ttf);
}
.pw input{
font-family: 'password';
}
在input 上加上class="pw" 即可使用
11.在post请求上统一加上loading和返回提示阿斯顿
import { Loading } from 'element-ui';
let loadingCount = 0;
let loading;
const startLoading = () => {
loading = Loading.service({
lock: true,
text: '请求中……',
background: 'hsla(0,0%,100%,.9)'
});
};
const endLoading = () => {
setTimeout(()=>{
loading.close();
},500)
};
export const showLoading = () => {
if (loadingCount === 0) {
startLoading();
}
loadingCount += 1;
};
export const hideLoading = () => {
if (loadingCount <= 0) {
return;
}
loadingCount -= 1;
if (loadingCount === 0) {
endLoading();
}
};
创建文件至 web\src\utils\loading.js
在request.js中添加如下代码
import {hideLoading, showLoading} from "@/utils/loading";
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
if(config.method == 'post'){
showLoading()
}
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['Authorization'] = 'Bearer ' + getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
error => {
console.log(error.config.method )
if(error.config.method == 'post'){
hideLoading()
}
}
response => {
if(response.config.method == 'post'){
hideLoading()
}
}
11 多标签下不新增tab跳转
我在试卷列表页面 点击添加 因为数据过多 所以不想使用弹窗 想直接跳转值 试卷添加页
实际情况是
this.$router.push({ path: '/paperEdit' })
执行这段代码 新增tab并跳转到了另外页面
我想实现的一直在当前页面 添加成功当前页面再返回 最后的解决办法是 先删除当前页面 然后路由跳转 见如下代码
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({ path: '/paperEdit' })
添加成功后 删除当前路由并返回
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.go(-1);
注意:如果你在执行添加前 跳转别的页面 那添加成功后不再返回 列表页 返回你上一个访问的页面 此时 修改为 this.$router.push({ path: '/ 你要跳转的页面' })