三、注册功能

# 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. win 解除鼠标右键关联

    点击「开始」→「运行」→「输入Regedit」→「确定」,打开注册表编辑器,找到子键: 「HKEY_CLASSES_ROOT\*\shellex\UltroEdit」,删除此项即可:

  2. POJ 3304 Segments (判断直线与线段相交)

    题目链接:POJ 3304 Problem Description Given n segments in the two dimensional space, write a program, wh ...

  3. HBase 永久RIT(Region-In-Transition)问题

    HBase 永久RIT(Region-In-Transition)问题:异常关机导致HBase表损坏和丢失,大量Regions 处于Offline状态,无法上线. 问题1:启动HBase时,HBase ...

  4. Netty 源码学习——EventLoop

    Netty 源码学习--EventLoop 在前面 Netty 源码学习--客户端流程分析中我们已经知道了一个 EventLoop 大概的流程,这一章我们来详细的看一看. NioEventLoopGr ...

  5. Django框架（四）—— 路由控制：有名/无名分组、反向解析、路由分发、名称空间、伪静态、APPEND_SLASH、不同版本的Django区别

    目录 路由控制 一.简单路由配置 二.无名分组 三.有名分组 四.反向解析 五.路由分发 六.名称空间(一般不使用) 七.伪静态 八.Django 2.x和Django 1.x 路由层区别 九.APP ...

  6. 什么是Web?

    Web这个词刚开始显得有些泛泛,似乎“冲浪”.“网上存在”以及“主页”等等都和它拉上了一些关系.甚至还有一种“Internet综合症”的说法,对许多人狂热的上网行为提出了质疑.我们在这里有必要作一些深 ...

  7. C# WinForm控件之advTree

    0.属性和方法 //属性方法 advTree1.DragDropEnabled = !advTree1.DragDropEnabled;//控制是否可以拖动节点到 不同的层级下 advTree1.Mu ...

  8. Redis数据结构之整数集合-intset

    当一个集合只包含整数值元素,并且这个集合的元素数量不多时,Redis会使用整数集合(intset)来存储集合元素. intset是紧凑的数组结构,同时支持16位.32位和64位整数. 结构 struc ...

  9. 牛客网多校训练第九场H Cutting Bamboos

    题目链接:https://ac.nowcoder.com/acm/contest/889/H 题意:给出n颗竹子的高度,q次询问,每次询问给出l,r,x,y,每次选取[l,r]中的竹子,砍y次砍掉所有 ...

  10. CF#541 D. Gourmet choice /// BFS 拓扑

    题目大意: 给定n m 第一行有n个数 第二行有m个数 接下来n行每行m列 有 = < > 位于 i j 的符号表示 第一行第i个数与第二行第j个数的大小关系 1.将n+m个数 当做按顺序 ...