基于Django开发的SkyNet博客三——登录注册界面

基于Django开发的SkyNet博客一——创建模型
基于Django开发的SkyNet博客二——base Template
上一篇博客讲解了base.html主要是制作网站的导航条，这一篇博客主要来介绍登录和注册界面。

登录界面

先上个图：

1. login.html

{% extends 'blog/base.html' %}
{% block title %}
    SkyNet登录
{% endblock %}
{% block content %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'blog/css/form.css' %}" type="text/css">
    <script type="text/javascript" src="{% static 'blog/js/login.js' %}"></script>
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <h2 class="ui header">
                用户登录
            </h2>
            <form class="ui form segment" method="post">
                <div class="ui stacked segment">
                    <div class="field">
                        <div class="ui input">
                            <input type="text" placeholder="邮箱" name="email">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui input">
                            <input type="password" placeholder="密码" name="pwd">
                        </div>
                    </div>
                </div>
                <div class="ui error message"></div>
                <div class="ui fluid large teal submit button">登录</div>
            </form>
        </div>
    </div>
{% endblock %}

这里用到了semantic-ui自带的form表单，每一个field可以理解为表单需要上传的字段，其他的不了解的可以去semantic-ui官网查询。
界面就简单介绍到这里了。

下面来看一下login.js

$(document).ready(function () {
    $('.ui.form').form({
        inline:true,
        on:'blur',
        fields: {
            email: {
                identifier: 'email',
                rules: [
                    {
                        type: 'empty',
                        prompt: '邮箱不能为空'
                    },
                    {
                        type: 'email',
                        prompt: '请输入有效的邮箱'
                    }
                ]
            },
            pwd: {
                identifier: 'pwd',
                rules: [
                    {
                        type: 'empty',
                        prompt: '密码不能为空'
                    },
                    {
                        type: 'length[6]',
                        prompt: '您的密码至少6位'
                    }
                ]
            }
        },
    }).api({
        url: '../login/',
        serializeForm: true,
        method: 'post',
        onSuccess: function (response) {
            if(response.error != ''){
                $('.ui.form').form('add prompt', 'email', response.error)
            }else {
                window.location.href = '../'
            }
        },
    });
})

在这里用到了semantic-ui的js库中的两个函数，form和api。

1. form在这里的作用是在用户提交数据到后台之前先判断数据的合法性，这里的field就是html中的两个class为field的元素，注意要保证name名和这里的field相同，然后rules则是对应的法则，具体还有其他的法则请异步semantic-ui官网
2. api在这里的作用是用来和后台进行交互，和ajax比较相似，这里主要是在后台成功返回数据之后进行判断，如果后台传递的过来错误，则添加一个提示给前台，否则将地址定位到主页。

在urls.py中添加login的url地址

url(r'^login/', csrf_exempt(login), name='login'),

同时更新view.py，编写login的view,

@csrf_exempt
def login(request):
    if request.method == 'POST':
        email = request.POST.get('email')
        pwd = request.POST.get('pwd')
        userquery = User.objects.filter(email=email)
        for user in userquery:
            if user is not None and user.check_password(pwd):
                auth.login(request, user)
                return HttpResponse(simplejson.dumps({'error': ''}, ensure_ascii=False))
        return HttpResponse(simplejson.dumps({'error': '用户不存在'}, ensure_ascii=False))
    return render(request, 'blog/login.html')

这里也很简单，首先获取email和pwd两个字段，在数据库中查找对应的user，如果有user则去判断密码是否正确，email和pwd都判断正确了，则使用django自带的用户系统登录该用户即可。

注册界面

也是先上个图，注册界面和登录界面比较相似：

下面是html布局

{% extends 'blog/base.html' %}
{% block title %}
    SkyNet注册
{% endblock %}
{% block content %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'blog/css/form.css' %}" type="text/css">
    <script type="text/javascript" src="{% static 'blog/js/register.js' %}"></script>
    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <h2 class="ui header">
                用户注册
            </h2>
            <form class="ui large form" method="post">
                <div class="ui stacked segment">
                    <div class="field">
                        <div class="ui input">
                            <input type="text" placeholder="昵称" name="name">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui input">
                            <input type="text" placeholder="邮箱" name="email">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui input">
                            <input type="password" placeholder="密码" name="pwd">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui input">
                            <input type="password" placeholder="再次输入密码" name="pwd2">
                        </div>
                    </div>
                </div>
                <div class="ui error message"></div>
                <div class="ui fluid large teal submit button">提交</div>
            </form>
        </div>
    </div>
{% endblock %}

这里和login界面的代码相似，就不再赘述了。
下一篇
基于Django开发的SkyNet博客四——编辑界面