网站搭建笔记精简版-廖雪峰教程学习@[三川水祭]
仅作学习交流使用，将来的你会感谢现在拼命努力的自己！！！
这里搞了两天终于给调通了！！！
这里的流程是首先浏览器输入http://localhost:9000/，进入主页面，点击右上角注册，__base.html中通过链接跳转到http://localhost:9000/register网页，触发handlers.py文件中的@get('/register')请求，加载register.html网页，填写好信息后，点击提交按钮，会触发register.html的block beforehead部分的JavaScript代码。JavaScript代码的主要几个步骤为：
1：校验输入值是否正确。
2：针对密码生成SHA1值。
3：执行@get(’/api/users’)函数，在该部分提交信息，并向浏览器返回cookie。
4：完成后返回主页。
handlers
首先我们通过API来实现用户注册这个功能。通过向handlers.py文件加入如下代码。
# 显示注册页面
@get('/register')
async def register():
return {
'__template__': 'register.html'
}
# email与password的通配符
_RE_EMAIL = re.compile(r'^[a-z0-9\.\-\_]+\@[a-z0-9\-\_]+(\.[a-z0-9\-\_]+){1,4}$')
_RE_SHA1 = re.compile(r'^[0-9a-f]{40}$')
COOKIE_NAME = 'awesession' #用来在set_cookie中命名
_COOKIE_KEY = configs.session.secret #导入默认设置
# set_cookie的一个参数，生成cookie值，这个函数不设置为async，因为需要等待其执行完后才可执行下一步，这里博主花了一天时间检查出的-_-|||
def user2cookie(user, max_age):
'''
Generate cookie str by user.
'''
# build cookie string by: id-expires-sha1，即id-到期时间-摘要算法
expires = str(int(time.time() + max_age))
s = '%s-%s-%s-%s' % (user.id, user.passwd, expires, _COOKIE_KEY)
L = [user.id, expires, hashlib.sha1(s.encode('utf-8')).hexdigest()]
return '-'.join(L)
# 用户注册api，用来post信息的
@post('/api/users')
async def api_register_user(*, name, email, passwd):
# 判断值是否正确
if not name or not name.strip():
raise APIValueError('name')
if not email or not _RE_EMAIL.match(email):
raise APIValueError('email')
if not passwd or not _RE_SHA1.match(passwd):
raise APIValueError('passwd')
users = await User.findAll(where='email=?', args=[email])
if len(users) > 0:
raise APIError('register:failed', 'email', 'Email is already in use.')
# 注册到数据库上，此处将uid调到外部来，是因为在后面的密码存储摘要算法时要进行计算。
uid = next_id()
sha1_passwd = '%s:%s' % (uid, passwd)
user = User(id=uid, name=name.strip(), email=email, passwd=hashlib.sha1(sha1_passwd.encode('utf-8')).hexdigest(), image='http://www.gravatar.com/avatar/%s?d=mm&s=120' % hashlib.md5(email.encode('utf-8')).hexdigest())
await user.save()
# make session cookie，并返回浏览器客户端
r = web.Response()
r.set_cookie(COOKIE_NAME, user2cookie(user, 86400), max_age=86400, httponly=True)
user.passwd = '******'
r.content_type = 'application/json'
r.body = json.dumps(user, ensure_ascii=False).encode('utf-8')
# 返回r用于register.html网页的JavaScript部分继续执行
return r
html文件处理
<!-- 从__base__.html网页中继承模板-->
{% extends '__base__.html' %}
<!-- 文件顶头名字为注册 -->
{% block title %}注册{% endblock %}
<!-- 子页面可以在<head>标签关闭前插入JavaScript代码 -->
{% block beforehead %}
<script>
<!-- 判断是否邮箱输入正确 -->
function validateEmail(email) {
var re = /^[a-z0-9\.\-\_]+\@[a-z0-9\-\_]+(\.[a-z0-9\-\_]+){1,4}$/;
return re.test(email.toLowerCase());
}
<!-- 网页关闭前执行的具体函数 -->
$(function () {
var vm = new Vue({
el: '#vm',
data: {
name: '',
email: '',
password1: '',
password2: ''
},
methods: {
submit: function (event) {
event.preventDefault();
var $form = $('#vm');
if (! this.name.trim()) {
return $form.showFormError('请输入名字');
}
if (! validateEmail(this.email.trim().toLowerCase())) {
return $form.showFormError('请输入正确的Email地址');
}
if (this.password1.length < 6) {
return $form.showFormError('口令长度至少为6个字符');
}
if (this.password1 !== this.password2) {
return $form.showFormError('两次输入的口令不一致');
}
<!-- 将字符串转化为小写 -->
var email = this.email.trim().toLowerCase();
$form.postJSON('/api/users', {
name: this.name.trim(),
email: email,
passwd: CryptoJS.SHA1(email + ':' + this.password1).toString()
}, function (err, r) { <!-- 这里没懂 -->
if (err) {
return $form.showFormError(err);
}
<!-- 如果登陆成功，返回'/'，触发@get('/') -->
return location.assign('/');
});
}
}
});
$('#vm').show();
});
</script>
{% endblock %}
{% block content %}
<div class="uk-width-2-3">
<h1>欢迎注册！</h1>
<form id="vm" v-on="submit: submit" class="uk-form uk-form-stacked">
<div class="uk-alert uk-alert-danger uk-hidden"></div>
<div class="uk-form-row">
<label class="uk-form-label">名字:</label>
<div class="uk-form-controls">
<input v-model="name" type="text" maxlength="50" placeholder="名字" class="uk-width-1-1">
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">电子邮件:</label>
<div class="uk-form-controls">
<input v-model="email" type="text" maxlength="50" placeholder="[email protected]" class="uk-width-1-1">
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">输入口令:</label>
<div class="uk-form-controls">
<input v-model="password1" type="password" maxlength="50" placeholder="输入口令" class="uk-width-1-1">
</div>
</div>
<div class="uk-form-row">
<label class="uk-form-label">重复口令:</label>
<div class="uk-form-controls">
<input v-model="password2" type="password" maxlength="50" placeholder="重复口令" class="uk-width-1-1">
</div>
</div>
<div class="uk-form-row">
<button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-user"></i> 注册</button>
</div>
</form>
</div>
{% endblock %}
