大家好，我是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. springboot+shiro 01 - 实现权限控制

    sb_shiro_session <?xml version="1.0" encoding="UTF-8"?> <project xmlns= ...

  2. 配置sublime text 3来编写Markdown

    如何使用sublime text 3编写Markdown  编写markdown的编辑器无论客户端还是在线的都有很多,这里将sublime text3作为markdown的编辑器,需要进行一些配置. ...

  3. ctfhub 双写绕过 文件头检查

    双写绕过 进入环境 上传一句话木马 上传路径感觉不对检查源代码 从此处可以看出需要双写绕过 使用bp抓包 此处这样修改即可双写绕过 使用蚁剑连接 即可找到flag 文件头检查 进入环境 上传一句话木马 ...

  4. nRF Connect SDK(NCS)/Zephyr固件升级详解 – 重点讲述MCUboot和蓝牙空中升级

    如何在nRF Connect SDK(NCS)中实现蓝牙空中升级?MCUboot和B0两个Bootloader有什么区别?MCUboot升级使用的image格式是怎么样的?什么是SMP协议?CBOR编 ...

  5. C++ | 虚函数表内存布局

    虚表指针 虚函数有个特点.存在虚函数的类会在类的数据成员中生成一个虚函数指针 vfptr,而vfptr 指向了一张表(简称,虚表).正是由于虚函数的这个特性,C++的多态才有了发生的可能. 其中虚函数 ...

  6. 13_Invariance Principle_LaSalle's Theorem_不变性原理

  7. 12_非线性理论基础_Lyapunov直接方法

  8. mpvue小程序加载不出图片 Failed to load local image resource

    我的GitHub博客,很多内容可以看,喜欢的给星星哦 https://github.com/liangfengbo/frontend 第一道:图片引入本地静态文件失效? mpvue开发小程序时候,要添 ...

  9. Idea运行时Scala报错Exception in thread "main" java.lang.NoSuchMethodError:com.google.common.base.Preconditions.checkArgument(ZLjava/lang/String;Ljava/lang/Object;)V

    一.情况描述 使用idea +scala+spark,运行程序代码如下: package cn.idcast.hello import org.apache.spark.rdd.RDD import ...

  10. echarts中饼图的legend自定义icon图片(扇形为例)

    效果图: 代码: 问题:// icon: "pin", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle,diamond,pin,a ...