一、vue
1、vue项目动态设置按钮权限
按钮的权限一开始在store.state.menuList 菜单里,这里的每个页面有哪个按钮权限,获取到之后存在store里
这是store.state.menuList的某一个subMenu的结构
{
"leafMenu":"0","menuNum":"10002","menuIcon":"icon-zhongdianlingyu","systemClassify":"1","menuName":"重点领域分析","menuGrade":"1","submenu":[{
"leafMenu":"0","menuNum":"100020001","menuIcon":"icon-datafull","systemClassify":"1","menuName":"分析数据汇集","menuGrade":"2","submenu":[{
"leafMenu":"1","menuNum":"1000200010001","menuIcon":"","systemClassify":"1","menuName":"查询","menuGrade":"3","submenu":[],"menuUrl":"/analyze/analyzeData/getAnalyzeDataCollect,/analyze/analyzeData/getFoundStatisticalChart,/analyze/analyzeData/getFoundStatisticalChart2,/analyze/analyzeData/getIndustrialAccidentStatisticalChart,/analyze/analyzeData/getIndustrialAccidentStatisticalChart2,/analyze/analyzeData/getOccupationalDiseasesStatisticalChart,/analyze/analyzeData/getOccupationalDiseasesStatisticalChart2,/userDataPermission/getAreaCodeSelectByDataSetPermissions","menuCode":"1000200010001","systemType":"11","parentNum":"100020001","menuIdentify":"query","menuPrompt":"查询","menuSort":1},{
"leafMenu":"1","menuNum":"1000200010002","menuIcon":"","systemClassify":"1","menuName":"excel导入","menuGrade":"3","submenu":[],"menuUrl":"/analyze/analyzeData/uploadAnalyzeData,/analyze/analyzeData/uploadAnalyzeDataByRD,/analyze/analyzeData/uploadAnalyzeDataByJD,/analyze/analyzeData/uploadAnalyzeDataByDY,/analyze/analyzeData/uploadAnalyzeDataAutomatic","menuCode":"1000200010002","systemType":"11","parentNum":"100020001","menuIdentify":"import","menuPrompt":"excel导入","menuSort":1},{
"leafMenu":"1","menuNum":"1000200010005","menuIcon":"","systemClassify":"1","menuName":"自动导入","menuGrade":"3","submenu":[],"menuUrl":"/analyze/analyzeData/uploadAnalyzeDataAutomaticByRD,/analyze/analyzeData/getAnalyzeDataByXzqhAndYear","menuCode":"1000200010005","systemType":"11","parentNum":"100020001","menuIdentify":"import_automatic","menuPrompt":"自动导入","menuSort":1}],"menuUrl":"/index/analyzeData","menuCode":"100020001","systemType":"11","parentNum":"10002","menuIdentify":"fxsjhj","menuPrompt":"分析数据汇集","menuSort":1},{
"leafMenu":"0","menuNum":"100020002","menuIcon":"icon-baofeicesuan","systemClassify":"1","menuName":"重点领域测算","menuGrade":"2","submenu":[{
"leafMenu":"1","menuNum":"1000200020001","menuIcon":"","systemClassify":"1","menuName":"查询","menuGrade":"3","submenu":[],"menuUrl":"/analyze/keyAreaMeasurement/getIndustrialTreatmentAnalyse,/analyze/keyAreaMeasurement/getIndustrialTreatmentAnalyse,/analyze/keyAreaMeasurement/getDimensionClassifySelect,/analyze/keyAreaMeasurement/getInsuranceFundReserveAnalyseInfo,/analyze/keyAreaMeasurement/getItemNameSelect,/analyze/keyAreaMeasurement/getDimensionSubordinateSelect,/analyze/keyAreaMeasurement/getAnalysisReport,/analyze/keyAreaMeasurement/printAnalysisReport,/analyze/keyAreaMeasurement/getDimensionClassifySelect,/analyze/keyAreaMeasurement/getIndustrialAccidentAnalyseInfo,/analyze/keyAreaMeasurement/getIndustrialAccidentAnalyse,/analyze/keyAreaMeasurement/getIndustrialAccidentAnalyseDetail,/analyze/keyAreaMeasurement/getIndustrialAnalyseConlusion,/analyze/keyAreaMeasurement/getInsuranceFundReserveAnalyseDetail,/analyze/keyAreaMeasurement/getIndustrialAccidentAnalyseDetail,/analyze/keyAreaMeasurement/downloadKeyAreaReportFile","menuCode":"1000200020001","systemType":"11","parentNum":"100020002","menuIdentify":"query","menuPrompt":"查询","menuSort":1},{
"leafMenu":"1","menuNum":"1000200020002","menuIcon":"","systemClassify":"1","menuName":"生成分析报告","menuGrade":"3","submenu":[],"menuUrl":"/analyze/keyAreaMeasurement/getAnalysisReport,/analyze/keyAreaMeasurement/printAnalysisReport","menuCode":"1000200020002","systemType":"11","parentNum":"100020002","menuIdentify":"print","menuPrompt":"生成分析报告","menuSort":1}],"menuUrl":"/index/analyseConlusion","menuCode":"100020002","systemType":"11","parentNum":"10002","menuIdentify":"","menuPrompt":"重点领域测算","menuSort":2},{
"leafMenu":"0","menuNum":"100020003","menuIcon":"icon-icon_xinyong_xianxing_jijin-","systemClassify":"1","menuName":"重点领域公示","menuGrade":"2","submenu":[{
"leafMenu":"1","menuNum":"1000200030001","menuIcon":"","systemClassify":"1","menuName":"查询","menuGrade":"3","submenu":[],"menuUrl":"/systemInfoManage/businessParameter/getBusinessParameterListByParameterIdentify,/analyze/publicityKeyArea/getPagingPublicityKeyAreaList,/analyze/keyAreaMeasurement/getIndustrialAccidentAnalyse,/analyze/keyAreaMeasurement/downloadKeyAreaReportFile,/commonInfoManage/downloadFile","menuCode":"1000200030001","systemType":"11","parentNum":"100020003","menuIdentify":"query","menuPrompt":"查询","menuSort":1},{
"leafMenu":"1","menuNum":"1000200030002","menuIcon":"","systemClassify":"1","menuName":"生成公示","menuGrade":"3","submenu":[],"menuUrl":"/analyze/publicityKeyArea/getPublicityKeyAreaTable,/analyze/publicityKeyArea/printPublicityKeyAreaTable","menuCode":"1000200030002","systemType":"11","parentNum":"100020003","menuIdentify":"add","menuPrompt":"生成公示","menuSort":1},{
"leafMenu":"1","menuNum":"1000200030003","menuIcon":"","systemClassify":"1","menuName":"立即公示","menuGrade":"3","submenu":[],"menuUrl":"/analyze/publicityKeyArea/getPublicityKeyArea","menuCode":"1000200030003","systemType":"11","parentNum":"100020003","menuIdentify":"public","menuPrompt":"立即公示","menuSort":1}],"menuUrl":"/index/publicityKeyArea","menuCode":"100020003","systemType":"11","parentNum":"10002","menuIdentify":"z","menuPrompt":"重点领域公示","menuSort":3}],"menuUrl":"","menuCode":"10002","systemType":"11","parentNum":"1","menuIdentify":"","menuPrompt":"重点领域分析","menuSort":2}```
```javascript
// 查找页面权限
function f_prepare(path) {
function lookup(submenu) {
return submenu.some(item => {
if (item.menuUrl === path || `${
item.menuUrl}/` === path) {
store.commit("setManage", item.submenu);
return true;
}
if (item.submenu.length && lookup(item.submenu)) {
return true;
}
return false;
})
}
lookup(store.state.menuList.submenu);
}
store里面设置按钮列表
// 设置控制按钮列表
setManage: (state, manage) => {
manage.sort((a, b) => {
return a.menuSort - b.menuSort
})
state.manage = manage;
},
template按钮列表
最后在页面
2、vue项目路由跳转的时候页面滚动到顶部
const router = new VueRouter({
routes,
mode: "history",
base: "/iiscpzz-cloud-web",
scrollBehavior() {
// 页面跳转始终滚动到顶部
return {
x: 0, y: 0 }
},
})
3、vue-router改为history模式
除此两个地方之外,还需要后端配置
//router.js
const router = new VueRouter({
routes,
mode: "history",
base: "/iiscpzz-cloud-web",
scrollBehavior() {
// 页面跳转始终滚动到顶部
return {
x: 0, y: 0 }
},
})
//vue.config.js
module.exports = {
outputDir: "./iiscpzz-cloud-web",
publicPath: process.env.NODE_ENV === 'production' ? '/iiscpzz-cloud-web' : '/',
devServer: {
proxy: {
'/iiscpzz-cloud-api': {
target: 'http://192.168.1.32:11000', // 接口域名
changeOrigin: true, //是否跨域
},
'/iiscpzz-ip-api': {
target: 'http://192.168.1.32:11030', // 接口域名
changeOrigin: true, //是否跨域
},
},
},
}
如果路由的mode是hash模式的话,pablicPath的值为(./);
如果路由的mode是history模式的话,pablicPath的值为(/iiscpzz-cloud-web)
process.env.NODE_ENV === ‘production’ 意为生产环境
生产环境是指正式提供对外服务的,一般会关掉错误报告,打开错误日志。(就是线上环境,发布到对外环境上,正式提供给客户使用的环境。)
4、vue配置两个proxy
module.exports = {
outputDir: "./iiscpzz-cloud-web",
publicPath: process.env.NODE_ENV === 'production' ? '/iiscpzz-cloud-web' : '/',
devServer: {
proxy: {
'/iiscpzz-cloud-api': {
target: 'http://192.168.1.32:11000', // 接口域名
changeOrigin: true, //是否跨域
},
'/iiscpzz-ip-api': {
target: 'http://192.168.1.32:11030', // 接口域名
changeOrigin: true, //是否跨域
},
},
},
}
使用两个或者多个的时候 就不能给axios设置baseURL;
调用接口的时候这样:
接口地址上加上/iiscpzz-ip-api 或者 /iiscpzz-cloud-api
5、在有的浏览器下个别页面的el-table 没有实现对齐(错位)
加入这行代码
/deep/.el-table th.gutter {
display: table-cell !important;
}
6、火绒剑过滤 路径过滤
1
7、vue打包的时候js文件的优化
vue.config.js的文件里面加:productionSourceMap
8、实现vue在生产环境(production)不在控制台输出console.log
首先执行:
npm install babel-plugin-transform-remove-console --save-dev
然后在babel.config.js文件下这样配置:
const plugins = ["@vue/babel-plugin-transform-vue-jsx"];
if (process.env.NODE_ENV === "production") {
plugins.push("transform-remove-console");
}
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins:plugins
};
9、避免浏览器缓存
方法一:(推荐)
避免每次部署后都要在浏览器清一下缓存才行。(没有测试过 不知道有没有效果)
configureWebpack: {
//js
output: {
filename: 'js/[name].[hash].js',
chunkFilename: 'js/[name].[hash].js'
}
},
css: {
//css
extract: {
filename: `css/[name].[hash].css`,
chunkFilename: `css/chunk.[id].[hash].css`,
}
}
方法二:(不推荐)
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
10、下载保存在本地的文件
1、将文件转换成base64格式的,然后导出
2、使用new Blob
11、点击键盘enter键登录
//在mounted 绑定事件
window.addEventListener("keydown", this.handleKeydown);
//methods
handleKeydown(event) {
if (event.keyCode == "13") {
this.f_loginSubmit();
}
},
//destroyed中解绑事件
window.removeEventListener("keydown", this.handleKeydown, false);
12、使用全局less变量
//首先安装less
npm install less@3.0.4 --save
//然后安装less-loader
npm install less-loader@5.0.0 --save-dev
//再安装style-resources-loader 和 vue-cli-plugin-style-resources-loader
npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev
//vue.config.js
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, './src/assets/css/global.less')]
}
}
}
//global.less中定义
@baseColor:#1989fa;
//组件中使用
div {
background: @baseColor;
}
13、路由跳转的时候打开新的窗口
在这里插入图片描述
f_openNewWeb2() {
let {
href } = this.$router.resolve({
path: '/ps/onlineTrain' })
window.open(href, '_blank')
},