bbs项目解读
1.注册功能
具体的效果图如下:
注册功能涉及到的逻辑步骤:
1.搭建前端html页面
2.向后端提交用户输入数据
3.对用户输入的数据格式进行校验
4.页面输入数据格式错误,及时向用户进行提示/正确则保存到数据库
所以,提到校验和提交数据,这就需要我们用到forms组件!!
回顾一下forms组件的功能:
1.生成页面可用的html标签
2.对用户提交的数据进行校验
3.保留上次内容并提示用户
但是!!我们在做项目的时候,不可避免的可能需要用到很多forms组件!之前我们都是写在views.py里面的,但是这样太过冗余,为了接耦合,我们可以新建一个文件夹里面专门放forms组件!!
myforms文件夹
regform.py
loginform.py
userform.py
orderform.py
接下来我们详细解读一下forms组件部分、视图函数部分和前端html部分的代码~~
forms组件部分
from django import forms # forms组件使用的时候需要先导入
from app01 import models # 当校验提交的用户名是否和数据库中的用户名一样时需要导入模型层
class MyForms2(forms.Form): # 定义一个forms组件类,该类继承forms.Form
# forms.CharField为input框,在内部可以通过widget指定input框的类型和样式attrs={}
# min_length最小位数,max_length最大位数,label字段名,不写是默认的类中定义的字段首字母大写的形式
# error_messages为页面输入数据格式不正确时提示的信息
username = forms.CharField(min_length=3,max_length=8,label='用户名',
widget=forms.TextInput(attrs={'class':'form-control'}),
error_messages={
'required':'用户名不能为空',
'min_length':'用户名最少3位',
'max_length':'用户名最多8位'
}
)
password = forms.CharField(label='密码',min_length=3,max_length=8,
widget=forms.PasswordInput(attrs={'class':'form-control'}),
error_messages={
'required': '密码不能为空',
'min_length': '密码最少3位',
'max_length': '密码最多8位'
}
)
confirm_password = forms.CharField(label='确认密码',min_length=3,max_length=8,
widget=forms.PasswordInput(attrs={'class': 'form-control'}),
error_messages={
'required': '密码不能为空',
'min_length': '密码最少3位',
'max_length': '密码最多8位'
}
)
email = forms.EmailField(label='邮箱',
widget=forms.EmailInput(attrs={'class': 'form-control'}),
error_messages={
'invalid':'邮箱格式不正确',
'required':'邮箱不能为空',
}
)
# 钩子函数,校验的第二道关卡,自定义校验规则,然后返回到前端提示
def clean_username(self): #类里面定义的字段对象会自动创建一个(clear_字段对象名)的函数
# 获取用户名,self.cleaned_data返回的是一个字典{},.get拿到key对应的值
username = self.cleaned_data.get('username')
# 判断数据库中是否存在当前用户名
is_exist = models.UserInfo.objects.filter(username=username)
if is_exist:
# 有则,报错
self.add_error('username','用户名已经存在')
# 将钩子函数钩去出来数据再放回去
return username
def clean(self):
password = self.cleaned_data.get('password')
confirm_password = self.cleaned_data.get('confirm_password')
if password != confirm_password:
self.add_error('confirm_password','两次密码不一致')
# 将钩子函数钩出来数据再放回去,全拿出来就需要全放回去
return self.cleaned_data
视图函数部分
from django.shortcuts import render
from app02.myform2 import MyForms2
from django.http import HttpResponse
from app01 import models
def register2(request):
# 产生一个空对象,将forms组件的字段传进来,再传到html页面
form_obj = MyForms2()
# form表单提交post触发
if request.method == 'POST':
# 获取form表单里面的普通键值对
form_obj = MyForms2(request.POST)
# 获取form表单的文件数据
file = request.FILES.get('file')
# 判断数据是否合法
if form_obj.is_valid():
# 移除确认密码,为**打散传到数据库做铺垫
form_obj.cleaned_data.pop('confirm_password')
# 用户提交了文件则触发
if file:
# 往{}这样的字典里添加了一个avatar的key和值
form_obj.cleaned_data['avatar'] = file
# 把字典打散了添加到数据库
models.UserInfo.objects.create_user(**form_obj.cleaned_data)
# 数据合法之后,返回到另一个页面
return HttpResponse('ok')
return render(request,'register2.html',locals())
html部分
向后端提交数据可以用form表单也可以用ajax提交
法1:form表单提交
<div class="container"> <!--bootstrap布局-->
<div class="row">
<div class="col-md-8 col-md-offset-2">
{# 这里我们采用了form表单向后端提交数据,form默认是提交的urlencoded的编码格式,#}
{# urlencoded的格式form表单只会将普通键值对封装到request.POST中,添加enctype="multipart/form-data",#}
{# 可以获取普通键值对和文件。#}
<form action="" novalidate method="post" enctype="multipart/form-data">
{% csrf_token %}
<h1 class="text-center">注册</h1>
{% for form in form_obj %}
<div class="form-group">
<label for="">{{ form.label }}</label>
{{ form }}
{# 这里是只有当以form表单提交的时候才会展示报错信息,如果以ajax就不该以这样的方式添加报错信息#}
<span style="color: red">{{ form.errors.0 }}</span>
</div>
{% endfor %}
<div>
{# 插入的图片可以指定宽度width,以此来规定图片的大小#}
<label for="myimg">头像<img src="/static/img/default.png" alt="" width="80" id="myimg2" ></label>
{# 添加display:none 来隐藏file文本框#}
<input type="file" name="file" id="myimg" style="display: none">
</div>
<input type="submit" value="提交" class="btn-primary btn form-control">
</form>
</div>
</div>
</div>
</body>
<script>
// change 文本域变化事件,当myimg的文本域变化是触发
// 这一步是将提交的头像动态的展示在前端页面上
$('#myimg').change(function (){
{#引出一个文件阅读器对象#}
{#1.先生成一个文件阅读器对象#}
let fileDataObj = new FileReader();
{#2.获取用户上传的头像#}
let fileobj = $(this)[0].files[0];
{#3.将文件对象交给阅读器对象进行读取#}
fileDataObj.readAsDataURL(fileobj);
{#4.利用文件阅读器将图片展示到前端页面,就是修改img的src属性#}
{#这里需要等文件阅读器加载完毕在执行修改src属性的操作#}
fileDataObj.onload=function (){
$('#myimg2').attr('src',fileDataObj.result) // fileDataObj.result是文件阅读器对象读取完毕文件的结果
}
})
</script>
bbs项目解读的更多相关文章
- BBS项目详解(forms快速创建登陆页面,登陆验证、通过阅读器进行头像上传的预览、内存管理器)
BBS项目涉及的知识点 django中知识点 钩子函数(局部钩子和全局钩子) 1.局部钩子就是用来做合法性校验,比如用户名有没有被使用等 2.全局的就是用来做对比校验,比如两次输入的密码是否一致 3. ...
- BBS项目部署
1.准备 项目架构为:LNM+Python+Django+uwsgi+Redis (L:linux,N:nginx,M:mysql) 将bbs项目压缩上传到: /opt 在shell中直接拖拽 ...
- auth复习和BBS项目的登录(1)
auth复习 auth组件 验证:authenticate(request,username='andy',password='123) 登录:login(request,user) 注销:login ...
- python 自动化之路 day 20 Django进阶/BBS项目【一】
一.django进阶 1.django orm 增删改查 1.1.创建表: 1 2 3 >>> from blog.models import Blog >>> b ...
- BBS项目知识点汇总
目录 bbs项目知识点汇总 一. JavaScript 1 替换头像 2 form表单拿数据 3 form组件error信息渲染 4 添加html代码 5 聚焦操作 二 . html在线编辑器 三 . ...
- BBS项目-01
目录 BBS项目 BBS开发流程: BBS表格创建: BBS项目 BBS开发流程: BBS项目: 开发流程: 需求分析 草拟一些项目的大致技术点和流程 架构设计 架构师(框架 语言 数据库 缓存数据库 ...
- 小福bbs—项目系统设计与数据库设计
这个作业属于哪个课程 班级链接 这个作业要求在哪里 作业要求的链接 团队名称 小福bbs 这个作业的目标 实现对校园论坛软件的制作,使其能够发布帖子,查看信息等 作业的正文 小福bbs--项目需求分析 ...
- 小福bbs——项目需求分析
# 一.简单了解 这个作业属于哪个课程 班级链接 这个作业要求在哪里 作业要求的链接 团队名称 小福bbs 这个作业的目标 第一个版本,根据项目预期情况形成 作业的正文 小福bbs--项目需求分析 其 ...
- day75 bbs项目☞后台管理+修改头像
目录 一.后台管理之添加文章 二.修改用户头像 bbs项目总结 一.后台管理之添加文章 添加文章有两个需要注意的问题: 文章的简介切取,应该想办法获取到当前文章的文本内容后再截取字符 XSS攻击,由于 ...
随机推荐
- 基于云服务MRS构建DolphinScheduler2调度系统
摘要:本文介绍如何搭建DolphinScheduler并运行MRS作业. 本文分享自华为云社区<基于云服务MRS构建DolphinScheduler2调度系统>,作者: 啊喔YeYe . ...
- 测试平台系列(95) 前置条件支持简单的python脚本
大家好~我是米洛! 我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程,希望大家多多支持. 欢迎关注我的公众号米洛的测开日记,获取最新文章教程! 回顾 上一节我们构思了一下怎么去支 ...
- Number.prototype.toString()方法
Number.prototype.toString(radix)方法返回指定基数对应Number的字符串值 radix可选参数,值范围为2~36,转化基数,如果未指定,默认值为10,如果radix值不 ...
- C语言 - 基础数据结构和算法 - 企业链表
听黑马程序员教程<基础数据结构和算法 (C版本)>,照着老师所讲抄的, 视频地址https://www.bilibili.com/video/BV1vE411f7Jh?p=1 喜欢的朋友可 ...
- Base64编码知识详解
在我们进行前端开发时,针对项目优化,常会提到一条:针对较小图片,合理使用Base64字符串替换内嵌,可以减少页面http请求. 并且还会特别强调下,必须是小图片,大小不要超过多少KB,等等. 那么,B ...
- Chrome自带功能实现网页截图
更新记录 本文迁移自Panda666原博客,原发布时间:2021年6月28日. 很简单,按下Ctrl+Shift+P,打开命令行窗口,如下图所示. 输入命令. Capture full size sc ...
- SRE,了解一下?35+岁程序员新选择
摘要:随着云业务的发展,今后会有越来越多的工程师深入到SRE领域. 本文分享自华为云社区<浅谈SRE角色认知>,作者: SRE确定性运维. 一.什么是SRE? SRE(Site Relia ...
- vue大型电商项目尚品汇(后台篇)day03
今天把平台属性的管理基本完成了,后台管理做到现在基本也开始熟悉,确实就是对ElementUI的一个熟练程度. 一.平台属性管理 1.动态展示数据 先把接口弄好,应该在第三级标题选择后进行发请求 静态页 ...
- opencv-python保存视频
import cv2 class WVideoManager: def __init__(self, write_path: str, width: int, height: int, FPS: in ...
- React项目中 使用 CSS Module
安装react-app-rewired 由于新的 react-app-rewired@2.x 版本的关系,还需要安装 customize-cra.但是我们这里不需要安装 react-app-rewir ...