BBS 项目开发逻辑梳理
第一步：先进行数据库设计
数据库设计规则是：
1.先创建基表：用户表、站点表、文章表、标签表、分类表、文章2标签第三张关系表、点赞点踩表、评论表
2.书写表中的基本含有的字段
3.添加外键（一对一，一对多，多对多）
4.第三张关系表
注意事项：创建外键关系的时候，to='表名'，不要忘记引号，null=true,并不是所有的外键都加的第二步settings配置
一定要进行settings的相关配置：
1.数据库配置
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'bbszikao',
'USER':'root',
'PASSWORD': 'root',
'HOST':'127.0.0.1',
'PORT':3306,
'CHARSET':'utf8'
}
}
2.静态文件资源配置
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static')
]
3.models.py文件中，用户表继承AbstractUser类，需要对其进行settings配置
from django.contrib.auth.models import AbstractUser
配置auth模块的访问：
AUTH_USER_MODEL='app01.Userinfo'
4.静态图片资源settings配置+urls路由访问配置，暴露给用户查看，用户注册可以访问到默认头像
#settings文件配置：
MEDIA_ROOT=os.path.join(BASE_DIR,'media')
#urls文件访问头像路由配置
url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),第三步功能开发
注册功能
后端开发逻辑：
分为：register函数+register.html+myform.py文件
后端开发逻辑：
# myform.py 文件
1.建立myform.py文件，利用forms表单，提交注册的数据信息
创建class MyRegForm(forms.Form):类
用户名，密码，确认密码，邮箱
建立局部钩子函数校验用户名是否存在
建立全局钩子函数校验密码是否一致
# models.py 文件
2.把myform文件中的MyRegForm表单对象拿到，
然后把form_obj对象发送给前端register.html页面
form_obj=myform.MyRegForm()
return render(request,'register.html',locals())
后端开发逻辑如下：
把myform文件中的MyRegForm表单对象拿到
判断前端发送过来的请求方式是不是post请求
定义back_dic 字典
对用户在前端提交的post数据进行校验，生成form_obj对象
如果数据合法：
获取键值对
pop掉确认密码键值对
获取前端发送的文件请求（avatar），创建文件对象
判断用户是否上传文件：
上传文件了，把avatar添加到clean_data字典对象中
用户表创建用户（create_user）
back_dic字典添加msg信息，注册成功
back_dic字典添加url，login路径
数据不合法：
字典添加code=2000
字典添加msg=form_obj.errors
返回json数据到前端，[需要导入JsonResponse模块（from django.http import JsonResponse）]
然后把form_obj对象发送给前端register.html页面
前端开发逻辑：
上传头像文件功能，注册按钮功能
前端开发逻辑：register.html文件,前端只整理需要整理的
上传头像文件功能
<script>
//上传头像文件相关的处理
$('#mdd').on('change',function () {
//利用内置对象filereader完成文件的读取操作
let MyFileReader=new FileReader();
//获取用户上传的文件对象
let fileobj=$(this)[0].files[0];
//让文件阅读器读取文件,IO操作，异步
MyFileReader.readAsDataURL(fileobj);
//将读取之后的内容替换到img标签src属性中
MyFileReader.onload=function () {
$('#img').attr('src',MyFileReader.result)
}
});
// 注册按钮
$('#submit').click(function () {
// 将用户输入的数据全部发送给后端 普通的键值对 文件
let MyFormData = new FormData();
// 不停的朝里面添加键值对
{#MyFormData.append('','')#}
{#console.log($('#myform').serializeArray())#}
// 普通键值对添加完毕 （利用form标签内部有一个自动序列化普通键值对方法）
$.each($('#myform').serializeArray(),function (index,obj) {
MyFormData.append(obj.name,obj.value)
});
// 手动添加文件数据
MyFormData.append('avatar',$('#mdd')[0].files[0]);
// 发送ajax请求
$.ajax({
url:'',
type:'post',
data:MyFormData,
// 发送文件一定要指定两个参数
processData:false, // 不要让浏览器处理你的数据
contentType:false, // 不要使用任何的编码 django能够识别对象自身
success:function (data) {
if (data.code == 1000){
// 跳转到登录页面
window.location.href = data.url
}else{
$.each(data.msg,function (index,obj) {
{#console.log(index,obj)#} // index就是报错字段 obj就是错误信息 数组的形式
// 获取报错字段 手动拼接出该字段所对应的input框的id值
let targetId = '#id_' + index;
$(targetId).next().text(obj[0]).parent().addClass('has-error')
})
}
}
})
});
// input框获取焦点事件，---这个是鼠标放到input框上面后，错误信息消失
$('input').focus(function () {
$(this).next().text('').parent().removeClass('has-error')
})
</script>
图片验证码功能
后端开发逻辑
1.所需要的模块
import random
from PIL import Image,ImageDraw,ImageFont
from io import BytesIO,StringIO
'''
内存管理器模块：
BytesIO 保存数据，并且在获取的时候，是以二进制的方式给你
StringIO 保存数据，并且在获取的时候，是以字符串的方式给你
Image 生成图片
ImageDraw 在图片上写字
ImageFont 控制字的字体样式
'''
#io_obj=BytesIO() #你就将该对象看成是文件句柄即可
'''
什么是文件句柄？？？
在文件I/O中，要从一个文件读取数据，应用程序首先
要调用操作系统函数并传送文件名，并选一个到该文件
的路径来打开文件。该函数取回一个顺序号，即文件句柄
（file handle），该文件句柄对于打开的文件是唯一的
识别依据。要从文件中读取一块数据，应用程序需要调用
函数ReadFile，并将文件句柄在内存中的地址和要拷贝的
字节数传送给操作系统。当完成任务后，再通过调用系统函数
来关闭该文件。”
'''
2.图片验证码的开发分为两步：
随机取色+图片验证码
2.1随机取色
def get_random():
return random.randint(0,255),random.randint(0,255),random.randint(0,255)
2.2图片验证码函数
图片的宽高和随机取色---生成画板对象 Image.new
将生成好的图片对象交给ImageDraw---画笔对象 ImageDraw.Draw
字体样式 ---何种字体 ImageFont.truetype
#随机验证码 ---何种要求（大小写英文加数字，5位）
定义code=''
循环5次：
大写字母 upper_str
小写字母 lower_str
str(随机数) random_int
随机选取一个，random.choice([大写，小写，str(随机数)])
往图片上写一个验证码 img_draw.text
存储写的字 code+=tmp
将code存到session中，供全局函数访问 request.session['code']=code
生成I/O文件句柄 io_obj=BytesIO()
图片对象调用save方法保存io_obj文件对象，png的格式进行保存 img_obj.save(io_obj,'png')
return HttpResponse(io_obj.getvalue())
--------------------------------------------------------------------------------
3.图片验证码代码如下：
def get_code(request):
# 图片的宽高和随机取色 ----画板
img_obj=Image.new('RGB',(360,35),get_random())
#将生成好的图片对象交给ImageDraw ---画笔
img_draw=ImageDraw.Draw(img_obj)
#字体样式 ---何种字体
img_font=ImageFont.truetype('static/font/111.ttf',30)
#随机验证码 ---何种要求（大小写英文加数字，5位）
code=''
for i in range(5):
upper_str=chr(random.randint(65,90))
lower_str=chr(random.randint(97,122))
random_int=str(random.randint(0,9))
#随机选取一个
tmp=random.choice([upper_str,lower_str,random_int])
#往图片上写一个验证码
img_draw.text((i*60+60,0),tmp,get_random(),img_font)
#存储写的字
code+=tmp
print(code)
#这个验证码后面其他视图函数可能要用到，
#找个地方存一下，并且这个地方全局的视图函数都能访问
request.session['code']=code
io_obj=BytesIO() #你就将该对象看成是文件句柄即可
'''
在文件I/O中，要从一个文件读取数据，应用程序首先
要调用操作系统函数并传送文件名，并选一个到该文件
的路径来打开文件。该函数取回一个顺序号，即文件句柄
（file handle），该文件句柄对于打开的文件是唯一的
识别依据。要从文件中读取一块数据，应用程序需要调用
函数ReadFile，并将文件句柄在内存中的地址和要拷贝的
字节数传送给操作系统。当完成任务后，再通过调用系统函数
来关闭该文件。”
'''
img_obj.save(io_obj,'png')
return HttpResponse(io_obj.getvalue())
图片验证码实时刷新功能
前端开发逻辑
图片验证码随机变化的逻辑其实很简单，就是：
首先为验证码绑定点击事件，
其次拿到img中的src属性，
最后为src设置新的值，使得图片验证码不断的更换
<div class="col-md-6">
<img src="/get_code/" alt="" width="360" height="35" id="id_img">
</div>
<script>
//拿到img中的src，
//然后为src设置新的值，使得图片验证码不断的更换
$('#id_img').click(function () {
var oldPath = $(this).attr('src');
$(this).attr('src',oldPath+='?')
});
</script>
登录功能
后端开发逻辑
urls.py文件中：
# 登录功能
url(r'^login/',views.login,name='login'),
views.py文件中：
开发逻辑如下：
如果请求方式是post请求：
定义back_dic
获取post请求的用户名
获取post请求的密码
获取post请求的验证码
#先校验验证码是否正确，忽略大小写
#再校验用户名和密码是否正确
如果用户输入的验证码和后端保存的验证码相等：
再用auth模块校验用户名和密码是否相等，生成用户对象
如果相等：
利用auth模块保存用户对象的登录状态
#就可以在任意位置通过request.user获取到当前登录对象，并且request.user.is_authenticated()判断当前用户是否登录
back_dic字典添加msg登录成功
back_dic字典添加url，home主页路径
如果用户名和密码不相等：
back_dic字典添加code=2000
back_dic字典添加msg用户名或密码错误
如果验证码不相等：
back_dic字典添加code=3000
back_dic字典添加msg，验证码错误
通过JsonResponse返回字典
返回到登录页面
# 保存用户登录状态,这个不太会，对该知识点模糊要多注意了,
# 通过auth模块的login方法将用户保存起来，就可以在任意位置通过request.user，
# 获取到当前登录对象，并且可以通过request.user.is_authenticated()判断当前用户是否登录
auth.login(request, user_obj)
auth模块很重要需要多复习复习
前端开发逻辑
为登录按钮绑定点击事件，
利用ajax请求，把数据发送到后端
ajax的固定格式为：
$.ajax({
url:'',
type:'post',
data:{k,v键值对，'csrfmiddlewaretoken':'{{ csrf_token }}'},
success:function(data){
//此处的data就是后端返回过来的back_dic字典对象
如果code=1000：
跳转到对应页面的url连接
如果不等于1000：
渲染错误数据信息
信息错误后自动刷新验证码
}
})
提交post请求跳过csrf中间件拦截的两种方式：
{% csrf_token %} ------- 在form表单中书写
'csrfmiddlewaretoken':'{{ csrf_token }}' ------- 在ajax中的data字典中书写
<div>
<input type="button" class="btn btn-primary" value="登录" id="id_submit">
<span style="color: red;" id="id_error"></span> //在此处渲染页面的错误信息
</div>
<script>
$('#id_submit').click(function () {
$.ajax({
url:'',
type:'post',
data:{
//$('#标签名').val()是获取当前标签的值
'username':$('#id_username').val(),
'password':$('#id_password').val(),
'code':$('#id_code').val(),
'csrfmiddlewaretoken':'{{ csrf_token }}'
},
success:function (data) {
if(data.code == 1000){
// 跳转链接
window.location.href = data.url
}else{
//渲染错误数据信息
$('#id_error').text(data.msg);
//数据填写错误，提交后验证码再次刷新
var oldPath = $('#id_img').attr('src');
$('#id_img').attr('src',oldPath+='?')
}
}
})
</script>
首页搭建功能
后端开发逻辑
#home主页
第一步：查询所有文章，生成文章queryset对象，
第二步：把数据全部提交到home页面
def home(request):
#查询所有文章，生成文章queryset对象，
#把数据全部提交到home页面
article_queryset=models.Article.objects.all()
return render(request,'home.html',locals())
前端开发逻辑
主页搭建共分为四块，
第一块，导航条
第二块，左侧面板 2
第三块，中间面板 8
第四块，右侧面板 2
退出登录功能
后端开发逻辑
导入auth模块，导入登录认证装饰器：
from django.contrib import auth
from django.contrib.auth.decorators import login_required
给退出登录函数添加@login_required装饰器，装饰器不要加括号
利用auth模块的退出登录函数 ---auth.logout(request)
返回通过重定向反转解析到home主页 ---redirect(reversed('home'))
代码如下：
@login_required
def logout(request):
auth.logout(request)
return redirect(reversed('home')) ---退出登录之后跳转到home主页
前端开发逻辑
用户登录情况下：
展示用户名：
拿到用户的用户名，------超链接；通过auth模块的is_authenticated判断用户是否已经登录
修改密码
修改头像
后台管理
退出登录
未登录情况下：
展示登录 --超链接，反向解析login，{% url 'login' %}
展示注册 --超链接，反向解析register，{% url 'register' %}
部分逻辑代码如下：
{% if request.user.is_authenticated %}
<li><a href='#'> {{ request.user.username }} </a></li>
<li><a data-target="#myModal" data-toggle="modal">修改密码</a></li>
<li><a href="#">修改头像</a></li>
<li><a href="#">后台管理</a></li>
<li role="separator" class="divider"></li>
<li><a href="{% url 'logout' %}">退出登录</a></li>
{% else %}
<li><a href="{% url 'login' %}">登录</a></li>
<li><a href="{% url 'register' %}">注册</a></li>
{% endif %}
修改密码功能
后端开发逻辑
urls.py文件中开设修改密码的路由
url(r'^set_password/',views.set_password,name='set_pwd')
views.py文件
首先给修改密码函数添加装饰器@login_required
如果前端请求方式是post请求：
获取前端发送过来的原密码old_password
获取前端发送过来的新密码new_password
获取前端发送过来的确认密码confirm_password
#利用auth模块先判断前端发送过来的原密码是否正确,
#check_password是auth模块自带的校验密码是否相等的功能
request.user.check_password(old_password)
如果原密码正确：
如果新密码和确认密码相等：
利用auth模块中的set_password设置新的密码
然后利用auth模块中的save方法进行保存
返回重定向解析到登录页面
如果新密码和确认密码不相等：
返回文本，两次密码不一致
如果原密码不正确：
返回文本，原密码错误
前端开发逻辑
利用form表单，发送post请求
反向解析到set_pwd路径下，{% url 'set_pwd' %}
利用{% csrf_token %} 跳过csrf中间件
下面就是form表单中的5个div，分别是：
用户名，使用disable属性，默认展示用户名不支持修改
原密码
新密码
确认密码
取消，修改