Django学习笔记之利用Form和Ajax实现注册功能（django与ajax交互）

Django学习笔记之利用Form和Ajax实现注册功能（django与ajax交互）

一、注册相关的知识点

1、Form组件

我们一般写Form的时候都是把它写在views视图里面，那么他和我们的视图函数也不影响，我们可以吧它单另拿出来，在应用下面建一个forms.py的文件来存放

2、局部钩子函数

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

3、全局钩子函数

#自定义全局钩子：验证两次密码是否一致 def clean(self): if self.cleaned_data.get("password") == self.cleaned_data.get("password_again"): return self.cleaned_data else: raise ValidationError("两次密码不一致")

4、 jQuery的属性操作相关的

attr： 一个参数是获取属性的值，两个参数是设置属性值removeAttr(属性名)： 删除属性值prop： 适应于属性的返回值是布尔类型的（单选，反选，取消的例子）removePorp: 删除属性的值

5、循环的两种方式：

$.each(数组/对象,function(i,v){})$("div").each(function(i,v){})

6、css中的三种隐藏：

1、display:none 隐藏所有内容2、visibility:hidden 隐藏内容3、overflow:hidden 隐藏溢出内容三者都是用来隐藏的：区别在于： visibility虽然隐藏了，但是被隐藏的内容依然占据这空间，这段隐藏了的内容却保留空间的位置会在网页中显示空白 而display:隐藏了不占用空间我们在注册的时候不用display：none，不然选择文件的那个功能就没有了，我们可以吧透明度

7、提交二进制数据用FormData

var formData=new FormData();formData.append("username",$("#id_username").val()); formData.append("email",$("#id_email").val());formData.append("tel",$("#id_tel").val());formData.append("password",$("#id_password").val());formData.append("password_again",$("#id_password_again").val());formData.append("avatar_img",$("#avatar")[0].files[0]);

记得要加上

contentType:falseprocessData:false

8、可以用下面的方法判断是什么请求

if request.ajax(): #如果ajax请求if request,method=="POST": #如果是POST请求

9、上传文件有一个固定的配置参数media，和static相似 但又不同

步骤如下：

- 首先在settings中配置：

# ============media配置===============MEDIA_URL="/media/" #别名MEDIA_ROOT=os.path.join(BASE_DIR,"app01","media","uploads") #具体路径

- 在url中配置

url(r'^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT}),

用处：

用处一：----- avatar = models.FileField(verbose_name='头像', upload_to='avatar', default="/avatar/default.png")会把接收的文件放在media指代的路径与upload_to的拼接：BASE_DIR+blog+media+uploads+avatar/a.pngavatar字段在数据库中保存的是：avatar/a.png 用处二：------

如果上传成功会把图片自动保存在这里

10、头像图片预览

//头像预览 $(".avatar_file").change(function () { var ele_file = $(this)[0].files[0]; //当前选中的文件 var reader = new FileReader(); reader.readAsDataURL(ele_file); //对应找到打开的url reader.onload=function () {{# 方式一#} $(".avatar_img").attr("src",this.result) ; //this.result是上面找到的url{# 方式二#}{# $(".avatar_img")[0].src=this.result; //设置图片属性#} } })

11、form自动生成的错误信息

当你定义了全局钩子的时候，而且正好出现你的那个全局钩子函数中的错（比如两次密码输入不一致），这样你打印错误信息的时候

会有一个__all__对象，这个就是你设置的全局钩子生成的。

所以还要单独判断一下，现在全局钩子只有一个，你可以这样判断，但是，当全局钩子多的时候就得一个一个分开来判断

if (i=="__all__"){ $("#id_password_again").after($span) }

二、具体实现注册操作

url.py

from django.conf.urls import url,includefrom django.contrib import adminfrom django.conf import settingsfrom django.views.static import servefrom blog import viewsurlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^login/', views.login), url(r'^index/', views.index), url(r'^v_code/', views.v_code), url(r'^login2/', views.login2), url(r'^pcgetcaptcha/', views.pcgetcaptcha), # 以上是bbs day75的内容 url(r'^reg/$', views.reg), url(r'^media/(?P.*)$', serve, {"document_root":settings.MEDIA_ROOT})]if settings.DEBUG: import debug_toolbar urlpatterns = [ url(r'^__debug__', include(debug_toolbar.urls)) ] + urlpatterns

views.py

def reg(request): logger.info("又来了，小伙子") collect_logger.info("小伙子又来洗.脚.了") if request.method == "POST": ret = {"ret":0} form_obj = forms.RegForm(request.POST) logger.debug(request.FILES) if form_obj.is_valid(): # 数据经过校验没问题 logger.debug(form_obj.cleaned_data) avatar_obj = request.FILES.get("avatar") # 创建用户 form_obj.cleaned_data.pop("re_password", "") models.UserInfo.objects.create_user( avatar=avatar_obj, **form_obj.cleaned_data ) ret["data"] = "/login/" else: # 数据校验失败 ret["code"] = 1 ret["data"] = form_obj.errors return JsonResponse(ret) form_obj = forms.RegForm() return render(request,"reg.html",{"form_obj":form_obj})

forms.py

from django import formsfrom django.core.exceptions import ValidationErrorfrom django.core.validators import RegexValidatorfrom blog import models# 登陆Formclass LoginForm(forms.Form): username = forms.CharField( label="用户名", min_length=3, max_length=12, error_messages={ "required": "用户名不能为空", "min_length": "用户名最短为3位", "max_length": "用户名最长12位", }, widget=forms.widgets.TextInput( attrs={"class": "form-control"} ) ) password = forms.CharField( label="密码", min_length=4, max_length=12, error_messages={ "required": "用户名不能为空", "min_length": "用户名最短3位", "max_length": "用户名最长12位", }, widget=forms.widgets.PasswordInput( attrs={"class": "form-control"} ) )# 注册Formclass RegForm(forms.Form): username = forms.CharField( label="用户名", min_length=3, max_length=12, error_messages={ "required": "用户名不能为空！", "min_length": "用户名最短3位", "max_length": "用户名最长12位" }, widget=forms.widgets.TextInput(attrs={"class": "form-control"}) ) password = forms.CharField( label="密码", min_length=4, max_length=12, error_messages={ "required": "密码不能为空！", "min_length": "密码最短4位", "max_length": "密码最长12位" }, widget=forms.widgets.PasswordInput(attrs={"class": "form-control"}) ) re_password = forms.CharField( label = "确认密码", min_length = 4, max_length= 12, error_messages={ "required": "确认密码不能为空！", "min_length": "密码最短4位", "max_length": "密码最长12位" }, widget=forms.widgets.PasswordInput(attrs={"class": "form-control"}) ) phone = forms.CharField( label = "手机", min_length = 11, max_length= 11, validators= [ RegexValidator(r'^\d{11}$', "手机号必须是数字"), RegexValidator(r'^1[356789][0-9]{9}$', "无效的手机号码") ], error_messages={ "required":"手机不能为空！", "min_length":"手机号码11位", "max_length":"手机号码11位" }, widget=forms.widgets.TextInput( attrs={"class":"form-control"} ) ) # 局部钩子 def clean_username(self): value = self.cleaned_data.get("username", "") if "金/瓶/梅" in value: raise ValidationError("不符/合社/会/主/义/核心价值观") elif models.UserInfo.objects.filter(username=value): raise ValidationError("用户名已存在") else: return value # 全局钩子 def clean(self): pwd = self.cleaned_data.get("password", "") re_pwd = self.cleaned_data.get("re_password", "") if re_pwd and pwd == re_pwd: return self.cleaned_data else: err_msg = "两次输入密码不一致" self.add_error("re_password",err_msg) raise ValidationError(err_msg)

reg.html

models.py

from django.db import models# Create your models here.from django.contrib.auth.models import AbstractUserclass UserInfo(AbstractUser): ''' 用户信息表 ''' nid = models.AutoField(primary_key=True) phone = models.CharField(max_length=11, null=True, unique=True) avatar = models.FileField(upload_to="avatars/", default="avatars/default.png") blog = models.OneToOneField(to="Blog", to_field="nid", null=True) def __str__(self): return self.username class Meta: verbose_name = "用户信息" verbose_name_plural = verbose_nameclass Blog(models.Model): ''' 博客信息 ''' nid = models.AutoField(primary_key=True) title = models.CharField(max_length=64) # 个人博客主题 theme = models.CharField(max_length=32) # 每个博客主题 def __str__(self): return self.title class Meta: verbose_name = "博客" verbose_name_plural = verbose_nameclass Category(models.Model): ''' 个人文章分类 ''' nid = models.AutoField(primary_key=True) title = models.CharField(max_length=32) # 分类主题 blog = models.ForeignKey(to="Blog", to_field="nid") # 外键关联博客,一个博客可以有多个分类 def __str__(self): return "{}-{}".format(self.blog.title, self.title) class Meta: verbose_name = "文章分类" verbose_name_plural = verbose_nameclass Tag(models.Model): ''' 标贴 ''' nid = models.AutoField(primary_key=True) title = models.CharField(max_length=32) # 标签 blog = models.ForeignKey(to="Blog", to_field="nid") # 所属的博客 def __str__(self): return self.title class Meta: verbose_name = "标签" verbose_name_plural = verbose_nameclass Article(models.Model): ''' 文章 ''' nid = models.AutoField(primary_key=True) title = models.CharField(max_length=64) # 文章标题 desc = models.CharField(max_length=255) # 文章描述 create_time = models.DateTimeField(auto_now_add=True) # 创建时间 category = models.ForeignKey(to="Category", to_field="nid", null=True) user = models.ForeignKey(to="UserInfo", to_field="nid") tag = models.ManyToManyField( to="Tag", through="Article2Tag", through_fields=("article", "tag") ) def __str__(self): return self.title class Meta: verbose_name = "文章" verbose_name_plural = verbose_nameclass ArticleDetail(models.Model): ''' 文章详情表格 ''' nid = models.AutoField(primary_key=True) content = models.TextField() article = models.OneToOneField(to="Article", to_field="nid") class Meta: verbose_name = "文章详情" verbose_name_plural = verbose_nameclass Article2Tag(models.Model): ''' 文章和标签多对多的关系 ''' nid = models.AutoField(primary_key=True) article = models.ForeignKey(to="Article", to_field="nid") tag = models.ForeignKey(to="Tag", to_field="nid") def __str__(self): return "{}-{}".format(self.article, self.tag) class Meta: unique_together = (("article", "tag"),) verbose_name = "文章-标签" verbose_name_plural = verbose_nameclass ArticleUpDown(models.Model): ''' 点赞表 ''' nid = models.AutoField(primary_key=True) user = models.ForeignKey(to="UserInfo", null=True) article = models.ForeignKey(to="Article", null=True) is_up = models.BooleanField(default=True) class Meta: unique_together = (("article","user")) verbose_name = "点赞" verbose_name_plural = verbose_nameclass Comment(models.Model): ''' 评论表 ''' nid = models.AutoField(primary_key=True) article = models.ForeignKey(to="Article", to_field="nid") user = models.ForeignKey(to="UserInfo", to_field="nid") content = models.CharField(max_length=255) create_time = models.DateTimeField(auto_now_add=True) parent_comment = models.ForeignKey("self", null=True) def __str__(self): return self.content class Meta: verbose_name = "评论" verbose_name_plural = verbose_name

settings.py(带logging模块)

"""Django settings for bbs_d76 project.Generated by 'django-admin startproject' using Django 1.11.11.For more information on this file, seethe full list of settings and their values, seeos# Build paths inside the project like this: os.path.join(BASE_DIR, ...)BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))# Quick-start development settings - unsuitable for production# See SECURITY WARNING: keep the secret key used in production secret!SECRET_KEY = 'jng4g!)5pve-0s7)6lv(nty7$jn^!p7ov+$-*hdn@!!kkg7q#e'# SECURITY WARNING: don't run with debug turned on in production!DEBUG = TrueALLOWED_HOSTS = []# Application definitionINSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'blog.apps.BlogConfig',]MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware',]ROOT_URLCONF = 'bbs_d76.urls'TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')] , 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, },]WSGI_APPLICATION = 'bbs_d76.wsgi.application'# Database# = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'bbs_d76', 'USER': 'root', 'PASSWORD': '1234567890', 'HOST': '127.0.0.1', 'PORT': 3306, }}# Password validation# = [ { 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', }, { 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', }, { 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', }, { 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', },]# Internationalization# = 'en-us'TIME_ZONE = 'UTC'USE_I18N = TrueUSE_L10N = TrueUSE_TZ = True# Static files (CSS, JavaScript, Images)# = '/static/'STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static")]# 指定一下认证使用 自定义的UserInfo表AUTH_USER_MODEL = "blog.UserInfo"# 用户上传的文件配置项MEDIA_URL = "/media/"MEDIA_ROOT = os.path.join(BASE_DIR, "media")# 日志配置BASE_LOG_DIR = os.path.join(BASE_DIR, "log")LOGGING = { 'version': 1, # 禁用已经存在的logger实例 'disable_existing_loggers': False, # 定义日志 格式化的 工具 'formatters': { 'standard': { 'format': '[%(asctime)s][%(threadName)s:%(thread)d][task_id:%(name)s][%(filename)s:%(lineno)d]' '[%(levelname)s][%(message)s]' }, 'simple': { 'format': '[%(levelname)s][%(asctime)s][%(filename)s:%(lineno)d]%(message)s' }, 'collect': { 'format': '%(message)s' } }, # 过滤 'filters': { 'require_debug_true': { '()': 'django.utils.log.RequireDebugTrue', }, }, # 日志处理器 'handlers': { 'console': { 'level': 'DEBUG', 'filters': ['require_debug_true'], # 只有在Django debug为True时才在屏幕打印日志 'class': 'logging.StreamHandler', 'formatter': 'simple' }, 'default': { 'level': 'INFO', 'class': 'logging.handlers.RotatingFileHandler', # 保存到文件，自动切 'filename': os.path.join(BASE_LOG_DIR, "info.log"), # 日志文件 'maxBytes': 1024 * 1024 * 50, # 日志大小 50M 'backupCount': 3, 'formatter': 'standard', 'encoding': 'utf-8', }, 'error': { 'level': 'ERROR', 'class': 'logging.handlers.RotatingFileHandler', # 保存到文件，自动切 'filename': os.path.join(BASE_LOG_DIR, "err.log"), # 日志文件 'maxBytes': 1024 * 1024 * 50, # 日志大小 50M 'backupCount': 5, 'formatter': 'standard', 'encoding': 'utf-8', }, 'collect': { 'level': 'INFO', 'class': 'logging.handlers.RotatingFileHandler', # 保存到文件，自动切 'filename': os.path.join(BASE_LOG_DIR, "xxx_collect.log"), 'maxBytes': 1024 * 1024 * 50, # 日志大小 50M 'backupCount': 5, 'formatter': 'collect', 'encoding': "utf-8" } }, # logger实例 'loggers': { # 默认的logger应用如下配置 '': { 'handlers': ['default', 'console', 'error'], # 上线之后可以把'console'移除 'level': 'DEBUG', 'propagate': True, }, # 名为 'collect'的logger还单独处理 'collect': { 'handlers': ['console', 'collect'], 'level': 'INFO', } },}INTERNAL_IPS = ['127.0.0.1',]

​​参考​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。