Python廖雪峰实战web开发（Day10（上）-用户注册）

用户管理是绝大部分Web网站都需要解决的问题。用户管理涉及到用户注册和登录。

由于本人是编程小白，初学python，暂时对js、html等都不太熟悉，所以如有纰漏，还请指出。

##1. 用户注册
###1.1 编写用户注册API

参考网站：
关于API与MVC的对比
关于正则表达式
关于hashlib
关于set_cookie
关于json.dumps

这里编写一个API实现用户注册功能。
注意API与MVC的区别：

使用上区分，mvc主要用于建站，web api主要用于构建http服务，API更抽象，更不注重View的生成。

编写的API必须有以下几点功能：

• 验证注册信息
• 对用户密码进行加密，这里使用SHA1单向算法，并储存到数据库
• 发送对应的cookie到浏览器

值得注意的是这个API并不负责显示页面，留意代码路径就知道了。

编写用户注册API：

import time,re,hashlib
from web_app.webframe import get,post
from web_app.APIError import APIError,APIValueError
from web_app.models import User,next_id()
from web_app.configs.config import config
from aiohttp import web
import json

#显示注册页面
@get('/register')#这个作用是用来显示登录页面
def register():
    return {
        '__template__': 'register.html'
    }


COOKIE_NAME = 'awesession'#用来在set_cookie中命名
_COOKIE_KEY = config['session']['secret']#导入默认设置


#制作cookie的数值，即set_cookie的value
def user2cookie(user, max_age):
    # build cookie string by: id-expires-sha1（id-到期时间-摘要算法）
    expires = str(time.time()+max_age)
    s = '%s-%s-%s-%s'%(user.id, user.passwd, expires, _COOKIE_KEY)#s的组成：id, passwd, expires, _COOKIE_KEY
    L = [user.id, expires, hashlib.sha1(s.encode('utf-8')).hexdigest()]#再把s进行摘要算法
    return '-'.join(L)


#正则表达式我是参考这里的(http://www.cnblogs.com/vs-bug/archive/2010/03/26/1696752.html)
_RE_EMAIL = re.compile(r'^(\w)+(\.\w)*\@(\w)+((\.\w{2,3}){1,3})$')
_RE_PASSWD = re.compile(r'^[\w\.]{40}')#对老师这里的密码正则表达式也做了点修改


#制作用户注册api
@post('/api/users')#注意这里路径是'/api/users'，而不是`/register`
async def api_register_usesr(*,name,email,passwd):
    if not name or not name.strip():#如果名字是空格或没有返错，这里感觉not name可以省去，因为在web框架中的RequsetHandler已经验证过一遍了
        raise APIValueError('name')
    if not email or not _RE_EMAIL.match(email):
        raise APIValueError('email')
    if not passwd and not _RE_SHA1.match(passwd):
        raise APIValueError('password')
    users = await User.findall(where='email=?', args=[email])#查询邮箱是否已注册，查看ORM框架源码
    if len(users) > 0:
        raise APIError('register:failed','email','Email is already in use.')
    #接下来就是注册到数据库上,具体看会ORM框架中的models源码
    #这里用来注册数据库表id不是使用Use类中的默认id生成，而是调到外部来，原因是后面的密码存储摘要算法时，会把id使用上。
    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()
    #制作cookie返回浏览器客户端
    r = web.Response()
    r.set_cookie(COOKIE_NAME, user2cookie(user,86400), max_age=86400, httponly=True)
    user.passwd = '******'#掩盖passwd
    r.content_type = 'application/json'
    r.body = json.dumps(user, ensure_ascii=False).encode('utf-8')
    return r

接下来可以创建一个注册页面(Jinja2子模版)，让用户填写注册表单，然后，提交数据到注册用户的API：

{% extends '__base__.html' %}

{% block title %}注册{% endblock %}

{% block beforehead %}

<script>
function validateEmail(email) {
    var re = /^(\w)+(\.\w)*\@(\w)+((\.\w{2,3}){1,3})$/;
    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);
                    }
                    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="your-name@example.com" 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 %}

总结一下具体流程，当用户在主页页面（就是前一章那个）点击注册时，会跳转到后缀为/register的URL,这时负责后缀/register的URL处理函数返回注册页面，当用户填写好消息并提交时，会先通过javascript，这段javascript功能有几个：
1、初步检验信息（如检验邮箱格式是否正确，信息是否有留白，密码长度，两次密码是否一致等等，但不懂为何有些信息这里检验了一遍去到python的注册API那里又检验一次）。
2、初次对密码进行摘要算法（后面python存储信息时又对密码进行了一次摘要算法，在作为cookie返回客户端时又进行了一次摘要算法，主要是为了安全）
3、进行摘要算法过后，转去后缀为/api/users的URL，即此时才转到注册用户的API。
4、注册用户的API运行完过后，重回首页。

最后按之前一样，编辑事件循环测试一下即可。