三、注册功能

# views.py文件

def register(request):

    back_dic = {'code': 100, 'msg': ''}

    form_obj = myforms.MyForm()

    if request.method == 'POST':

        # print("进入了POST！！")

        # 前端传来了数据，现在要去校验了

        form_obj = myforms.MyForm(request.POST)

        # 自动校验，校验结果保存在 is_valid 中

        if form_obj.is_valid():

            data = form_obj.cleaned_data  # 可以看做，经过清洗的数据，键值形式存放，不知道是对象还是字典类型

            # print(type(data))

            # 将confirm_password去掉

            data.pop('confirm_password')

            # 获取用户上传的文件对象，因为上面的data里面是没有的

            # 上传的头像文件是放在request.FILES里面

            file_obj = request.FILES.get('myfile')

            # 判断用户是否上传了自己的头像，因为设置的是可以不上传头像

            # 如果不上传头像的话，会使用默认的头像

            if file_obj:

                # 上传了头像，那么就将路径添加到data中去

                data['avatar'] = file_obj

            # 用create_user  --> 密码会保存成密文

            models.UserInfo.objects.create_user(**data)

            back_dic['msg'] = '恭喜你，注册成功！'

            back_dic['url'] = '/login/'

        else:

            back_dic['code'] = ''

            back_dic['msg'] = form_obj.errors

        return JsonResponse(back_dic)

    return render(request, 'register.html', locals())
<!--register.html-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>BBS论坛</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

   <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">

    <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-4 col-md-offset-4">

                <h2 class="text-center"> 用户注册 </h2>

                {# 使用ajax向后端提交数据 #}

                <form id="myform">

                    {% csrf_token %}

                    {% for form in form_obj %}

                        <div class="form-group">

                            <label for="{{ form_obj.auto_id }}">{{ form.label }}</label>

                            {{ form }}

                        {# 下面用来显示错误信息的 #}

                        <span class="errors pull-right" style="color: red;"></span>

                        </div>

                    {% endfor %}

                </form>

                <div class="form-group">

                    <label for="id_myfile">头像

                        <img src="/static/img/1.jpg" alt="" width="100" style="margin-left: 20px" id="id_img">

                    </label>

                    <input type="file" name="myfile" id="id_myfile" style="display: none">

                </div>

                <button class="btn btn-success  btn-lg" id="id_submit">注册</button>

            </div>

        </div>

    </div>

    <script>

        $('#id_myfile').change(function () {

            // 获取用户上传的文件对象

            let fileObj = this.files[0];

            // 生成一个内置对象

            let fileReader = new FileReader();

            // 将文件对象传递给内置对象

            fileReader.readAsDataURL(fileObj);

            // 将读取出文件对象替换到img标签

            fileReader.onload = function(){ //等文件阅读器读取完毕再渲染图片

                $('#id_img').attr('src', fileReader.result)

            }

        });

        // ajax提交数据

        $('#id_submit').click(function(){

            // 生成一个FormData对象

            let formData = new FormData();

            // 往FormData对象中添加键值

            $.each($('#myform').serializeArray(), function (index, obj) {

                formData.append(obj.name, obj.value)

            });

            // 手动添加文件数据

            formData.append('myfile', $('#id_myfile')[0].files[0]);

            $.ajax({

                url: '',

                type:'post',

                data: formData,

                //指定两个参数

                processData: false,

                contentType: false,

                success: function (data){

                    if (data.code === 100){

                        //跳转到登录界面

                        console.log("ok!");

                        location.href = data.url;

                    }else{

                        $.each(data.msg, function (index, obj) {

                            let targetId = '#id_' + index;  // id_username, id_password...

                            $(targetId).next().html(obj[0]).parent().addClass('has-error')

                        })

                    }

                }

            });

        });

        $('input').focus(function () {

            $(this).next().html('').parent().removeClass('has-error')

        })

    </script>

</body>

</html>

BBS论坛 注册功能的更多相关文章

  1. bbs论坛注册功能（1）

    分析项目需求创建表: STATICFILE_DIR = [ os.path.join(BASE_DIR,'static') #设置目录,bootstrip添加到目录中去,直接本地调用 ] # auth ...

  2. BBS论坛 登录功能

    四.登录功能 前端页面html代码: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. python第一百三十天 ---简单的BBS论坛

    简单的BBS论坛 实现功能 git仓库地址:https://github.com/uge3/BBS 1.整体参考“抽屉新热榜” + “博客园” 2.实现不同论坛版块 3.帖子列表展示 4.个人博客主页 ...

  4. Django项目 BBS论坛

    BBS论坛 一.项目表分析 二.自定义form组件 三.注册功能 四.BBS论坛 登录功能

  5. BBS(第一天)项目之 注册功能实现通过forms验证与 前端ajax请求触发查询数据库判断用户是否存在的功能实现

    1.BBS项目之注册功能通过forms验证 from django import forms from blog.models import User from django.contrib.auth ...

  6. bbs论坛登录相关功能（2）

    昨天把注册功能页面做出来,接下来就是登录页面 登录功能: 1,用户账号,密码后台效验,错误信息在登录按钮右边显示 2.验证码,根据图片生成,点击图片刷新产生新的验证码 修改密码 注册 先把前端页面lo ...

  7. BBS注册功能

    BBS注册功能 一.后端 1.组件校验数据 """ @author RansySun @create 2019-11-03-11:35 """ ...

  8. BBS登录与注册功能

    登录功能 视图函数 def my_login(request): if request.method == 'GET': return render(request, 'login.html') el ...

  9. Python之路【第十八篇】Django小项目简单BBS论坛部分内容知识点

    开发一个简单的BBS论坛 项目需求: 整体参考“抽屉新热榜” + “虎嗅网” 实现不同论坛版块 帖子列表展示 帖子评论数.点赞数展示 在线用户展示 允许登录用户发贴.评论.点赞 允许上传文件 帖子可被 ...

随机推荐

  1. 2.3 Gulp

    在前端工程化中最重要的就是流程管理,借用 gulp 可以很方便的基于流的方式定义流程任务,并将任务串联起来,本节中将详细介绍 gulp ,包括: gulp 介绍 gulp 是什么 gulp 能够解决哪 ...

  2. PostgreSQL——服务器基本设置与操作

    一.编译安装: 环境准备: GNU make 版本 >=3.8 (make --version) ISO/ANSI C 编译器,至少須兼容 C89 标准,GCC 或 intel 編译器等均可 g ...

  3. 前端（十四）—— JavaScript常用类：Number、Date类、字符串、数组、Math类、正则

    JS常用类:Number类.Date类.Math类.字符串.数组.正则 一.Number 1.常用数字 整数:10 小数:3.14 科学计数法:1e5 | 1e-5 正负无穷:Infinity | - ...

  4. selenium3与Python3实战 web自动化测试框架✍✍✍

    selenium3与Python3实战 web自动化测试框架  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课 ...

  5. 2019ICPC南京网络赛F Greedy Sequence

    题意:对于1<=i<=n每次找到(pos[i]-k,pos[i]+k)内不大于i的最大那个数,ans[i]=ans[mx]+1,若ans[mx]未知则递归处理ans[mx] PS:这个题比 ...

  6. 关于Swagger @ApiModel 返回内容注释不显示问题

    今天做了一天@ApiModel希望Swagger生成的文档出现返回的内容注释,发现需要用到@ApiModel注解到你需要返回的类上 @ApiModelProperty作为字段的描述 例如  之后文档还 ...

  7. 小程序onclick的写法？

    bindtap="bindAction" 调用bindAction函数即可

  8. Windows跳板机无法共享本地主机剪贴板

    我的跳板机是Windows 2003 ,总是无法共享本地的剪贴板,我一般是在本地编辑SQL或者一些脚本,然后粘贴到跳板机中. 如果碰到无法共享本地剪贴板的情况,可以尝试按照以下步骤解决: 开始 -- ...

  9. JavaScript小实例-文本循环变色效果

    在现实生活中我们常常看到文字循环变色的效果,此效果不仅能让人们印象深刻,还提高了美观度,代码及注释如下: <!DOCTYPE html> <html> <head> ...

  10. Linux下的Ngnix服务器部署静态页

    一.安装FTP vsftpd 的名字代表”very secure FTP daemon”, 安全是它的开发者 Chris Evans 考虑的首要问题之一.在这个 FTP 服务器设计开发的最开始的时候, ...