ReactPy：在 Python 中構(gòu)建用戶界面的庫

暑期創(chuàng)作大賽#

ReactPy 是一個用 Python 構(gòu)建用戶界面而無需使用 Javascript 的庫。ReactPy 接口由外觀和行為類似于ReactJS中的組件組成。ReactPy 的設(shè)計考慮到簡單性，可供那些沒有 Web 開發(fā)經(jīng)驗的人使用，同時也足夠強大，可以隨著您的雄心壯志而成長。

概覽

要大致了解如何在 ReactPy 中編寫應(yīng)用程序，請查看下面的微型“hello world”應(yīng)用程序：

main.py

嘗試單擊 結(jié)果選項卡以查看顯示的內(nèi)容！

那么這段代碼到底做了什么？首先，它從中導(dǎo)入一些reactpy用于描述和執(zhí)行應(yīng)用程序的工具。然后，我們創(chuàng)建一個App函數(shù)來定義應(yīng)用程序顯示的內(nèi)容。具體來說，它顯示一種稱為h1 節(jié)標(biāo)題的 HTML 元素。但重要的是，@component裝飾器已應(yīng)用于該App函數(shù)以將其變成組件。最后，我們通過將組件傳遞給函數(shù)來運行開發(fā) Web 服務(wù)器。Apprun()

筆記

請參閱在生產(chǎn)中運行 ReactPy以了解如何使用生產(chǎn)級服務(wù)器來運行 ReactPy。

學(xué)習(xí) ReactPy

本文檔分為多個章節(jié)，通過詳細(xì)的解釋和大量示例逐步向您介紹概念。您應(yīng)該隨意深入研究任何看起來有趣的內(nèi)容。雖然每一章都假設(shè)了前面的知識，但當(dāng)您遇到不熟悉的概念時，您應(yīng)該尋找鏈接來幫助您找到最初教授該概念的地方。

入門

如果您想按照以下部分中的示例進(jìn)行操作，則需要從這里開始，以便可以安裝 ReactPy。本節(jié)還包含有關(guān)如何在不同上下文中運行 ReactPy 的更多詳細(xì)信息。例如，如果您想將 ReactPy 嵌入到現(xiàn)有應(yīng)用程序中，或者在 Jupyter Notebook 中運行 ReactPy，您可以在此處學(xué)習(xí)如何執(zhí)行這些操作。

安裝 ReactPy 并以各種不同的方式運行它 - 使用不同的 Web 服務(wù)器和框架。您甚至可以將 ReactPy 嵌入到現(xiàn)有應(yīng)用程序中。

創(chuàng)建接口

ReactPy 是一個用于制作用戶界面 (UI) 的 Python 包。這些界面是由按鈕文本和圖像等小功能元素構(gòu)建的。ReactPy 允許您將這些元素組合成可重用的“組件”。在接下來的部分中，您將了解如何創(chuàng)建這些 UI 元素并將其組織成組件。然后，您將使用這些知識從原始數(shù)據(jù)創(chuàng)建界面：

main.py

學(xué)習(xí)從基本 HTML 元素和可重用組件構(gòu)建用戶界面。

添加交互性

組件通常需要因交互而改變屏幕上的內(nèi)容。例如，在表單中輸入內(nèi)容應(yīng)更新輸入字段，單擊“評論”按鈕應(yīng)彈出文本輸入字段，單擊“購買”應(yīng)將產(chǎn)品放入購物車。組件需要“記住”當(dāng)前輸入值、當(dāng)前圖像、購物車等內(nèi)容。在 ReactPy 中，這種特定于組件的內(nèi)存是通過一個名為“hook”的“hook”創(chuàng)建和更新的，use_state()該“hook”分別創(chuàng)建狀態(tài)變量和 狀態(tài)設(shè)置器：

main.py

數(shù)據(jù).json 結(jié)果

在 ReactPy 中use_state，以及名稱以開頭的任何其他函數(shù)都use稱為“鉤子”。這些是特殊函數(shù)，只能在 ReactPy 渲染時調(diào)用。它們讓您“掛鉤”ReactPy 組件的不同功能，其中只是其中之一。

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

開發(fā)增刪改查時，往往會先開發(fā)新增功能，因為有了新增功能，才有了錄入數(shù)據(jù)的窗口。有了數(shù)據(jù)，你要刪、要改、要查，才能水到渠成，順理成章。在Web開發(fā)中，新增數(shù)據(jù)，往往是通過表單的方式進(jìn)行錄入的。

9.1 新建forms

為了方便表單的處理，Django3.0專門提供了對應(yīng)的框架。應(yīng)用時，你可以用鼠標(biāo)右鍵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='負(fù) 責(zé) 人:',
        required=True,
        max_length=60,
        error_messages={
            'required': '負(fù)責(zé)人不能為空，請輸入!',
            'max_length': '負(fù)責(zé)人名字太長了!'},
        widget=widgets.TextInput(attrs={"placeholder": 
                                 "請輸入負(fù)責(zé)人", "class": "form-control"}))

    phone=forms.CharField(
        label='手 機(jī) 號:',
        required=True,
        error_messages={
            'required': '手機(jī)號不能為空，請輸入!'},
        widget=widgets.NumberInput(attrs={"placeholder": 
                                  "請輸入手機(jī)號", "class": "form-control"}))

    choice=(("集團(tuán)總部", "集團(tuán)總部"), ("華南區(qū)域", "華南區(qū)域"), 
              ("華北區(qū)域", "華北區(qū)域"), ("華東區(qū)域", "華東區(qū)域"),)
    region=forms.CharField(
        label='所在區(qū)域:',
        initial='集團(tuán)總部',
        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='區(qū)域經(jīng)度:',
        widget=widgets.NumberInput(attrs={"placeholder": "區(qū)域所在經(jīng)度", 
                                          "class": "form-control"}))

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

    # 手機(jī)號驗證
    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('請輸入正確的手機(jī)號!')
        return phone

別看內(nèi)容挺多的，其實都是重復(fù)的，知道其中一項的類型屬性定義，其他的也妥妥的了。類型屬性之前整理過，這里就不重復(fù)出現(xiàn)了，有關(guān)表單的控件，往下看。

1. 表單控件

Web開發(fā)語言的控件，其實就是對HTML標(biāo)簽的封裝和提供相關(guān)配置，目的是為了方便實現(xiàn)表單功能，方便程序員快速實現(xiàn)數(shù)據(jù)收集的功能。表單控件內(nèi)容如下。

2. 控件屬性

表單控件屬性中，關(guān)鍵的點在于驗證。在form中自定義驗證規(guī)格有3種方式，第1種是隨意定義函數(shù)名，然后用validators屬性指定，函數(shù)要先定義；第2種是用約定成俗的方法，以clean_字段名定義函數(shù)名，表單在驗證時，會自動讀取；第3種，是在clean()函數(shù)內(nèi)進(jìn)行統(tǒng)一定義。表單控件屬性選項一覽表。

9.2 業(yè)務(wù)邏輯

有了表單forms.py，沒有業(yè)務(wù)邏輯views.py的助力，它在模板中將手足無措，華而不實。在views.py中實現(xiàn)的代碼來了。

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


# 添加數(shù)據(jù)
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', "部門名稱已存在,請確認(rèn)!")
                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='恭喜你,創(chuàng)建部門信息成功!'
                # 重置表單內(nèi)容(清空)
                form=DepartmentForm()
        return render(request, 'department/create.html', 
                      {'form': form, 'msg': msg})
    else:
        return render(request, 'department/create.html', {'form': form})

9.3 urls配置

有關(guān)業(yè)務(wù)邏輯在views.py實現(xiàn)之后，需要在department/urls.py里進(jìn)行配置，才能提供地址供用戶進(jìn)行訪問。

from django.urls import path
from . import views

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

對了，別忘記在sales/urls.py中進(jìn)行登記。

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 模板文件

一切業(yè)務(wù)相關(guān)的工作準(zhǔn)備就緒，就差模板靚麗轉(zhuǎn)身。在templates/department下，新建模板文件create.html。有了模板文件，表單Form就有了展露才華的機(jī)會。

表單布局，如果想要以表格的方式見人，可選用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/，輸出結(jié)果如下。

好了，有關(guān)部門管理系統(tǒng)的表單內(nèi)容，老陳講完了，如果覺得對你有所幫助，希望你能轉(zhuǎn)發(fā)點贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點贊，就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵。

一個當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗。想學(xué)編程的朋友，可關(guān)注：老陳說編程。我在分享Python，前端、Java和App方面的干貨。關(guān)注我，沒錯的。

#Python##Django##程序員##Web##項目實戰(zhàn)#

件夾結(jié)構(gòu)（只有 2 個文件）

templates
    |- index.html
app.py

templates/index.html 中的代碼

<h1>Here is a form</h1>

<!-- method="post" 在這里非常重要 --> 
<!-- 當(dāng)我們點擊“提交”時，這個表單會自動生成一個 --> 
<!--使用相同端點向后端發(fā)送 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()

會發(fā)生什么

這是我們應(yīng)用程序的外觀：

如果我們填寫姓名和電子郵件字段并點擊“提交”，它們將被發(fā)送到我們的 Python Flask 后端。

這里的后端程序只是打印了名稱“tim”和電子郵件“tim@gmail.com”。

結(jié)論

當(dāng)我們在瀏覽器上訪問 http://localhost:5000/ 時，實際上是在發(fā)出 HTTP GET 請求。

當(dāng)我們點擊提交按鈕時，我們正在向同一端點 http://localhost:5000/ 發(fā)出 HTTP POST 請求。因此，我們必須確保在我們的后端，這個端點能夠處理 HTTP POST 請求。

希望本文對您有幫助！

在線咨詢

上一篇：小白必看：HTML5入門教程
下一篇：IntelliJ IDEA 部署 Web 項目，終于

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

ReactPy：在 Python 中構(gòu)建用戶界面的庫

概覽

學(xué)習(xí) ReactPy

入門

創(chuàng)建接口

添加交互性

9.1 新建forms

9.2 業(yè)務(wù)邏輯

9.3 urls配置

9.4 模板文件

件夾結(jié)構(gòu)（只有 2 個文件）

templates/index.html 中的代碼

app.py 中的代碼

會發(fā)生什么

結(jié)論

您的項目需求