PythonGUI的web桌面程序的代码优化讲解

　　1说明：
　　1。1Eel是一个轻量的python桌面GUI开发第三方库，中文教程很少。
　　1。2有很多优点：轻量级、导入eel。js独有的特色、代码简洁、与python结合很好。
　　1。3环境和安装，暂时省略，可以看看我前面的有关文章，讲解通俗易懂，一秒看懂，亲测。
　　2源代码：
　　2。1来源：https：github。comJustZionPythoneelGUIexamplelistmyfiles
　　2。2修改：
　　源代码是win操作系统，修改为linux操作系统；
　　源代码是python2，修改为python3；
　　源代码eel是版本，修改最新版本；
　　源代码js和css为本地引用，改为在线引用等等。
　　2。3修改后的文件结构：
　　一个eelfile。py和一个web文件夹（web文件内有一个file。js和一个findfiles。html共2个文件）。
　　3文件代码讲解：
　　3。1eelfile。py代码：导出模块，也可以一行导入法importeelimportosimportrandomimporttime全局变量p的声明globalp表示空四个字符，也称缩进，相当于按一下Tab键p随机端口定义arandom。randint（1000，50000）eel。init（web）新版eel中这个不需要，故注释掉options｛host：localhost，port：a｝currdiros。getcwd（）eel。showdir（currdir）将这个原始路径放在这里originalos。getcwd（）defmain（a，count）：bos。listdir（a）countcountifb：passelifb！：forcinb：mos。getcwd（）ifos。path。isdir（c）：os。chdir（c）yos。getcwd（）eel。showdir（y）count1lpcountceel。findthefiles（l）mainn（y，count）os。chdir（m）eel。showdir（m）count1else：count1eel。showdir（m）lpcountceel。findthefiles（l）count1defmainn（a，aa）：kaados。listdir（a）ifd：passelifd！：foreind：los。getcwd（）ifos。path。isdir（e）：os。chdir（e）eel。showdir（e）oos。getcwd（）k1filpkeeel。findthefiles（fil）main（o，k）os。chdir（l）eel。showdir（l）k1else：k1filpkeeel。showdir（l）eel。findthefiles（fil）k1将函数暴露给js，便于调用eel。expose定义这个函数defautomate（a）：originalos。getcwd（）注释掉，放在前面globaloriginal放在这里报错，注释掉try：os。chdir（a）cwos。getcwd（）eel。showdir（cw）print。。。。successful注释掉，并且原来是python2的写法，没有括号yy1eel。starting（）starttimetime。time（）main（cw，yy）stoptimetime。time（）timetakenstr（stoptimestarttime）printtimetaken注释掉，并且原来是python2的写法，没有括号eel。done（timetaken〔：7〕）except：print（failed）改为python3的写法，当然也可以注释掉，如果注释点，记得加：pass将函数暴露给js，便于调用eel。expose定义这个函数defback（）：os。chdir（original）eel。showdir（original）下面是旧版本eel的写法，新版本不需要optionseel。start（findfiles。html，size（400，600），optionsoptions，blockFalse）eel。start（findfiles。html，size（400，600），blockFalse）whileTrue：eel。sleep（3）
　　3。2findfiles。html代码：htmlheadmetacharsetutf8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1titlePoweredbyPythonEeltitle！在线引用linkhrefhttps：cdn。bootcdn。netajaxlibstwitterbootstrap4。5。0cssbootstrap。min。cssrelstylesheet！声明一下引用eel。js，其实这就是eel的特色，该文件不需要本地，就是做一个样子，很好headbodyh3classml3mb2processcheck。。。。Waitingh3inputtypetextclassformcontrolp2dirEnterthedirectorybuttonclassbtnbtnsecondarym2fileSearchbuttonbuttonclassbtnbtndangerml0m2backBackbuttonpclassbordertopmy1Currentdirectroy：spanclasscurrdirml1spantextareaclassdataentrystyleheight：400width：100；textareabuttonclassmy2btnbtnprimarybtnsmAsimpleprogrambyspanclassbadgebadgelightZBOYspanbuttonbody！将js和eel的互相调用函数写入js中，本地单独导入html
　　3。3file。js代码file按钮（search）的点击事件（。file）。click（function（）｛varadocument。querySelector（。dir）。eel。automate（a）｝）定义函数，暴露给python，便于调用eel。expose（findthefiles）functionfindthefiles（files）｛document。querySelector（。dataentry）。valuefiles｝定义done函数，暴露给python，便于调用eel。expose（done）functiondone（n）｛document。querySelector（。processcheck）。innerHTML。。。F｝定义函数，暴露给python，便于调用eel。expose（starting）functionstarting（）｛document。querySelector（。processcheck）。innerHTML。。。L｝back按钮的点击事件（。back）。click（function（）｛调用python的定义的back函数功能eel。back（）document。querySelector（。dataentry）。document。querySelector（。processcheck）。innerHTML。。。W｝）定义函数，暴露给python，便于调用eel。expose（showdir）functionshowdir（a）｛document。querySelector（。currdir）。innerHTMLa；｝
　　3。4效果图
　　Eel的中文介绍太少了，我整理，分享出来，希望更多人喜欢Eel，并开发更多的中文学习资料，共同进步。
　　喜欢的人，请点赞，转发，收藏。分享知识快乐。