網站搭建筆記精簡版---廖雪峰WebApp實戰-Day10:使用者註冊（上）筆記
阿新 • • 發佈：2018-11-07
網站搭建筆記精簡版-廖雪峰教程學習@[三川水祭]
僅作學習交流使用，將來的你會感謝現在拼命努力的自己！！！
這裡搞了兩天終於給調通了！！！
這裡的流程是首先瀏覽器輸入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=" 