朱治龙发布的文章 - 朱治龙个人博客

2022-01-24

此内容被密码保护加密文章，请前往内页查看详情

2022年01月24日
2 阅读
0 评论
0 点赞

2022-01-24

此内容被密码保护加密文章，请前往内页查看详情

2022年01月24日
1 阅读
0 评论
0 点赞

2022-01-21

2022年01月21日
124 阅读
0 评论
0 点赞

2022-01-21

2022年01月21日
158 阅读
0 评论
0 点赞

2022-01-21

自动化项目部署系列：①环境准备以前的项目有基于 devops 的方式来实现项目的开发、测试、上线部署，零零散散在带团队的过程中也有过一些尝试，但是一直没时间系统性的实践过。本次新购一台云服务器，准备进行一次实践。服务器在腾讯云上买的4H8G5M的配置，在这一台上部署相关的环境可能会很吃力，不过咱们也就基于学习研究的目的，够用就行。一、解析泛域名到云服务器系统安装完毕，为便于后续对外提供服务，我们先解析一个泛域名到这台服务器上，我注册的域名都在DNSPOD上管理，所以就在DNSPOD上配置了:解析配置好后，*.test.wljy.xyz都将被解析到 110.40.150.131 这个IP.二、初始配置服务器添加普通权限用户此处添加 zhuzl 用户，并为该用户设置登录密码：[root@VM-16-6-centos ~]# useradd zhuzl [root@VM-16-6-centos ~]# passwd zhuzl Changing password for user zhuzl. New password: Retype new password: passwd: all authentication tokens updated successfully.将用户添加到soduers/etc/sudoers文件添加写权限[root@VM-16-6-centos ~]# chmod +w /etc/sudoers编辑 /etc/sudoers[root@VM-16-6-centos ~]# vi /etc/sudoers找到 root ALL=(ALL) ALL 并在其下一行添加如下信息：zhuzl ALL=(ALL) NOPASSWD: ALL调整后的效果截图：取消/etc/sudoers 的写权限[root@VM-16-6-centos ~]# chmod -w /etc/sudoers创建数据目录并授权[root@VM-16-6-centos /]# mkdir /wldata [root@VM-16-6-centos /]# chown -R zhuzl:zhuzl /wldata/ 切换为普通用户[root@VM-16-6-centos /]# su zhuzl使用普通用户执行后续的安装操作，相关操作见后续章节。

2022年01月21日
101 阅读
0 评论
0 点赞

2021-12-29

初入职场注意事项今天一个前不久离职的同事找到我聊聊天，刚加入了一家新公司，很多东西都不懂，同事关系处理的不是很好，之前经常看我的文章，想知道有没有什么技巧，可以更快学到东西，不用依靠同事，快速获得领导的认可。聊着聊着发现还真可以总结几点初入职场，经常犯的小错误，第一就要属爱当伸手党，有的时候爱向人请教，看上去是一个好习惯，但实际上请教的时候也要分请教的技巧，你不能什么不知道的都问，你应该经过思考以后提问。比如说你不会做一个PPT，你不能问对方说这个PPT应该怎么做呀，更好的提问方式是，这个PPT我想这么做，12345你帮我看看对不对，这样对方会比较容易愿意给出你指导，因为你是经过思考过的，而不是在一片空白的情况下，所有的空需要别人帮你填满。这种伸手党的行为是不可取的，职场不是学校，同事和领导没有义务替你回答所有的问题，替你把人生的空填上，而你什么都用疑问式的提问，很容易给别人留下什么都不懂，自己不爱动脑子的印象。第二，“我是来学东西的”，通过降低自己的身价来获取工作机会。比如说经常有人来跟我面试的时候说，我就是来学习的，只要给我这个学习机会，我什么都愿意做。看似这样很诚恳的发言，其实并不能帮他争取到工作机会，因为在我的视角里，我会这么判定这个人，他对自己的价值没有认知。也就是他提供不出与这个工作岗位匹配的价值。我开的不是学校，我开的是公司，我需要有人来干活儿，我愿意付他匹配的工资，只要他能把活干好，而不是找一群免费劳动力，我反而还要教他，浪费我的时间。刚入职场，一定要区分清楚职场跟学校之间的差别，建立自己的价值，用自己的价值去交换，而不是降低自己的身价。愿意给你这样工作机会的环境，也不是什么好环境，只是想占你便宜。最后说说获得领导的认可，我在一家公司的时候，我的一位领导跟我说了一句话，我一直记忆犹新，他说，向上管理，就是“管理好领导的期望”。这句话我默默记住了很久，后来过了两年才领悟这个意思。不是把一件事儿做完了，完成任务了，就交差了。留给领导去检查去吧，他提了意见我再改，很多人都是这样干的，领导就是你的免费改卷机器。后来改稿越来越多，领导累他也累。接收了一项工作任务，首先是要弄清楚，自己的领导在期待什么，他脑袋里对这件事情的蓝图是怎样的。然后需要做好反馈，她在什么点上需要了解情况，在什么点上她希望被你邀请介入，在什么点上觉得他应该听一次汇报，你得判断得出来这个节奏，然后再每一个期待的点上向领导进行反馈，最后交出的答卷再检查一遍是不是符合领导交代的要求。没有这个反馈的节奏，你就会导致你的上级对你失控，他对你一旦产生失控感，信任度就会下降，不安全感就会上升。以上内容来自老同事【文子】的朋友圈分享

2021年12月29日
99 阅读
0 评论
0 点赞

2021-12-29

王小波的计算机水平有多好？转载自：https://www.zhihu.com/question/20964366/answer/95202867作者：姚勇今天逛知乎的时候，偶然看到王小波外甥，原水木年华成员，《QQ 炫舞》创始人——姚勇先生的一篇回答，讲述了他回忆中王小波在编程领域中的造诣，看完对王小波有了新的认识，现分享给大家看下。下面是正文：以下文字都是我本人写的。为了让阅读方便，减少模糊性。我在文中以第三人视角描述。而不用 “我舅舅 “，” 我姥姥 “，” 我大舅舅 “，” 我小舅舅 “之类的称呼。这是一个十几年软件工程师的习惯而已。我舅舅是王小波，我是个禁不住人肉的老百姓，资质平庸。王小波一篇《我是怎样做青年思想工作》的杂文在我青年单身适龄的年代，给我个人做了最大程度的广告，算是他老人家留给我最宝贵的遗产之一。除此之外，还有他那台用了很久的 PC，在他去世前一年送了我。他是汇编高手，自己用汇编写了 DOS 下的汉字输入法。输入法有个功能，可以加 4 声。一般拼音输入法没有这功能，这需要普通话读音正确的使用者，90 年代总共也没几种汉字输入法。看过他用自己输入法打汉字，速度几乎和盲打英文一样。那时候我大学，正在疯狂苦练吉他，并没有弄懂他用了何种技术。虽然我从小学也用 Z80 和 APPLE II 做些机器码编程做游戏，但到了中学为了高考，计算机就荒废了。他人生最后几年，WINDOWS 3.2 开始普及，然后是 WIN95。他开始从 DOS 转向 WIN32 SDK 编程。最终非常任性地熬夜苦干了很长时间，把输入法转为 WIN32 SDK 在 WINDOWS 下正常工作。当时 WINDOWS 已经有不少汉字输入法，尤其到了 WIN95 时代，他这么做也只是出于兴趣而不是在 DOS 时代的必须。就 WIN32 SDK 我们还讨论过一些。那时候 win32 sdk 真的是很难用。主要是互联网还没有（我是 96 年后用上的），资料很少，匈牙利命名法陌生。WIN32 的体系和 DOS 大相径庭，全部都很陌生，而且完全抛弃了 DOS 那套东西。所有 90 年代 DOS 底层程序员向 WIN32 的迁徙都是一部血泪史。他人生最后一年，多媒体开始普及。光驱，声卡，2D 加速卡普及。95-96 年他开始和我合计做多媒体出版。原因现在想起来很悲伤 ------ 他的书很难在大陆出版，他不得不想办法让他的作品能够让更多人看见，而平时维持生计，只能忍着严重的痔疮，每日给各种杂志写杂文稿件。多媒体的兴起，让他感觉也许利用他的技术优势，自行制作电子出版物。配上插图，音乐，用电子书籍方式可以让自己作品为大众所见。他给我看了已经制作了一部分的 DEMO，就和现在用 Micromedia 多媒体制作软件制作的电子多媒体制品很像。电子书内容是黄金时代，有图案的背景，按空格可以翻页。同时有音乐，好像偶尔还会有一点动画的特效（我记不清了）。但当时的 DEMO 完全是他自己用 WIN32 写的 EXE 可执行程序，他那是从 WIN32 SDK 移植输入法时，基本掌握了消息处理，GDI，窗口控制等方法。还有一些底层的 TRICK。我大学后和王小波比较近，那几年每周末都在他母亲家相聚。他母亲 5 个儿女，只有他 1 个人在国内。于是他就经常住在母亲家，怕老人一个人，是个大孝子。母亲家旁边有个筒子楼里 2 间房的小屋，公共厕所和水房，冬天暖气烧得极热。偶尔我会和他住一块，里屋是他的生活起居和写作桌，外屋很小只有张床，他弟弟的孩子和我偶然会睡外屋。印象最深的就是他烧普洱茶的电炉和玻璃茶壶，里面总是有极浓的茶水，下面沉淀着大量茶叶，估计熬夜就靠那个。目睹了他后半截人生（从我记事起到他去世，中间他出过很多年），感慨很多。王小波有个八叔，当时双手打算盘，无比聪明是个天才。年少夭折。王小波父亲因为搞逻辑学，引起毛泽东注意，被毛接见聊了一下逻辑学的学术相关问题。69 心脏病发独自倒在家中过世。王小波去世方式和他父亲一模一样，区别仅在更加年轻。王小波哥哥在受文革影响挖了 10 年煤，后来去美国博士念数理逻辑，解决了一个 100 多年未解的数理逻辑问题。最后的博士毕业论文自己系的教授搞不定，专门找了数学系的教授来看。毕业后他哥哥专心开饭馆挣钱养育 2 个女儿成人。准备财务自由后再著书立传。我的最大感慨是，留得青山在，不怕没柴烧。天才也好，资质普通如我也好，人都只有一个人生。王小波妈妈去年 92 岁，10 月刚去世，白发人送走了自己两个儿子，又过了十几年才走。之前得过癌症，靠自己毅力锻炼，恢复了。王小波去世后一年，王小波弟弟又突然去世。当时孩子都没敢告诉老人。老太太感觉不对，但又无法得知真相，只是和我说她的疑心。当时国内只有我一人，只能瞒着，不停劝慰老人没事。老太太喃喃说，“除死无大事，除死无大事啊” 。除死无大事。人生在世，碰到什么坎，都只会是你人生中一个普通的节点。时间一长，什么都会成为过眼云烟。留份宽心，也许这样导致目标感没有强到能和社会精英逐鹿。但只要有耐心，不怕挫折，假以时日，目标总会实现的。作为一个 42 岁还在以玩游戏看动漫为生活主体的大叔，保持健康和有活力地追求智慧和有趣，做自己热爱的工作，保持善良，做精神自由的人，是我从王小波的人生学到最重要的东西。希望每个喜欢王小波的人，都有自己充实和健康的身体和精神。（完）

2021年12月29日
21 阅读
0 评论
0 点赞

2021-12-19

使用WinSW.exe安装FRP为系统启动服务本机 FRP 所在目录：D:\greenSoft\FRP\frp_0.36.2_windows_amd64日常使用FRP，我们都需要使用命令行的方式启动，特此我准备了个startFRP.bat的启动文件：frpc.exe -c ./frpc.ini该方式可手工启动，但会打开一个命令行的黑窗口在桌面上，在使用电脑的过程中偶尔会由于误操作导致关闭了，根据以往在windows下使用nginx的经验，我们可以使用WinSW.exe这个小工具实现将FRP注册成系统服务即可，操作步骤如下：1、下载 WinSW.exe 文件到FRP所在目录2、在该目录下新建winsw.xml文件，文件内容如下所示：<service> <id>frp</id> <name>frp</name> <description>用frp发布本地电脑网站到外网</description> <executable>frpc</executable> <arguments>-c frpc.ini</arguments> <logmode>reset</logmode> </service>3、在命令行中使用 winsw install 安装为服务。执行该命令后会显示成功提示。4、进入windows 服务管理器，查看是否存在名称为frp的服务。

2021年12月19日
113 阅读
0 评论
0 点赞

2021-12-07

2021年12月07日
131 阅读
0 评论
0 点赞

2021-11-30

简单理解 Typescript 的配置文件 tsconfig.json TS 使用 tsconfig.json 作为其配置文件，他主要包括两块内容：指定待编译的文件定义编译选项一般来说， tsconfig.json 文件所处的路径就是当前 TS 项目的根路径。tsconfig.json 的配置项众多并且复杂。所有的选项可以参考官方文档：https://www.typescriptlang.org/zh/tsconfig 这里我们分析一个简单示例：{ "compilerOptions": { "module": "commonjs", "noImplicitAny": true, "sourceMap": true, "declaration": true }, "files": [ "app.ts", "foo.ts", ] }其中， compilerOptions 用来配置编译选项， files 用来指定待编译文件。这里的待编译文件是指入口文件，任何被入口文件依赖的文件。也可以使用 include 和 exclude 来指定和排除待编译文件：{ "include": [ "src/**/*" ], "exclude": [ "node_modules", "**/*.spec.ts" ] }下面简述 compilerOptions 中的选项配置，这些配置简单来说就是影响整个编译的过程和编译的结果。module - 生成的 Javascript 模块形式：none、commonjs、amd、system、umd、es6、es2015 或 esnextnoImplicitAny - 存在隐式 any 时抛错（默认为 false）sourceMap - 生成 map 文件（默认为 false）declaration - 生成对应的 .d.ts 文件 (默认为 false)

2021年11月30日
287 阅读
0 评论
0 点赞

2021-11-05

win11资源管理器菜单栏+右键菜单改回win10风格一、上方菜单栏1、win + R 输入 regedit 打开注册表2、依次展开（或地址栏复制）HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Shell Extensions3、右击 Shell Extensions 创建项key命名为 Blocked (如果没有)4、打开 Blocked ，右击空白处，新建字符串值。将值/名称命名为：{e2bf9676-5f8f-435c-97eb-11607a5bedf7}5、重启电脑注：如需调回至win 11 explorer，直接删除blocked 文件夹二、右键菜单1、win+r 输入 regedit 打开注册表2、依次展开（或地址栏复制）HKEY_CURRENT_USER\Software\Classes\CLSID3、右键CLSIDkey 然后新建项Key ，重命名为{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}4、右键此key {86ca1aa0-34aa-4e8b-a509-50c905bae2a2}, 新建一个key并重命名为 InprocServer325、打开 InprocServer32 ，右侧窗口双击打开 default 文件，回车保存。(设置空白text数据)6、关闭注册表，重启电脑或者使用如下修改注册表批处理语句：reg add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a2}\InprocServer32" /f /ve taskkill /f /im explorer.exe & start explorer.exe若需还原把 reg add 改成 reg delete 即可

2021年11月05日
99 阅读
0 评论
0 点赞

2021-09-06

如何防止他人恶意调试你的web程序前言看到社区很多都在讨论如何调试,如何高级的调试,以及一些调试的奇技淫巧 ,今天我想和大家聊聊, 怎么禁止调试,禁止他人调试我们的程序为什么会有这篇文章呢,源自一次我寻找盗版电影的遭遇,一次好奇心的驱使下,由于很多这种平台都是只做搬运,不做存储,因为存储盗版电影向他人提供是违法的,特别是那种刚出的新电影! 当时好奇想通过看某站的控制台,想了解一下他们是怎么是通过啥接口,怎么请求,请求来的格式啥样的,抱着这样的好奇心,开始了我的奇妙之旅... 看完本篇文章你将学会我无法断定你能学到什么,但是以下是我希望你能从本篇文章中学到的:1.如何简单的防止你的程序被他人恶意调试2.逆向思维学会如何更好的调试具体实现防止调试的方法,这里我们主要是通过不断 debugger 的方法来疯狂输出断点,让控制台打开后程序就无法正常执行我们都知道 debugger 只有在控制台被打开的时候才会执行,所以后面的所有方法都是围绕着这一特性来进行,废话不多说,我将通过以下几个案例向你们展示道高一尺魔高一丈的道理,先上代码:方法一:(() => { function block() { setInterval(() => { debugger; }, 50); } try { block(); } catch (err) {} })(); 通过上方的代码我们可以看到,在页面中打开控制台后,会有以下结果:需要在这里说明以下几点:程序被 debugger 阻泄了,我们无法像以往一样在 Source Tab 中的对应 js 代码处添加断点调试,无法调试程序的执行逻辑.在程序异常复杂且被混淆后的代码是异常难读的!通常我们会在 source 的左边加上 breakpoint 来让程序每次走到加点的地方停下来,以便让我们查看一些变量的值或是步骤的流程逻辑(如下图所示)我们都知道,第一次打开控制台是看不到 Network tab 中的任何请求的,所以我们想通过 Network tab 来查看网页都做了哪些请求,也是看不到的,当我们打开控制台就会出 debugger 阻挡我们,我们可以通过下面的解决方法来处理,或者是用抓包工具来查看具体的请求大家可以先不看解决方法,想想如果是你,这个时候怎么突破这个屏障呢? 第一次遇到这种情况我也是很懵,不知道咋处理,后面发现问题简直不要太简单,我们可以带着疑问来看: 对于第一个示例,我们如何解决?(绕过它) 答案是: 禁止断点可以看到很简单,在 Chrome 控制台的 Source Tab 页点击 Deactivate breakpoints 按钮或者按下 Ctrl + f8(如下图所示)。但是对于控制台不熟悉的小伙伴,很难会想到这里去.但是,难道这篇文章就这样结束了?那我可顶不住小伙伴们的 "就这?" 其实,上面的解决方法并没有帮我们解决根本问题,我们需要做的是调试,上面虽然把debugger都去掉了,但是我们也无法在通过点击每一行代码左边的行号添加 breakpoint 了,所以根本性的问题,并没有解决,只是去除了那碍眼的疯狂 debugger,我们还是得另辟蹊径方法二:对对应的代码行,通过添加 logpoint 为 false，然后按回车后刷新网页，发现成功跳过无限 debugger,于是我们就可以愉快的自由调试了~对应的还有一种方法即通过 add script ignore list 来添加需要忽略执行代码行或文件可以看到,我们也可以通过删除 script ignore list 里已添加的忽略代码,恢复初始状态但是,你这么聪明,那人家不得想想对策?对于上面的第一个方法将setInterval(() => {debugger;}, 50);写在一行中,你即使通过添加logpoint为 false,也没用,仍然是疯狂 debugger,即使你可能想到,通过左下角的代码格式化,来格式一下setInterval(() => {debugger;}, 50);将它变成多行的,也是没用的,仍然会在刷新后重新弹 debugger(() => { function block() { setInterval(() => {debugger;}, 50); } try { block(); } catch (err) {} })();对于第二个方法,我们对代码进行如下改造(() => { function block() { setInterval(() => { Function("debugger")(); }, 50); } try { block(); } catch (err) {} })();我们可以通过将debugger改写成Function("debugger")();的形式,来应对;Function 构造器生成的 debugger 会在每一次执行时开启一个临时 js 文件,哈哈~对方表示好无奈于是会有以下结果这无限套娃,真够狠的,我们要坚信正义最后总会胜利,不能给想非法调试我们程序的人机会,所以我们要把各种情况都考虑周全,可以说这种方法是最恨的,但是这还不算完~ (好家伙~ 想非法调试我程序,那你就得战胜我)强化以上方法上面的代码由于没有加密混淆,多少可能还是会被别人读一些,那么我们加密混淆看看是啥样的好家伙,你这咋读?eval(function(c,g,a,b,d,e){d=String;if(!"".replace(/^/,String)){for(;a--;)e[a]=b[a]||a;b=[function(f){return e[f]}];d=function(){return"\\w+"};a=1}for(;a--;)b[a]&&(c=c.replace(new RegExp("\\b"+d(a)+"\\b","g"),b[a]));return c}('(()=>{1 0(){2(()=>{3("4")()},5)}6{0()}7(8){}})();',9,9,"block function setInterval Function debugger 50 try catch err".split(" "),0,{}));格式化后的样子我们继续对代码进行改造,让对方尽量的难以识别我们的代码将 Function("debugger").call() 改成 (function(){return false;})["constructor"]("debugger")["call"](); 并且,添加条件,当窗口外部宽高,和内部宽高的差值大于一定的值,我把 body 里的内容全部清空掉,看你还能不能操作我的按钮啊啥的~哈哈哈需要特别说明的是 : 像 toG 的项目或者是一些为了保护自己的版权又或者是一些比较敏感的项目,出于安全的考虑在部署到生产环境后最好是不让别人调试的,当然,前端所做的也就那么一些,需要前后端一起配合,便可以很好的对项目或者数据进行私密的保护最后: 附上这份未混淆的来之不易的的代码(记得混淆后使用哦~) 一定要记得点赞加关注~原创太不容易了.你可以把它当作你的工具函数,在需要不让别人轻易调试的项目中引用 (当然它仍然有很多漏洞,但是我们可以用类似的逻辑方法,变化出很多更复杂的限制,最暴力的甚至可以当控制台打开后就立马通过window.close();来关闭调试窗口),欢迎大家在评论区留下更好玩的方法~共同学习(() => { function block() { if ( window.outerHeight - window.innerHeight > 200 || window.outerWidth - window.innerWidth > 200 ) { document.body.innerHTML = "检测到非法调试,请关闭后刷新重试!"; } setInterval(() => { (function () { return false; } ["constructor"]("debugger") ["call"]()); }, 50); } try { block(); } catch (err) {} })();推荐一个调试页面的小技巧说了那么多的防止被人调试,那么最后也说一个本人觉得眼前一亮的调试样式的方法通过给 style 标签添加 style="display: block" , contenteditable 两个属性实现在页面中便捷的调试样式复制下方代码到你的 html 文件中,玩一下~<!DOCTYPE html> <body> <div>来调试我吧~</div> <style style="display: block" contenteditable> body { background-color: rgb(140, 209, 230); color: white; } div { background-color: green; width: 300px; height: 300px; line-height: 300px; text-align: center; } </style> </body> 最后我所知道的禁止调试的方法就只有如上所述,但是肯定还有很多好玩的,小伙伴们可以在评论区留言,一起共同学习~最后抛出一个问题, 如何监测控制台是否被打开 (我上面提到的通过window内外高宽的差值其实可以通过独立调试窗口的方法绕过),网上找了一些方法,貌似都没用,感兴趣且有头绪,或者已经有方法的小伙伴可以小伙伴可以在评论下方说说自己的想法,{card-describe title="引用自"}作者：荣顶链接：https://juejin.cn/post/7000784414858805256来源：掘金{/card-describe}

2021年09月06日
60 阅读
0 评论
0 点赞

2021-07-14

在vue-cli3使用sass(scss)定义的全局样式及变量为统一风格及便于后续维护，在项目中常用的主色调、圆角、阴影相关的样式定义到一个全局变量文件中，常规的使用需要每个Vue组件中进行import,该操作会比较繁琐，经过了解后发现可以基于webpack的loader参数引入全局变量的方式来实现，相关实现过程如下所示：vue.config.jsmodule.exports = { // ... css: { // 为便于在Vue组件中使用，全局引入variables.scss中定义的变量 loaderOptions: { sass: { prependData: `@import "@/styles/variables.scss";` } } } variables.css// base color $blue:#324157; $light-blue:#3A71A8; $red:#C03639; $pink: #E65D6E; $green: #30B08F; $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; $theme: #004ca1; // ...vue 组件<style lang="scss" scoped> .btn-cursor { cursor:pointer; color: $theme } </style>

2021年07月14日
454 阅读
0 评论
0 点赞

2021-06-30

一个简单的自定义工作流设计器实现先瞅瞅产品提供的丑陋至极的原型效果再看看经过本人精雕细琢之后的惊艳效果Show me the code流程设计弹出层<template> <el-dialog width="760px" class="hkt-dlg-darkblue" :title="`流程设计：${formData.name}`" :visible.sync="isShow" destroy-on-close :close-on-click-modal="false"> <div class="dialog-wrap" v-loading="loading"> <div style="min-height:50vh"> <div class="info-block"> <el-row class="hkt-block-title"> <el-col :span="12"><div><span class="title-name">流程配置</span></div></el-col> <el-col :span="12" class="text-right"> <el-button type="text" @click="formModalChange('New', null)"><i class="el-icon-plus"></i> 添加审核节点</el-button> </el-col> </el-row> <div class="info-content"> <el-steps direction="vertical" :active="nodes.length"> <el-step v-for="(step, stepIndex) in nodes" class="step-item-wrap" :class="'step-item-signmodel-' + step.signModel" :key="step + stepIndex"> <div slot="title"> <div style="line-height:32px;heihgt:38px;"> <el-row> <el-col :span="12"> <span class="step-name" v-text="step.nodeName"></span> </el-col> <el-col :span="12"> <div class="step-item-oprations text-right"> <el-button size="mini" type="text" @click="stepSort(stepIndex, 'up')" v-if="stepIndex > 0"><i class="el-icon-top"></i> 上移</el-button> <el-button size="mini" type="text"@click="stepSort(stepIndex, 'down')" v-if="stepIndex < nodes.length - 1"><i class="el-icon-bottom"></i> 下移</el-button> <el-button size="mini" type="text" @click="formModalChange('Edit', step, stepIndex)"><i class="el-icon-edit"></i> 修改</el-button> <el-button size="mini" type="text" @click="removeStep(step, stepIndex)"><i class="el-icon-close"></i> 删除</el-button> <el-button size="mini" type="text" @click="addPersons(step, stepIndex)"><i class="el-icon-user"></i> 配置审批人</el-button> </div> </el-col> </el-row> </div> </div> <div slot="description"> <div v-if="step.approveNames.length === 0"> <span class="color-gray">暂未配置审批人员</span> </div> <div v-else class="step-item-content-wrap"> <div class="person-item"> <el-tag v-for="(person, personIndex) in step.approveNames" :key="person" disable-transitions @close="removePerson(stepIndex, personIndex)" closable>{{person}}</el-tag> </div> </div> </div> </el-step> </el-steps> <div v-if="nodes.length === 0"> <h3 style="padding-top:40px;font-weight:normal;color:#dedede;font-size: 22px; text-align:center"><p>当前流程暂未配置审核节点信息，</p><p>请单击右上角的“添加审核节点”按钮进行配置</p></h3> </div> </div> </div> </div> </div> <div slot="footer" class="dialog-footer-wrap text-center"> <el-button @click="isShow = false">取消</el-button> <el-button type="primary" :loading="submitting" @click="save">{{submitting ? '保存中': '确定'}}</el-button> </div> <step-form-modal :show.sync="formModalVisible" v-if="formModalVisible" :formData="currentRow" :mode="formMode" @callback="formCallback" /> </el-dialog> </template> <script> import stepFormModal from './stepFormModal.vue' export default { name: 'flowDesignModal', desc: '流程设计器', components: { stepFormModal }, props: { show: { type: Boolean, required: true, default: false }, formData: { // 适用于编辑 type: Object, required: false }, mode: { type: String, required: false } }, data () { return { loading: true, form: { }, nodes: [], formModalVisible: false, currentRow: null, currentStepIndex: null, formMode:'New', // New || Edit submitting: false } }, computed: { isShow: { get () { return this.show }, set (val) { this.$emit('update:show', val) } } }, created() { this.init() }, methods: { init () { if (this.formData) { this.getFlowNodes() // this.form = this.$hktUtils.deepClone(this.formData) } }, stepSort (index, type) { const steps = this.nodes if (type === 'up') { ;[steps[index], steps[index - 1]] = [steps[index - 1], steps[index]] } else { ;[steps[index], steps[index + 1]] = [steps[index + 1], steps[index]] } // 触发页面更新 this.nodes = steps.concat() }, async getFlowNodes () { this.loading = true const res = await this.$request.get(`/v1/manager/flow/node/listByFlowId?flowId=${this.formData.id}`) if (res.success) { this.nodes = res.data } this.loading = false }, // 添加或编辑流程节点 formModalChange (mode, formData, stepIndex) { this.formMode = mode this.currentRow = formData this.currentStepIndex = stepIndex this.formModalVisible = true }, formCallback (item) { // TODO 判断步骤名称是否已存在 if (this.formMode === 'New') { item.flowId = this.formData.id item.approveArray = [] item.approveNames = [] this.nodes.push(item) } else if (this.currentStepIndex >= 0) { this.nodes[this.currentStepIndex] = item this.currentStepIndex = null } }, addPersons (row, stepIndex) { const dialogProps = { multipleFlag: 'Y' } if (row.approveArray && row.approveArray.length > 0) { dialogProps.initRightUsers = row.approveArray.join(',') } window.hktCommon.selectUser(`配置 ${row.nodeName} 节点的审批人`, dialogProps, (res) => { row.approveArray = res.map(item => item.id) row.approveNames = res.map(item => item.name) this.nodes.splice(stepIndex, 1, this.$hktUtils.deepClone(row)) }) }, removePerson(stepIndex, personIndex) { this.nodes[stepIndex].approveArray.splice(personIndex, 1) this.nodes[stepIndex].approveNames.splice(personIndex, 1) }, removeStep(stepItem, stepIndex) { this.$confirm(`本操作不可恢复，确定删除该步骤（${stepItem.nodeName}）?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }).then(() => { this.nodes.splice(stepIndex, 1) }).catch(() => {}) }, // 保存 async save () { const flowNodes = this.$hktUtils.deepClone(this.nodes) const existNodeNames = []// 用于校验名称是否重复 for (let i = 0; i < flowNodes.length; i++) { const flowNode = flowNodes[i] if (flowNode.approveArray.length === 0) { this.$message({ message: `审核步骤（${flowNode.nodeName}）至少需选择一个的审批人`, type: 'warning' }) return } if (existNodeNames.includes(flowNode.nodeName)) { this.$message({ message: `存在相同的审核节点名称：${flowNode.nodeName}`, type: 'warning' }) return } existNodeNames.push(flowNode.nodeName) flowNode.orders = i +1 flowNode.approveIds = flowNode.approveArray.join(',') } this.submitting = true // 执行保存入库相关操作 const res = await this.$request.post(`/v1/manager/flow/node/add`, flowNodes).catch(err => { this.submitting = false }) this.submitting = false if (res && res.success) { this.$emit('callback', flowNodes) this.isShow = false } } } } </script> <style lang="scss" scoped> .form-body-item { background-color:#fff; padding:10px; border-radius: 4px; margin-bottom: 10px; } .form-item-zones { border-bottom: solid 1px #DCDFE6 ; margin-bottom:20px; .block-title { font-weight:bold; display: inline-block; line-height: 36px; font-size:14px; } } .step-item-oprations { display: none; } .step-item-wrap { /deep/ .el-step__main { padding: 0 10px 10px; } } .step-item-wrap:hover { /deep/ .el-step__main { background-color:#F5F7FA; border-radius: 5px; } .step-item-oprations { display: block; } } .step-item-content-wrap { padding: 10px; } .btn-choose { margin-left:10px; vertical-align: middle; } .person-item /deep/ { display: inline-block; .el-tag { vertical-align: middle; position: relative; overflow: initial; margin-bottom:10px; .el-tag__close { padding: 2px; box-sizing: content-box; position:absolute; background-color: #D1E9FF; // display: none; top:-10px; right: -10px; &:hover { background-color: #1890ff; } } &:hover { .el-tag__close { display:block; } } } .el-tag + .el-tag { margin-left: 40px; &:before { content: '或'; position: absolute; left: -26px; color: #666666; } } } // 会签模式步骤的审批人之间是用和 .info-content /deep/ .step-item-signmodel-1 .person-item { .el-tag + .el-tag { &:before { content: '和' } } } .step-name { color:#101010; font-weight: bold; } </style> 步骤编辑弹出层<template> <el-dialog width="460px" class="hkt-dlg-darkblue" :title="(form.id ? '编辑' : '新建') + '步骤'" :visible.sync="isShow" append-to-body destroy-on-close :close-on-click-modal="false"> <div class="dialog-wrap"> <el-form ref="form" :model="form"> <el-form-item label="步骤名称" prop="nodeName" :rules="[{required: true, message: '请填写步骤名称', trigger: 'change'}]"> <el-input v-model="form.nodeName" style="width:250px"></el-input> </el-form-item> <el-form-item label="是否会签模式"> <el-switch v-model="form.signModel" :active-value="1" :inactive-value="2" active-text="是" inactive-text="否"></el-switch> </el-form-item> <el-form-item label="是否可办结"> <el-switch v-model="form.isOver" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"></el-switch> </el-form-item> </el-form> </div> <div slot="footer" class="dialog-footer-wrap text-center"> <el-button @click="isShow = false">取消</el-button> <el-button type="primary" @click="save">确定</el-button> </div> </el-dialog> </template> <script> export default { name: 'stepFormModal', desc: '流程步骤表单', props: { show: { type: Boolean, required: true, default: false }, formData: { // 适用于编辑 type: Object, required: false }, mode: { type: String, required: false } }, data () { return { form: { nodeName: '', signModel: 2, isOver: 0 } } }, computed: { isShow: { get () { return this.show }, set (val) { this.$emit('update:show', val) } } }, created() { this.init() }, methods: { init () { if (this.formData) { this.form = this.$hktUtils.deepClone(this.formData) } }, save () { this.$refs['form'].validate(async (valid) => { if (valid) { this.$emit('callback', this.form) this.isShow = false } }) } } } </script> <style lang="scss" scoped> .form-body-item { background-color:#fff; padding:10px; border-radius: 4px; margin-bottom: 10px; } .form-item-zones { border-bottom: solid 1px #DCDFE6 ; margin-bottom:20px; .block-title { font-weight:bold; display: inline-block; line-height: 36px; font-size:14px; } } .step-item-oprations { display: none; } .step-item-wrap:hover { background-color:#D1E9FF; .step-item-oprations { display: block; } } .step-item-content-wrap { padding: 10px; } .btn-choose { margin-left:10px; vertical-align: middle; } .person-item /deep/ { display: inline-block; .el-tag { vertical-align: middle; position: relative; overflow: initial; .el-tag__close { padding: 2px; box-sizing: content-box; position:absolute; background-color: #D1E9FF; // display: none; top:-10px; right: -10px; &:hover { background-color: #1890ff; } } &:hover { .el-tag__close { display:block; } } } .el-tag + .el-tag { margin-left: 40px; &:before { content: '或'; position: absolute; left: -26px; color: #666666; } } } .step-name { color:#101010; font-weight: bold; } </style> 该组件涉及人员选择相关公共组件的封装，详细见分享一个在管理系统中一些公共组件的调用方式

2021年06月30日
209 阅读
0 评论
0 点赞

2021-06-30

2021年06月30日
70 阅读
0 评论
0 点赞

2021-06-30

记一次根据经纬度计算距离的项目实践近期公司接的公租房项目，在小程序模块中有用到离我最近的房源列表的功能，经过项目实践相关实现过程如下：功能演示PC后台配置小区位置：单击地图描点后打开如下图所示的描点对话框，描点选择后单击确定按钮返回经纬度信息：小程序中获取位置后调用接口显示距离：{lamp/}代码实现：管理后台描点Vue组件核心代码<template> <el-dialog width="95%" class="hkt-dlg-darkblue resource-modal" top="5vh" :title="title" :visible.sync="isShow" destroy-on-close :close-on-click-modal="false"> <div class="map-container" ref="mapContainer"></div> <div slot="footer" class="dialog-footer dialog-footer-wrap text-center"> <el-button @click="isShow = false">取消</el-button> <el-button type="primary" :disabled="!latitude" @click="pickedHandler">{{'确定'}}</el-button> </div> </el-dialog> </template> <script> export default { name: 'PickerQMapPositionModal', props: { show: { type: Boolean, default: false }, title: { type: String, default: '地图描点' }, dialogProps: { type: Object, reuired: true } }, data () { return { latitude: '', longitude: '' } }, computed: { isShow: { get () { return this.show }, set (val) { this.$emit('update:show', val) } } }, mounted () { this.init() }, methods: { init () { this.initMap() }, async initMap () { // if (!window.TMap) { // } await this.$hktUtils.loadJS('https://map.qq.com/api/gljs?v=1.exp&key=VQ6BZ-ZFSW6-H36SN-E7TZL-QZ6U6-O3F24') var center = new TMap.LatLng(28.239377,112.866161) //定义map变量，调用 TMap.Map() 构造函数创建地图 var map = new TMap.Map(this.$refs.mapContainer, { center: center,//设置地图中心点坐标 zoom: 15, //设置地图缩放级别 // pitch: 43.5, //设置俯仰角 // rotation: 45 //设置地图旋转角度 }); //初始化marker图层 var markerLayer = new TMap.MultiMarker({ id: 'marker-layer', map: map }); map.on("click", (evt) => { if(markerLayer.geometries && markerLayer.geometries.length > 0) { markerLayer.remove(markerLayer.geometries[0].id) } markerLayer.add({ position: evt.latLng }); console.log('evt.latLng', evt.latLng, evt) this.latitude = evt.latLng.lat.toFixed(7) this.longitude = evt.latLng.lng.toFixed(7) }) }, pickedHandler () { this.$emit('callback', { latitude: this.latitude, longitude: this.longitude }) this.isShow = false } } } </script> <style lang="scss" scoped> .map-container { width:100%; height:70vh; } </style> Java端计算距离核心代码package com.hkt.jianfa.rental.housing.manager.wx.util; /** * 根据经纬度计算距离的工具类 * * @author 朱治龙(i@zhuzhilong.cn) * @since 2021-06-29 16:22:18 */ public class DistanceUtil { //地球平均半径 private static final double EARTH_RADIUS = 6378137; //把经纬度转为度（°） private static double rad(double d) { return d * Math.PI / 180.0; } /** * 根据两点间经纬度坐标（double值），计算两点间距离，单位为米 * * @param lng1 第1个坐标的经度值 * @param lat1 第1个坐标的纬度值 * @param lng2 第2个坐标的经度值 * @param lat2 第2个坐标的纬度值 * @return */ public static double getDistance(double lng1, double lat1, double lng2, double lat2) { double radLat1 = rad(lat1); double radLat2 = rad(lat2); double a = radLat1 - radLat2; double b = rad(lng1) - rad(lng2); double s = 2 * Math.asin( Math.sqrt( Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2) ) ); s = s * EARTH_RADIUS; s = Math.round(s * 10000) / 10000; return s; } /** * 传入逗号分隔的两个经纬度的值计算巨鹿 * * @param position1 第一个经纬度 * @param position2 第二个经纬度 * @return */ public static double getDistance(String position1, String position2) { if (position1.contains(",") && position2.contains(",")) { String[] point1 = position1.split(","); String[] point2 = position2.split(","); return getDistance(Double.parseDouble(point1[1]), Double.parseDouble(point1[0]), Double.parseDouble(point2[1]), Double.parseDouble(point2[0])); } return 0; } /** * 将距离数值转换为前端显示所需的字符串信息 * * @param distance * @return */ public static String decodeDistance(double distance) { if (distance < 1000) { return "<1km"; } else if (distance / 1000 > 100) { return ">100km"; } else { return new Double(distance / 1000).intValue() + "km"; } } } 业务逻辑类中调用DistanceUtil方法计算距离：小程序中获取位置后，将经纬度信息传给后端计算距离及排序核心代码如下：uni.getLocation({ type: 'gcj02', success: (res) => { this.searchForm.sort = 'distance' this.searchForm.location = res.latitude + ',' + res.longitude this.getProjects() }, fail: (err) => { this.getProjects() } })

2021年06月30日
142 阅读
0 评论
3 点赞

2021-06-02

2021年06月02日
142 阅读
0 评论
0 点赞

2021-05-26

node安装node-sass失败的处理方案安装 node-sass 的时候总是会各种不成功，大部分安装不成功的原因都源自这里，因为 GitHub Releases 里的文件都托管在 s3.amazonaws.com上面，而这个网址在国内总是网络不稳定，所以我们需要通过第三方服务器下载这个文件。方法一：使用淘宝源npm config set sass_binary_site=https://npmmirror.com/mirrors/node-sass/ npm config set phantomjs_cdnurl=https://npmmirror.com/mirrors/phantomjs/ npm config set electron_mirror=https://npmmirror.com/mirrors/electron/ npm config set registry=https://registry.npmmirror.com这样使用 npm install 安装 node-sass、electron 和 phantomjs 时都能自动从淘宝源上下载。方法二：安装cnpm >>> 也是淘宝源的做法npm install -g cnpm cnpm install这样也可以成功安装node-sass方法三：使用VPNnpm config set proxy (http://127.0.0.1:1080)此处是VPN的代理地址 npm i node-sass # 下载完成后删除 http 代理 npm config delete proxy

2021年05月26日
129 阅读
0 评论
0 点赞

我的日常开发工具分享今天跟大家分享下我日常工作中常用的一些工具，或许可以帮到你提升日常的协作效率1.写作篇 ✏️1.1 EdiaryEdiary是我坚持使用最久的一款日常工作记录及知识沉淀的工具，作者也是一个很有情怀的人，从1999年发布第一个版本以来，一直维护到现在，官方链接1.2 语雀语雀是一个蚂蚁金服孵化出来的专业的云端知识库，类似wiki，目前已经覆盖了10 万阿里员工的使用，来进行文档编写及知识沉淀官方链接语雀我常用的两个方面思维导图：一个是语雀自带的思维导图，个人觉得UI体验很强（外表协会）日记编排：用语雀来保持记录每天在前端开发中遇到的问题及心得体会，方便复盘和回归，最重要的是排版体验高，支持编排，当你回顾你写的文章的时候，阅读体验高，像是在翻书一样1.3 ProcessOnProcessOn是一个在线协作绘图平台,为用户提供最强大、易用的作图工具。支持在线创作流程图、思维导图、组织结构图、网络拓扑图、BPMN、UML图、UI界面原型设计等我主要用ProcessOn来绘制交互图及流程图，支持在线实时编辑，不足的就是如果非付费用户则会限制绘制图的数量，下面是操作页面1.4 CarbonCarbon 用来创建美化版的代码片段，可筛选多种主题切换，然后生成你想要效果的代码片段图官方链接1.5 Mdnicemdnicde全名为Markdown Nice，支持给markdown添加“主题元素”，有点像换肤的感觉，支持多种主观，让你的文章仿佛披上了嫁衣，最重要的是支持微信公众号、知乎、还有掘金！官方链接1.6 TyporaTypora是一款轻便简洁的Markdown编辑器，支持即时渲染技术，这也是与其他Markdown编辑器最显著的区别，将写作与预览窗口相结合，为用户呈现所见即所得的编辑模式，支持Markdown的各种基础语法，支持快捷键操作。官方链接1.7 封面模版很多童鞋很好奇，我每次文章都会附上一张主题图，是不是自己P的，虽然我会用PS做些简单的P图，但是设计还是蛮琐碎和耗时的活，时间应该用在更宝贵的地方，这里介绍的就是我使用的模版在线编辑工具 - 凡科快图官方链接或者 canva 官方链接1.8 Shieldsshields.io 主要是用来可以生成在Markdown 文档中的徽章，我们经常在github的项目上看到这些徽章，来表述比如单元测试覆盖率、打包的大小、版本信息、认证信息等官方链接1.9 Gif截图有时候图片无法去表达我们想要阐述的内容，这个时候动态图就起了很重要的作用，可以更直观的描述整个过程，我个人常用的工具为ScreenToGif官方链接 ,是一款小巧、免费、开源且功能强大的工具，1.10 网页OR屏幕截屏文章素材需要网页截图？很长时间我要给当前网页截图，一般我们常用的桌面版IM工具(如QQ、微信、钉钉)都能使用快捷键很方便的实现截屏功能，但是面对滚动截图、截取后二次编辑等功能时，这些工具就有些捉襟见肘了，在此个人推荐使用FastStone Capture官方链接。2.效率篇 ⏰在日常开发中，效率工具的使用，往往可以给我减少很多不必要时间的浪费，通过工具赋能，帮助我们提高生产效能2.1 Iconfont 图标库Iconfont 是阿里打造的图片管理平台，涵盖海量图标库，可讲选择的图标导出字体文件。官方链接2.3 Postwoman 接口调试利器它不仅免费开源、轻量级、快速，而且还有美观的API调试工具，原名为Postwoman。能帮助我们节省时间，提升工作效率。官方链接2.4 CanIuse 兼容性查询can I use? 顾名思义：我能使用吗，能快速让我们查看浏览器对某个属性语法的兼容情况，场景应用当前在某个浏览器可以正常使用，可是换了另一个浏览器之后就不支持了，这个时候就得我们防患于未然，在对某个属性使用前，做好足够得调研，而不是等到上线才发现问题官方链接2.5 Prettier Playground 代码在线格式化应用场景：当我使用的电脑没有安装IDE,但是我又需要看别人写的代码，这个时候 Prettier Playground可以帮我将原本凌乱的代码改头换面，大大提高可读性官方链接左边为源代码，右边为格式化后的代码

2021年05月10日
118 阅读
0 评论
0 点赞

2021-05-09

学会尊重，从我做起！把“随便”改成“听你的”；把“我不会”改成“我可以学”；把“听明白了吗？”改成“我说明白了吗”沟通让人感到尊重的温柔！努力习惯温柔的沟通方式～～

2021年05月09日
51 阅读
0 评论
0 点赞