BBS之用户注册
思路梳理:
1.新建一个django项目,名称可以和bbs相关,准备好数据库、静态模板资源及配置好模板、数据库、用户表重命名配置。
2.先准备bbs项目8张表,并理清表之前关系,为后续项目准备。
3.使用form组件来验证注册用户信息,主要是利用钩子函数针对用户名是否存在及密码是否一致做校验。
4.添加路由,前端通过form表单序列化获取用户注册信息,利用ajax封装好数据和文件对象传送给后端,并获取后端传回的值在前端页面做展示。后端通过前端post请求发送的数据做进一步校验,数据没问题写入数据库并写到自定义字典,有问题通过字典的方式给前端返回数据。
难点:前端
注册之前端思路具体分析
1.通过form表单获取后端传送过来的form组件对象,循环打印form组件对象。
2.用户头像单独做处理,通过label标签包裹img对象,img标签都要有id值,src指定一个默认图片位置(/static/img/default.jpg),input标签类型为file且需要隐藏起来(id值执行label标签的for值),最后再单独再form标签结尾设置一个注册按钮,设置一个id值用于ajax向后端发送数据使用。
3.js相关操作之头像实时展示
1)先产生一个文件阅读器对象
2)获取用户上传的头像文件
3)将文件对象交给阅读器对象读取
4)等待文件阅读器对象加载完毕之后在修改src
5)修改img标签的src属性展示图片
4.js相关操作之注册按钮绑定点击事件
1)先产生一个内置对象
2)添加普通数据(通过each方法获取from表单格式化数据)
3)添加文件数据
4)发送ajax请求
1>data指向内置对象
2>由于发送文件和普通数据,需要额外对两个参数contentType和processData设置为false。
3>判断后端发送过来的值,如果是10000则通过当前网页打开另一个窗口,如果失败需要做针对性的渲染错误提示。
4>先利用变量名接收错误信息,利用each获取接收变量名并打印索引和数据对象,针对索引拼接标签id值,根据id值查找标签,修改下面的span标签内容,并给父标签添加错误样式
5>给所有input标签绑定获取焦点事件,并移除错误样式
注册之后端思路具体分析
1.针对ajax交互,设置一个字典,里面包含code和msg两个键值对。后期用于发送给前端使用
2.产生一个空的from_obj对象
3.判断请求方法是否是post,如果是post则给form_obj对象传送request.POST。
4.判断form_obj对象接收的所有值是否正确,正确使用一个新变量接收form_obj对象的cleaned_data所有数据。
5.移除confirm_password键值对
6.获取用户上传头像文件,并判断头像文件是否有值,没有值忽略操作(头像文件是request.FILES)。
7.创建用户数据(create_user方法)
8.利用JsonResponse返回一个字典给前端