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

　　1 说明：
　　=====
　　1.1 Eel是一个轻量的python桌面GUI开发第三方库，中文教程很少。
　　1.2 有很多优点：轻量级、导入eel.js独有的特色、代码简洁、与python结合很好。
　　1.3 环境和安装，暂时省略，可以看看我前面的有关文章，讲解通俗易懂，一秒看懂，亲测。
　　2 源代码：
　　======
　　2.1 来源：https://github.com/JustZion/Python-eel-GUI-example-list_my_files-
　　2.2 修改：
　　源代码是win操作系统，修改为linux操作系统；
　　源代码是python2，修改为python3；
　　源代码eel是版本，修改最新版本；
　　源代码js和css为本地引用，改为在线引用等等。
　　2.3 修改后的文件结构：
　　一个eelfile.py和一个web文件夹（web文件内有一个file.js和一个find_files.html共2个文件）。
　　3 文件代码讲解：
　　============
　　3.1 eelfile.py代码：#导出模块，也可以一行导入法 import eel import os import random import time #全局变量p的声明 global p #	表示空四个字符，也称缩进，相当于按一下Tab键 p = ＂	＂ #随机端口定义 a= random.randint(1000,50000) eel.init(＂web＂)  ＂＂＂ #新版eel中这个不需要，故注释掉 options = {     ＂host＂: ＂localhost＂,     ＂port＂: a     } ＂＂＂ curr_dir = os.getcwd() eel.show_dir(curr_dir) #将这个原始路径放在这里 original = os.getcwd()  def main(a,count):     b = os.listdir(a)     count = count     if b == ＂＂:     	pass     elif b != ＂＂:     	for c in b:     		m = os.getcwd()     		if os.path.isdir(c):     			os.chdir(c)     			y = os.getcwd()     			eel.show_dir(y)     			count += 1     			l = p*count+＂__＂ +c+＂ ＂     			eel.find_the_files(l)     			mainn(y,count)     			os.chdir(m)     			eel.show_dir(m)     			count -= 1     		else:     			count += 1     			eel.show_dir(m)     			l = p*count+＂__＂ +c+＂ ＂     			eel.find_the_files(l)     			count -= 1     		 def mainn(a,aa): 	k = aa 	d = os.listdir(a) 	if d == ＂＂: 		pass 	elif d != ＂＂: 		for e in d: 			l = os.getcwd() 			if os.path.isdir(e): 				os.chdir(e) 				eel.show_dir(e) 				o = os.getcwd() 				k += 1 				fil = p*k+＂__＂ +e+＂ ＂ 				eel.find_the_files(fil) 				main(o,k) 				os.chdir(l) 				eel.show_dir(l) 				k -= 1 			else: 				k += 1 				fil = p*k+＂__＂ +e+＂ ＂ 				eel.show_dir(l) 				eel.find_the_files(fil) 				k -= 1 #将函数暴露给js，便于调用 @eel.expose #定义这个函数 def automate(a):     #original = os.getcwd() #注释掉，放在前面     #global original  #放在这里报错，注释掉     try:         os.chdir(a)         cw = os.getcwd()         eel.show_dir(cw)         #print ＂....successful＂ #注释掉，并且原来是python2的写法，没有括号         yy = -1         eel.starting()         start_time = time.time()         main(cw,yy)         stop_time = time.time()         time_taken = str(stop_time - start_time)         #print time_taken #注释掉，并且原来是python2的写法，没有括号         eel.done(time_taken[:7])     except:         print(＂failed＂) #改为python3的写法，当然也可以注释掉，如果注释点，记得加：pass  #将函数暴露给js，便于调用   @eel.expose #定义这个函数 def back():     os.chdir(original)     eel.show_dir(original)      #下面是旧版本eel的写法，新版本不需要options       #eel.start(＂find_files.html＂,size = (400,600), options = options,block= False) eel.start(＂find_files.html＂,size = (400,600), block= False)  while True:     eel.sleep(3)
　　3.2 find_files.html代码：                                                                                     
....Waiting
         Enter the directory        Search        Back        
Current directroy:                 A simple program by Z-BOY               >      
　　3.3 file.js代码// file按钮（search）的点击事件 $(＂.file＂).click(function() {     var a = document.querySelector(＂.dir＂).value;     eel.automate(a) }) // 定义函数，暴露给python，便于调用 eel.expose(find_the_files) function find_the_files(files) {     document.querySelector(＂.data_entry＂).value += files } // 定义done函数，暴露给python，便于调用 eel.expose(done) function done(n) {     document.querySelector(＂.process_check＂).innerHTML = ＂...Finished in ＂+n+＂ seconds＂; } //定义函数，暴露给python，便于调用 eel.expose(starting) function starting() {     document.querySelector(＂.process_check＂).innerHTML = ＂...Loading＂; } // back按钮的点击事件 $(＂.back＂).click(function() {     //调用python的定义的back函数功能     eel.back()     document.querySelector(＂.data_entry＂).value = ＂＂;     document.querySelector(＂.process_check＂).innerHTML = ＂...Waiting＂; }) //定义函数，暴露给python，便于调用 eel.expose(show_dir)  function show_dir(a) {     document.querySelector(＂.curr_dir＂).innerHTML = a; }
　　3.4 效果图
　　Eel的中文介绍太少了，我整理，分享出来，希望更多人喜欢Eel，并开发更多的中文学习资料，共同进步。
　　喜欢的人，请点赞，转发，收藏。分享知识快乐。