一、数据库表分析
1、首先是用户表，用户表继承Django自带的auth_user表，目的是可以使用Django封装好的方法，不用自己手动写cookie和session操作，还可以自定义字段
2、个人站点表，和用户是一对一关系，一个用户都有一个站点
3.文章表，字段有标题和内容，并且还应该有文章的分类和标签，文章只能有一个分类，比如说这篇文章是Python，那篇是前端，但是一个文章可以有多个标签，所以应该还有文章分类表（和文章表是一对多的关系），文章标签表（和文章表是一对多的关系）
4.文章分类表
5.文章标签表
6.评论表，和用户是一对一的关系
7.论坛怎么能没有点赞评论，所以加一个点赞点踩表，一个用户一篇文章只能点一次赞或点一次踩，所以是一对多关系
关系图
二、表的建立
使用的是mysql
from django.db import models from django.contrib.auth.models import AbstractUser #导入AbstractUser类，继承之后，Django自带的Auth_user就被替换了 # Create your models here. class UserInfo(AbstractUser): # 自定义字段 phone = models.CharField(max_length=32) avatar = models.FileField(upload_to='avatar/',default='avatar/default.png') # 用户上传头像，upload_to是头像保存的位置，default是用户默认的头像 create_time = models.DateField(auto_now_add=True) # 关联个人页表 blog = models.OneToOneField(to='Blog',null=True) class Blog(models.Model): site_name = models.CharField(max_length=32) site_title = models.CharField(max_length=64) # 个人站点的样式文件 存该样式文件的路径 theme = models.CharField(max_length=64) #种类表 class Category(models.Model): name = models.CharField(max_length=32) blog = models.ForeignKey(to='Blog', null=True) #标签表 class Tag(models.Model): name = models.CharField(max_length=32) blog = models.ForeignKey(to='Blog', null=True) #文章表 class Article(models.Model): title = models.CharField(max_length=32) 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) tags = 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() class Comment(models.Model): user = models.ForeignKey(to='UserInfo') article = models.ForeignKey(to='Article') content = models.CharField(max_length=255) # 自己是自己的外键，回复如果有其他回复，那么他的parent就是第一个楼层，否则默认是null parent = models.ForeignKey(to='self',null=True)
还要在setting文件里：添加你继承AbstractUser的表名
AUTH_USER_MODEL='app01.UserInfo'
执行数据库迁移命令
python manage.py makemigrations
python mange.py migrate
三、注册页面
完成效果：
forms类的创建
from django import forms from . import models class MyForm(forms.Form): username = forms.CharField(label='用户名',max_length=14,min_length=3,error_messages={ 'max_length':'用户名不能超过14位！', 'min_length':'用户名不能少于3位！', 'required':'用户名不能为空！' },widget=forms.TextInput(attrs={'class':'form-control'})) password = forms.CharField(label='密码', max_length=14, min_length=3, error_messages={ 'max_length': '密码不能超过14位！', 'min_length': '密码不能少于3位！', 'required': '密码不能为空！' }, widget=forms.PasswordInput(attrs={'class': 'form-control'})) confirm_password = forms.CharField(label='确认密码', max_length=14, min_length=3, error_messages={ 'max_length': '确认密码不能超过14位！', 'min_length': '确认密码不能少于3位！', 'required': '确认密码不能为空！' }, widget=forms.PasswordInput(attrs={'class': 'form-control'})) email = forms.EmailField(label='邮箱',error_messages={ 'required':'邮箱不能为空！', 'invalid':'邮箱格式错误！' },widget=forms.EmailInput(attrs={'class':'form-control'})) #局部钩子 def clean_username(self): #获取用户传来的已通过form组件验证的username username = self.cleaned_data.get('username') #在数据库的UserInfo表内的username做匹配，取到对象 user_obj = models.UserInfo.objects.filter(username=username).first() #判断对象存不存在，不存在则创建，存在则返回 if user_obj: 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
前端页面的搭建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css"> <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script> <style> body { background-color: #eeeeee; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <h2 class="text-center">注册</h2> <hr> <form id="myform"> {% csrf_token %} {% for form in form_obj %} <div class="form-group"> <label for="{{ form.auto_id }}">{{ form.label }}</label> {{ form }} <span class="errors pull-right" style="color: red"></span> </div> {% endfor %} </form> <div class="form-group"> <label for="id_myfile">头像 <img src="/static/image/default.jpg" alt="" width="60" style="margin-left: 20px" id="id_img"> </label> <input type="file" name="myfile" id="id_myfile" style="display: none"> </div> <button class="pull-right btn btn-primary btn-block" id="id_submit">注册</button> </div> </div> </div>
//背景动态效果 可以直接复制使用 <script type="text/javascript" color="87,0,86" opacity='1' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
后端代码
def register(request): #自定义状态码,等会ajax要用到 respone_code={'code':100,'msg':''} #初始化forms组件 form_obj=myforms.RegForm() #渲染注册页面，locals()把from_obj,response_code传到了前端，起码目前是这样 return render(request,'register.html',locals())
这只是get请求的代码
上传头像
//上传头像并替换 $('#id_myfile').change(function () { // 先获取用户上传的文件对象 let fileObj = this.files[0]; // 生成一个内置对象 let fileReader = new FileReader(); // 将文件对象传递给内置对象 fileReader.readAsDataURL(fileObj); // 将读取出文件对象替换到img标签 fileReader.onload = function () { // 等待文件阅读器读取完毕再渲染图片 $('#id_img').attr('src', fileReader.result) } });
ajax异步提交
$('#id_submit').click(function () {
//生成一个Formdata对象
let formData = new FormData();
//$('#myform').serializeArray()是form表单中的所有数据，自动获取form表单中所有input框键值对，用each循环取出来
$.each($('#myform').serializeArray(), function (index, obj) {
//只是添加了普通的键值对,文件对象需要你手动添加
formData.append(obj.name, obj.value)
});
{#console.log($('#myform').serializeArray())#}
//手动添加文件对象
formData.append('myfile', $('#id_myfile')[0].files[0]);
$.ajax({
url: '',
type: 'post',
data: formData,
processData: false, // 告诉浏览器不要处理我的数据
contentType: false, // 不要用任何的编码，就用我formdata自带的编码格式，django能够自动识别改formdata对象
success: function (data) {
if (data.code == 100) {
/*跳转到登录界面
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面*/
location.href = data.url
} else {
$.each(data.msg, function (index, obj) {
let targetId = '#id_' + index; //字符串拼接 id_username,id_password...
$(targetId).next().html(obj[0]).parent().addClass('has-error')
})
}
}
})
});
$('input').focus(function () {
$(this).next().html('').parent().removeClass('has-error')
})
$('#myform').serializeArray()是form表单中的所有数据，自动获取form表单中所有input框键值对，用each循环取出来
console.log($('#myform').serializeArray())
post请求发送后端代码
from django.shortcuts import render,HttpResponse from . import myforms from . import models from django.http import JsonResponse # Create your views here. #注册 def register(request): back_dic = {'code':100,'msg':''} #实例化一个form对象 form_obj = myforms.MyForm() if request.method == 'POST': form_obj = myforms.MyForm(request.POST) if form_obj.is_valid(): # 拿到通过验证的用户信息字典，里面还有confirm_password cleaned_data = form_obj.cleaned_data # 由于创建用户不需要confirm_password这个字段，需要删除 cleaned_data.pop('confirm_password') # 获取用户上传的头像文件 file_obj = request.FILES.get('myfile') # 如果用户上传头像，则加入cleaned_data里并已通过创建到用户表里 if file_obj: cleaned_data['avatar'] = file_obj #因为我们需要创建的用户信息和值都在cleaned_data里面这里，cleaned_data又是一个字典，可以**打撒成？=？的方法传值 # 注意的是前端的name的值必须跟数据库里的字段一直才可以**传值 models.UserInfo.objects.create_user(**cleaned_data) back_dic['msg'] = '注册成功' back_dic['url'] = '/login/' else: back_dic['code'] = 101 back_dic['msg'] = form_obj.errors # 因为给前端传的是字典，需要用JsonResponse return JsonResponse(back_dic) return render(request,'register.html',locals())