【Youtobe trydjango】Django2.2教程和React实战系列九【Django模型表单、HTML原生表单、纯Django表单、表单验证方法和初始化方法】

最新推荐文章于 2022-01-03 23:22:14 发布
最新推荐文章于 2022-01-03 23:22:14 发布
阅读量190 收藏
点赞数
分类专栏： # 3.2. django
0.0
本文链接：https://blog.csdn.net/qq_33997198/article/details/107670929
版权

【Youtobe trydjango】Django2.2教程和React实战系列九【Django模型表单、HTML原生表单、纯Django表单、表单验证方法和初始化方法】

1. Django模型表单

1.1. 模型表单

新建表单模型文件：src\trydjango\products\forms.py

from django import forms

from .models import Product


class ProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = [
            'title',
            'description',
            'price',
        ]

1.2. 视图函数

src\trydjango\products\views.py视图中新增视图函数product_create_view：

from .forms import ProductForm

def product_create_view(request):
    form = ProductForm(request.POST or None)
    if form.is_valid():
        form.save()

    context = {
        'form': form,
    }
    return render(request, "products/product_create.html", context)

1.3. 前端模板

在products应用中新建模板文件templates\products\product_create.html

{% extends 'base.html' %}

{% block content %}
<form>
{{ form.as_p }}
<input type='submit' value='Save' />
</form>
{% endblock %}

1.4. 路由

项目路由中urls.py新增

from products.views import product_create_view

path('create/', product_create_view),       # 创建产品

1.5. 效果

效果
在这里插入图片描述

在这里插入图片描述

products应用中的模板文件templates\products\product_create.html修改为

{% extends 'base.html' %}

{% block content %}
<form method='POST'> {% csrf_token %}
{{ form.as_p }}
<input type='submit' value='Save' />
</form>
{% endblock %}

重新提交创建请求 查看报错：
在这里插入图片描述

原因是因为模型中的必填项布尔类型字段featured没有值，给一个默认值，并进行数据库迁移操作：

在这里插入图片描述

重新测试，成功创建数据：

在这里插入图片描述

想要做出一个插入成功后，后端再返回一个空form效果，只需要在views.py增加这样一句：
form = ProductForm()
在这里插入图片描述

重启开发服务器后，插入数据后页面重新载入一个空表单。

2. HTML原生表单

2.1. 修改前端文件

templates\products\product_create.html

{% extends 'base.html' %}

{% block content %}
<form method='POST'>
    <input type='text' name='title' placeholder='Your title'>
    <input type='submit' value='Save' />
</form>
{% endblock %}

视图函数
src\trydjango\products\views.py视图中修改视图函数product_create_view：

def product_create_view(request):
    context = {}
    return render(request, "products/product_create.html", context)

解决csrf
待定
在这里插入图片描述

表单方法改成GET <form method='GET'>试一下
在这里插入图片描述
表单改成<form action='/search/' method='POST'>试一下，相当于跳转到另一个url
在这里插入图片描述
将html这两行改成

<form action='https://www.bing.com/search' method='GET'> 
    <input type='text' name='q' placeholder='Your search'>

测试下
在这里插入图片描述

表单中添加csrf防中间人攻击
<form action='.' method='POST'> {% csrf_token %}
页面提交不会报403

views.py
打印请求看一下

def product_create_view(request):
    print(request.GET)
    print(request.POST)
    context = {}
    return render(request, "products/product_create.html", context)

在这里插入图片描述

在这里插入图片描述
product_create_view方法：

def product_create_view(request):
    # print(request.GET)
    # print(request.POST['title'])
    if request.method == 'POST':
        my_new_title = request.POST.get('title')
        print(my_new_title)
        # Product.objects.create(title=my_new_title)
    context = {}
    return render(request, "products/product_create.html", context)

在这里插入图片描述

3. 纯Django表单

3.1. 表单模型

forms.py

from django import forms

class RawProductForm(forms.Form):
    title       = forms.CharField()
    description = forms.CharField()
    price = forms.DecimalField()

3.2. 视图

views.py.py

from .forms import ProductForm, RawProductForm

def product_create_view(request):
    my_form = RawProductForm()
    context = {
        'form': my_form,
    }
    return render(request, "products/product_create.html", context)

3.3. 模板

form.as_ul

{% extends 'base.html' %}

{% block content %}
<form action='.' method='POST'> {% csrf_token %}
    {{ form.as_ul }}
    <input type='submit' value='Save' />
</form>
{% endblock %}

form.as_p

在这里插入图片描述

views.py
探究下Django的表单验证RawProductForm方法塞request.POST参数：

def product_create_view(request):
    my_form = RawProductForm(request.POST)
    context = {
        'form': my_form,
    }
    return render(request, "products/product_create.html", context)

会提示必填字段
在这里插入图片描述
添加表单验证：

def product_create_view(request):
    my_form = RawProductForm()
    if request.method == 'POST':
        my_form = RawProductForm(request.POST)
        if my_form.is_valid():
            # now the data is good
            print(my_form.cleaned_data)
        else:
            print(my_form.errors)
    context = {
        'form': my_form,
    }
    return render(request, "products/product_create.html", context)

在这里插入图片描述

将前端价格输入框改成text类型
在这里插入图片描述
在价格输入框填写非数字提交测试：
前端返回验证表单数据结果：
在这里插入图片描述
后端请求：
在这里插入图片描述
验证有了之后，在验证表单数据没问题后，可以使用django orm将数据保存进数据库：

Product.objects.create(my_form.cleaned_data)

在这里插入图片描述
测试一下，会报参数错误，
在这里插入图片描述
在参数前加**代表将一个可变的关键字参数的字典传给函数实参
在这里插入图片描述
此时数据已经创建成功
在这里插入图片描述

3.4. 表单属性

forms.py

class RawProductForm(forms.Form):
    title = forms.CharField(label='')
    description = forms.CharField(required=False)
    price = forms.DecimalField(initial=66.6)

在这里插入图片描述

修改下属性

class RawProductForm(forms.Form):
    title = forms.CharField(label='', widget=forms.TextInput(attrs={'placeholder': "Your title"}))
    description = forms.CharField(
        required=False,
        widget=forms.Textarea(
            attrs={
                'class': "new-class-name two",
                'id': "my-id-for-textarea",
                'rows': 20,
                'cols': 100,
            }))
    price = forms.DecimalField(initial=66.6)

在这里插入图片描述

3.5. 表单验证方法

将上面views.py的原生Django表单对应的product_create_view方法注释掉，回到最开始的Django模型表单对应的方法，解开注释：

forms.py然后将模型RawProductForm的字段复制到ProductForm中：

在这里插入图片描述
ProductForm模型添加clean_title验证标题的方法案例：

class ProductForm(forms.ModelForm):
    title = forms.CharField(label='', widget=forms.TextInput(attrs={'placeholder': "Your title"}))
    description = forms.CharField(
        required=False,
        widget=forms.Textarea(
            attrs={
                'class': "new-class-name two",
                'id': "my-id-for-textarea",
                'rows': 20,
                'cols': 100,
            }))
    price = forms.DecimalField(initial=66.6)

    class Meta:
        model = Product
        fields = [
            'title',
            'description',
            'price',
        ]
        
    def clean_title(self, *args, **kwargs):
        title = self.cleaned_data.get('title')
        if "admin" in title:
            return title
        else:
            raise forms.ValidationError("This is not a valid title")

测试结果
在这里插入图片描述
clean_title方法改成

    def clean_title(self, *args, **kwargs):
        title = self.cleaned_data.get('title')
        if not "admin" in title:
            raise forms.ValidationError("This is not a valid title")
        if not "news" in title:
            raise forms.ValidationError("This is not a valid title")
        return title

在这里插入图片描述

在这里插入图片描述

再来一个验证email字段的例子：

class ProductForm(forms.ModelForm):
    title       = forms.CharField(label='', widget=forms.TextInput(attrs={'placeholder': "Your title"}))
    email       = forms.EmailField()
    description = forms.CharField(
        required=False,
        widget=forms.Textarea(
            attrs={
                'class': "new-class-name two",
                'id': "my-id-for-textarea",
                'rows': 20,
                'cols': 100,
            }))
    price       = forms.DecimalField(initial=66.6)

    class Meta:
        model = Product
        fields = [
            'title',
            'email',
            'description',
            'price',
        ]

    def clean_title(self, *args, **kwargs):
        title = self.cleaned_data.get('title')
        if not "admin" in title:
            raise forms.ValidationError("This is not a valid title")
        if not "news" in title:
            raise forms.ValidationError("This is not a valid title")
        return title
    
    def clean_email(self, *args, **kwargs):
        email = self.cleaned_data.get('email')
        if not "edu" in email:
            raise forms.ValidationError("This is not a valid email")
        return email

在这里插入图片描述
邮箱中包含edu字符串则可以通过验证

3.6. 表单初始值

将刚才views.py中的视图函数product_create_view注释并复制一份，修改成如下：

def product_create_view(request):
    initial_data = {
        'title': 'This is a initial valid admin news title!',
    }
    # obj = Product.objects.get(id=1)
    form = RawProductForm(request.POST or None, initial=initial_data)
    
    context = {
        'form': form,
    }
    return render(request, "products/product_create.html", context)

这一个RawProductForm 纯Django 表单初始化字段值的例子：

在这里插入图片描述

def product_create_view(request):
    initial_data = {
        'title': 'This is a initial valid admin news title!',
    }
    obj = Product.objects.get(id=1)
    form = ProductForm(request.POST or None, initial=initial_data, instance=obj)
    
    context = {
        'form': form,
    }
    return render(request, "products/product_create.html", context)

在这里插入图片描述
加数据验证后保存信息

def product_create_view(request):
    initial_data = {
        'title': 'This is a initial valid admin news title!',
    }
    obj = Product.objects.get(id=1)
    form = ProductForm(request.POST or None, initial=initial_data, instance=obj)
    if form.is_valid():
        form.save()
        form = ProductForm()

    context = {
        'form': form,
    }
    return render(request, "products/product_create.html", context)

在这里插入图片描述
然后再刷新url 可以看到加载的id为1的数据被修改掉了
在这里插入图片描述
从数据库看下也是一样的：
在这里插入图片描述

disabled_csdN
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
django react_带有Django和React的全栈— Django
weixin_26738395的博客
08-27 1195
django reactI know it’s a very comprehensive title so I’ll keep it as simple as possible. 我知道这是一个非常全面的标题，所以我将使其尽可能简单。 In this article, we will make a book application from installation to the final p...
OC仿YouTobe下拉播放器
02-27
【标题】"OC仿YouTobe下拉播放器"是一个Objective-C编程项目，目标是实现一个类似YouTube应用中的下拉式视频播放功能。在iOS应用开发中，这种设计模式允许用户在浏览内容的同时观看视频，提供了更丰富的用户体验。 ...
django-react-csrftoken：一个嵌入式React组件，用于使用Django CSRF中间件令牌提交表单
02-03
DjangoCSRFToken 一个嵌入式React组件，用于使用Django CSRF中间件令牌提交表单。 安装 npm install --save django-react-csrftoken 用法 import React from 'react' ; import DjangoCSRFToken from 'django-react-csrftoken' class MyLoginForm extends React . Component { render ( ) { return ( < div xss=removed>
Django Form 初始化数据
weixin_30840573的博客
07-25 1096
修改 urls.py 添加 path('initial.html', views.initial), 修改 models.py class UserInfo(models.Model): name = models.CharField(max_length=32) ut = models.ForeignKey('UserType', on_delete=mode...
django与react的结合
youyou_LIN的博客
05-05 7910
初学react，在学完基本的语法之后，想要做一个基本的小demo出来，首先分别建好一个python的项目，我使用的框架为django,然后再创建好一个react的项目，接下来就是django与react的结合了（嗯，困扰了我一天多的问题）。首先，将react项目进行编译打包（由于我创建react项目用的是create-react-app,所以直接运行npm run start就可以了），完成后会生...
Django模型表单重写初始化方法设置css后，导致数据验证异常的解决方法
小宝不姓韦的专栏
01-03 730
Django的DecimalField设置完全正确，但运行时把它当作int类型进行校验，无法输入小数。原来是重设了渲染时的attribute，导致原有的校验机制出现误判了。最终靠手动补充相关attribute修复问题 。
【Youtobe trydjango】Django2.2教程和React实战系列一【项目简介 | 搭建 | 工具】
本博客暂停使用
01-14 580
最后更新：2020年7月17日，本文将准备好django项目并为之后熟悉掌握django核心内容做准备！
【Youtobe trydjango】Django2.2教程和React实战系列十【动态路由、app内部路由】
本博客暂停使用
07-31 239
动态路由、app内部路由
【Youtobe trydjango】Django2.2教程和React实战系列七【模板templates和Django模板引擎】
本博客暂停使用
07-28 149
模板与模板引擎
【Youtobe trydjango】Django2.2教程和React实战系列五【python shell操作models模型】
本博客暂停使用
07-27 138
用python shell操作models，修改models并进行数据库迁移
golang http 连接超时和传输超时的例子
09-19
// 创建表单数据。 data := make(url.Values) data["name"] = []string{"baixs"} data["hobby"] = []string{"running"} // 发送请求并获取响应。 resp, err := c.Do(req) if err != nil { fmt.Println("do ...
DragLayout_youtobe
06-10
【DragLayout_youtobe】项目是一个基于Java编程语言实现的仿YouTube视频拖动放大缩小功能的布局组件。这个项目的主要目标是提供一个用户界面交互体验，允许用户通过拖动视频来实现播放区域的放大和缩小，类似于...
YouTube-Tutorials--Italian:来自我的意大利YouTube频道和网站ProgrammareInPython.it的（某些）编程教程的源代码。 这只是内容的一小部分-Website source code program
03-25
链接ai视频教程函授 快来Creare Un Port Scanner TCP多线程： : 每个智能手机（e桌面！）上的Creare App，以及Python e Kivy： ://bit.ly/app-smartphone-python Riconoscimento Facciale da Immagini-Parte Uno...
基于Bi-LSTM-Attention模型的人体行为识别算法
02-06
针对长短时记忆网络(LSTM)不能有效地提取动作前后之间相互关联的信息导致行为识别率偏低的问题,提出了一...通过Action Youtobe和KTH人体行为数据集与现有的方法进行比较,实验结果表明,本文算法有效地提高了行为识别率。
【Youtobe trydjango】Django2.2教程和React实战系列四【创建Django应用】
本博客暂停使用
07-21 188
这一接主要熟悉dajngo如何创建应用并进行数据库迁移
upstream connect error or disconnect/reset before headers. reset reason: connection termination
热门推荐
本博客暂停使用
01-12 4万+
upstream connect error or disconnect/reset before headers. reset reason: connection termination错误 最后删除相关pod重启才成功
调用Django接口‘Connection aborted.‘, RemoteDisconnected(‘Remote end closed connection without response‘
本博客暂停使用
01-18 6018
调用Django接口，出现错误requests.exceptions.ConnectionError: ('Connection aborted.', RemoteDisconnected('Remote end closed connection without response',))
django应用——股票信息系统&校友录系统
本博客暂停使用
07-01 1228
django2.2 mysql5.7 bootstrap pandas简单应用，安全防护没有很全面，贯通下流程。bootstrap前端落后时代了，不准备花太多功夫使用。
如何利用 推特、youtobe 等国外平台进行 编程技术、代码、技术栈的学习
最新发布
04-04
在推特、youtobe等国外平台上，有许多知名...总之，利用推特、youtobe等国外平台进行编程技术、代码、技术栈的学习需要多方面的参与和学习，要掌握好自己的学习方法和步骤，才能更好地进行学习和提高自己的技术水平。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值