PyWebIO output模块用法合集

官方函数清单

start_server

case1：启动单个应用

使用start_server()启动一个applications，示例如下。
后续例子只展示application，需要老铁们start_server时手动更换要启动的applications名字。

• app：put_text_case()
• port：19003（此端口需要没有被占用才行）。使用端口号start_server的好处是url固定，share给别人使用很方便。如果不指定port每次运行都会随机一个。
• auto_open_webbrowser：为True时，执行代码后会自动帮你打开浏览器。

def put_text_case():
    put_text("Hello world!")
    
if __name__ == '__main__':
    start_server(applications=put_text_case, port=19003, auto_open_webbrowser=False)

case2：启动多个应用

from pywebio import start_server
from pywebio.output import put_text, put_buttons, put_link
from pywebio.session import go_app


def task_1():
    put_text('task_1')
    put_buttons(['Go task 2', 'Go index'], [lambda: go_app('task_2'), lambda: go_app('index')])


def task_2():
    put_text('task_2')
    put_buttons(['Go task 1'], [lambda: go_app('task_1')])


def index():
    put_link('Go task 1', app='task_1')  # Use `app` parameter to specify the task name
    put_link('Go task 2', app='task_2')


# equal to `start_server({'index': index, 'task_1': task_1, 'task_2': task_2})`
start_server([index, task_1, task_2], port=19004)

效果：
如录屏，注意看启动后的url。启动后进入的是list中的第一个应用。后续交互都可以进行app间跳转以及回到index页面。

put_text

def put_text_case():
    put_text("Hello world!")
    
if __name__ == '__main__':
    start_server(put_text_case, port=19003, auto_open_webbrowser=False)
   

效果：

put_markdown

case1：单行文本

def put_markdown_case1():
    put_markdown('~~Strikethrough~~')

效果：

case2：多行文本

def put_markdown_case2():
    put_markdown(r""" # H1
    This is content.
    """)

效果：

输出通知消息

def put_logger_case():
    put_info("这是一条info消息")
    put_success("这是一条success消息")
    put_warning("这是一条warning消息")
    put_error("这是一条error消息")

效果：

put_html

def put_html_case():
    put_html('X<sup>2</sup>')

效果：

put_link

# new_window=True将会打开新窗口。默认是False
def put_link_case():
    put_link("你再百度一下试试？", "https://www.baidu.com/", new_window=True)

put_processbar

case1：静态进度条

def put_processbar_case1():
    put_processbar(name="process", init=0.35, label="我就是个进度条：").show()

效果：

case2：动态进度条

import time

# 输出进度条name为bar，初始值为0, 进度条分为10份，每份为10%，每隔1s更新下进度条
def put_processbar_case2():
    put_processbar('bar')
    for i in range(1, 11):
        set_processbar('bar', i / 10)
        time.sleep(1)

效果：

put_loading

def put_loading_case():
    for shape in ('border', 'grow'):
        for color in ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'):
            put_text(shape, color)
            put_loading(shape=shape, color=color)

    # The loading prompt and the output inside the context will disappear
    # automatically when the context block exits.
    with put_loading():
        put_text("Start waiting...")
        time.sleep(3)  # Some time-consuming operations
    put_text("The answer of the universe is 42")

    # using style() to set the size of the loading prompt
    # rem是CSS3新增的一个相对单位（root em，根em）
    put_loading().style('width:4rem; height:4rem')

效果：

put_code

case1：输入python代码

若要输入其他语言的代码，更改language参数即可

def put_code_case1():
    put_code(content='print("hello world")', language="python")

效果

case2：输出json

如果使用接口编写测试工具，可以直接将response打印出来方便查看。如果要输出为标准化的json格式，且中文能正常展示，就可以使用以下例子。

import json

def put_code_case2():
    info = {
   
   "code": 0, "message": "成功"}
    # 如果要输出为中文而不是ascii编码，应该设置ensure_ascii为False; 若想将info以格式化Json输出，使用indent=4
    info = json.dumps(info, indent=4, ensure_ascii=False)
    put_code(content=info, language="json")

效果：

put_datatable

import urllib.request

def put_datatable_case():
    with urllib.request.urlopen('https://fakerapi.it/api/v1/persons?_quantity=30') as f:
        data = json.load(f)['data']

    put_datatable(
        data,
        actions=[
            ("Edit Email", lambda row_id: datatable_update('user', input("Email"), row_id, "email")),
            ("Insert a Row", lambda row_id: datatable_insert('user', data[0], row_id)),
            None,  # separator
            ("Delete", lambda row_id: datatable_remove('user', row_id)),
        ],
        onselect=lambda row_id: toast(f'Selected row: {
     
     row_id}'),
        instance_id='user'
    )