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论坛项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块帖子列表展示帖子评论数.点赞数展示在线用户展示允许登录用户发贴.评论.点赞允许上传文件帖子可被 ...

随机推荐

burpsuite抓取小程序的数据包（指定DNS）
目标:burpsuite抓取微信小程序的数据包,而且该系统需指定DNS!否则无法访问! 大家都知道小程序是https传输的,所以手机端是需要安装burp证书的. 已忽略安装证书的步骤,可自己百度搜索, ...
【spring boot】SpringBoot初学（2.2）– SpEL表达式读取properties属性到Java对象
前言 github: https://github.com/vergilyn/SpringBootDemo 代码位置:(注意测试方法在,test下的SpelValueApplicationTest.c ...
centos6/7 下升级openssl并安装python3
今天是2019年的最后一天了,看了看自己今年写的随笔就一篇,实在有点少得可怜,就想着趁现在有点时间就再写一篇,^_^ centos6 或者centos 7 python 默认都是安装python 2 ...
汇编语言中LABEL伪指令的功能？
LABEL 一般用作定义变量和标号的属性,它是与紧接着的下一条变量和标号定义语句相关的,其类型可以为BYTE.WORD.DWORD.QWORD.NEAR.FAR等等.用法为:buffer(变量) LA ...
专访|高思教育创始人须佶成（上）【UncleW】
大家好,我是校长运营圈专栏作者UncleW. 2017年9月,高思教育发布董事会公告,宣布完成5.5亿元人民币融资.成立于2009年的高思教育到今天刚刚8岁,员工人数已突破2000人,2017年共有5 ...
06-SV随机化
1.受约束的随机测试法(CRT) 随着设计变得越来越大,要产生一个完整的激励集来测试设计的功能变得越来越困难.解决的办法是采用受约束的随机测试法自动产生测试集.CRT环境比定向测试的环境复杂,不仅需要 ...
记录 Docker 的学习过程（自建私有仓库）
私有仓库的创建 node1#wget http://harbor.orientsoft.cn/harbor-v1.4.0/harbor-offline-installer-v1.4.0.tgz nod ...
折半枚举+Hash（HDU1496升级版）
题目链接:N - 方程的解给定一个四元二次方程: Ax1^2+Bx2^2+Cx3^2+Dx4^2=0 试求−1000≤x1,x2,x3,x4≤1000非零整数解的个数. −10000≤A,B,C,D ...
GYCTF ezupload
上传一句话,没有任何过滤菜刀连接后,读取flag文件 bash -c/readflag >tmp cat tmp 上面是非预期的解法.应该是题出问题了.看了一个师傅的blog,看源码,发现预期 ...
深入浅出Mybatis系列五-TypeHandler简介及配置（mybatis源码篇）
注:本文转载自南轲梦注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎上篇文章<深入浅出Mybatis系列(四)---配置详解之typeAliase ...

bbs论坛注册功能（1）

bbs论坛注册功能（1）的更多相关文章

随机推荐

热门专题