暑期创作大赛#
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 嵌入到现有应用程序中,或者在 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开发中,新增数据,往往是通过表单的方式进行录入的。
为了方便表单的处理,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()函数内进行统一定义。表单控件属性选项一览表。
有了表单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})
有关业务逻辑在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),
]
一切业务相关的工作准备就绪,就差模板靓丽转身。在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##项目实战#
templates
|- index.html
app.py
<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>
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 请求。
希望本文对您有帮助!
*请认真填写需求信息,我们会在24小时内与您取得联系。