首页 > 编程语言 > 详细

饮冰三年-人工智能-Python-27 Django Form组件

时间：2019-02-15 23:06:20      阅读：375      评论：0      收藏：0      [点我收藏+]

Django的Form主要具有一下几大功能：

  • 生成HTML标签
  • 验证用户数据（显示错误信息）
  • HTML Form提交保留上次提交数据
  • 初始化页面显示内容

后台逻辑（导包+建类）

技术分享图片 
from django.shortcuts import render,redirect,HttpResponse

from django import forms
from django.forms import fields

class F1Form(forms.Form):
    user=fields.CharField(
        required=True,
        min_length=6,
        max_length=16,
        error_messages={
            ‘required‘:‘用户名不能为空‘,
            ‘min_length‘:‘至少为6个字符‘,
            ‘max_length‘: ‘最多为16个字符‘,
        }
    )
    pwd = fields.CharField(
        required=True,
        min_length=6,
        max_length=16,
        error_messages={
            ‘required‘: ‘密码不能为空‘,
            ‘min_length‘: ‘至少为6个字符‘,
            ‘max_length‘: ‘最多为16个字符‘,
        }
    )
    age = fields.IntegerField(
        required=True,
        error_messages={
            ‘required‘: ‘年龄不能为空‘,
            ‘invalid‘: ‘年龄格式不正确‘,
        }
    )
    email = fields.EmailField(
        required=True,
        min_length=6,
        max_length=18,
        error_messages={
            ‘required‘: ‘邮箱不能为空‘,
            ‘min_length‘: ‘至少为6个字符‘,
            ‘max_length‘: ‘最多为18个字符‘,
            ‘invalid‘: ‘邮箱格式不正确‘,
        }
    )
def f1(request):
    if request.method=="GET":
        obj=F1Form()
        return render(request,‘f1.html‘,{‘obj‘:obj})
    else:
        obj = F1Form(request.POST)
        # 校验是否成功
        if obj.is_valid():
            return redirect(‘http://www.baidu.com‘)
        else:
            return render(request,‘f1.html‘,{‘obj‘:obj})
导包+建类
技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
</head>
<body>
     <form id="fm" action="/f1.html" method="POST">
         <p>{{obj.user}}{{ obj.errors.user.0 }}</p>
         <p>{{obj.pwd}}{{ obj.errors.pwd.0 }}</p>
         <p>{{obj.age}}{{ obj.errors.age.0 }}</p>
         <p>{{obj.email}}{{ obj.errors.email.0 }}</p>
         <input type="submit" value="提交"/>
     </form>
    <script src="/static/js/jquery-3.3.1.min.js"></script>

</body>
</html>
前端html

技术分享图片

 小试牛刀：实现一套“增删改” 

　　1：创建Model模型并生成数据表

技术分享图片 
from django.db import models

# Create your models here.
class UserInfo(models.Model):
    username=models.CharField(max_length=16)
    email = models.EmailField(max_length=16)
UserInfo

　　2：创建Form文件

技术分享图片 
from django import forms
from django.forms import fields


class UserInfoForm(forms.Form):
    username = forms.CharField(
        required=True,
        max_length=16,
        error_messages={
            "required": "姓名不能为空",
            "max_length": ‘姓名最大长度不能超过16位‘
        }
    )
    email = forms.EmailField(
        required=True,
        min_length=6,
        error_messages={
        "required": "邮箱不能为空",
        "min_length": ‘邮箱最小长度不能低于6位‘,
        "invalid":"邮箱格式不正确"
    })
UserInfoForm

　　3：创建View文件并修改url配置 

技术分享图片 
from django.shortcuts import render, redirect, HttpResponse
from App01.models import UserInfo
from App01.Forms.UserInfo import UserInfoForm


def user_list(request):
    # 获取用户信息列表
    obj = UserInfo.objects.all()
    return render(request, "FormTest/user_list.html", {"obj": obj})


def user_add(request):
    # 添加用户
    if request.method == ‘GET‘:
        obj = UserInfoForm()
        return render(request, "FormTest/user_add.html", {"obj": obj})
    else:
        obj = UserInfoForm(request.POST)
        if obj.is_valid():
            UserInfo.objects.create(**obj.cleaned_data)
            return redirect(‘/user_list‘)
        else:
            return render(request, "FormTest/user_add.html", {"obj": obj})


def user_edit(request,nid):
    # 编辑用户
    if request.method == ‘GET‘:
        enti = UserInfo.objects.filter(id=nid).first()
        obj = UserInfoForm({"username":enti.username,"email":enti.email})
        return render(request, "FormTest/user_edit.html", {"obj": obj,"nid":nid})
    else:
        obj = UserInfoForm(request.POST)
        if obj.is_valid():
            UserInfo.objects.filter(id=nid).update(**obj.cleaned_data)
            return redirect(‘/user_list‘)
        else:
            return render(request, "FormTest/user_edit.html", {"obj": obj, "nid": nid})


def user_del(request):
    # 删除用户
    if request.method==‘GET‘:
        nid = request.GET.get("nid")
        UserInfo.objects.filter(id=nid).delete()
    return redirect("/user_list")
FormTest
技术分享图片 
"""StudyForm URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path(‘‘, views.home, name=‘home‘)
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path(‘‘, Home.as_view(), name=‘home‘)
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path(‘blog/‘, include(‘blog.urls‘))
"""
from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from App01.Views import FormTest

urlpatterns = [
    path(‘admin/‘, admin.site.urls),
    url(r‘^user_list‘, FormTest.user_list),
    url(r‘^user_add‘, FormTest.user_add),
    url(r‘^user_edit-(\d+)‘, FormTest.user_edit),
    url(r‘^user_del‘, FormTest.user_del),
]
urls

　　4：HTML页面　　

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="/user_add">添加</a>
<table id="tbStudentsList" class="table table-hover table-bordered">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for row in obj %}
        <tr nid="{{ row.id }}">
            <td>{{ row.id }}</td>
            <td>{{ row.username }}</td>
            <td>{{ row.email }}</td>
            <td>
                <a href="user_edit-{{ row.id }}">修改</a>
                |
                <a href="user_del?nid={{ row.id }}">删除</a>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
</body>
</html>
user_list.html
技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="/user_add/" method="post" novalidate>
    {% csrf_token %}
    <p>{{ obj.username }}{{ obj.errors.username.0 }}</p>
    <p>{{ obj.email }}{{ obj.errors.email.0 }}</p>
    <input type="submit" value="提交"/>
</form>
</body>
</html>
user_add.html
技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="/user_edit-{{ nid }}/" method="post" novalidate>
    {% csrf_token %}
    <p>{{ obj.username }}{{ obj.errors.username.0 }}</p>
    <p>{{ obj.email }}{{ obj.errors.email.0 }}</p>
    <input type="submit" value="提交"/>
</form>
</body>
</html>
user_edit

技术分享图片技术分享图片

三种ajax请求（jQuery封装后的ajax+原生的ajax+伪ajax（form+iframe））

技术分享图片 
"""StudyForm URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path(‘‘, views.home, name=‘home‘)
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path(‘‘, Home.as_view(), name=‘home‘)
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path(‘blog/‘, include(‘blog.urls‘))
"""
from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from App01.Views import FormTest,UploadTest,AjaxTest

urlpatterns = [
    path(‘admin/‘, admin.site.urls),
    url(r‘^user_list‘, FormTest.user_list),
    url(r‘^user_add‘, FormTest.user_add),
    url(r‘^user_edit-(\d+)‘, FormTest.user_edit),
    url(r‘^user_del‘, FormTest.user_del),
    # 文件上传
    url(r‘^upload.html$‘, UploadTest.upload),

    #Ajax练习
    # 一、普通的form提交+jQuery封装后的Ajax
    url(r‘^ajax1.html$‘, AjaxTest.ajax1),
    url(r‘^ajax11.html$‘, AjaxTest.ajax11),
    #二、原生态的Ajax
    url(r‘^ajax2.html$‘, AjaxTest.ajax2),
    #三、伪Ajax（form+iframe）
    url(r‘^ajax3.html$‘, AjaxTest.ajax3),
    # 文件上传
    url(r‘^ajaxUpload$‘, AjaxTest.ajaxUpload),
]
url
技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
{% csrf_token %}

<form action="ajax1.html" method="post">
    <input type="text" id="ajaxText" name="ajaxText" placeholder="请输入测试数据" value="{{ qMethod }}">
    <input type="submit" value="普通提交">
    <br/>
    <input type="button" value="JQuery封装ajaxGET提交" onclick="ajax1Get()">
    <input type="button" value="JQuery封装ajaxPOST提交" onclick="ajax1Post()">
    <br/>
    <input type="button" value="原生的ajaxGET提交" onclick="nativeAjax1Get()">
    <input type="button" value="原生的ajaxPOST提交" onclick="nativeAjax1Post()">
    <br/>

</form>
<iframe id="iframe" name="ifra"></iframe>
<form id="fm" action="/ajax3.html" method="POST" target="ifra">
    <input type="text" id="aText" name="aText" placeholder="请输入测试数据" value="{{ qMethod }}">
    <input type="button" value="伪ajaxPOST提交" onclick="fakeAjax1Post()">
    <br/>
</form>
<hr/>

<iframe id="uploadFR" name="uploadFR" style="display: none"></iframe>
<form id="uploadFM" name="uploadFM" method="post" action="ajaxUpload" enctype="multipart/form-data" target="uploadFR">
    <input type="file" id="img" name="val">
    <input type="button" value="通过ajax+formData上传" onclick="upload1()">
    <input type="button" value="通过原生xhr+formData上传" onclick="upload2()">
    <input type="button" value="伪ajax上传" onclick="upload3()">
</form>
<script>
    function ajax1Get() {
        {#jQuery封装后的ajax-get#}
        var st = $("#ajaxText").val();
        var soft = {‘ajaxTest‘: st}
        $.ajax({
            url: ‘ajax11.html‘,
            type: ‘GET‘,
            dataType: ‘json‘,
            data: soft,
            success: function (arg) {
                alert(arg.data)
            }
        })
    }

    function ajax1Post() {
        {#jQuery封装后的ajax-post#}
        var st = $("#ajaxText").val();
        $.ajax({
            url: ‘ajax11.html‘,
            type: ‘POST‘,
            dataType: ‘json‘,
            data: {"ajaxTest": st},
            success: function (arg) {
                alert(arg.data)
            }
        })
    }

    function nativeAjax1Get() {
        {#1:创建对象#}
        var xhr = new XMLHttpRequest()
        {#2:创建句柄对象#}
        xhr.onreadystatechange = function () {
            {#4LoadedHTTP 响应已经完全接收。#}
            if (xhr.readyState == 4) {
                alert(xhr.responseText)
            }
        }
        {#3:设置请求方式，指定url路径#}
        var st = $("#ajaxText").val();
        xhr.open("GET", "ajax2.html?ajaxTest=" + st)
        {#4:发送#}
        xhr.send()
    }

    function nativeAjax1Post() {
        {#1:创建对象#}
        var xhr = new XMLHttpRequest()
        {#2:创建句柄对象#}
        xhr.onreadystatechange = function () {
            {#4LoadedHTTP 响应已经完全接收。#}
            if (xhr.readyState == 4) {
                alert(xhr.responseText)
            }
        }
        {#3:设置请求方式，指定url路径#}
        var st = $("#ajaxText").val();
        xhr.open("POST", "ajax2.html")
        xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);
        {#4:发送#}
        xhr.send("ajaxTest=" + st)
    }

    function fakeAjax1Post() {
        document.getElementById("iframe").onload = reloadIframe;
        var form1 = document.getElementById(‘fm‘);
        form1.submit();
    }

    function reloadIframe() {
        var countent = this.contentWindow.document.body.innerHTML
        var obj = JSON.parse(countent)
        if (obj.status) {
            alert(obj.message)
        }
    }

    function upload1() {
        var dataForm = new FormData()
        dataForm.append("val", document.getElementById("img").files[0])
        $.ajax({
            url: "ajaxUpload",
            type: "POST",
            data: dataForm,
            success: function (arg) {
                alert("ajax上传文件成功")
            },
            processData: false,  // tell jQuery not to process the data
            contentType: false  // tell jQuery not to set contentType
        })
    }

    function upload2() {
        var dataForm = new FormData()
        dataForm.append("val", document.getElementById("img").files[0])

        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function () {
            {#4LoadedHTTP 响应已经完全接收。#}
            if (xhr.readyState == 4) {
                alert("原生ajax上传文件成功")
            }
        }
        xhr.open("POST", "ajaxUpload")
        xhr.send(dataForm)
    }

    function upload3(){
        document.getElementById("uploadFR").onload=reloadIframe
        var form1 = document.getElementById(‘uploadFM‘);
        form1.submit();
    }

</script>
</body>
</html>
html
技术分享图片 
from django.shortcuts import HttpResponse,render
import os,uuid

import json
def ajax1(request):
    if request.method=="GET":
        QMethod=‘普通的get请求‘
        return render(request,"AjaxTest/ajax1.html",{"qMethod":QMethod})
    else:
        QMethod = ‘普通的Post请求------‘+request.POST.get("ajaxText")
        return render(request,"AjaxTest/ajax1.html",{"qMethod":QMethod})
def ajax11(request):
    if request.method=="GET":
        QMethod = ‘Ajax的get请求------‘ + request.GET.get("ajaxTest")
        ret = {‘status‘: True, ‘data‘: QMethod, ‘message‘: QMethod}
        return HttpResponse(json.dumps(ret))
    else:
        QMethod = ‘Ajax的Post请求------‘+ request.POST.get("ajaxTest")
        ret = {‘status‘: True, ‘data‘: QMethod, ‘message‘: QMethod}
        return HttpResponse(json.dumps(ret))

def ajax2(request):
    if request.method=="GET":
        QMethod="原生的Ajax的get请求-----"+request.GET.get("ajaxTest")
        return HttpResponse(QMethod)
    else:
        QMethod = "原生的Ajax的post请求-----" + request.POST.get("ajaxTest")
        return HttpResponse(QMethod)

def ajax3(request):
    if request.method == "GET":
        QMethod = ‘伪Ajax的get请求------‘ + request.GET.get("aText")
        ret = {‘status‘: True, ‘data‘: QMethod, ‘message‘: QMethod}
        return render(request, "AjaxTest/ajax1.html", {"qMethod": QMethod})
    else:
        QMethod = ‘伪Ajax的Post请求------‘+request.POST.get("aText")
        ret = {‘status‘: True, ‘data‘: QMethod, ‘message‘: QMethod}
        return HttpResponse(json.dumps(ret))

def ajaxUpload(request):
     # 通过uuid获取到自动编号，防止重复
    nid = str(uuid.uuid4())
    # 通过request获取上传对象
    obj=request.FILES.get("val")
    # 写文件
    file_path=os.path.join("static/files",nid+obj.name)
    f = open(file_path,‘wb‘)
    for line in obj.chunks():
        f.write(line)
    f.close()
    ret = {‘status‘: True, ‘data‘: None, ‘message‘: None}
    ret["data"]=file_path
    #返回
    return HttpResponse(json.dumps(ret))
view

技术分享图片

 附件上传

技术分享图片 
from django.shortcuts import render, redirect, HttpResponse

def upload(request):
    if request.method=="GET":
        return render(request, ‘UploadTest/upload.html‘)
    else:
        user = request.POST.get("user")
        img=request.FILES.get(‘img‘)
        f=open(img.name,‘wb‘)
        for line  in img.chunks():
            f.write(line)
        f.close()
        return render(request, ‘UploadTest/upload.html‘)
文件下载1.0
技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="upload.html" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="user"/>
    <div style="position: relative">
        <a>上传</a>
        <input type="file" name="img" style="opacity: 0;position:absolute;top:0;left: 0;"/>
    </div>
    <input type="submit" value="提交"/>
</form>
</body>
</html>
文件下载1.0html

技术分享图片

与 三种ajax请求相似，同样存在三种附件上传（代码内容已包含在里面）

技术分享图片

 Jsonp 示例

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="button" value="jsonp测试" onclick="submitJsonp()"/>
<script>
    function submitJsonp() {
        $.ajax({
            {#江西卫视的jsonp只能使用固定的callback函数list()#}
            {#url: "http://www.jxntv.cn/data/jmd-jxtv2.html",#}
            url: "https://sug.so.360.cn/suggest",
            type: ‘GET‘,
            dataType: ‘jsonp‘,
            jsonp: ‘callback‘,
            jsonpCallback: ‘func‘,
        })
    }

    function func(arg) {
       alert("可自定义jsonpCallback的函数函数名称")
    }

</script>
</body>

</html>
html
技术分享图片 
from django.shortcuts import HttpResponse,render

def jsonp(request):
    print(1111)
    return render(request, "JsonpTest/jsonp.html", {"qMethod": "123456"})
view

技术分享图片

 

饮冰三年-人工智能-Python-27 Django Form组件

原文：https://www.cnblogs.com/YK2012/p/10325736.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！