AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Django第4步_理解form表单类与处理html的post、get

2023-06-20 79
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Django第4步_理解form表单类与处理html的post、get

表单类

用户登陆框
可以用纯粹的html代码来编写，也可以用django中的forms编写
创建forms.py来写这个表单数据
image.png

在python控制台打印查看login_form，结果就是html代码

image.png

既然这样为什么不直接用html写？
form不会这么无聊，它可以暂存表单数据，充当临时容器
就好像我们用C++进行值交换时候

void exchange(int &x,int &y)
{
   
   
    int temp=x;//临时变量temp
    x=y;
    y=temp;
}

类似临时变量temp,form表单就可以充当一个临时容器存储数据
form表单写一个临时存储数据
有个重点
就是我们写html的表单数据提交时在表单添加{%crsf_token%}
cross-site request forgery,跨站请求仿造（因为django内置了一个crsf中间键）
避免前端通过post方式提交数据被django禁止
查看django内置的django.middleware.csrf.CsrfViewMiddleware
image.png

接下来介绍html的变量标签、块标签
变量标签{ {p.Person_name}}
快标签{% if Persons%}
请看下面的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模型交易平台首页</title>
</head>
<body>
用户信息:
{
   
   % if Persons %}
    <ol>
        {
   
   % for p in Persons %}
            <li>
                <p>用户名:{
   
   {
   
     p.Person_name }}</p>
                <p>用户金币:{
   
   {
   
    p.Person_money }}</p>
                <p>用户账号:{
   
   {
   
    p.Person_id }}</p>
            </li>
        {
   
   % endfor %}
    </ol>
{
   
   % else %}
    No Person.
{
   
   % endif %}
</body>

</html>

image.png

简单的测试ok!
接下来写一个form表单数据匹配html的表单标签来进行登录

from django import forms
from .models import *#导入有户模型
#仅仅使用用户名和密码登录,和html的id一致
class LoginForm(forms.Form):
    username=forms.CharField()
    password=forms.CharField(widget=forms.PasswordInput)

ok,接下来在views视图函数写一个查找用户函数Find_Person
存在返回1否则返回0

def Find_Person(P_name,P_pwd):
    Person_name=models.Person.objects.order_by('Person_name')#名字排序
    for p in Person_name:
        print(p.Person_name,p.Person_pwd)
        if p.Person_name==P_name and p.Person_pwd==P_pwd:
            return 1
    return 0

写登录函数

def Person_login(request):
    if request.method =='POST':
        print('post方法')
        P_form=forms.LoginForm(request.POST)#表单数据
        print('表单数据获取成功')
        if P_form.is_valid():#数据是否合法
            print('数据合法')
            cd=P_form.cleaned_data
            P_name=cd['username']
            P_pwd=cd['password']
            print(P_name,P_pwd)
            user=Find_Person(P_name,P_pwd)#对比数据
            if user:
                return HttpResponse("登录成功")
            else:
                return HttpResponse("没有该用户")
        else:
            return HttpResponse("数据不合法")
    else:
        P_form=forms.LoginForm()
        print('不是post方法')
    return render(request,'adminpage/login.html',{
   
   'form':P_form})

借用django的登陆界面仿写login.html
还有css这里就不一一展示了，django框架里面都有


<!DOCTYPE html>

<html lang="en-us" >
<head>
<title>Log in | Django site admin</title>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/login.css">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css">
<meta name="robots" content="NONE,NOARCHIVE">
</head>
<body class=" login"
  data-admin-utc-offset="0">
<!-- Container -->
<div id="container">
    <!-- Header -->
    <div id="header">
        <div id="branding">
<h1 id="site-name"><a href="/admin/">模型交易平台用户登录</a></h1>
        </div>
    </div>
    <!-- END Header -->
    <!-- Content -->
    <div id="content" class="colM">
<div id="content-main">
<form action="/demo/login/" method="post" id="login-form"><input type="hidden" name="csrfmiddlewaretoken" value="u7XrpxUTWRgYFbI2hvlKzrb1NCqReMg38ciAfTLuF38EqLK5Xa2JiLWlFNgFozQG">
    {
   
   % csrf_token %}
  <div class="form-row">
    <label class="required" for="id_username">用户名:</label> <input type="text" name="username" autofocus required id="id_username">
  </div>
  <div class="form-row">

    <label class="required" for="id_password">密码:</label> <input type="password" name="password" required id="id_password">
    <input type="hidden" name="next" value="/admin/">
  </div>
  <div class="submit-row">
    <label>&nbsp;</label><input type="submit" value="登录">
  </div>
</form>
</div>
        <br class="clear">
    </div>
    <!-- END Content -->
    <div id="footer"></div>
</div>
<!-- END Container -->
</body>
</html>

测试匹配路径urls.py

from django.contrib import admin
from django.urls import path,include
from demo00 import views
urlpatterns = [
    path('',views.index,name='demo'),
    path('login/',views.Person_login,name='Person_longin'),
    path('register/',views.Person_register,name='register'),
]

ok,进入http://127.0.0.1:8000/demo/login/
image.png

点击登录，登录成功
image.png

image.png

ok,没问题！
接下来在forms.py写一个注册用户模型的RegisterForm
这个引用ModelForm
还要注意一个细节因为注册用户时候有些信息没必要填写，需要排除属性可以使用exclude列表
也可以使用fields元组，这里我使用fields元组

#用户注册填写所有信息 ModelForm
class RegisterForm(forms.ModelForm):
    class Meta:
        model=Person#表单数据写入models的Person
        fields=("Person_name","Person_id","Person_image","Person_pwd")#不必在表单中向数据模型的字段赋值，也可用exclude列表
        #意思就是注册用户名、账号、头像、密码这几个数据，其他的默认空

在views.py写注册Person函数

def Person_register(request):
    if request.method=='POST':
        print('post方法')
        Person_form=forms.RegisterForm(request.POST)#html数据提交到表单数据
        print(Person_form)
        if Person_form.is_valid():
            print('数据合法')
            new_Person=Person_form.save()#保存到数据库,默认无评论和vip,未充值
            new_Person.save()
            return HttpResponse('注册成功')
        else:
            print('不合法数据')
            return HttpResponse('不能注册')
    else:
        Person_form = forms.RegisterForm()  # html数据提交到表单数据
        print('get方法')
    return render(request,'adminpage/register.html',{
   
   'form':Person_form})

运行打印一下，目的是查看它与html对应的标签
image.png

ok，提取出来

<tr><th><label for="id_Person_name">Person name:</label></th><td><input type="text" name="Person_name" maxlength="8" id="id_Person_name"></td></tr>
<tr><th><label for="id_Person_id">Person id:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="Person_id" maxlength="8" required id="id_Person_id"></td></tr>
<tr><th><label for="id_Person_image">Person image:</label></th><td><input type="file" name="Person_image" accept="image/*" id="id_Person_image"></td></tr>
<tr><th><label for="id_password1">Password:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="password" name="password1" required id="id_password1"></td></tr>
<tr><th><label for="id_password2">Confirm Password:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="password" name="password2" required id="id_password2"></td></tr>

接下来写到注册的html里面register.html



<!DOCTYPE html>

<html lang="en-us" >
<head>
<title>模型交易平台注册登录</title>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/login.css">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css">
<meta name="robots" content="NONE,NOARCHIVE">
</head>
<body class=" login"
  data-admin-utc-offset="0">
<!-- Container -->
<div id="container">
    <!-- Header -->
    <div id="header">
        <div id="branding">
<h1 id="site-name"><a href="/admin/">模型交易平台用户注册</a></h1>
        </div>
    </div>
    <!-- END Header -->
    <!-- Content -->
    <div id="content" class="colM">
<div id="content-main">
<form action="/demo/register/" method="post" id="login-form"><input type="hidden" name="csrfmiddlewaretoken" value="u7XrpxUTWRgYFbI2hvlKzrb1NCqReMg38ciAfTLuF38EqLK5Xa2JiLWlFNgFozQG">
    {
   
   % csrf_token %}
      <div class="form-row">
          <label class="required" for="id_Person_name">Person name:</label><ul class="errorlist">用户名</ul><input type="text" name="Person_name" maxlength="8" id="id_Person_name">
      </div>

    <div class="form-row">
        <label class="required" for="id_Person_id">Person id:</label><ul class="errorlist">账号</ul><input type="text" name="Person_id" maxlength="8" required id="id_Person_id">
    </div>

    <div class="form-row">
    <label class="required" for="id_Person_image">Person image:</label><ul class="errorlist">头像</ul><input type="file" name="Person_image" accept="image/*" id="id_Person_image">
    </div>

    <div class="form-row">
        <label class="required" for="id_Person_pwd">Password:</label><ul class="errorlist"><li>密码</li></ul><input type="password" name="Person_pwd" required id="id_password1">
    </div>

{
   
   #    <div class="form-row">#}
{
   
   #        <label class="required" for="id_password2">Confirm Password:</label><ul class="errorlist"><li>再次输入密码</li></ul><input type="password" name="password2" required id="id_password2">#}
{
   
   #        </div>#}

  <div class="submit-row">
    <label>&nbsp;</label><input type="submit" value="注册">
  </div>
</form>
</div>
        <br class="clear">
    </div>
    <!-- END Content -->
    <div id="footer"></div>
</div>
<!-- END Container -->
</body>
</html>

登录注册
image.png

查看控制台
image.png

注册成功
image.png

登录django后台管理界面查看person
image.png

临时写一个html查看注册信息,ok没bug
image.png

有个问题就是不美观，这个很不好……
下一篇写学习css与js的笔记，peace！！！

文章标签：
JavaScript
C++
Python
前端开发
容器
存储
关键词：
HTML表单
表单HTML
HTML get
HTML post
HTML form
yma16
目录
相关文章
刘大猫.
|
8天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
刘大猫.
27 2
html的七十二变
|
1月前
|
存储 移动开发 UED
HTML5 的 form 的自动完成功能
在HTML5中，`&lt;form&gt;`元素具备自动完成功能，可根据用户历史输入提供建议，提高输入效率并改善体验。默认情况下，浏览器会自动开启此功能，也可通过设置`autocomplete`属性为`on`或`off`来明确开启或关闭。对于特定表单字段，如`&lt;input&gt;`，同样可以通过设置`autocomplete`属性控制自动完成行为。浏览器通过记录并存储用户的历史输入，在用户再次访问相同表单时提供相应的自动完成建议。
html的七十二变
55 1
刘大猫.
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
刘大猫.
43 6
游客qeoynko2nmbgk
|
2月前
|
C++ Windows
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
HTML+JavaScript构建C++类代码一键转换MASM32代码平台
游客qeoynko2nmbgk
19 0
opencv学堂
|
5月前
|
Web App开发 前端开发 Java
基于Spring3 MVC实现基于HTML form表单文件上传
基于Spring3 MVC实现基于HTML form表单文件上传
opencv学堂
44 7
基于Spring3 MVC实现基于HTML form表单文件上传
啊猪是的读来过倒
|
5月前
|
前端开发 Python
Django框架中Ajax GET与POST请求的实战应用
Django框架中Ajax GET与POST请求的实战应用
啊猪是的读来过倒
59 1
啊猪是的读来过倒
|
5月前
|
JSON 缓存 前端开发
Django视图层探索：GET/POST请求处理、参数传递与响应方式详解
Django视图层探索：GET/POST请求处理、参数传递与响应方式详解
啊猪是的读来过倒
85 1
Want595
|
5月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
Want595
76 3
Want595
|
5月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
Want595
86 2
Want595
|
5月前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
Want595
79 2

热门文章

最新文章

  • 1
    Python的Django框架的运行方式及处理流程
  • 2
    Django学习（1）一首情诗
  • 3
    django 1.8 官方文档翻译： 2-4-4 编写迁移
  • 4
    Python基于Django的电影推荐系统和论坛项目完整源码
  • 5
    Django模型简介
  • 6
    第18天，Django进阶
  • 7
    django 1.8 官方文档翻译： 3-1-4 视图装饰器
  • 8
    Django Session通用配置
  • 9
    django命令
  • 10
    python virtualenv环境运行django
  • 1
    Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强。
    125
  • 2
    Sphinx是一个Python文档生成工具，它可以解析reStructuredText或Markdown格式的源代码注释，并生成多种输出格式，如HTML、LaTeX、PDF、ePub等。
    76
  • 3
    【vue】vue 里面使用 v-html 插入的文本带有换行符‘\n‘不换行
    529
  • 4
    提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
    148
  • 5
    动态粒子发射404网站HTML源码
    55
  • 6
    【Python】已解决：bs4.FeatureNotFound: Couldn’t find a tree builder with the features you requested: html5
    301
  • 7
    HTML 【实用教程】（2024最新版）
    42
  • 8
    HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
    243
  • 9
    HTML【详解】超链接 a 标签的四大功能（页面跳转、页内滚动【锚点】、页面刷新、文件下载）
    148
  • 10
    ​「Python大数据」词频数据渲染词云图导出HTML
    78

    • 相关课程

    更多
  • Python Web 框架 Django 快速入门
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • 零基础部署一个Django Blog到Serverless架构
    • 下一篇
    DataWorks售前咨询