bbs论坛注册功能（1）
分析项目需求创建表：
STATICFILE_DIR = [
os.path.join(BASE_DIR,'static') #设置目录，bootstrip添加到目录中去，直接本地调用
]
# auth默认表
AUTH_USER_MODEL='app01.UserInfo' # 医用应用app01的userinfo表，不在使用默认的user表
from django.db import models
from django.contrib.auth.models import AbstractUser # Create your models here. # 定义用户表
class UserInfo(AbstractUser):
phone = models.BigIntegerField(null=True)
create_time = models.DateField(auto_now_add=True)
# 存储头像文件,把文件存放到avatar目录下，只存放路径信息
avatar = models.FileField(upload_to='avatar/', default='avatar/default.png') blog= models.OneToOneField(to='Blog',null=True) # 定义个人站点表
class Blog(models.Model):
# 站点名称
site_name = models.CharField(max_length=32)
# 站点标题
site_title = models.CharField(max_length=32)
# 个人站点样式文件，存该样式文件的路径
theme = models.CharField(max_length=64) # 文章分类表
class Category(models.Model):
name = models.CharField(max_length=64) 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=64)
# 文章简介
desc = models.CharField(max_length=256)
# 文章详情,TextField存储大量文本
content = models.TextField()
# 文章创建时间
create_time= models.DateField(auto_now_add=True)
# 查询优化
# 评论数
comment_num = models.IntegerField()
# 点赞数
up_num = models.IntegerField()
# 点踩数
down_num = models.IntegerField() blog = models.ForeignKey(to='Blog',null=True)
category = models.ForeignKey(to='Category',null=True)
# 隐藏关联表
tags = models.ManyToManyField(to='Tag',through='Article2Tags',through_fields=('article','tag'))
# 创建article与tags的关系表第三张表
class Article2Tags(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 Commnet(models.Model):
# 用户字段
user=models.ForeignKey(to='UserInfo')
# 文章字段
article = models.ForeignKey(to='Article')
# 评论内容
content = models.CharField(max_length=256)
# 评论时间
create_time = models.DateField(auto_now_add=True)
# 父评论
parent = models.ForeignKey(to='self',null=True)
设置后台views.py
from django.shortcuts import render,HttpResponse
from app01 import myforms def register(reques):
form_obj = myforms.MyForm()
return render(reques,'register.html',locals())
前端设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册账号</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>注册页面</h1>
<form id="myform">
{% csrf_token %}
{% for foo in form_obj %}
<div class="form-group">
<label for="{{ foo.auto_id }}">{{ foo.label }}</label>
{{ foo }}
{# 加载对应输入框的提示信息#}
<span class="errors"></span>
</div>
{% endfor %}
</form>
<div class="form-group">
{# 点击图片也可以删除文件#}
<label for="id_myfile">头像
<img src="/static/img/default.png" alt="" width="60" style="margin-left: 10px">
</label>
<input type="file" name="myfile" id="id_myfile" style="display: none">
</div>
<button class="btn btn-primary pull-right">注册</button>
</div>
</div>
</div>
</body>
</html>
实现点击头像上传图片后在头像上显示上传的头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册账号</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>注册页面</h1>
<form id="myform">
{% csrf_token %}
{% for foo in form_obj %}
<div class="form-group">
<label for="{{ foo.auto_id }}">{{ foo.label }}</label>
{{ foo }}
{# 加载对应输入框的提示信息#}
<span class="errors"></span>
</div>
{% endfor %}
</form>
<div class="form-group">
{# 点击图片也可以删除文件#}
<label for="id_myfile">头像
<img src="/static/img/default.png" alt="" width="80" style="margin-left: 10px" id="id_img">
</label>
<input type="file" name="myfile" id="id_myfile" style="display: none">
</div>
<button class="btn btn-primary pull-right">注册</button>
</div>
</div>
</div>
<script>
$('#id_myfile').change(function () {
//获取上传的文件对象
let fileobj=this.files[0];
//生成一个文件阅读器对象
let fileReader = new FileReader();
//将文件独放入文件阅读器中
fileReader.readAsDataURL(fileobj);
{#fileReader文件读取图片完成后再进行渲染#}
///动态显示头像
//等待文件加载完毕后在展示
fileReader.onload = function(){
//将读取出文件对象替换到img标签
$('#id_img').attr('src',fileReader.result)
}
}) </script>
</body>
</html>
往后端传送数据使用ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册账号</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>注册页面</h1>
<form id="myform">
{% csrf_token %}
{% for foo in form_obj %}
<div class="form-group">
<label for="{{ foo.auto_id }}">{{ foo.label }}</label>
{{ foo }}
{# 加载对应输入框的提示信息#}
<span class="errors pull-right" style="color: red"></span>
</div>
{% endfor %}
</form>
<div class="form-group">
{# 点击图片也可以删除文件#}
<label for="id_myfile">头像
<img src="/static/img/default.png" alt="" width="80" style="margin-left: 10px" id="id_img">
</label>
<input type="file" name="myfile" id="id_myfile" style="display: none">
</div>
<button class="btn btn-primary pull-right" id="id_submit">注册</button>
</div>
</div>
</div>
<script>
$('#id_myfile').change(function () {
//获取上传的文件对象
let fileobj=this.files[0];
//生成一个文件阅读器对象
let fileReader = new FileReader();
//将文件独放入文件阅读器中
fileReader.readAsDataURL(fileobj);
{#fileReader文件读取图片完成后再进行渲染#}
///动态显示头像
//等待文件加载完毕后在展示
fileReader.onload = function(){
//将读取出文件对象替换到img标签
$('#id_img').attr('src',fileReader.result)
}
});
//ajax提交数据
$('#id_submit').click(function () {
//生成一个formdata对象
let formData = new FormData();
//往formData中添加键值
$.each($('#myform').serializeArray(), function (index, obj) {
{#console.log(index,obj)#}
formData.append(obj.name,obj.value)
});
//手动添加文件数据
formData.append('myfile',$('#id_myfile')[0].files[0]);
$.ajax({
url:'',
type:'post',
//发送formData需要制定参数，数据不做处理
data:formData,
processData:false,
contentType:false,
success:function (data) {
console.log(data)
if (data.code == 100){
//跳转页面
location.href = data.url
} else{
$.each(data.msg,function (index,obj) {
console.log(index,obj)
let targetID = '#id_'+ index; //id_username,id_password
$(targetID).next().html(obj[0])
})
}
}
})
$('input').focus(function () {
$(this).next().html('')
})
})
</script>
</body>
</html>
from django.shortcuts import render
from app01 import myforms
from app01 import models
from django.http import JsonResponse # Create your views here.
def register(request):
back_dic={'code':100,'msg':''}
form_obj = myforms.MyForm()
if request.method == 'POST':
form_obj = myforms.MyForm(request.POST)
print(request.POST)
# 判断数据是否存在，存在返回true，不存在返回false
print(form_obj.errors) print(form_obj.is_valid())
if form_obj.is_valid():
data = form_obj.cleaned_data
# 将coonfirm_password去除掉
data.pop('confirm_password')
# 获取用户上传头像文件
file_obj = request.FILES.get('myfile')
# 判断用户是否上传了自己的头像
if file_obj:
# 数据库中头像路径字段是avator
data['avatar']=file_obj
models.UserInfo.objects.create_user(**data)
back_dic['msg']= '注册成功'
back_dic['url']='/login/'
else:
back_dic['code']=101
# 错误信息返回前台
back_dic['msg']=form_obj.errors
return JsonResponse(back_dic)
return render(request, 'register.html', locals())
实现效果：前台输入信息完成注册，输入错误提示红色信息，再次点击窗扣错误信息消失
bbs论坛注册功能（1）的更多相关文章
- BBS论坛 注册功能
三.注册功能 # views.py文件 def register(request): back_dic = {'code': 100, 'msg': ''} form_obj = myforms.My ...
- BBS论坛 登录功能
四.登录功能 前端页面html代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- python第一百三十天 ---简单的BBS论坛
简单的BBS论坛 实现功能 git仓库地址:https://github.com/uge3/BBS 1.整体参考“抽屉新热榜” + “博客园” 2.实现不同论坛版块 3.帖子列表展示 4.个人博客主页 ...
- Django项目 BBS论坛
BBS论坛 一.项目表分析 二.自定义form组件 三.注册功能 四.BBS论坛 登录功能
- BBS(第一天)项目之 注册功能实现通过forms验证与 前端ajax请求触发查询数据库判断用户是否存在的功能实现
1.BBS项目之注册功能通过forms验证 from django import forms from blog.models import User from django.contrib.auth ...
- bbs论坛登录相关功能（2）
昨天把注册功能页面做出来,接下来就是登录页面 登录功能: 1,用户账号,密码后台效验,错误信息在登录按钮右边显示 2.验证码,根据图片生成,点击图片刷新产生新的验证码 修改密码 注册 先把前端页面lo ...
- BBS注册功能
BBS注册功能 一.后端 1.组件校验数据 """ @author RansySun @create 2019-11-03-11:35 """ ...
- BBS登录与注册功能
登录功能 视图函数 def my_login(request): if request.method == 'GET': return render(request, 'login.html') el ...
- Python之路【第十八篇】Django小项目简单BBS论坛部分内容知识点
开发一个简单的BBS论坛 项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被 ...
随机推荐
- day5 字典 dict
数据类型划分:可变数据类型,不可变数据类型不可变数据类型:元组,数字,布尔,str, == 可哈希可变数据类型:list , dict, set == 不可哈希dict的 key 必须是不可变数据类型 ...
- Python机器学习及实践 课后小题
目录 第二章 2.3章末小结 @(Python机器学习及实践-----从零开始通往Kaggle竞赛之路) 第二章 2.3章末小结 1 机器学习模型按照使用的数据类型,可分为监督学习和无监督学习两大类. ...
- gulp常用插件之gulp-inject使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-inject这个插件的作用与wiredep类似,不同的是可以自己任意指定需要插入文件的列表.它同样是利用注释来寻找插入的位置.获取源文件 ...
- sqli-labs less-13 --> less-14
Less-13(报错盲注) 1.判断是否存在注入点 输入admin’时,出现如下报错信息,经过分析,存在注入点,且注入方式为:(‘’) 执行uname=admin')#&passwd=& ...
- 爬格子呀--IEEE极限编程大赛留念
10.14,坐标:电子科技大学 24h,不间断的编程,感觉还是很爽的. 排名一般,但是这是开始,未来还很远. 题目举例1: 广袤的非洲大草原上,狮子居住在一个个的网格里,他们的势力范围会以曼哈顿路程的 ...
- axios的数据拦截(拦截器)
大家在开发项目中是否遇到过数据延迟,举个例子 你点某个功能 会有 1-2s的延迟,这1-2s可能会在你的页面显示一个一直转着圈圈的动画,不知道有没有小伙伴还不知道这个功能是如何实现的呢?其实在一个项目 ...
- SpringBoot之Configuration
在SpringBoot中可以通过@Configuration对某个类注解将该类申明为配置类,以此在代替先前spring版本中配置xml中的功能,并且增加了可读性与维护性.并且在注解类中的类方法中可 ...
- 852. spfa判断负环
给定一个n个点m条边的有向图,图中可能存在重边和自环, 边权可能为负数. 请你判断图中是否存在负权回路. 输入格式 第一行包含整数n和m. 接下来m行每行包含三个整数x,y,z,表示存在一条从点x到点 ...
- 曼孚科技：AI领域3种典型的深度学习算法
深度学习(Deep Learning)是机器学习(Machine Learning)领域中一个新的研究方向,引领了第三次人工智能的浪潮. 本文整理了深度学习领域3种典型的算法,希望可以帮助大家更好地 ...
- Git仓库创建---克隆仓库---初始提交代码
1.在Git上创建仓库,添加成员,默认分支是“master”,仓库路径假设为http://192.168.1.1/root/project.git 2.在sourceTree上,点击“克隆”,输入上面 ...