如何让Python在HTML中运行

目录
  • PyScript 快速体验
  • 小结

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

相信你看到图，不用我说，你也猜到是啥了吧？html里可以跑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

如果你懒得自己敲代码的话，本文的两个案例代码可以从百度网盘获取。

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

先创建一个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内容，就完成了这样一个图的页面实现。

小结

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

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

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

本文的两个案例代码放在百度网盘了，需要的点击获取吧。

链接: https://pan.baidu.com/s/18KV0P7Ly_rRvTn0xi3zCWQ

提取码: 4wzd

到此这篇关于让Python在HTML中运行的文章就介绍到这了,更多相关Python HTML运行内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用pyscript在网页中撰写Python程式的方法

    使用pyscript在网页中撰写Python程式的方法

    根据 Anaconda 的项目 pyscript,可以将 python 的代码直接写在网页中,目前只支援两种标签,分别是<py-script> 与 <py-repl>,以下是简单的示例. 使用这两行导入 pyscript <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" rel="external nofollow" rel=&

  • python开发环境PyScripter中文乱码问题解决方案

    PyScripter看起来还是挺不错的一个python ide 环境: PyScripter 2.6.0.0 python3.4 问题: PyScripter有个小坑,打开文件后中文都成了乱码.在PyScripter中新建的文件中文可以正常显示,但是重新打开后中文乱码. PyScripter中文乱码原因: 原因是如果文件头部没有编码声明,那么PyScripter会默认使用ANSI打开文件. 而PyScripter默认的文件模板也不带编码声明,重新打开文件时间不以UTF-8打开,所以乱码. 解决的

  • 解决python3运行selenium下HTMLTestRunner报错的问题

    修改HTMLTestRunner.py以支持python3+ 搜索到的结果整理 修改一: 在python shell里输入 >>>import HTMLTestRunner >>> dir(HTMLTestRunner) 发现不认识StringIO (No module named StringIO) 确实3里面没有这个了,第94行引入的名称要改,改成import io,539行要改成self.outputBuffer = io.BytesIO() 修改二: 运行程序的

  • pycharm运行程序时在Python console窗口中运行的方法

    问题:在pycharm中点击run运行程序,发现没有打开run窗口,而是打开的Python console窗口. 解决方法:打开菜单栏run->edit configurations,把下图中的复选框取消就可以了. 以上这篇pycharm运行程序时在Python console窗口中运行的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 在Python 的线程中运行协程的方法

    在一篇文章 理解Python异步编程的基本原理 这篇文章中,我们讲到,如果在异步代码里面又包含了一段非常耗时的同步代码,异步代码就会被卡住. 那么有没有办法让同步代码与异步代码看起来也是同时运行的呢?方法就是使用事件循环的.run_in_executor()方法. 我们来看一下 Python 官方文档[1]中的说法: 那么怎么使用呢?还是以非常耗时的递归方式计算斐波那契数列的这个函数为例: def sync_calc_fib(n): if n in [1, 2]: return1 return

  • 如何让Python在HTML中运行

    如何让Python在HTML中运行

    目录 PyScript 快速体验 小结 最近一直在更新Java新特性和IDEA Tips两个专栏,其他方向内容的动态关注少了.昨天天晚上刷推的时候,瞄到了这个神奇的东西,觉得挺cool的,拿出来分享下: 相信你看到图,不用我说,你也猜到是啥了吧?html里可以跑python代码了! 看到好多知识已经开始猛吹未来了,但乍看怎么觉得有点像JSP?或者一些模版引擎?是进步还是倒退呢?与其瞎想,不如仔细看看这个东东的能力吧! 根据官方介绍,这个名为PyScript的框架,其核心目标是为开发者提供在标准H

  • python实现在每个独立进程中运行一个函数的方法

    本文实例讲述了python实现在每个独立进程中运行一个函数的方法.分享给大家供大家参考.具体分析如下: 这个简单的函数可以同于在单独的进程中运行另外一个函数,这对于释放内存资源非常有用 #!/usr/bin/env python from __future__ import with_statement import os, cPickle def run_in_separate_process(func, *args, **kwds): pread, pwrite = os.pipe() pi

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

    现在因为已经安装了2.6的Python,以及支持2.6的Eric4,就不想再重新安装2.5来继续配置Apache下mod_python了. 后来发现了一篇文章Running Python as CGI in Apache in Windows ,讲述以CGI模式代替mod_python来运行python script.还有这篇Python for Windows . 做法是: 打开httpd.conf,找到"#ScriptInterpreterSource Registry ",移除前

  • 在cmd中运行.py文件: python的操作步骤

    1 打开cmd, 不改变运行的目录: 输入python 空格  调试好的python文件路径 或者python 空格  将python文件拖入cmd中 2 打开cmd 输入要改变的路径盘 比如:E: (回车键) 输入路径languang\sublime\pythonTest.py 回车运行 以上这篇在cmd中运行.py文件: python的操作步骤就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 在CMD命令行中运行python脚本的方法

  • 在CMD命令行中运行python脚本的方法

    网上给出了各种方法,都无碍乎先切换到Python脚本所在目录,然后输入Python脚本名称并回车,本文这里给出了更简便的方法. 方法一: 进入Python脚本所在的文件夹,shift+右击,选择"在此处打开命令窗口",按TAB键切换文件,选择目标python脚本,当然直接输入也行. 方法二: win+R,输入cmd,进入命令行窗口,直接将脚本文件拖到窗口里回车就可以了. 以上这篇在CMD命令行中运行python脚本的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多

  • 在python shell中运行python文件的实现

    最近在学习flask开发,写好程序后需要在python shell中运行测试功能.专门抽时间研究了下,总结以防止以后遗忘. 这是测试文件的结构,python_example主文件夹,下面有example.py和一个subexample子文件夹,我要分别调用example.py和subexample.py. 主要三段代码 1.import sys 此时默认读取和python shell一个文件夹下的python,若是程序放在别处,需添加文件所在路径.再导入文件. 2.sys.path.append

  • 自动在Windows中运行Python脚本并定时触发功能实现

    自动在Windows中运行Python脚本并定时触发功能实现

    目录 环境介绍 运行Python脚本:.bat文件 举例: 定时在Windows中触发.bat文件(英文版系统) 环境介绍 系统环境:Windows 10 Python版本:Python 3.5 必备包:无 运行Python脚本:.bat文件 在Windows中,.bat文件是批处理文件,是与Linux中.sh(shell)文件很像的东西. 如果,我们想在Windows中运行一个Python脚本,我们可以通过CMD,首先进入python文件所在的目录,之后运行. 但是这样很麻烦,每次都要打开CM

  • Python实现遗传算法(虚拟机中运行)

    Python实现遗传算法(虚拟机中运行)

    目录 (一)问题 (二)代码 (三)运行结果 (四)结果描述 (一)问题 遗传算法求解正方形拼图游戏 (二)代码 #!/usr/bin/env python # -*- coding: utf-8 -*- from PIL import Image, ImageDraw import os import gc import random as r import minpy.numpy as np class Color(object): ''' 定义颜色的类,这个类包含r,g,b,a表示颜色属性

随机推荐