Django学习[37] 用户系统设计，用户注册，登录，用户名预校验

博主： justin
发布时间：2024 年 03 月 13 日
172 次浏览
关闭评论
7922字数
分类： Python

User模块

用户表设计

username
password
email
phone
icon(头像)
is_active
is_delete

Models.py

用户表模型

class peiqi1user(models.Model):
    u_usename = models.CharField(max_length=32, unique=True)
    u_password = models.CharField(max_length=256)
    u_email = models.CharField(max_length=64, unique=True)
    u_icon = models.ImageField(upload_to='icons/%Y/%m/%d/')
    is_active = models.BooleanField(default=False)
    is_delete = models.BooleanField(default=False)
    
    class Meta:
        db_table = 'peiqi1_user'

迁移数据库

创建用户注册页面

新建文件夹user,新建register.html:

之前提到过，每一个模块都有自己的base文件，新建base_user.html:

在base_user.html中先继承base.html，方便之后的操作。

新建register.css文件：

{% extends 'base_user.html' %}  {# 继承 #}
{% load static %}


/*导入css样式*/
{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'peiqi1/user/css/register.css' %}">
{% endblock %}

{% block header %}
<header></header>
{% endblock %}

{% block content %}
{# 注册表单 #}
<div class="'container">
<form method="post" enctype="multipart/form-data" action="{% url 'peiqi1:register' %}" >  {# 指定post请求类型 #}

    {% csrf_token %}  {# Django自带放跨站攻击 #}

    <div class="form-group">
    <label for="username_input">用户名</label>
    <input name="username" type="text" class="form-control" id="username_input" placeholder="请输入用户名">
  </div>
      <div class="form-group">
    <label for="email_input">邮箱</label>
    <input name="email" type="text" class="form-control" id="email_input" placeholder="请输入邮箱">
  </div>

  <div class="form-group">
    <label for="password_input">密码</label>
    <input name="password" type="password" class="form-control" id="password_input" placeholder="请输入密码">
  </div>

  <div class="form-group">
    <label for="password_confirm_input">确认密码</label>
    <input type="password" class="form-control" id="password_confirm_input" placeholder="请再次输入密码">
  </div>

  <div class="form-group">
    <label for="icon_input">头像</label>
    <input name="icon" type="file" id="icon_input">  {# 这里的name是用来给views函数定位，抓取数据存入数据库中的 #}
  </div>

  <button type="submit" class="btn btn-success btn-block">注册</button>
</form>
</div>
{% endblock %}

添加url:

url(r'^register/', views.register),

views:

def register(request):
    if request.method == 'GET':
        data = {
            'title': '注册'
        }
        return render(request, 'user/register.html', context=data)

    elif request.method == 'POST':

        username = request.POST.get('username')
        email = request.POST.get('email')
        password = request.POST.get('password')
        icon = request.FILES.get('icon')

        user = peiqi1user()
        user.u_usename = username
        user.u_password = password
        user.u_email = email
        user.u_icon = icon

        user.save()
        return HttpResponse('注册成功')

测试:

观察数据库也有对应数据：

创建用户登录界面

现在创建注册成功时跳转的登录页面。

首先创建login.css,和login.html

base_user.html

{% extends 'base.html' %}
{% load static %}

{% block header %}
<header></header>
{% endblock %}

{{ block.super }}
<link rel="stylesheet" href="{% static 'peiqi1/user/css/user.css' %}">

{% extends 'base_user.html' %}
{% load static %}

/*导入css样式*/
{% block ext_css %}
    {{ block.super }}

{% endblock %}

{% block content %}
{# 注册表单 #}
<div class="'container">
<form method="post"  action="{% url 'peiqi1:login' %}" >  {# 指定post请求类型 #}

    {% csrf_token %}  {# Django自带放跨站攻击 #}

    <div class="form-group">
    <label for="username_input">用户名</label>
    <input name="username" type="text" class="form-control" id="username_input" placeholder="用户名/邮箱">
  </div>
  <div class="form-group">
    <label for="password_input">密码</label>
    <input name="password" type="password" class="form-control" id="password_input" placeholder="密码">
  </div>


  <button type="submit" class="btn btn-success btn-block">登录</button>
</form>
</div>
{% endblock %}

urls:

    url(r'^login/', views.login, name='login'),

views:

def login(request):
    if request.method == 'GET':
        data = {
            'title': '登录',
        }

        return render(request, 'user/login.html', context=data)

    elif request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')

        return HttpResponse('登录成功')

测试：

解决注册用户名/邮箱重复时报错

解决方法时是，在注册时，输入完用户名应该进行预校验，会提醒用户名已注册，而不是最后提交时报错。

添加预校验

实际上还是有一个事件触发，内容改变之后并且焦点变化之后，我们提交一次预校验。
我们将注册的用户名发送给服务器去校验一下，如果已经存在，则返回用户已经注册，否则用户名可以注册。
（我们可以映射一下，服务器返回0就是不可注册，返回1就是用户名可以注册）

创建register.js：

$(function () {

    var $username = $('#username_input');

    $username.change(function () {
        var username = $username.val().trim();

        /* 判断内容框是否为空，空的就不发送给服务器验证 */
        if (username.length) {
            // 将用户名发送给服务器预校验
            $.getJSON('/peiqi1/checkuser/', {'username': username}/*传入参数*/, function (data) {
                console.log(data); /* 打印返回的结果 */
            })
            console.log('hahaha')
        }
    })
})

{% block ext_js %}
{{ block.super }}
    <script type="text/javascript" src="{% static 'peiqi1/user/js/register.js' %}"></script>
{% endblock %}

urls:
用来提交给服务器去检查用户名是否可用

url(r'^checkuser/', views.check_user, name='check_user'),

views:

def check_user(request):
    # 从前端获取username
    username = request.GET.get('username')
    # 将数据库所有的username取出来
    users = peiqi1user.objects.filter(u_usename=username)

    data = {
        'status': HTTP_OK,
        'msg': 'user can use'
    }

    if users.exists():  # 判断username是否匹配
        data['status'] = HTTP_USER_EXIST
        data['msg'] = 'user already exist'
    else:
        pass
    return JsonResponse(data=data)

测试：
可以看到当我们输入完用户名时，鼠标点击其他地方，就会自动提交给服务器去检测用户名，并且返回是否可用

下面我们要将判断的结果返回到web页面中：
resigster.js:

$(function () {

    var $username = $('#username_input');

    $username.change(function () {
        var username = $username.val().trim();

        /* 判断内容框是否为空，空的就不发送给服务器验证 */
        if (username.length) {
            // 将用户名发送给服务器预校验
            $.getJSON('/peiqi1/checkuser/', {'username': username}/*传入参数*/, function (data) {
                console.log(data); /* 打印返回的结果 */

                var $username_info = $('#username_info');

                if (data['status']===200){ /*如果状态码位200*/
                    $username_info.html('用户名可用').css('color', 'green');
                }
                else if(data['status']===901){ /*如果状态码为901*/
                    $username_info.html('用户已存在').css('color', 'red');
                //预留其他的状态码
                }
            })
        }
    })
})

测试：