奇淫技巧1

编程语言 2023-06-05 06:22:51 阅读次数: 0

一、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项目路由跳转的时候页面滚动到顶部

vue-router 官网解释

在这里插入图片描述

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')
    },

猜你喜欢

转载自blog.csdn.net/l_l_l_l_l_l_l_li/article/details/126390720
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022