Kettle 使用JS加密解密

本文详细介绍了如何使用JavaScript对人员账号密码进行加密和解密操作,包括使用`org.pentaho.di.core.encryption.Encr`类进行加密解密,并提供了实际代码示例和预览步骤。

最近因为公司业务需要,需要对人员账号的密码进行加密以及解密。从网上找了不少例子,但是都不太清晰,研究成功以后,自己做一个简单地例子。

生成记录

首先我们需要生成记录(实际业务的时候将字段替换成数据流的字段)

 加密

利用JS脚本,对字段内容进行加密操作,明文保留作为对比。

输入脚本:

var encrypted_password = 'not encrypted';

encrypted_password = "Encrypted " + Packages.org.pentaho.di.core.encryption.Encr.encryptPassword(a);

这里的a就是前一个输入字段。

然后获取变量(变量名随意)

如下图:

 我们可以预览看看结果,然后再解密

 解密

接着我们同样使用JS对加密的文本进行解密,输入脚本,获取变量(变量名随意)

var setValue;

 setValue = org.pentaho.di.core.encryption.Encr.decryptPasswordOptionallyEncrypted(encrypted_password);

 预览结果

最终我们预览看看我们的结果

 

 

{ "msg": "操作成功", "code": 0, "data": [ { "path": "D:\\", "name": ".. (上级目录)" }, { "path": "D:\\kettle\\ETL_SYS_DY", "name": "ETL_SYS_DY" }, { "path": "D:\\kettle\\GD_ETL2", "name": "GD_ETL2" }, { "path": "D:\\kettle\\pdi-ce-8.2.0.0-342", "name": "pdi-ce-8.2.0.0-342" }, { "path": "D:\\kettle\\pims_etl", "name": "pims_etl" }, { "path": "D:\\kettle\\pims_etl - 副本", "name": "pims_etl - 副本" }, { "path": "D:\\kettle\\pims_etl_jndi", "name": "pims_etl_jndi" }, { "path": "D:\\kettle\\plasmOutAndSampleOut", "name": "plasmOutAndSampleOut" }, { "path": "D:\\kettle\\PSFK_ETL_SYS_DAILY_INCREMENT", "name": "PSFK_ETL_SYS_DAILY_INCREMENT" }, { "path": "D:\\kettle\\test", "name": "test" }, { "path": "D:\\kettle\\uploadPath", "name": "uploadPath" } ] } <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <th:block th:include="include :: header('新增资源库')"/> <th:block th:include="include :: datetimepicker-css"/> </head> <body class="white-bg"> <div class="wrapper wrapper-content animated fadeInRight ibox-content"> <form class="form-horizontal m" id="form-repository-add"> <div class="form-group"> <label class="col-sm-3 control-label">资源库名称:</label> <div class="col-sm-8"> <input name="repoName" class="form-control" type="text"> </div> </div> <!--<div class="form-group"> <label class="col-sm-3 control-label">当资源库类型是db时候的用户名:</label> <div class="col-sm-8"> <input name="repoUsername" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">当资源库类型是db时候的密码:</label> <div class="col-sm-8"> <input name="repoPassword" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">db类型:</label> <div class="col-sm-8"> <select name="repoType" class="form-control m-b"> <option value="">所有</option> </select> <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 代码生成请选择字典属性</span> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">当资源库类型是db时候的连接类型:</label> <div class="col-sm-8"> <input name="dbAccess" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">当资源库类型是db时候的ip:</label> <div class="col-sm-8"> <input name="dbHost" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">当资源库类型是db时候的端口:</label> <div class="col-sm-8"> <input name="dbPort" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">当资源库类型是db时候的db库名:</label> <div class="col-sm-8"> <input name="dbName" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">当资源库类型是db时候的db用户名:</label> <div class="col-sm-8"> <input name="dbUsername" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">当资源库类型是db时候的db用户密码:</label> <div class="col-sm-8"> <input name="dbPassword" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">软删除:</label> <div class="col-sm-8"> <input name="isDel" class="form-control" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">:</label> <div class="col-sm-8"> <div class="input-group date"> <input name="createdTime" class="form-control" placeholder="yyyy-MM-dd" type="text"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> </div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">:</label> <div class="col-sm-8"> <input name="createdBy" class="form-control" type="text"> </div> </div>--> <div class="form-group"> <label class="col-sm-3 control-label">资源库类型:</label> <div class="col-sm-8"> <!-- <select name="type" class="form-control m-b"> <option value="">所有</option> </select>--> <select class="form-control" name="type" th:with="type=${@dict.getType('repository_type')}" disabled="disabled"> <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option> </select> </div> </div> <!-- <div class="form-group"> <label class="col-sm-3 control-label">基础路径:</label> <div class="col-sm-8"> <input name="baseDir" class="form-control" type="text"> </div> </div>--> <!-- 修改基础路径的表单组 --> <div class="modal fade" id="dirBrowserModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">选择服务器目录</h4> </div> <div class="modal-body"> <div class="list-group" id="dirListContainer"> <!-- 目录列表将通过JS动态加载 --> </div> <div class="current-path mt-2"> 当前路径: <span id="currentPath"></span> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="btnSelectDir">选择当前目录</button> </div> </div> </div> </div> <!-- 修改基础路径字段 --> <div class="form-group"> <label class="col-sm-3 control-label">基础路径:</label> <div class="col-sm-8"> <div class="input-group"> <input id="baseDir" name="baseDir" class="form-control" type="text" readonly> <span class="input-group-btn"> <button class="btn btn-default" type="button" id="btn-browse-server-dir">浏览服务器目录</button> </span> </div> </div> </div> </form> </div> <th:block th:include="include :: footer"/> <th:block th:include="include :: datetimepicker-js"/> <script th:inline="javascript"> var prefix = ctx + "kettle/repository" $("#form-repository-add").validate({ focusCleanup: true }); function submitHandler() { if ($.validate.form()) { $.operate.save(prefix + "/add", $('#form-repository-add').serialize()); } } let currentBrowsingPath = ''; // 打开目录浏览器 $("#btn-browse-server-dir").click(function() { currentBrowsingPath = ''; loadDirectoryList(''); $("#dirBrowserModal").modal("show"); }); // 加载目录列表 function loadDirectoryList(path) { $.ajax({ url: prefix + "/browseDir", type: "get", data: { baseDir: path }, success: function(result) { if (result.code === 0) { renderDirectoryList(result.data); $("#currentPath").text(path || '/'); currentBrowsingPath = path; } else { $.modal.alertError(result.msg); } } }); } // 渲染目录列表 function renderDirectoryList(dirs) { const container = $("#dirListContainer"); container.empty(); dirs.forEach(dir => { const item = $(` <a href="javascript:void(0);" class="list-group-item directory-item" data-path="${dir.path}"> <i class="fa fa-folder"></i> ${dir.name} </a> `); container.append(item); }); // 添加点击事件 $(".directory-item").click(function() { const path = $(this).data("path"); loadDirectoryList(path); }); } // 选择当前目录 $("#btnSelectDir").click(function() { if (currentBrowsingPath) { $("#baseDir").val(currentBrowsingPath); $("#dirBrowserModal").modal("hide"); } else { $.modal.alertWarning("请先选择目录"); } }); // $("input[name='createdTime']").datetimepicker({ // format: "yyyy-mm-dd", // minView: "month", // autoclose: true // }); </script> </body> </html> 查到了目录路径,但是前端选不到,有灰色遮挡层,怎么调整
最新发布
06-20
<think>我们正在解决前端目录选择时出现的灰色遮挡层问题。根据用户描述,当进行目录选择时,出现了一个灰色遮挡层,导致用户无法正常选择目录路径。这个问题通常与模态框(modal)或覆盖层(overlay)有关,可能是由于某个元素覆盖在了目录选择组件之上。可能的原因:1.目录选择组件被一个具有较高z-index的遮罩层覆盖。2.目录选择组件的z-index设置过低,导致被其他元素覆盖。3.目录选择组件在某个隐藏的容器内,或者容器本身有遮挡。解决方案思路:1.检查遮罩层的z-index,并调整目录选择组件的z-index,使其高于遮罩层。2.确保目录选择组件不在被遮挡的容器内(例如,一个设置了overflow:hidden的父容器,或者一个隐藏的父元素)。3.如果目录选择是第三方组件,查看其文档是否有关于遮挡问题的解决方案。根据引用[2]中提到的,我们可以通过CSS调整z-index来改变元素的堆叠顺序,从而解决遮挡问题。具体步骤:步骤1:使用浏览器开发者工具(如Chrome的Inspect)定位到目录选择组件和灰色遮挡层。步骤2:查看遮挡层的样式,特别是其z-index值。步骤3:为目录选择组件设置一个比遮挡层更高的z-index(注意要同时设置position属性为relative、absolute或fixed,否则z-index无效)。示例代码调整:假设灰色遮挡层的z-index为1000,那么我们可以将目录选择组件的z-index设置为1001或更高。例如,如果目录选择组件有一个类名`.directory-picker`,我们可以这样设置:```css.directory-picker{position:relative;/*或其他非static的定位*/z-index:1001;}```步骤4:如果遮挡层是某个模态框的一部分,并且我们无法调整遮挡层的z-index(可能因为它是由第三方库控制的),我们可以尝试在打开目录选择时关闭该模态框,或者调整模态框的显示状态。步骤5:如果目录选择组件被包裹在一个有溢出隐藏的容器中,我们可以调整容器的样式,例如:```css.container{overflow:visible!important;}```注意:使用!important应该谨慎,只在必要时使用。步骤6:如果上述方法无效,可能是由于目录选择组件在某个隐藏的父元素内,我们需要确保在打开目录选择时,其父元素是可见的。另外,根据引用[3]中提到的路由跳转,如果这个问题与页面路由有关(例如在单页应用中),可能需要检查目录选择组件是否在正确的路由下被渲染。由于问题描述有限,我们只能提供一般性的解决方案。如果用户能提供更多的上下文(如使用的框架、库,以及相关的HTML结构),我们可以给出更具体的建议。生成相关问题:1.如何通过浏览器开发者工具定位遮挡层元素?2.在哪些情况下z-index会失效?3.如何避免CSS样式被第三方组件库的样式覆盖?4.目录选择功能在哪些前端框架中容易遇到遮挡问题?</think>### 解决目录选择功能中的灰色遮挡层问题 目录选择功能出现灰色遮挡层通常是由于 **模态层(overlay)的z-index层级冲突** 或 **组件渲染位置不当** 导致。以下是具体解决方案: #### 核心解决方案 1. **调整z-index层级**(最常见原因) 灰色遮挡层通常是背景遮罩层(z-index过高): ```css /* 提升目录选择器的层级 */ .directory-picker { position: relative; z-index: 9999; /* 需高于遮罩层 */ } /* 降低遮罩层层级 */ .overlay-backdrop { z-index: 1000; /* 应低于选择器 */ } ``` 2. **检查模态框容器** 确保目录选择器不在模态框容器内(可能被父级`overflow:hidden`裁剪): ```javascript // 将选择器移到body根部 document.body.appendChild(directoryPicker); ``` 3. **动态显示策略** 目录选择出现时才渲染组件,避免初始隐藏导致的定位问题: ```jsx // React示例 {showPicker && ( <DirectoryPicker style={{ position: 'fixed', top: '50%', left: '50%' }} /> )} ``` 4. **框架特定方案** - **Vue中使用teleport**: ```vue <teleport to="body"> <DirectoryPicker v-if="showPicker" /> </teleport> ``` - **Flutter路由调整**(参考引用[3]): ```dart Navigator.push(context, MaterialPageRoute( builder: (context) => DirectoryPicker(), fullscreenDialog: true // 全屏模式避免遮挡 )); ``` #### 调试技巧 1. 浏览器检查工具: - 按`Ctrl+Shift+C`选中灰色层 - 检查`z-index`和`position`属性 2. 临时诊断: ```css * { outline: 1px solid red !important; } /* 显示所有元素边界 */ ``` #### 预防措施 - 使用CSS变量管理z-index层级: ```css :root { --z-overlay: 1000; --z-modal: 1100; --z-picker: 1200; } .directory-picker { z-index: var(--z-picker); } ``` - 第三方组件库中,检查是否有`container`或`portal`配置项可指定渲染位置 > **重要提示**:若使用第三方文件选择库(如`react-dropzone`),查看文档中是否有`preventDropOnDocument`或`disableClickPropagation`等防遮挡配置[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值