整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

ReactPy:在 Python 中构建用户界面的库

ReactPy:在 Python 中构建用户界面的库

暑期创作大赛#

ReactPy 是一个用 Python 构建用户界面而无需使用 Javascript 的库。ReactPy 接口由外观和行为类似于ReactJS中的组件组成。ReactPy 的设计考虑到简单性,可供那些没有 Web 开发经验的人使用,同时也足够强大,可以随着您的雄心壮志而成长。

概览

要大致了解如何在 ReactPy 中编写应用程序,请查看下面的微型“hello world”应用程序:

main.py


尝试单击 结果选项卡以查看显示的内容!

那么这段代码到底做了什么?首先,它从中导入一些reactpy用于描述和执行应用程序的工具。然后,我们创建一个App函数来定义应用程序显示的内容。具体来说,它显示一种称为h1 节标题的 HTML 元素。但重要的是,@component装饰器已应用于该App函数以将其变成组件。最后,我们通过将组件传递给 函数来运行开发 Web 服务器。Apprun()

笔记

请参阅在生产中运行 ReactPy以了解如何使用生产级服务器来运行 ReactPy。

学习 ReactPy

本文档分为多个章节,通过详细的解释和大量示例逐步向您介绍概念。您应该随意深入研究任何看起来有趣的内容。虽然每一章都假设了前面的知识,但当您遇到不熟悉的概念时,您应该寻找链接来帮助您找到最初教授该概念的地方。

入门

如果您想按照以下部分中的示例进行操作,则需要从这里开始,以便可以安装 ReactPy。本节还包含有关如何在不同上下文中运行 ReactPy 的更多详细信息。例如,如果您想将 ReactPy 嵌入到现有应用程序中,或者在 Jupyter Notebook 中运行 ReactPy,您可以在此处学习如何执行这些操作。

阅读更多

安装 ReactPy 并以各种不同的方式运行它 - 使用不同的 Web 服务器和框架。您甚至可以将 ReactPy 嵌入到现有应用程序中。

创建接口

ReactPy 是一个用于制作用户界面 (UI) 的 Python 包。这些界面是由按钮文本和图像等小功能元素构建的。ReactPy 允许您将这些元素组合成可重用的“组件”。在接下来的部分中,您将了解如何创建这些 UI 元素并将其组织成组件。然后,您将使用这些知识从原始数据创建界面:

main.py



学习从基本 HTML 元素和可重用组件构建用户界面。

添加交互性

组件通常需要因交互而改变屏幕上的内容。例如,在表单中输入内容应更新输入字段,单击“评论”按钮应弹出文本输入字段,单击“购买”应将产品放入购物车。组件需要“记住”当前输入值、当前图像、购物车等内容。在 ReactPy 中,这种特定于组件的内存是通过一个名为“hook”的“hook”创建和更新的,use_state()该“hook”分别创建状态变量状态设置器

main.py

数据.json 结果

在 ReactPy 中use_state, 以及名称以 开头的任何其他函数都use称为“钩子”。这些是特殊函数,只能在 ReactPy 渲染时调用。它们让您“挂钩”ReactPy 组件的不同功能,其中只是其中之一。

项目地址:https://github.com/reactive-python/reactpy

开发增删改查时,往往会先开发新增功能,因为有了新增功能,才有了录入数据的窗口。有了数据,你要删、要改、要查,才能水到渠成,顺理成章。在Web开发中,新增数据,往往是通过表单的方式进行录入的。

9.1 新建forms

为了方便表单的处理,Django3.0专门提供了对应的框架。应用时,你可以用鼠标右键department目录,新建一个forms.py文件。

from django import forms
from django.forms import widgets
from django.core.exceptions import ValidationError
import re


class DepartmentForm(forms.Form):
    name=forms.CharField(
        label='部门名称:',
        required=True,
        max_length=120,
        error_messages={
            'required': '部门名称不能为空,请输入!',
            'max_length': '部门名称太长了!'},
        widget=widgets.TextInput(attrs={"placeholder": 
                                 "请输入部门名称", "class": "form-control"}))

    leader=forms.CharField(
        label='负 责 人:',
        required=True,
        max_length=60,
        error_messages={
            'required': '负责人不能为空,请输入!',
            'max_length': '负责人名字太长了!'},
        widget=widgets.TextInput(attrs={"placeholder": 
                                 "请输入负责人", "class": "form-control"}))

    phone=forms.CharField(
        label='手 机 号:',
        required=True,
        error_messages={
            'required': '手机号不能为空,请输入!'},
        widget=widgets.NumberInput(attrs={"placeholder": 
                                  "请输入手机号", "class": "form-control"}))

    choice=(("集团总部", "集团总部"), ("华南区域", "华南区域"), 
              ("华北区域", "华北区域"), ("华东区域", "华东区域"),)
    region=forms.CharField(
        label='所在区域:',
        initial='集团总部',
        widget=widgets.Select(choices=choice, 
                              attrs={"class": "form-control"}))

    address=forms.CharField(
        required=False,
        label='办公位置:',
        max_length=200,
        widget=widgets.TextInput(attrs={"placeholder": "办公所在位置", 
                                        "class": "form-control"}))

    longitude=forms.DecimalField(
        required=False,
        label='区域经度:',
        widget=widgets.NumberInput(attrs={"placeholder": "区域所在经度", 
                                          "class": "form-control"}))

    latitude=forms.DecimalField(
        required=False,
        label='区域纬度:',
        widget=widgets.NumberInput(attrs={"placeholder": "区域所在纬度", 
                                          "class": "form-control"}))

    # 手机号验证
    def clean_phone(self):
        phone=self.cleaned_data.get('phone')
        mobile_re=re.compile(r'^(13[0-9]|15[012356789]|17[678]
                               |18[0-9]|14[57])[0-9]{8}$')
        if not mobile_re.match(phone):
            raise ValidationError('请输入正确的手机号!')
        return phone

别看内容挺多的,其实都是重复的,知道其中一项的类型属性定义,其他的也妥妥的了。类型属性之前整理过,这里就不重复出现了,有关表单的控件,往下看。

1. 表单控件

Web开发语言的控件,其实就是对HTML标签的封装和提供相关配置,目的是为了方便实现表单功能,方便程序员快速实现数据收集的功能。表单控件内容如下。

2. 控件属性

表单控件属性中,关键的点在于验证。在form中自定义验证规格有3种方式,第1种是随意定义函数名,然后用validators属性指定,函数要先定义;第2种是用约定成俗的方法,以clean_字段名定义函数名,表单在验证时,会自动读取;第3种,是在clean()函数内进行统一定义。表单控件属性选项一览表。

9.2 业务逻辑

有了表单forms.py,没有业务逻辑views.py的助力,它在模板中将手足无措,华而不实。在views.py中实现的代码来了。

from django.shortcuts import render
from department.forms import DepartmentForm
from department.models import Department


# 判断部门名称是否已存在
def name_exist(name):
    is_exist=Department.objects.filter(name=name).exists()
    if is_exist:
        return True
    else:
        return False


# 添加数据
def create(request):
    form=DepartmentForm()
    if request.method=='POST':
        msg=''
        form=DepartmentForm(request.POST)
        if form.is_valid():
            name=form.cleaned_data.get('name')
            if name_exist(name):
                form.add_error('name', "部门名称已存在,请确认!")
                msg=''
            else:
                department=Department()
                department.name=name
                department.leader=form.cleaned_data.get('leader')
                department.phone=form.cleaned_data.get('phone')
                department.region=form.cleaned_data.get('region')
                department.address=form.cleaned_data.get('address')
                department.longitude=form.cleaned_data.get('longitude')
                department.latitude=form.cleaned_data.get('latitude')
                department.save()
                msg='恭喜你,创建部门信息成功!'
                # 重置表单内容(清空)
                form=DepartmentForm()
        return render(request, 'department/create.html', 
                      {'form': form, 'msg': msg})
    else:
        return render(request, 'department/create.html', {'form': form})

9.3 urls配置

有关业务逻辑在views.py实现之后,需要在department/urls.py里进行配置,才能提供地址供用户进行访问。

from django.urls import path
from . import views

app_name='department'
urlpatterns=[
    path('create/', views.create, name='create'),
]

对了,别忘记在sales/urls.py中进行登记。

from django.contrib import admin
from django.urls import path
from django.urls import include

urlpatterns=[
    path('base/', include('base.urls')),
    path('department/', include('department.urls')),
    path('admin/', admin.site.urls),
]

9.4 模板文件

一切业务相关的工作准备就绪,就差模板靓丽转身。在templates/department下,新建模板文件create.html。有了模板文件,表单Form就有了展露才华的机会。

表单布局,如果想要以表格的方式见人,可选用form.as_table;如果想要以段落的方式,可选用form.as_p;如果想要以序列的方式见人,可选用form.as_ul。具体选用哪种,请看需求文档中界面的要求。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新增部门</title>
</head>
<body>
{{ msg }}
<form action="{% url 'department:create' %}" method="post" novalidate>
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">保存</button>
    <button type="reset">清空</button>
</form>
</body>
</html>

温馨提示:在html5的form中加入novalidate属性,是为了禁用其自带的校验功能。

用form.as_p布局的效果,可能不是你喜欢的类型,但测试form.as_p和form.as_ul之后,你就不会这样想了。因为它们会让你大失所望,大跌眼镜。布局尽管不太如意,但请你不要捶胸顿足,因为捶胸很痛的。

运行项目之后,在浏览器输入http://127.0.0.1:8000/department/create/,输出结果如下。

好了,有关部门管理系统的表单内容,老陈讲完了,如果觉得对你有所帮助,希望你能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注:老陈说编程。我在分享Python,前端、Java和App方面的干货。关注我,没错的。

#Python##Django##程序员##Web##项目实战#

件夹结构(只有 2 个文件)

templates
    |- index.html
app.py

templates/index.html 中的代码

<h1>Here is a form</h1>

<!-- method="post" 在这里非常重要 --> 
<!-- 当我们点击“提交”时,这个表单会自动生成一个 --> 
<!--使用相同端点向后端发送 HTTP POST 请求 --> 
<form method="post">
    <!-- 给我们的输入元素一个名字非常重要 -- > 
    <!-- 它有助于稍后在后端识别输入值 -->  
    Enter your name: <input name="name"> <br><br>

    Enter your email: <input name="email"> <br><br>

    <!-- 单击此提交按钮会提交一个 HTTP POST 请求 --> 
    <!-- 到相同的端点,例如。http://localhost:5000/ --> 
    <button type="submit">submit</button>
</form>

app.py 中的代码

from flask import Flask, render_template, request

app=Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method=='GET':
        return render_template('index.html')

    name=request.form.get('name')
    email=request.form.get('email')

    print(name, email)

    return render_template('index.html')

if __name__=='__main__':
    app.run()

会发生什么

这是我们应用程序的外观:

如果我们填写姓名和电子邮件字段并点击“提交”,它们将被发送到我们的 Python Flask 后端。

这里的后端程序只是打印了名称“tim”和电子邮件“tim@gmail.com”。

结论

当我们在浏览器上访问 http://localhost:5000/ 时,实际上是在发出 HTTP GET 请求。

当我们点击提交按钮时,我们正在向同一端点 http://localhost:5000/ 发出 HTTP POST 请求。 因此,我们必须确保在我们的后端,这个端点能够处理 HTTP POST 请求。

希望本文对您有帮助!