10. 注冊視圖 · Python / Linux / Mysql / 軟件測試等等

[TOC] 前面我們已經完成了項目大部分內容，現在還剩下重要的注冊功能沒有實現。 <br /> ## **一、創建forms** 顯而易見，我們的注冊頁面也需要一個form表單。同樣地，在`/login/forms.py`中添加一個新的表單類： ~~~ class RegisterForm(forms.Form): gender = ( ('male', "男"), ('female', "女"), ) username = forms.CharField(label="用戶名", max_length=128, widget=forms.TextInput(attrs={'class': 'form-control'})) password1 = forms.CharField(label="密碼", max_length=256, widget=forms.PasswordInput(attrs={'class': 'form-control'})) password2 = forms.CharField(label="確認密碼", max_length=256, widget=forms.PasswordInput(attrs={'class': 'form-control'})) email = forms.EmailField(label="郵箱地址", widget=forms.EmailInput(attrs={'class': 'form-control'})) sex = forms.ChoiceField(label='性別', choices=gender) captcha = CaptchaField(label='驗證碼') ~~~ 說明： * gender字典和User模型中的一樣，其實可以拉出來作為常量共用，為了直觀，特意重寫一遍； * password1和password2，用于輸入兩遍密碼，并進行比較，防止誤輸密碼； * email是一個郵箱輸入框； * sex是一個select下拉框； * 沒有添加更多的input屬性 <br /> ## **二、完善register.html** 同樣地，類似login.html文件，我們手工在register.html中編寫forms相關條目： ~~~ {% load static %} <!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="{% static 'login/css/register.css' %}" rel="stylesheet"/> <title>注冊</title> </head> <body> <div class="container"> <div class="col"> <form class="form-register" action="/register/" method="post"> {% if register_form.captcha.errors %} <div class="alert alert-warning">{{ register_form.captcha.errors }}</div> {% elif message %} <div class="alert alert-warning">{{ message }}</div> {% endif %} {% csrf_token %} <h3 class="text-center">歡迎注冊</h3> <div class="form-group"> {{ register_form.username.label_tag }} {{ register_form.username}} </div> <div class="form-group"> {{ register_form.password1.label_tag }} {{ register_form.password1 }} </div> <div class="form-group"> {{ register_form.password2.label_tag }} {{ register_form.password2 }} </div> <div class="form-group"> {{ register_form.email.label_tag }} {{ register_form.email }} </div> <div class="form-group"> {{ register_form.sex.label_tag }} {{ register_form.sex }} </div> <div class="form-group"> {{ register_form.captcha.label_tag }} {{ register_form.captcha }} </div> <div> <a href="/login/" ><ins>直接登錄</ins></a> <button type="submit" class="btn btn-primary float-right">注冊</button> </div> </form> </div> </div>    {# 以下三者的引用順序是固定的#} <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ~~~ 需要注意的是： * 編寫了一個register.css樣式文件 * form標簽的action地址為`/register/`，class為`form-register` * from中傳遞過來的表單變量名字為`register_form` * 最下面的鏈接修改為直接登錄的鏈接 register.css樣式文件的代碼很簡單，如下所示： ~~~ body { height: 100%; background-image: url('../image/bg.jpg'); } .form-register { width: 100%; max-width: 400px; padding: 15px; margin: 0 auto; } .form-group { margin-bottom: 5px; } form a{ display: inline-block; margin-top:25px; line-height: 10px; } ~~~ <br /> ## **三、實現注冊視圖** 進入`/login/views.py`文件，現在來完善我們的`register()`視圖： ~~~ def register(request): if request.session.get('is_login', None): return redirect('/index/') if request.method == 'POST': register_form = forms.RegisterForm(request.POST) message = "請檢查填寫的內容！" if register_form.is_valid(): username = register_form.cleaned_data.get('username') password1 = register_form.cleaned_data.get('password1') password2 = register_form.cleaned_data.get('password2') email = register_form.cleaned_data.get('email') sex = register_form.cleaned_data.get('sex') if password1 != password2: message = '兩次輸入的密碼不同！' return render(request, 'login/register.html', locals()) else: same_name_user = models.User.objects.filter(name=username) if same_name_user: message = '用戶名已經存在' return render(request, 'login/register.html', locals()) same_email_user = models.User.objects.filter(email=email) if same_email_user: message = '該郵箱已經被注冊了！' return render(request, 'login/register.html', locals()) new_user = models.User() new_user.name = username new_user.password = password1 new_user.email = email new_user.sex = sex new_user.save() return redirect('/login/') else: return render(request, 'login/register.html', locals()) register_form = forms.RegisterForm() return render(request, 'login/register.html', locals()) ~~~ 從大體邏輯上，也是先實例化一個RegisterForm的對象，然后使用`is_valide()`驗證數據，再從`cleaned_data`中獲取數據。 <br /> 重點在于注冊邏輯，首先兩次輸入的密碼必須相同，其次不能存在相同用戶名和郵箱，最后如果條件都滿足，利用ORM的API，創建一個用戶實例，然后保存到數據庫內。 <br /> 對于注冊的邏輯，不同的生產環境有不同的要求，請跟進實際情況自行完善，這里只是一個基本的注冊過程，不能生搬照抄。 <br /> 讓我們看一下注冊的頁面： ![](https://img.kancloud.cn/5c/f8/5cf87d7611cad6ab26c15b1014fb2ee3_600x678.png) <br /> 你可以嘗試用不同的情況進行注冊，然后觀察錯誤信息的提示: ![](https://img.kancloud.cn/44/fe/44fe4da3e79d2c290cfad29c48c08bfe_572x747.png) <br /> 最后進行一次成功地注冊，會自動跳轉到登錄頁面。我們進入admin后臺，查看一下用戶列表： ![](https://img.kancloud.cn/02/e2/02e200b2eb98322cd8a0e1816da39502_566x630.png) <br /> ![](https://img.kancloud.cn/68/76/68767ebbf7deaa1b9c0c7f51c41e7faa_703x601.png) <br /> ## **四、密碼加密** 等等！我們好像忘了什么！我們到現在都還一直在用明文的密碼！ <br /> 對于如何加密密碼，有很多不同的途徑，其安全程度也高低不等。這里我們使用Python內置的hashlib庫，使用哈希值的方式加密密碼，可能安全等級不夠高，但足夠簡單，方便使用，不是么？首先在`login/views.py`中編寫一個hash函數： ~~~ import hashlib def hash_code(s, salt='mysite'):# 加點鹽 h = hashlib.sha256() s += salt h.update(s.encode()) # update方法只接收bytes類型 return h.hexdigest() ~~~ 使用了sha256算法，加了點鹽。具體的內容可以參考站點內的Python教程中hashlib庫章節。 <br /> 然后，我們還要對login()和register()視圖進行一下修改： ~~~ from django.shortcuts import render from django.shortcuts import redirect from . import models from . import forms import hashlib # Create your views here. def hash_code(s, salt='mysite'): h = hashlib.sha256() s += salt h.update(s.encode()) return h.hexdigest() def index(request): if not request.session.get('is_login', None): return redirect('/login/') return render(request, 'login/index.html') def login(request): if request.session.get('is_login', None): # 不允許重復登錄 return redirect('/index/') if request.method == 'POST': login_form = forms.UserForm(request.POST) message = '請檢查填寫的內容！' if login_form.is_valid(): username = login_form.cleaned_data.get('username') password = login_form.cleaned_data.get('password') try: user = models.User.objects.get(name=username) except : message = '用戶不存在！' return render(request, 'login/login.html', locals()) if user.password == hash_code(password): request.session['is_login'] = True request.session['user_id'] = user.id request.session['user_name'] = user.name return redirect('/index/') else: message = '密碼不正確！' return render(request, 'login/login.html', locals()) else: return render(request, 'login/login.html', locals()) login_form = forms.UserForm() return render(request, 'login/login.html', locals()) def register(request): if request.session.get('is_login', None): return redirect('/index/') if request.method == 'POST': register_form = forms.RegisterForm(request.POST) message = "請檢查填寫的內容！" if register_form.is_valid(): username = register_form.cleaned_data.get('username') password1 = register_form.cleaned_data.get('password1') password2 = register_form.cleaned_data.get('password2') email = register_form.cleaned_data.get('email') sex = register_form.cleaned_data.get('sex') if password1 != password2: message = '兩次輸入的密碼不同！' return render(request, 'login/register.html', locals()) else: same_name_user = models.User.objects.filter(name=username) if same_name_user: message = '用戶名已經存在' return render(request, 'login/register.html', locals()) same_email_user = models.User.objects.filter(email=email) if same_email_user: message = '該郵箱已經被注冊了！' return render(request, 'login/register.html', locals()) new_user = models.User() new_user.name = username new_user.password = hash_code(password1) new_user.email = email new_user.sex = sex new_user.save() return redirect('/login/') else: return render(request, 'login/register.html', locals()) register_form = forms.RegisterForm() return render(request, 'login/register.html', locals()) def logout(request): if not request.session.get('is_login', None): return redirect('/login/') request.session.flush() # del request.session['is_login'] return redirect("/login/") ~~~ 注意其中關于密碼處理的部分！ <br /> 好了，我們可以來驗證一下了!但是，**請先在admin后臺里，把我們前面創建的測試用戶全部刪除！**因為它們的密碼沒有使用哈希算法加密，已經無效了。 <br /> 重啟服務器，進入注冊頁面，新建一個用戶，然后進入admin后臺，查看用戶的密碼情況： ![](https://img.kancloud.cn/42/60/42602b29e06c06a5a29207ccd6f7cf97_702x594.png) <br /> 再使用該用戶登錄一下，大功告成！ <br /> 可以看到密碼長度根據你哈希算法的不同，已經變得很長了，所以前面model中設置password字段時，不要想當然的將`max_length`設置為16這么小的數字。