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

登录界面

先上个图：

login.png

login.html

{% extends 'blog/base.html' %}

{% block title %}

SkyNet登录

{% endblock %}

{% block content %}

{% load static %}

用户登录

登录

{% 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。

form在这里的作用是在用户提交数据到后台之前先判断数据的合法性，这里的field就是html中的两个class为field的元素，注意要保证name名和这里的field相同，然后rules则是对应的法则，具体还有其他的法则请异步semantic-ui官网

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 %}

用户注册

提交

{% endblock %}

这里和login界面的代码相似，就不再赘述了。

下一篇

基于Django开发的SkyNet博客四——编辑界面