打通Python与JavaScript『1』 - 《iLearning爱学习》

文件结构
从Hello开始
来一些交互

话说当前什么语言最容易学，看看2019年的编程语言排行就一目了然，Java和C用的多那是历史问题，但是Python作为目前最容易出活的语言那是毋庸置疑的，上手迅速，学个两天就可以直接拿来干活，这个不是我信口胡说，光看看市面上堆积如山的Python入门的书籍就知道为什么它如此受欢迎。

话说当前什么样的图形界面是最流行最时髦的，看看各大互联网公司对前端人才的需求量，再看看互联网应用的海啸之势，CSS，JavaScript以及一大堆基于JavaScript的前端框架那是绝对的榜首。
话又说回来，Python的图形界面那可是丑的一拼，不光丑还难学，要是界面好看难学我也就认了，但是又难看又难学，谁还有动力去啃这些不知所云的GUI框架呢？
想来想去，到底如何才能用Python写后端代码实现逻辑需求，前端通过JS实现好看的界面呢，Django？确实也可以，但是太繁琐。ELECTRON？确实可以用，但还得单学个Node.js。
cefPython？太难，目前还都没看明白。
其实用Django实现Python编写后端，HTML，CSS，JS实现前端确实可以，但是上手太慢，找来找去，终于在Github上找到一个Python库-Eel，下面是它的链接
A little Python library for making simple Electron-like HTML/JS GUI apps

文件结构

使用EEL，文件需要按照一定的结构进行安排，具体如下图
通过上图发现，整个项目需要编写一个完整的网页文件，一个python文件，通过执行python脚本，调用web文件中的文件，EEL的功能就是实现js和python之间的数据交互

从Hello开始

还是一如既往的从Hello开始，基本三行代码就可以完成整个功能
python代码

import eel
eel.init('web')
eel.start("index.html", size=(1440, 900), mode="edge")

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>eel GUI</title>
    <script type="text/javascript" src="./eel.js"></script>
    <script type="text/javascript" src="./main.js"></script>
  </head>
  <body>
    <h1>Welcome to the Jungle</h1>
  </body>
</html>

完成上面这些代码，运行python脚本后会打开浏览器显示HTML代码中的内容，如果是用vscode进行编程，最好不要在vscode中执行脚本，这样会出现一些莫名其妙的问题

来一些交互

如果仅仅展示一个静态的网页，那么这没任何意义，我们需要结合前端现代的界面的风格和后端的程序结构实现一个图形化的应用程序，这里通过在前端输入两个数字，之后点击按钮后，可以在浏览器的控制台计算出结果。
代码同样很简单，python代码

import eel
eel.init('web')
@eel.expose
def add(num1, num2):
    return int(num1) + int(num2)
eel.start("index.html", size=(1440, 900), mode="edge")

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>eel GUI</title>
    <script type="text/javascript" src="./eel.js"></script>
  </head>
  <body>
    <h1>Welcome to the Jungle</h1>
    <input type="text" id="data1" placeholder="input1" , name="" />
    <br>
    <input type="text" id="data2" placeholder="input2" , name="" />
    <br>
    <input type="button" value="calculate" , onclick='code()' name="" />
  </body>
  <script type="text/javascript" src="./main.js"></script>
</html>

Javascript

function code() {
  var num1 = document.getElementById("data1").value;
  var num2 = document.getElementById("data2").value;
  eel.add(
    num1,
    num2
  )(function (ret) {
    console.log(ret);
  });
}

在python代码中，使用@eel.expose装饰器，将函数可以在javascript中进行调用