大家好，我是DD，已经是封闭在家的第51天了！

最近一直在更新Java新特性和IDEA Tips两个专栏，其他方向内容的动态关注少了。昨天天晚上刷推的时候，瞄到了这个神奇的东西，觉得挺cool的，拿出来分享下：

相信你看到图，不用我说，你也猜到是啥了吧？html里可以跑python代码了！

看到好多Python公众号已经开始猛吹未来了，但乍看怎么觉得有点像JSP？或者一些模版引擎？是进步还是倒退呢？与其瞎想，不如仔细看看这个东东的能力吧！

根据官方介绍，这个名为PyScript的框架，其核心目标是为开发者提供在标准HTML中嵌入Python代码的能力，使用 Python调用JavaScript函数库，并以此实现利用Python创建Web应用的功能。

看到介绍里提到了调用JavaScript函数库的能力，看来跟JSP或者模版引擎还是有区别的。

PyScript 快速体验

官方给了一个例子，可以帮助我们观的感受这个开发框架的能力，不妨跟着DD看看，它能做啥吧！

第一个案例，hello world

代码很简单，就下面这几行。你只需要创建一个html文件，然后复制进去就可以了。

<html>

  <head>

    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />

    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

  </head>

  <body>

    <py-script>

        print('Hello, World!')

    </py-script>

  </body>

</html>

保存好之后，在浏览器里打开就能看到这样的页面了：

回头再看看这个html里的内容，三个核心内容：

  • 引入pyscript的样式文件：<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
  • 引入pyscript的脚本文件：<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  • <py-script>标签中写具体的python代码来输出Hello World

如果你懒得自己敲代码的话，本文的两个案例代码我打包放在公众号了，需要的朋友可以关注公众号“程序猿DD”，回复：pyscript 获取。

第二个案例，数据定义 + 数据展示

先创建一个data.py文件，然后加入前面的代码。功能很简单，就是随机生成（x，y）的坐标

import numpy as np

def make_x_and_y(n):

    x = np.random.randn(n)

    y = np.random.randn(n)

    return x, y

再创建一个html文件，加入下面的代码

<html>

    <head>

      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />

      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

      <py-env>

        - numpy

        - matplotlib

        - paths:

          - /data.py

      </py-env>

    </head>

  <body>

    <h1>Let's plot random numbers</h1>

    <div id="plot"></div>

    <py-script output="plot">

    import matplotlib.pyplot as plt

    from data import make_x_and_y

    x, y = make_x_and_y(n=1000)

    fig, ax = plt.subplots()

    ax.scatter(x, y)

    fig

    </py-script>

  </body>

</html>

这里就稍微复杂一些了，除了hello world中的几个要点外，这里还有这几个要关注的地方：

  • <py-env>标签：这里声明要引入的包和要引入的文件（上面创建的data.py）
  • <py-script output="plot">：这里定义了要在<div id="plot"></div>中输出的内容，可以看到这里的逻辑都是用python写的

这个页面的执行效果是这样的：

是不是很神奇呢？整个过程中都没有大家熟悉的cs、js内容，就完成了这样一个图的页面实现。

小结

最后，谈谈在整个尝试过程中，给我的几个感受：

  1. 开发体验上高度统一，对于python开发者来说，开发Web应用的门槛可以更低了
  2. 感觉性能上似乎有所不足，几个复杂的案例执行有点慢，开始以为是部分国外cdn的缘故，后来移到本地后，还是慢。这部分可能还需要进一步优化。

这个开发框架目前还只是alpha版本，未来一定还会有更多特性与优化出来，总体上我觉得这个框架还是非常cool的，尤其对于刚学会Python，或者只会Python，但又想快速开发Web应用的小伙伴来说，可能将会是个不错的选择，那你觉得这个框架如何？未来会不会火？留言区聊聊吧！

本文的两个案例代码我打包放在公众号了，需要的朋友可以关注公众号“程序猿DD”，回复：pyscript 获取。

欢迎关注我的公众号：程序猿DD。第一时间了解前沿行业消息、分享深度技术干货、获取优质学习资源

PyScript：让Python在HTML中运行的更多相关文章

  1. python在windows中运行文件

    "d:Program Files\python35\python.exe" hello.txt

  2. python环境中运行程序

    运行Python程序,我们比较常用的是直接在Windows命令提示窗口或者Linux终端或shell窗口中,直接:Python *.py,或者在Linux环境下,在投不中,加入: #!/usr/bin ...

  3. 已解决】Sublime中运行带input或raw_input的Python代码出错：EOFError: EOF when reading a line(转)

    [问题] 在折腾: [已解决]Sublime Text 2中运行Python程序出错:The system cannot find the file specified 的过程中,虽然解决了找不到py ...

  4. pycharm中运行成功的python代码在jenkin中运行问题总结

    我们在用selenium+python完成了项目的UI自动化后,一般用jekins持续集成工具来定期运行,python程序在pycharm中编辑运行成功,但在jenkins中运行失败的两个问题,整理如 ...

  5. 在windows中：双击运行Python程序、后台运行Python程序

    在windows中:双击运行Python程序.后台运行Python程序 安装Python解释器的windows环境,如果双击运行*.py的文件,会闪退.怎样避免闪退呢? 我们用python的日志输出程 ...

  6. 在notepad++中运行python代码

    #在notepad++中运行python代码 ''' 1.安装插件pyNPP, 2.允许插件pyNPP中的第一个和第二个选项即可,如果代码过少代码执行一闪而过,可能无法看到,可加入少量sleep时间即 ...

  7. 不能在Python Console中运行pytest

    在Python Console中运行pytest发现报错了 这是为什么?因为Python Console已经是进入python之后的环境,就像在python自带的IDLE中运行pytest pytes ...

  8. Windows 配置Apache以便在浏览器中运行Python script的CGI模式

    打开httpd.conf,找到”#ScriptInterpreterSource Registry “,移除前面的注释# (如果找不到这行,就自己添加进去) 找到“Options Indexes Fo ...

  9. sublime3中运行python文件

    sublime3中运行python文件 tools->build system->new build stystem 粘贴下面代码{"cmd":["pytho ...

随机推荐

  1. Mybatis 开发 dao 的方法

    1.分析SqlSession使用范围 1.1.SqlSessionFactoryBuilder 通过 SqlSessionFactoryBuilder 创建会话工厂 SqlSessionFactory ...

  2. 关于 DispatcherServlet.properties 文件

    1.文件位置 2.文件内容 3.文件作用 前端控制器会从 DispatcherServlet.properties 文件中加载 HandlerMapping(处理器映射器).HandlerAdapte ...

  3. C语言break,return

    C语言break,continue,return的相似与区别 相同点: 都改变了程序的执行流程 区别是:break    用于循环和switch分支,跳出它所在分支或循环体到它所在的模块的      ...

  4. 罗振宇2022"时间的朋友"跨年演讲

    罗振宇2022"时间的朋友"跨年演讲 行就行,不行我再想想办法. 原来,还能这么干! 堆资源不是解决问题的唯一道路,还是那句话:"处于困境中的人往往只关注自己的问题.而解 ...

  5. div 底部固定方法（不用position定位）

    方法一:全局增加一个负值下边距等于底部高度 <style> html, body { height: 100%; margin: 0; } .content { padding: 20px ...

  6. 反射常用API以及内省机制（代码）

    学习内容: (1)获取构造函数 这里不贴Person类了,不然代码太多太乱了,只给出一些常用API // 创建字节码对象 Class<?> aClass = Class.forName(& ...

  7. 数组 indexOf()

    众所周知,indexOf()这个方法经常出现在字符串的使用中,也许是用来寻找字符串中某一字符在字符串中的位置,或者也可以用来寻找字符串中重复出现的字符有哪些.对于刚接触 JS 的我们来说,在对数组的操 ...

  8. 通过面试题学JavaScript知识（1）

    // a 是多少的时候 可以让下面的打印ok if(a == 1 && a == 2 && a ==3){ console.log('ok') } 分析1: == 比较 ...

  9. Django框架中settings.py注释

    1 # coding:utf8 2 """ 3 Django settings for DjangoTest project. 4 5 Generated by 'dja ...

  10. Vue整合axios 插件方式

    1 创建一个vue的项目 使用命令 vue create axios-vue 创建,可以什么都不用勾选 2 安装axios npm install axios --save 如果安装过程很慢的话,也可 ...