Pyscript，创建一个能执行crud操作的网页应用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css">
    <script defer src="https://pyscript.net/latest/pyscript.js">script>
    <py-register-widget src="./pylist.py" name="py-contactlist">py-register-widget>
    <title>Guest booktitle>
head>
1
2
3
4
5
6
7
8
9

注：由于版本更新迭代频繁，引用的源路径可能有变化，如果出现报错，可在github pyscript源码查看更新的示例example（目前没有相关的文档）

PyItem和PyList定义前端item和list的各种操作

观察pyscript在github的源码，确定要如何编写继承的类
在这里插入图片描述

# -*- coding:utf-8 -*-
from datetime import datetime


class PyItem(PyItemTemplate):
    pass


class PyList(PyListTemplate):
    item_class = PyItem

    def add(self, item):
        if isinstance(item, str):
            item = {"content": item, "created_at": datetime.now()}
        # labels是展示的名称
        return super().add(item, labels=["content"])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

其中PyItemTemplate和PyListTemplate是本次要使用的pyscript类，主要内容是对前端item和list的操作
这里没有导入会IDE抛红，不过不需要理会，这些类方法只会在HTML中执行
PyList中指明item_class为继承的PyItem
重写一下PyListTemplate的add方法，定义要从前端输入接收的item，并定义创建时间created_ad，再渲染返回到前端之前，add方法中的这些数据都可能会再用到
pylist
在py-register-widget添加 klass="PyList"指明引用的Python pyscript类

<py-register-widget src="./pylist.py" name="py-contactlist" klass="PyList">py-register-widget>
1

注意这里关键字名称是klass而不是class，为了避免和html保留的class关键字冲突

编写HTML body部分代码

<body style="margin: 5% 10%">
    <h2>Guest book with PyScript📖h2>
    <br>
    <div style="width: 80%">
        <py-inputbox id="new-entry">
            def on_keypress(e):
                if e.code == "Enter":
                    add_contact()
        py-inputbox>
        <py-contactlist id="guestBook">py-contactlist>
    div>

    <py-script>
        def add_contact():
            # new_entry用法与前面的id="new-entry"有关，在Python中命名使用下划线连接
            # datetime是在引用的pylist.py中导入了，所以不需要再导入
            guest = {"content": new_entry.value, "created_at": datetime.now()}
            # 这里的add方法来自于PyList中的add方法
            guestBook.add(guest)
            # 清除inputbox中的内容
            new_entry.clear()
    py-script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

创建py-inputbox的pyscript标签，定义on_keypress方法捕获在键盘"Enter"被按下之后，执行一些操作：
定义add_contact方法，向py-contactlist标签执行添加客人名单的操作，这里的py-contactlist和前面py-register-widget中的name保持一致
于是可以达到如下的效果，输入名单之后按enter键可添加名单
在这里插入图片描述

点击客人名单在名单上添加或者取消添加删除线，表示客人已经check到场或未check

首先为item对象添加一个deleted属性，代表是否执行删除（是否已经check）
编写python代码实现on_click事件操作，添加删除线或取消删除线，表示已经check
需要在PyItem中重写PyItemTemplate的on_click方法

class PyItem(PyItemTemplate):
    def on_click(self, evt=None):
        # 点击人物名称，删除或者取消删除已经签到的人
        # 这里如果没有deleted键，前端会有报错
        self.data["deleted"] = not self.data["deleted"]
        # 如果deleted就添加删除线，否则移除删除线
        self.strike(self.data["deleted"])
1
2
3
4
5
6
7

添加名单的时候，默认传入deleted为False

    <py-script>
        def add_contact():
            # new_entry用法与前面的id="new-entry"有关，在Python中命名使用下划线连接
            # datetime是在引用的pylist.py中导入了，所以不需要再导入
            guest = {"content": new_entry.value, "created_at": datetime.now(), "deleted": False}
            # 这里的add方法来自于PyList中的add方法
            guestBook.add(guest)
            # 清除inputbox中的内容
            new_entry.clear()
    py-script>
1
2
3
4
5
6
7
8
9
10

效果：
在这里插入图片描述

点击checkbox中的勾选，也同步执行添加删除线或取消删除线

在PyItem中选择输入的element将其checked属性的值修改为和deleted相同的布尔值，这实际上等价执行了js的document.querySelector的相关方法

class PyItem(PyItemTemplate):
    def on_click(self, evt=None):
        # 点击人物名称，删除或者取消删除已经签到的人
        # 这里如果没有deleted键，前端会有报错
        self.data["deleted"] = not self.data["deleted"]
        # 如果deleted就添加删除线，否则移除删除线
        self.strike(self.data["deleted"])
        # 点击人物名称添加删除线，同时checked（打勾）也要勾选或者取消勾选
        self.select("input").element.checked = self.data["deleted"]
1
2
3
4
5
6
7
8
9

效果：
在这里插入图片描述

同时再添加一个按钮支持鼠标点击这按钮添加客人名单

在HTML中py-inputbox标签同级添加一个py-button标签并定义一个on_click点击按钮的事件，当点击这个按钮时就执行添加名单的操作

    <div style="width: 80%">
        <py-inputbox id="new-entry">
            def on_keypress(e):
                if e.code == "Enter":
                    add_contact()
        py-inputbox>
        <br>
        <br>
        <py-button id="new-guest-btn" label="Add guest">
            def on_click(e):
                add_contact()
        py-button>
        <py-contactlist id="guestBook">py-contactlist>
    div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果：
在这里插入图片描述

修改渲染到页面上字体的样式代替默认的样式

查看源码可知PyItemTemplate的render_content只是将各个label使用"-"连接起来，样式使用了pyscript默认的样式
覆写PyItemTemplate的render_content方法，增加一个标签，将content标签改为name和email，将这两个label使用符号📙连起来展示
然后再添加一个邀请时间，用较小的字体展示

最后完整的代码：
pylist.py

# -*- coding:utf-8 -*-
from datetime import datetime


class PyItem(PyItemTemplate):
    def on_click(self, evt=None):
        # 点击人物名称，删除或者取消删除已经签到的人
        # 这里如果没有deleted键，前端会有报错
        self.data["deleted"] = not self.data["deleted"]
        # 如果deleted就添加删除线，否则移除删除线
        self.strike(self.data["deleted"])
        # 点击人物名称添加删除线，同时checked（打勾）也要勾选或者取消勾选
        self.select("input").element.checked = self.data["deleted"]

    def render_content(self):
        s = "📙".join([self.data[f] for f in self.labels])
        create_at = self.data["created_at"].strftime("%F %X")
        return s + "
" f"⌚invited at: {create_at}"


class PyList(PyListTemplate):
    item_class = PyItem

    def add(self, item):
        if isinstance(item, str):
            name, email = [x.strip() for x in item.split(",")]
            item = {"name": item, "email": email, "created_at": datetime.now(), "deleted": False}
        # labels是展示的名称
        return super().add(item, labels=["name", "email"])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

add_contact添加客人名单时也将一个标签content改为两个name和email，输入时用逗号(“,”)隔开
guestbook.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css">
    <script defer src="https://pyscript.net/latest/pyscript.js">script>
    <py-register-widget src="./pylist.py" name="py-contactlist" klass="PyList">py-register-widget>
    <title>Guest booktitle>
head>
<body style="margin: 5% 10%">
    <h2>Guest book with PyScript📖h2>
    <p>You can use <code>ENTERcode> to insert a guest book entry.p>
    <p>Paste <code style="background: #eee; padding: 0.5%">Pam Beesly, pam@dundermifflin.comcode> to insert the guest name and email.p>
    <br>
    <div style="width: 80%">
        <py-inputbox id="new-entry">
            def on_keypress(e):
                if e.code == "Enter":
                    add_contact()
        py-inputbox>
        <br>
        <br>
        <py-button id="new-guest-btn" label="Add guest">
            def on_click(e):
                add_contact()
        py-button>
        <py-contactlist id="guestBook">py-contactlist>
    div>

    <py-script>
        def add_contact():
            name, email = [x.strip() for x in new_entry.value.split(",")]
            # new_entry用法与前面的id="new-entry"有关
            # datetime是在引用的pylist.py中导入了，所以不需要再导入？
            guest = {"name": name, "email": email, "created_at": datetime.now(), "deleted": False}
            # 这里的add方法来自于PyList中的add方法
            guestBook.add(guest)
            # 清除inputbox中的内容
            new_entry.clear()
    py-script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

最终效果展示：

在这里插入图片描述

相关阅读:
AI + Science ：科学研究新范式
 elementui表单的验证问题
 Stream强化
 网络工程师的关键任务：构建可靠的出海网络架构
 雅思四处刷题的记录（一）
博客系统前端页面
 【NumPy基础（05）常用函数】
英语写作中“省略”、“忽略”、“忽视”omit、ignore、neglect 的用法
 IPO解读丨转向国内帐篷市场，泰鹏智能能否抓住露营经济的红利？
Linux安装zlib、libpng、freetype给交叉编译工具链使用
原文地址：https://blog.csdn.net/Moelimoe/article/details/126196273

Pyscript，创建一个能执行crud操作的网页应用

目录

输入客人名称到inputbox，按enter键添加客人名单

编写HTML head部分代码

PyItem和PyList定义前端item和list的各种操作

编写HTML body部分代码

点击客人名单在名单上添加或者取消添加删除线，表示客人已经check到场或未check

点击checkbox中的勾选，也同步执行添加删除线或取消删除线

同时再添加一个按钮支持鼠标点击这按钮添加客人名单

修改渲染到页面上字体的样式代替默认的样式

最终效果展示：