表创建及,同步注册功能 - forms组件 - 用户头像前端实时展示,登录功能 - 实现图片验证码

LingofZhi

已于 2022-06-15 19:53:26 修改

阅读量125

点赞数

文章标签：前端 django python

于 2022-06-15 19:46:02 首次发布

本文链接：https://blog.csdn.net/qq_46857025/article/details/125303521

版权

本文介绍了如何在前端实现用户头像的实时展示，以及使用Django框架构建注册和登录功能，包括同步数据库表创建、forms组件的应用，并详细讲述了登录时图片验证码的实现过程，涉及相关HTML模板register.html和login.html的设计以及URL配置。

摘要由CSDN通过智能技术生成

数据库表创建及同步

'''
表的关系如下（models.py）
1、用户表
	继承AbstractUser （既具有auto_user表字段，也有扩展字段）
	
	扩展   
	phone  电话号码
    avatar   用户头像
    creat_time    创建时间
    
     外键字段
    	一对一个人站点表（查询频率较高，建在用户表）
    	
    from django.contrib.auth.models import AbstractUser
	class UserInfo(AbstractUser):
    phone = models.BigIntegerField(verbose_name='手机号',null=True)
    #头像
    avatar = models.FileField(upload_to='avatar/',default='avatar/default.png',verbose_name='用户头像')
    '''
    给avatar字段传文件对象，该文件会自动存储到avatar字段值保存文件路径avatar/default.png
    '''
    create_time = models.DateField(auto_now_add=True,verbose_name='创建时间')

    blog = models.OneToOneField(to='Blog',null=True,on_delete=models.CASCADE)
    （站点）
    
    
2.个人站点表
    site_name 站点名称
    site_title   站点标题
    site_theme  站点样式
    
    
    class Blog(models.Model):
    site_name = models.CharField(verbose_name='站点名称',max_length=32)
    site_title = models.CharField(verbose_name='站点标题',max_length=32)
    #site_theme存放的是css/js的文件路径
    site_theme = models.CharField(verbose_name='站点样式',max_length=64)
    
    
3.文章标签表
   name        标签名
   外键字段
      一对多个人站点   
      
    class Tag(models.Model):
    name = models.CharField(verbose_name='文章标签',max_length=32)
    blog = models.ForeignKey(to='Blog', null=True,on_delete=models.CASCADE)
    
    
 4.文章分类表
   name        分类名
	  外键字段
         一对多个人站点
         
    class Category(models.Model):
    name = models.CharField(verbose_name='文章分类',max_length=32)
    blog = models.ForeignKey(to='Blog',null=True,on_delete=models.CASCADE)
    
    
 5.文章表
   title   文章标题
   desc    文章简介
   content 文章内容
   create_time 发布时间

   数据库字段设计优化(******)（设计为普通字段，然后同步的将对应的普通字段更新即可）
   (虽然下述的三个字段可以从其他表里面跨表查询计算得出，但是频繁跨表效率)
        up_num                  点赞数
        down_num                点踩数
        comment_num         	评论数

    外键字段
       一对多个人站点
       多对多文章标签
       一对多文章分类
	class Article(models.Model):
    title = models.CharField(verbose_name='文章标题',max_length=64)
    desc = models.CharField(verbose_name='文章简介',max_length=255)
    #文章内容由很多，一般情况下使用TextFiled
    content = models.TextField(verbose_name='文章内容')
    create_time = models.DateField(auto_now_add=True)

    #数据库字段设计优化
    up_num = models.BigIntegerField(verbose_name='点赞数',default=0)
    down_num = models.BigIntegerField(verbose_name='点踩数',default=0)
    comment_num = models.BigIntegerField(verbose_name='评论数',default=0)

    blog = models.ForeignKey(to='Blog',null=True,on_delete=models.CASCADE)
    category = models.ForeignKey(to='Category',null=True,on_delete=models.CASCADE)

    #多对多文章标签(三种方式，其中我们用半自动)
    tags = models.ManyToManyField(to='Tag',
                                  through='Article2Tag',
                                  through_fields=('article','tag'),
                                  )
     
    #第三张关系表
	class Article2Tag(models.Model):
    article = models.ForeignKey(to='Article',on_delete=models.CASCADE)
    tag = models.ForeignKey(to='Tag',on_delete=models.CASCADE)
    
    
6.点赞点踩表
    记录哪个用户给哪篇文章点了赞还是点了踩
    user                        ForeignKey(to="User")               
    article                 	ForeignKey(to="Article")    
    is_up                       BooleanField()


	class UpAndDown(models.Model):
    user = models.ForeignKey(to='UserInfo',on_delete=models.CASCADE)
    article = models.ForeignKey(to='Article',on_delete=models.CASCADE)
    is_up = models.BooleanField()   #存布尔值0/1
    
    
  
7.文章评论表
    记录哪个用户给哪篇文章写了哪些评论内容
    user                        ForeignKey(to="User")               
    article                 	ForeignKey(to="Article")
    content                 	CharField()
    comment_time        		DateField()
    # 自关联
    parent                  	ForeignKey(to="Comment",null=True)      
    # ORM专门提供的自关联写法 
    parent                 	 	ForeignKey(to="self",null=True)

	class Comment(models.Model):
    user = models.ForeignKey(to='UserInfo',on_delete=models.CASCADE)
    article = models.ForeignKey(to='Article',on_delete=models.CASCADE)
    content = models.CharField(verbose_name='评论内容',max_length=255)
    comment_time = models.DateTimeField(verbose_name='评论时间',auto_now_add=True)

    #自关联
    parent = models.ForeignKey(to='self',null=True,on_delete=models.CASCADE)
    #记得要加null=True
'''

views.py导的模块

from django.shortcuts import render,HttpResponse,redirect
from app01.myforms import MyRegForm
from app01 import models
from django.http import JsonResponse

forms组件

myform.py

# 书写针对用户表的forms组件代码
from django import forms
from app01 import models
class MyRegForm(forms.Form):
    username = forms.CharField(label='用户名',
                               max_length=8,
                               min_length=3,
                               error_messages={
   
                                   'min_length': '用户名最小3位',
                                   'max_length': '用户名最大8位',
                                   'required': '用户名不能为空'
                               },
                               # 还需要让标签有bootstrap样式
                               widget=forms.widgets.TextInput(
                                   attrs={
   
                                       'class': 'form-control'})
                               )
    password = forms.CharField(label='密码',
                               max_length=8,
                               min_length=3,
                               error_messages={
   
                                   'min_length': '密码最小3位',
                                   'max_length': '密码最大8位',
                                   'required': '密码不能为空'
                               },
                               # 还需要让标签有bootstrap样式
                               widget=forms.widgets.PasswordInput(
                                   attrs={
   
                                       'class': 'form-control'})
                               )
    confirm_password = forms.CharField(
        label='确认密码', max_length=8, min_length=3,
        error_messages={
   
            'min_length': '确认密码最小3位',
            'max_length': '确认密码最大8位',
            'required': '确认密码不能为空'
        },
        # 还需要让标签有bootstrap样式
        widget=forms.widgets.PasswordInput(
            attrs={
   'class': 'form-control'})
        )
    email = forms.EmailField(label='邮箱',
                             error_messages={
   
                                 'required': '邮箱不能为空'