基于Django开发的SkyNet博客一——创建模型
基于Django开发的SkyNet博客二——base Template
上一篇博客讲解了base.html主要是制作网站的导航条，这一篇博客主要来介绍登录和注册界面。
登录界面
先上个图：
login.png
- 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。
- 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 %}
<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博客四——编辑界面
