BBS之注册与登录

settings.py

# 在项目中要使用到mysql，所以先在settings文件中完成对mysql数据库的配置。
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'bbs',
        'USER':'root',
        'PASSWORD':'123',
        'HOST':'127.0.0.1',
        'PORT':3306
    }
}

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'static')   # 配置静态文件
]

AUTH_USER_MODEL = 'app01.UserInfo'  # 去

# 在跟settings文件处于同一级别的__init__文件中，完成导入pymysql的配置。

import pymysql
pymysql.install_as_MySQLdb()

myforms.py

from django import forms
from django.forms import widgets
from app01 import models


class MyRegForm(forms.Form):
    username = forms.CharField(max_length=8, min_length=3, label='用户名',
                               error_messages={
                                   'max_length': '用户名最大八位',
                                   'min_length': '用户名最小三位',
                                   'required': '用户名不能为空'
                               }, widget=widgets.TextInput(attrs={'class': 'form-control'})
                               )
    password = forms.CharField(max_length=8, min_length=3, label='密码',
                               error_messages={
                                   'max_length': '密码最大八位',
                                   'min_length': '密码最小三位',
                                   'required': '密码不能为空'
                               }, widget=widgets.PasswordInput(attrs={'class': 'form-control'})
                               )
    confirm_password = forms.CharField(max_length=8, min_length=3, label='确认密码',
                                       error_messages={
                                           'max_length': '确认密码最大八位',
                                           'min_length': '确认密码最小三位',
                                           'required': '确认密码不能为空'
                                       }, widget=widgets.PasswordInput(attrs={'class': 'form-control'})
                                       )
    email = forms.EmailField(label='邮箱', error_messages={
        'required': "邮箱不能为空",
        'invalid': "邮箱格式错误"
    }, widget=widgets.EmailInput(attrs={'class': 'form-control'}))

    # 局部钩子 校验用户名是否已存在
    def clean_username(self):
        username = self.cleaned_data.get('username')
        is_user = models.UserInfo.objects.filter(username=username)
        if is_user:
            self.add_error('username', '用户名已存在')
        return username

    # 全局钩子 校验密码是否一致
    def clean(self):
        password = self.cleaned_data.get('password')
        confirm_password = self.cleaned_data.get('confirm_password')
        if not password == confirm_password:
            self.add_error('confirm_password', '两次密码不一致')
        return self.cleaned_data

models.py

from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here.
class UserInfo(AbstractUser):    # 千万不能放AbstractUser表里有的字段
    phone = models.BigIntegerField(null=True)   # null=True表示该项可以不填写
    # avatar存的是用户头像文件路径 用户上传的头像会自动保存到avatar文件夹下
    avatar = models.FileField(upload_to='avatar/',default='avatar/default.jpg')
    create_time = models.DateField(auto_now_add=True)   # 注册时间

    blog = models.OneToOneField(to='Blog',null=True)    ## 与个人站点处于一对一关系


class Blog(models.Model):    # 个人站点表
    site_title = models.CharField(max_length=32)    # 站点名称
    site_name = models.CharField(max_length=32)     # 站点名字
    site_theme = models.CharField(max_length=255)   # 用来存css的文件路径


class Category(models.Model):    # 标签表
    name = models.CharField(max_length=32)
    blog = models.ForeignKey(to='Blog')    # 与个人站点处于一对多关系


class Tag(models.Model):    # 分类表
    name = models.CharField(max_length=32)
    blog = models.ForeignKey(to='Blog')    # 与个人站点处于一对多关系


class Article(models.Model):    # 文章表
    title = models.CharField(max_length=255)
    desc = models.CharField(max_length=255)    # 存小段文本
    content = models.TextField()   # 存大段文本
    create_time = models.DateField(auto_now_add=True)   #文章创建时间

    # 数据库优化字段
    comment_num = models.IntegerField(default=0)    #
    up_num = models.IntegerField(default=0)     # 点赞数
    down_num = models.IntegerField(default=0)   # 点踩数

    # 外键字段
    blog = models.ForeignKey(to='Blog',null=True)
    category = models.ForeignKey(to='Category',null=True)
    tag = models.ManyToManyField(to='Tag',through='Article2Tag',through_fields=('article','tag'))

class Article2Tag(models.Model):
    article = models.ForeignKey(to='Article')
    tag = models.ForeignKey(to='Tag')


class UpAndDown(models.Model):   # 点赞点踩表
    user = models.ForeignKey(to='UserInfo')    # 与用户 表形成一对多关系
    article = models.ForeignKey(to='Article')  # 与文章表形成一对多关系
    is_up = models.BooleanField()  # 传布尔值  存0/1  用来记录是点赞还是点踩

class Comment(models.Model):    # 评论表
    user = models.ForeignKey(to='UserInfo')
    article = models.ForeignKey(to='Article')
    content = models.CharField(max_length=255)    # 评论内容大小
    create_time = models.DateField(auto_now_add=True)   # 评论时间
    parent = models.ForeignKey(to='self',null=True)    # 字关联字段

register.html文件

<body>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h2 class="text-center">注册</h2>   {# 将'注册'进行居中处理 #}
            <form id="myform" novalidate>
                {% csrf_token %}
                {% for foo in form_obj %}  {# 直接for循环 #}
                    <div class="form-group">
                        {#foo.auto_id获取foo渲染的input框的id值#}
                        <label for="{{ foo.auto_id }}">{{ foo.label }}</label>
                        {{ foo }}
                        <span class="errors pull-right" style="color: red;"></span>
                    </div>
                {% endfor %}
                <div class="form-group">    {# form-group用来处理输入框之间的间隙 #}
                    <label for="myfile">头像  {# 获取头像，通过input框  #}
                    <img src="/static/img/default.jpg" alt="" height="80" style=" margin-left: 20px" id="img">{# 将img放入label框中，点击图片也可以进行文件选择  margin-left用来调节头像与图片之间的距离#}
                    </label>
                    <input type="file" name="avatar" id="myfile" style="display: none">
                </div>
                <input type="button" class="btn btn-primary pull-right" value="注册" id="id_submit">
            </form>
        </div>
    </div>
</div>

<script>
    $('#myfile').change(function () {
        // 获取用户上传的头像 然后替换到img标签中
        // 1 获取用户上传的文件对象
        var fileObj = $(this)[0].files[0];
        // 2.利用内置对象FileReader
        var fileReader = new FileReader();  //文件阅读器
        // 3.将文件对象交由文件阅读器读取 文件内容
        fileReader.readAsDataURL(fileObj);  // IO操作速度较慢，异步
        // 4.找到img标签 修改src属性
        // 等待文件阅读器完全读取完文件数据之后 才做下面的操作 onload
        fileReader.onload = function(){ $('#img').attr('src',fileReader.result)}
    });

    // 绑定点击事件
    $('#id_submit').click(function () {
        // 1. 产生内置对象formdata
        var formData = new FormData();
        // 2. 循环添加普通键值对
        {#console.log($('#myform').serializeArray())#}
        $.each($('#myform').serializeArray(),function (index,obj) {
            formData.append(obj.name,obj.value)
        });
        // 3. 手动添加文件
        formData.append('myfile',$('#myfile')[0].files[0]) ;
        // 4. 发送ajax请求
        $.ajax({
            url:'',     {# url不写，默认往当前页面发送 #}
            type:'post',
            data:formData,

            // 传文件需要指定两个参数
            contentType:false,
            processData:false,

            success:function (data) {
                if (data.code==100){
                    location.href = data.url
                }else{
                    // 如果没有成功 说明用户输入的数据不合法 你需要展示错误信息
                    // console.log(data.msg)
                    // 能够将对应的错误信息准确无误的渲染到对应的input下面的span标签中
                    // 手动拼接input的id值
                    $.each(data.msg,function (index,obj) {
                        {#console.log(index,obj)#}
                        var targetId = '#id_' + index;
                        $(targetId).next().text(obj[0]).parent().addClass('has-error')
                    })
                }
            }
        })
    });

    $('input').focus(function () {
        $(this).next().text('').parent().removeClass('has-error')
    })
</script>
</body>