【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)

这篇具有很好参考价值的文章主要介绍了【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


欢迎关注 『Django 网页Web开发』 系列,持续更新中
欢迎关注 『Django 网页Web开发』 系列,持续更新中

注意 正规写法是 ModelForm,下面文章我多

实现效果

快捷的表单生成,避免繁琐的写法。


url.py

from django.urls import path

from app01 import views

urlpatterns = [

    path('testOrgion/', views.testOrgion),#原始方法
    path('testForm/', views.testForm),#form方法
    path('testMoudleForm/', views.testMoudleForm),#moudleForm方法

]


新建3个html文件

【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)

数据库连接

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 驱动
        'NAME': 'day16',  # 数据库名字
        'USER': 'root',  # mysql用户名
        'PASSWORD': '123456',  # mysql密码
        'HOST': '127.0.0.1',  # 本机安装了MySQL
        'PORT': 3306,  # 端口
    }
}

model.py 数据表

from django.db import models

class TestForm(models.Model):
    """测试学习form表"""
    username=models.CharField(verbose_name="用户名",max_length=10)
    password=models.CharField(verbose_name="密码",max_length=20)

【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)

1. 原始方法

如果有很多字段要显示,明显是比较麻烦的,而且也存在安全的问题,一般只是初学数据库传值的时候使用,后面都不用。

view.py

def testOrgion(request):
    if request.method == "GET":#第一次访问是get请求,展示表单页面
        return render(request, 'testOrgion.html')
    # 第二次访问是POST请求,表示传递数据
    # 获取用户POST提交过来的数据(title输入为空)
    username = request.POST.get("username")
    password = request.POST.get("password")

    # 保存到数据库
    models.TestForm.objects.create(username=username,password=password)

    # 重定向回部门列表
    return render(request, "testOrgion.html")

testOrgion.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testOrgion</title>
</head>
<body>

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label>用户名</label>
        <input type="text" class="form-control" placeholder="用户名" name="username"/>
    </div>
    <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control" placeholder="密码" name="password"/>
    </div>
    <button type="submit" class="btn btn-primary">提 交</button>
</form>

</body>
</html>

【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)
【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)

2. Form方法

form能够比较便捷的生成表单,还有以下优点

  • (1)自动生成HTML表单元素
  • (2)检查表单数据的合法性
  • (3)如果验证错误,重新显示表单(数据不会重置)
  • (4)数据类型转换(字符类型的数据转换成相应的python类型)

这里武老师是在markdown上直接敲的代码是有问题的,所以运行直接报错。(很明显就能看出来一会儿用forms一会儿用form的)而且CharField方法名字写错写成了CharFiled(单词拼错了····)而且好像用的是weight.input不然会报错

username = forms.CharField(widget=forms.Input)
AttributeError: module 'django.forms' has no attribute 'Input'

【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)

核心思路是预先在view.py中就预先写好一个类存放表单各个字段需要用到的组件。

view.py

from django.shortcuts import render, redirect

from app01 import models

#1.先导入forms模块
from django import forms
from django.forms import widgets
#2.创建模板的类
class studyForm(forms.Form):
    username = forms.CharField(widget=widgets.Input)
    password = forms.CharField(widget=widgets.Input)

def testForm(request):
    if request.method == "GET":
        form = studyForm()
        return render(request, 'testForm.html', {"form": form})

testForm.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testForm</title>
</head>
<body>

<h1>1.第一种方法一个个输入字段</h1>
<form method="post">
    {% csrf_token %}
    用户名:{{ form.username }}
    密码: {{ form.password }}
    <!-- <input type="text"  placeholder="姓名" name="username" /> -->
    <!-- <input type="password"  placeholder="姓名" name="password" /> -->
</form>

<h1>2.循环遍历所有</h1>
<form method="post">
    {% csrf_token %}
    {# 使用遍历 #}
    {% for field in form %}
        {{ field.label }}:{{ field }}
    {% endfor %}
</form>

<h1>3.直接打印form</h1>
<form method="post">
    {% csrf_token %}
    {{ form }}
</form>

<h1>4.用form.as_p会换行</h1>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
</form>

</body>
</html>

【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)

3. MoudleForm方法

重点介绍:样式设置,表单验证

给字段设置样式

在widgets中写入属性attrs样式

    #创建子类,选择数据字段,给不同字段设置样式
    class Meta:
        model = models.TestForm  # 选择数据表,model表示读取数据表的指定字段
        # models = models.TestForm #选择数据表,models表示默认读取数据表的所有字段
        fields = ["username", "password"]  # 选择数据表的字段
        widgets = {
            "name": forms.TextInput(attrs={"class": "form-control"}),
            "password": forms.PasswordInput(attrs={"class": "form-control"}),
        }

面向对象的思路,批量添加样式

class StudyModelForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 循环找到所有的插件,添加了class="form-control"
        for name, field in self.fields.items():
            # if name == "password":
            #     continue
            field.widget.attrs = {"class": "form-control", "placeholder": field.label}

错误信息的显示

在html中
错误信息会是一个列表,有很多,但是我们一般性从上到下只提示一个错误信息,比如说用户名不对,密码格式长度也不对,我们只显示列表第0位错误{{ field.errors.0 }},用span标签包起来

                {% for field in form %}
                    <div class="form-group">
                        <label>{{ field.label }}</label>
                        {{ field }}
                        <span style="color: red;">{{ field.errors.0 }}</span>
                    </div>
                {% endfor %}

如何写验证规则

class StudyModelForm(forms.ModelForm):
    # 一般错误检查是非空,如果要有其他检查比如最小长度3,需要像下面这样另外写(回到了form的那种)
    username = forms.CharField(min_length=3, label="用户名")

设置错误信息语言

【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)

LANGUAGE_CODE = 'en-us'#英文
LANGUAGE_CODE = 'zh-hans'#中文

【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)
【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)

view.py

from django.shortcuts import render, redirect

from app01 import models

################################# ModelForm 示例 #################################
from django import forms


# 新建一个StudyModelForm类
class StudyModelForm(forms.ModelForm):
    # 一般错误检查是非空,如果要有其他检查比如最小长度3,需要像下面这样另外写(回到了form的那种)
    username = forms.CharField(min_length=3, label="用户名")

    # 创建子类,选择数据字段,给不同字段设置样式
    class Meta:
        model = models.TestForm  # 选择数据表,model表示读取数据表的指定字段
        # models = models.TestForm #选择数据表,models表示默认读取数据表的所有字段
        fields = ["username", "password"]  # 选择数据表的字段
        # widgets = {
        #     "username": forms.TextInput(attrs={"class": "form-control"}),
        #     "password": forms.PasswordInput(attrs={"class": "form-control"}),
        # }

    # 当做一种固定写法,解释起来比较复杂
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 循环找到所有的插件,添加了class="form-control"
        for name, field in self.fields.items():
            # if name == "password":
            #     continue
            field.widget.attrs = {"class": "form-control", "placeholder": field.label}


def testMoudleForm(request):
    """ 添加用户(ModelForm版本)"""
    if request.method == "GET":
        form = StudyModelForm()
        return render(request, 'testMoudleForm.html', {"form": form})

    # 用户POST提交数据,数据校验。
    form = StudyModelForm(data=request.POST)
    if form.is_valid():
        # {'username': 'ghj', 'password': 'asd'}
        print(form.cleaned_data) #打印我们通过校验的数据

        # models.TestForm.objects.create(username=username, password=password)#可以用form.save()替代
        form.save()  # 如果数据合法,把校验通过的数据保存到数据库
        return redirect('/testMoudleForm/')

    # 校验失败(在页面上显示错误信息)
    return render(request, 'testMoudleForm.html', {"form": form})

testMoudleForm.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testMoudleForm</title>
</head>
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">

<body>
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"> 新建用户 </h3>
        </div>
        <div class="panel-body">
            <form method="post" novalidate>
                {% csrf_token %}

                {% for field in form %}
                    <div class="form-group">
                        <label>{{ field.label }}</label>
                        {{ field }}
                        <span style="color: red;">{{ field.errors.0 }}</span>
                    </div>
                {% endfor %}

                <button type="submit" class="btn btn-primary">提 交</button>
            </form>
        </div>
    </div>
</div>
{#导入jquery和bootstrap,注意要先导入js再导入jquery,顺序的问题#}
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
</body>
</html>


【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)
【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)


总结

大家喜欢的话,给个👍,点个关注!给大家分享更多有趣好玩的Python 网页Web开发知识!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2023 mzh

Crated:2023-3-1

欢迎关注 『Django 网页Web开发』 系列,持续更新中
欢迎关注 『Django 网页Web开发』 系列,持续更新中
【更多内容敬请期待】文章来源地址https://www.toymoban.com/news/detail-471646.html


到了这里,关于【Django 网页Web开发】07. 快捷的表单生成 Form与MoudleForm(保姆级图文)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue + element-ui 循环生成指定form表单

    最近遇到一个需要超级写超级多字段的表单,初略计算大概四十来个吧字段吧,/(ㄒoㄒ)/~~,这也太麻烦了,想了想能不能简单封装一下,找到了个巨人,嗯哼,就踩一下吧 参考文章: Vue3.0 根据JSON对象生成指定form表单 上面文章是vue3的,逻辑都一样。以下是vue2 我的写法 注

    2024年02月11日
    浏览(57)
  • Django实现用户注册登录,表单提交后跳转网页(学习笔记)

    效果图如下:   使用命令提示符,进入想存放项目的目录: 在项目coco目录下新建static文件夹,用于存放网页文件的css,js,imgs 在coco_app目录下新建文件夹templates,用于存放需要用到的HTML网页 打开coco文件夹中的settings.py注册coco_app 引用templates 连接数据库,这里我用的MySQL数据

    2023年04月11日
    浏览(82)
  • 在react antd中动态生成多个 form表单组,包括一个动态添加/删除表单项的功能和一个提交表单的功能

    在这个示例中,我们首先使用 Form.useForm() 创建一个表单实例。接着,我们使用 Form.List 组件来动态生成多个表单项。在 Form.List 组件中,我们使用 fields.map 方法循环渲染每个表单项,并使用 Form.Item 组件包裹每个表单项。在 Form.Item 组件中,我们使用 label 属性指定标签,使用

    2024年02月15日
    浏览(58)
  • 低代码开发重要工具:jvs-form(表单引擎)2.1.7功能清单及新增功能介绍

    在低代码开发平台中,表单是用于收集和编辑数据的页面。它通常用于创建、更新或查看单个记录的详细信息。 jvs-form是jvs快速开发平台的8大引擎的其中之一,它的特点: 与动态模型联动,支持动态的调整物理库表,也就是说无需先建库表,表单根据所需要的数据字段 可以

    2024年02月13日
    浏览(54)
  • 「网页开发|前端开发|Vue」07 前后端分离:如何在Vue中请求外部数据

    本文主要介绍两种在Vue中访问外部API获取数据的方式,通过让Vue通过项目外部的接口来获取数据,而不是直接由项目本身进行数据库交互,可以实现前端代码和后端代码的分离,让两个部分的代码编写更独立高效。 「网页开发|前端开发|Vue」01 快速入门:快速写一个Vue的

    2024年02月09日
    浏览(45)
  • C#winform软件实现一次编译,跨平台windows和linux兼容运行,兼容Visual Studio原生界面Form表单开发

    微软的.net core开发工具,目前来看,winform界面软件还没有打算要支持linux系统下运行的意思,要想让c#桌面软件在linux系统上运行,开发起来还比较麻烦。微软只让c#的控制台软件支持在linux运行。 我想到的一个方案是自定义封装软件的System.Windows.Forms组件,把支持windows和lin

    2024年02月08日
    浏览(65)
  • Django学习记录:初步认识django以及实现了简单的网页登录页面的前后端开发

    1、可以先删去template文件夹,并在setting里面删掉这一行 2、在pycharm中创建app: 3、启动app:编写URL与视图函数关系【urls.py】 ​ 编写视图函数【views.py】 ​ 启动pycharm项目 4、引用静态文件 其中有两个文件的导入:(jquery和bootstrap) jquery:https://code.jquery.com/jquery-3.6.0.min.js 可

    2024年02月14日
    浏览(47)
  • 【Web网页制作】影视主题网页制作web页面开发(附源码)

    【 写在前面 】 其实之前我就写过一篇关于我的家乡的页面,也有不少网友和我私下反馈,让我多出一些关于页面制作的,于是乎我就今天晚上抽出点时间来整理一篇关于影视内容的web页面制作,希望能够得到大家的喜欢。 【 涉及内容 】 web网页制作,web页面开发demo,多页

    2024年02月03日
    浏览(52)
  • Django web 开发(三) - Django的使用

    安装Python pip加速 安装Django 创建项目 报错 解决办法 再次运行 浏览器访问 报错了,修改ALLOWED_HOSTS 后面我们直接使用 VSCode 进行项目的编辑与运行,有条件的同学可以考虑使用 Pycharm 文件介绍 简单访问 在 /root/python/web/web 下新增一个 views.py 文件 配置 /root/python/web/web 下的 urls.p

    2024年01月16日
    浏览(37)
  • web前端开发——期末大作业网页制作——web网页设计期末课程大作业 HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页

    2024年02月09日
    浏览(64)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包