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 請求。

希望本文對您有幫助！

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

ReactPy：在 Python 中構建用戶界面的庫

概覽

學習 ReactPy

入門

創建接口

添加交互性

9.1 新建forms

9.2 業務邏輯

9.3 urls配置

9.4 模板文件

件夾結構（只有 2 個文件）

templates/index.html 中的代碼

app.py 中的代碼

會發生什么

結論

您的項目需求