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

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

登录界面

先上个图:
login.png

  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自带的用户系统登录该用户即可。


注册界面

也是先上个图,注册界面和登录界面比较相似:
register.png

下面是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博客四——编辑界面

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

溪语流沙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值