三、注册功能

# 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. Linux的命名空间

    1. 为什么提供命名空间 命名空间是一种轻量级的虚拟化手段. 传统的虚拟化软件,是虚拟化多个不同的操作系统,对共享资源的限制很大. 通过提供命名空间,可以让进程与进程之间,用户与用户之间彼此看不到对方 ...

  2. HCW 19 Team Round (ICPC format) H Houston, Are You There?（极角排序）

    题目链接:http://codeforces.com/gym/102279/problem/H 大致题意: 你在一个定点,你有个长度为R的钩子,有n个东西在其他点处,问你能勾到的东西的数量是多少? 思 ...

  3. 总分 Score Inflation

    题目背景 学生在我们USACO的竞赛中的得分越多我们越高兴. 我们试着设计我们的竞赛以便人们能尽可能的多得分,这需要你的帮助 题目描述 我们可以从几个种类中选取竞赛的题目,这里的一个"种类& ...

  4. idea springboot 打包 war

    1.pom文件中将项目改为   war

  5. kernel32 的 GetVersionExA/W

    今天接到一个问题,说Kernel32 模块的 GetVersionEx 获取系统版本不准确, 然后让我查查什么原因, 我当时就想,它不准,就用ntdll的 RtlGetVersion 阿,或者 Rtl ...

  6. wall -- 向所有人的终端发送消息

    总览 (SYNOPSIS) wall [ message ] 描述 (DESCRIPTION) Wall 向 所有 登录的 并且 mesg(1) 权限 设为 yes 的 用户 发送 消息. 消息可以 ...

  7. Android中的Parcel机制(上)

    一．先从Serialize说起 我们都知道JAVA中的Serialize机制,译成串行化.序列化--,其作用是能将数据对象存入字节流当中,在需要时重新生成对象.主要应用是利用外部存储设备保存对象状态, ...

  8. paper 15 ：整理的CV代码合集

    这篇blog,原来是西弗吉利亚大学的Li xin整理的,CV代码相当的全,不知道要经过多长时间的积累才会有这么丰富的资源,在此谢谢LI Xin .我现在分享给大家,希望可以共同进步!还有,我需要说一下 ...

  9. 浅析php命令执行

    总结一下自己在命令执行这一方面收获的一些小技巧 Linux读取文件的一些命令 cat 从第一行开始,显示文件的所有内容 tac 从第最后一行开始,显示文件的所有内容(正好与cat相反) more 根据 ...

  10. NX二次开发-UFUN参数选择对话框UF_UI_select_parameters

    #include <uf.h> #include <uf_ui.h> #include <uf_modl.h> UF_initialize(); //参数选择对话框 ...