三、注册功能

# 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. Codeforces 1173B Nauuo and Chess

    题目链接:http://codeforces.com/problemset/problem/1173/B 思路参考:https://www.cnblogs.com/blowhail/p/1099123 ...

  2. Java内存通道

    对文件执行I/O的另一种方法是将文件的一个区域映射到物理内存,并将其作为内存数组.可以使用MappedByteBuffer来执行内存映射文件I/O. 要使用内存映射文件I/O,请为文件获取FileCh ...

  3. C++公有继承、私有继承以及友元

    公有继承: 基类的成员在派生类中维持原来的访问权限,基类的publice成员为派生类的public成员,基类的protected成员为派生类的protected成员,基类的private成员在派生类的 ...

  4. 调用API接口，查询手机号码归属地（2）

    使用pymysql pip install pymysql 创建mysql测试表 CREATE TABLE `userinfo` ( `id` int(20) NOT NULL AUTO_INCREM ...

  5. C# 设计模式 （一）

    学习来自<大话设计模式>有兴趣可以研究一下 一.简单工厂模式 原理 子类对象可以赋值给父类对象.同一个父类对象的子类,通过switch语句new出来(当然用if也可以但那样判断就多了起来) ...

  6. Tomcat7安装和配置以及优化

    安装Tomcat7 下载安装方法一: 直接下载Tomcat7: wget http://mirrors.tuna.tsinghua.edu.cn/apache/tomcat/tomcat-7/v7.0 ...

  7. XOR linked list--- 异或链表

    异或链表的结构 这是一个数据结构.利用计算机的的位异或操作(⊕),来降低双向链表的存储需求. ... A B C D E ... –> next –> next –> next –& ...

  8. JVM配置参数理解，Cannot load this JVM TI agent twice

    基本参数 -Xms128m JVM初始分配的堆内存 -Xmx512m JVM最大允许分配的堆内存,按需分配 -XX:PermSize=64M JVM初始分配的非堆内存 -XX:MaxPermSize= ...

  9. quartz的使用(二.基本过程)

    1.关于各个要素的创建,SchedulerFactoryBean,CronTriggerFactoryBean及JobDetailFactoryBean全部实现spring中的FactoryBean& ...

  10. leetcode-158周赛-5225-最大相等频率

    题目描述: 方法: class Solution(object): def maxEqualFreq(self, A): count = collections.Counter() freqs = c ...