首页 > 其他分享 >领导让前端实习生在网页上添加一个长时间不操作锁定电脑的功能

领导让前端实习生在网页上添加一个长时间不操作锁定电脑的功能

时间:2024-06-17 09:47:34浏览次数:27  
标签:医疗系统 小李 网页 shim 前端 领导 sys 实习生 添加

接上文:屠龙少年终成恶龙,前端转产品的我给前端挖了个坑

前情提要

大约一个月前,公司的医疗管理系统终于完工上线。后面一个周一,领导叫大家开会,说后面没有项目进来了,用不了这么多开发人员,原地宣布裁员。再后一周后,花 2000 招了个实习生,工作内容为系统维护。

工作内容

image.png

领导:由于我们工作内容很简单,事情轻松,基本就在页面上加加按钮就行,所以工资相对较少一些,是否接受?

实习生小李:能开实习证明吗?

领导:能的。

实习生小李:好的,谢谢老板。

领导:什么时候能入职?

实习生小李:现在。

工作来源

医疗系统是一个比较数据敏感的系统,现在医院那边需要添加一个十分钟时间没有在系统进行操作,则锁定电脑的功能,使用者再次使用时,必须输入密码。客户那边在系统对接群里发出需求时,并没有人回复(PS:人都裁完了),然后老板回复到:好的。

工作安排

领导:小李,我们有个医疗系统,需要添加锁屏功能,你处理一下,两天时间应该没问题吧?

实习生小李:(思索片刻)好的,有代码吗

(4小时之后)

领导:有的,我找下

(第二天10点)

实习生小李:王总,代码找到了没有

(第二天12点)

领导:没代码改不了吗?

实习生小李:(瑟瑟发抖)我试试

(第二天14点)

实习生小李:王总,是那种长时间不操作就锁定系统的功能吗

领导:是的

实习生小李:多久不操作才锁

领导:十分钟,锁了需要输入密码才能使用

实习生小李:但是我们医疗系统没有密码功能

领导:客户电脑有密码啊

实习生小李:是锁电脑系统吗

领导:对

实习生小李:(若有所思)我试试

实现过程

实习生小李:魔镜魔镜,我们有个医疗系统,需要做一个十分钟不操作电脑,就锁定用户电脑系统的功能,在没有源代码的情况下如何实现?

魔镜:好的,在没有源代码的情况下为医疗系统添加十分钟不操作电脑就锁定用户电脑系统的功能,可以使用 sys-shim 实现。

第一步,创建一个目录例如 medical-system ,目录里有以下两个文件:

  • package.json 文件用来配置 sys-shim
  • preload.js 用来向医疗系统添加功能

第二步

在 package.json 中编写内容如下

{
  "browserArguments": "--disable-web-security --allow-running-insecure-content ",
  "form": {
    "right": "1300",
    "bottom": "800"
  },
  "page": "https://www.baidu.com/"
}

  • browserArguments 用来指定浏览器参数,这里配置为允许跨域以方便注入代码
  • form 用来控制窗口如何显示,这里表示窗口大小
  • page 表示医疗系统的页面

在 preload.js 中编写内容如下

new Promise(async function () {
  window.main = await new window.Sys({ log: true })
  // 设置倒计时时间,为了测试方便,这里改为 30 秒
  const TIMEOUT = 0.5 * 60 * 1000;
  
  // 声明一个变量来存储 setTimeout 的引用
  let timeoutId = null;
  
  // 定义一个函数来重置倒计时并在2分钟后打印日志
  function startInactivityCheck() {
    // 清除之前的倒计时(如果有的话)
    if (timeoutId !== null) {
      clearTimeout(timeoutId);
    }
  
    // 设置一个新的倒计时
    timeoutId = setTimeout(function() {
      // 锁定系统
      window.main.native.sys.lock()
    }, TIMEOUT);
  }
  
  // 为 body 元素添加点击事件监听器
  document.body.addEventListener('click', function() {
    console.log("检测到点击事件,重新开始计时。");
    // 重置倒计时
    startInactivityCheck();
  });
  
  // 初始化倒计时
  startInactivityCheck();
})

  • sys.lock() 方法用于锁定操作系统。

第三步,生成应用程序

npx sys-shim pack --input medical-system

运行该命令后,会在当前目录生成一个名为 medical-system.exe 的可执行文件。它封装了医疗系统这个 web 程序,并在里面添加了锁屏功能。

  • pack 指定表示打包应用
  • --input 参数表示要打包的目录

240528_153432.gif

--input 参数也可以是线上的网页,比如:

npx sys-shim pack --input https://www.baidu.com/

即可获取一个可以调用操作系统 api 的 web 应用。

交付反馈

用户:以前我们还需要进入浏览器输入网址才能进入系统,现在直接在桌面上就能进入,并且还有安全锁屏功能,非常好!

领导:小李干得不错,但没有在规定的时间内完成,但由于客户反馈不错,就不扣你的考核分了。

实习生小李:(不得其解)谢谢老板。

后记

不知不觉,又到了周五,这是公司技术分享会的时候。当前公司技术人员只有实习生小李,由小李负责技术分享。

宽旷的会议室里,秘书、领导、小李三人面面相觑,小李强忍住尴尬,开始了自己的第一次技术分享:

实习生小李:感谢领导给我的工作机会,在这份工作里,我发现了 sys-shim 这个工具,它可以方便的在已有的 web 页面中添加系统 api,获取调用操作系统层面功能的能力,比如关机、锁屏。

领导:(好奇)那他可以读取电脑上的文件吗?

实习生小李:可以的,它可以直接读取电脑上的文件,例如电脑里面的文档、照片、视频等。

突然领导脸色一黑,看了一眼秘书,并关闭了正在访问的医疗系统,然后在技术分享考核表上写下潦潦草草的几个字:考核分-5

提示

大家可以直接运行这个命令生成 app 体验:

npx sys-shim pack --input https://www.baidu.com/

生成后的 app 可以右键解压,看到内部结构。如果遇到问题,可以在这里提交,方便追溯,我会及时解答的。

参考

标签:医疗系统,小李,网页,shim,前端,领导,sys,实习生,添加
From: https://www.cnblogs.com/daysme/p/18251773

相关文章

  • 前端二进制取值法之权限判断
    定义的是一个工具类,类名为CommonUtility,里面有一个名为isConfigurable的静态方法。该方法有两个参数,字段field和掩码writeMask,它们都是数字。此外,代码段还定义了一个名为WriteMask的常量对象,它映射了一些特定字段和它们在二进制层面上对应的值。isConfigurable函数通过位......
  • Hbuilder创建项目,制作html网页第一天
    1、引入js文件<scriptsrc="js/pixi.min.js"></script>2、创建应用varapp=newPIXI.Application(500,600);//宽500,高6003、将应用放进页面document.body.appendChild(app.view);4、创建背景元素varbg=newPIXI.Sprite.fromImage("img/bg.jpg");5、将背景元素放进界......
  • 遇到网页不让复制粘贴该怎么办?
    当我们在网上看到一些有用的信息时,通常会想要复制粘贴以便稍后查看或与他人分享。但是,有些网页使用了JavaScript或其他技术来防止用户复制其内容。这可能会导致一些不便,但有几种方法可以尝试解决这个问题。下面我们将讨论几种方法来应对这种情况。第一招:查看源代码我们在网......
  • 【Nginx】Nginx部署前端静态资源
    打包部署我们的前端工程开发好了,但是我们需要发布,那么如何发布呢?主要分为2步:前端工程打包通过nginx服务器(点击下载Nginx)发布前端工程1前端工程打包接下来我们先来对前端工程进行打包我们直接通过VSCode的NPM脚本中提供的build按钮来完整,如下图所示,直接点击即可:然后会......
  • QtCreator CMakeLists.txt添加模块(Modules)
    修改以下位置,添加模块...set(CMAKE_CXX_STANDARD20)#设置C++标准#查找Qt6find_package(QTNAMESQt6Qt5REQUIREDCOMPONENTSWidgets**Multimedia**)find_package(Qt${QT_VERSION_MAJOR}REQUIREDCOMPONENTSWidgets**Multimedia**)...#链接Qt6模块和库target_l......
  • Apache网页优化
    一、网页压缩1.网页压缩网站访问速度影响因素:应用程序响应速度、网络带宽、服务器性能、与客户端之间网络传输速度等。其中最重要的是=一个因素是Apache本身,因此提升Apache执行速度(使用网页压缩)是性价比最高的选择。(1)gzip介绍一种流行的文件压缩算法,大约可以减少70%以......
  • Nginx设置缓存后,访问网页404 问题原因及解决方案(随手记)
    原文链接:Nginx设置缓存后,访问网页404问题原因及解决方案(随手记)_nginx的html文件地址修改后404-CSDN博客 目录问题描述Nginx文件解决方案查看error_log日志问题原因修改文件并测试Nginx文件测试总结问题描述在Nginx中设置缓存expires后,结果重启nginx,网站访问404了。Nginx文件s......
  • JavaWeb学习-前端知识小结
    前言参照B站尚硅谷的教程进行学习,对javaweb的前端知识做个简单的小结,主要内容包括html、css、javascript。其中html表示了前端页面的结构和元素,例如表格、文本框、表单等;css表示前端页面的样式,例如段落中文字的颜色、字体大小,表格中文字的颜色,字体大小等;JavaScript是弱类型的脚本......
  • orm中使用modelForm添加数据
    ModelForm可以简化表格数据输入的流程,还能对输入的数据进行校验。1.在views.py中创建ModelForm的类fromdjangoimportformsclassUserModelForm(forms.ModelForm):name=forms.CharField(min_length=3,label='用户名')这是校验条件,相当于限制了后续输入新的数据时,其中的......
  • jQuery引入,基本选择器和关系选择器,组合选择器,分组与嵌套,基本筛选器,属性选择器,前
    ⅠjQuery引入【一】什么是jQuery【1】概述jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTMLDocument、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Writeless,domore.“【2】小结jQ......