Django - BBS 项目学习 - 注册功能页面的实现（forms组件）

最新推荐文章于 2022-02-12 11:56:04 发布
最新推荐文章于 2022-02-12 11:56:04 发布
阅读量297 收藏
点赞数
分类专栏： Django 项目学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33961117/article/details/84590719
版权

目录

一、myforms.py - forms组件设计

二、 views.py - 视图函数处理传输数据

三、register.html - 前端

一、myforms.py - forms组件设计

注意知识点：

  • 局部钩子命名方式必须为：clean_类内属性名
  • 全局钩子命名方式必须为：clean  ---- 即重写clean方法
from django import forms
from django.forms import widgets
from bbs import models
from django.core.exceptions import ValidationError


class MyForm(forms.Form):
    username = forms.CharField(
        max_length=18, min_length=2, label='用户名',

        widget=widgets.TextInput(attrs={'class': 'form-control',
                                        'placeholder': "请输入用户名"}),
        error_messages={'max_length': '长度不大于18',
                        'min_length': '长度不小于2',
                        'required': '必填选项',
                        }
    )
    password = forms.CharField(
        max_length=18, min_length=2, label='密码',
        widget=widgets.PasswordInput(attrs={'class': 'form-control',
                                            'placeholder': "请输入密码"}),
        error_messages={'max_length': '长度不大于18',
                        'min_length': '长度不小于2',
                        'required': '必填选项',
                        }
    )
    re_password = forms.CharField(
        max_length=18, min_length=2, label='确认密码',
        widget=widgets.PasswordInput(attrs={'class': 'form-control',
                                            'placeholder': "请确认密码"}),
        error_messages={'max_length': '长度不大于18',
                        'min_length': '长度不小于2',
                        'required': '必填选项',
                        }
    )
    email = forms.CharField(
        label='邮箱',
        widget=widgets.EmailInput(attrs={'class': 'form-control',
                                         'placeholder': "请输入邮箱"}),
        error_messages={
            'invalid':'格式不合法',
            'required': '必填选项',
        }
    )

    # 用户名存在校验
    def clean_username(self):
        name = self.cleaned_data.get('username')
        valid = models.UserInfo.objects.filter(username=name).first()
        if valid:
            raise ValidationError('用户名已存在')
        return name

    # 密码确认校验
    def clean(self):
        pwd = self.cleaned_data.get('password')
        re_pwd = self.cleaned_data.get('re_password')
        if pwd == re_pwd:
            return self.cleaned_data
        else:
            raise ValidationError('两次密码不一致')

二、 views.py - 视图函数处理传输数据

注意知识点：

  • 使用forms组件必须导入自定义的form文件
  • 必须在视图函数内建立对应form对象 
    myform = myforms.MyForm()
  • 习惯设置返回字典 
    response = {'status': 200, 'msg': None}
  • 进行数据库ORM操作时，若选择使用**快捷填入，必须将forms自定属性和数据库内字段名完全一致 
    user = models.UserInfo.objects.create_user(**dic)
  • forms组件进行判断之后，所有数据放在cleaned_data属性内
  • forms组件进行判断之后，报错信息放在errors属性内
     
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
from bbs import myforms
from bbs import models



def register(request):
    '''
    注册功能
        - 使用forms组件进行验证
    :param request:
    :return:
    '''
    if request.method == 'GET':
        myform = myforms.MyForm()
        return render(request, 'register.html', locals())

    elif request.is_ajax():
        # 设置返回对象，200默认成功
        response = {'status': 200, 'msg': None}
        myform = myforms.MyForm(request.POST)
        print(myform.errors)
        if myform.is_valid():
            dic = myform.cleaned_data
            dic.pop('re_password')
            my_file = request.FILES.get('my_file')
            if my_file:
                dic['avatar'] = my_file
            # 使用**dic进行传值，必须保证dic内的key值和数据库内的字段名完全相同
            # 即自定义forms内类属性和数据库内字段名完全相同
            # 注意数据库内头像字段的属性为FileField 时，只要传入对象就可以进行自动处理数据保存
            user = models.UserInfo.objects.create_user(**dic)
        else:
            response['status'] =None
            response['msg'] = myform.errors

        return JsonResponse(response)

三、register.html - 前端

注意知识点：

  • 注意必须带上{% csrf_token %}进行传输
  • 可使用循环对视图函数传输的myform对象进行循环渲染
    • for="{{ foo.auto_id }}” -- 用于对应相应label
    • {{ foo.label }} -- 属性label名，在forms类内自定
    • {{foo}} -- 属性的值，根据forms内属性widget进行渲染
    • {{foo.errors.0}} -- 属性的值，根据forms内的错误信息进行渲染
  • 将头像文件的选择项隐藏在图片显示框后，可实现点击图片选择文件

     

    • <div>
    <label for="my_file">头像
        <img src="/static/img/default.png" id="img_file">
    </label>
    <input type="file" id="my_file" style="display: none">
</div>

  • 使用jq实现当文件选择项发生变化，触发图像放置框内图像文件的改变 
    {#当头像文件发生变化，触发页面img显示为放入的图像文件#}
    $('#my_file').change(function () {
        var file_obj = $('#my_file')[0].files[0];
        var filereader = new FileReader();//文件阅读器对象生成，将图片放到img标签上

        {# 获取图片对象的地址，放入filereader.result #}
        filereader.readAsDataURL(file_obj);
        {# 必须等路径加载完成后才能进行渲染操作 #}
        filereader.onload = function () {
            $('#img_file').attr('src', filereader.result)
        }
    })

     

  • ajax使用formdata对象放入数据时候，可使用serializeArray()方法+循环放入 
     var formdata = new FormData();
{# 将form表单内内容打包，转成对象（列表套字典） #}
var arr = $('#form').serializeArray();
{#console.log(arr);#}
{# 循环将arr内对象放入formdata内 #}
$.each(arr, function (k, obj) {
   {#console.log(k);#}
   {#console.log(obj);#}
   formdata.append(obj.name, obj.value);
});
{# formdata添加文件对象 #}
formdata.append('my_file', $('#my_file')[0].files[0]);

  • 使用jq的each能实现循环操作
  • 清除页面上原有的错误信息 
    $(".error_right").html("");
$(".error_right").parent().removeClass("has-error");
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>注册</title>
</head>
<style>
    .has-error {
        color: red;
    }

    #img_file {
        width: 80px;
        height: 80px;
        margin-left: 10px;
    }
</style>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>注册</h1>
            <form id="form">
                {% csrf_token %}
                {% for foo in myform %}
                    <div class="form-group">
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }}
                    </div>
                {% endfor %}
                <div>
                    <label for="my_file">头像
                        <img src="/static/img/default.png" id="img_file">
                    </label>
                   {# accept='image/*'只允许显示所有图片格式文件 #}
                    <input accept='image/*'type="file" id="my_file" style="display: none">
                </div>
                <input type="button" id='btn' value="注册" class="btn btn-primary pull-right">
            </form>

        </div>

    </div>

</div>
</body>
<script>

    {#当头像文件发生变化，触发页面img显示为放入的图像文件#}
    $('#my_file').change(function () {
        var file_obj = $('#my_file')[0].files[0];
        var filereader = new FileReader();//文件阅读器对象生成，将图片放到img标签上

        {# 获取图片对象的地址，放入filereader.result #}
        filereader.readAsDataURL(file_obj);
        {# 必须等路径加载完成后才能进行渲染操作 #}
        filereader.onload = function () {
            $('#img_file').attr('src', filereader.result)
        }
    })
    {#    实现ajax传输数据给后台#}
    $('#btn').click(function () {
        var formdata = new FormData();
        {# 将form表单内内容打包，转成对象（列表套字典） #}
        var arr = $('#form').serializeArray();
        {#console.log(arr);#}
        {# 循环将arr内对象放入formdata内 #}
        $.each(arr, function (k, obj) {
            {#console.log(k);#}
            {#console.log(obj);#}
            formdata.append(obj.name, obj.value);
        });
        {# formdata添加文件对象 #}
        formdata.append('my_file', $('#my_file')[0].files[0]);

        $(".error_right").html("");
        $(".error_right").parent().removeClass("has-error");
        $.ajax({
            url: '/register/',
            type: 'post',
            data: formdata,
            processData: false,
            contentType: false,
            success: function (data) {
                if (data['status']) {
                    location.href = '/index/'
                }
                else {
                    console.log(data['msg']);
                    var msg = data['msg'];
                    $.each(msg, function (k, v) {
                        console.log(msg)
                        $span = $('<span>');
                        $span.addClass('error_right').css("color", 'red');
                        $span.html(v[0]);
                        $('#id_' + k).after($span).parent().addClass('has-error');

                        if (k == '__all__') {

                            $("#btn").after($span);



                        }
                    });
                }
            }
        })
    });
</script>

</html>

 

LSYHhhhh
关注
专栏目录
登录案例
没毛病的博客
08-27 202
forms.py中 新建一个登录form表单 class LoginForm(forms.Form): userName = forms.CharField(max_length=30, min_length=6, widget=forms.TextInput(attrs={'placeholder':'请输入用户名'})) passWord = forms.CharField(...
django-bbs论坛总结
weixin_40782004的博客
05-07 2637
bbs流程图 项目前期设计 数据库设计 数据库设计的时候要注意一定,用户表是直接继承auth模块的,所以需要以下的操作 #在models文件中 from django.contrib.auth.models import AbstractUser class UserInfo(AbstractUser): pass #然后再setitings中配置 #AUTH_USER_MODEL = "ap...
Django—BBS注册页面
weixin_30553065的博客
06-19 86
一、数据库表分析 1、首先是用户表，用户表继承Django自带的auth_user表，目的是可以使用Django封装好的方法，不用自己手动写cookie和session操作，还可以自定义字段 2、个人站点表，和用户是一对一关系，一个用户都有一个站点 3.文章表，字段有标题和内容，并且还应该有文章的分类和标签，文章只能有一个分类，比如说这篇文章是Python，那篇是前端，但是一个文章可以有...
django之BBS-登录与注册功能-72
weixin_34088838的博客
12-27 81
django之BBS-登录与注册功能-72 登录功能 视图函数 def my_login(request): if request.method == 'GET': return render(request, 'login.html') else: name = request.PO...
简单实现BBS注册与登录
dixiao5004的博客
09-26 521
一. 数据库的表设计 数据库表设计 用户表(利用auth_user, 额外扩张几个字段,不用添加auth_user原表里的字段) phone avatar create_time blog # 一对一个人站点表 用户表与个人站点表 个人站点表 site_name # 站点名称...
Django之用户认证功能
agurt80004的专栏
09-03 120
前言 做web应用对登录做用户身份认证，然后设置session是必不可少的，因为我们就需要把有权限访问本站视图的用户，单独建一张表记录到数据库里； Django作为一个大而全的框架，已经为我们做好了这些准备； from django.shortcuts import render,HttpResponse,redirect def login(request): ...
Django搭建BBS-表单创建&注册
Python-全栈开发教程-入门到精通
12-31 172
文件结构 app 接口 migrations inint.py admin.py 管理员页面注册表单用 apps.py bbsform.py form组件相关设置 models.py 模型存放 tests.py views.py 业务逻辑 avatar 图片文件存储 BBS 项目名称以及路由存放 inint.py settings.py urls.py wsgi.py static ...
基于Django的BBS论坛.zip
最新发布
01-15
在描述中的“基于Django，Python的系统”，意味着这个BBS论坛完全使用Python语言编写，依赖Django框架提供后端服务，实现了论坛的基本功能，如用户注册、登录、发帖、回帖、分类讨论等。 【标签】Python Django ...
PythonDjango开发实战-源码.zip
12-20
《Python Django开发实战》是一本深入探讨Python Web开发框架Django的...同时，这个实战项目可能还涵盖了用户认证、权限控制、分页、搜索、论坛功能实现等实际Web开发中常见的场景，这些都可以作为学习和研究的焦点。
基于Django的博客BBS项目
sdlcmm的博客
02-12 1040
基于Django的博客BBS项目项目流程内容概要第一部分第二部分第三部分第四部分项目具体流程1.数据库表创建及同步1.1创建项目1.2创建数据库1.3修改配置文件与__init__文件1.3.1修改数据库配置1.3.2修改任意__init__文件1.4models中创建相关表以及字段1.5同步到数据库1.6forms组件的创建使用2.书写注册功能2.1froms组件实现注册2.2注册页面简单搭建2.2.1静态文件配置2.2.2简单样式:2.3动态显示图像2.4ajax发送post请求并将返回信息显示2.5给
AUTH 使用登录验证
weixin_42506747的博客
08-21 4299
from django.db import models from django.contrib.auth.models import User, AbstractUser class UserInfo(AbstractUser): #AUTH_USER_MODEL = 'app01.UserInfo' 去数据库中看 phone = models.CharField(max_lengt...
Django之form组件
phluo的博客
08-17 168
''' form 组件两大功能： 1.对用户提交数据进行验证 2.生成HTML标签 ''' 以用户注册为例： 1.定义一张用户信息表 from django.db import models # Create your models here. # 创建一张用户信息表 class UserInfo(models.Model): # 数据库表有自带规则，如果用户提交数据不规范，则...
Django-Model操作数据库(增删改查、连表结构）
Mrzhangjwei的博客
11-01 1万+
一、数据库操作1、创建model表基本结构:from django.db import modelsclass userinfo(models.Model): #如果没有models.AutoField，默认会创建一个id的自增列 name = models.CharField(max_length=30) email = models.EmailField() memo = models.Text
Django中model层详解
weixin_30619101的博客
02-20 436
#!/usr/bin/env python# _*_ coding:utf-8 _*_from django.db import modelsclass UserType(models.Model): nid = models.AutoField(primary_key=True) # 自增 主键 caption = models.CharField(max_length=16)cl...
Django（三） ORM 数据库操作
人生就是一场修行
12-15 2万+
一、DjangoORM 创建基本类型及生成数据库表结构1、简介ORM：关系对象映射。定义一个类自动生成数据库的表结构。创建数据库的时候，一般有以下几种常用数据类型：数字、字符串以及时间。ORM分为两种： DB First 数据库里先创建数据库表结构，根据表结构生成类，根据类操作数据库 Code First 先写代码，执行代码创建数据库表结构 主流的orm都是code first。
BBS论坛项目之开发注册功能（包含详细的代码注释）
qq_42674604的博客
04-14 1011
访问注册页面 提交注册数据 激活注册账号 本功能主要实现为三个模块： 访问注册页面 提交注册数据 激活注册账号 在访问注册页面的时候我们主要实现点击顶部区域内的链接，打开注册页面。 由于不涉及业务逻辑。那么直接在controller层编写控制程序调用模板。在index.html中绑定crotroller层要跳转的逻辑。 @RequestMapping(path = "/register", method = RequestMethod.GET) public String getRegis
Python3 - 实现邮件的发送
热门推荐
LIN的博客
12-10 7万+
目录 一、 使用SMTP模块发送邮寄 二、 发送HTML格式右键 三、发送带附件的邮件 四、Django处理邮件的发送 4-1 settings配置 4-2 授权码的获取  4-3 视图函数 4-4 群发邮件（一次发送多份） 4-5 携带附件或发送HTML（需要接收方的支持） 4-6 基于SMTP的各大邮箱公司的 ‘服务器’ 及 ‘端口’ 一、 使用SMTP模块发送邮寄 ...
基于Django的前端渲染方式总结
LIN的博客
01-11 5370
 目录 一、基于后台Render传输数据，前台使用Django-Template渲染 1-0 渲染方式特点总结 1-1 后台Render传输数据 1-2 Template前端获取数据渲染 1-3 详细学习博客跳转 1-3-1 Django - 模板层 - 变量、过滤器、标签 1-3-2 Django - 模板层 - 模板的导入和继承 、静态文件的使用 1-3-2 基于此方法实现渲染...
Docker下搭建Django-MYSQL项目全攻略
在这个文档中，我们将学习如何在Docker容器中使用Docker Compose来构建和部署一个基于Django的Web应用程序，结合MySQL数据库。以下是详细的步骤： 1. **环境准备**： - 创建一个新的本地目录，用于存放项目的所有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值