iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
1
Modern Web

🍐放學後的網頁開發系列 第 21

[Day21] 柚子放學後的網頁生活 - Django Register

太傻眼了..
原本打到一半結果突然跳掉阿阿
所以這篇就重打了..

好,這篇要帶大家做會員註冊的功能

Sign up

HTML

我們先設計signup.html裡的form

 <div class="container">
       <h1>Register</h1>
       <form method="POST" action="/signup/post">
         <label>Enter your Name</label>
         <input class="form-control" type="text" name="username">
         <label>Enter your E-mail</label>
         <input class="form-control" type="text" name="email">
         <label>Enter your Password</label>
         <input class="form-control" type="password" name="password"><br>
         {% csrf_token %}
         <button class="btn btn-primary btn-block">Submit</button>
       </form>
</div>

中間看到一個奇怪的csrf_token是甚麼呢?
CSRF:https://zh.wikipedia.org/zh-tw/%E8%B7%A8%E7%AB%99%E8%AF%B7%E6%B1%82%E4%BC%AA%E9%80%A0
由於網站會對我們做防備,因此在POST Form的時候我們都需要讓它認可

怎麼確定這樣有加到?
我們可以到這個form所屬網頁檢查

藍色那行就是我們剛打的token,它會幫我們送value做驗證

Url

設計完HTML後,要來加上URL位置
這次在urlpatterns裡放上這兩個,post_signup的位置要與你上面的action相呼應
get_signup用來display signup頁面

url(r'^signup$',get_signup),
url(r'^signup/post',post_signup),

阿,要記得import哦

from classes.views import hello_world, index, get_signup, post_signup

如果想改url位置都可以哦,記得每個地方指的一樣就好

View

首先是signup頁面的View,我們render到signup頁面

def get_signup(request):
    return render(request, 'signup.html')

接著就是傳值註冊
在這邊要把form表單裡的值都要傳過來,記得對應 input 裡的name
最後的 if / else 幫忙redirect網頁位址

from django.shortcuts import render, redirect
  • 成功建立 - 回到首頁 index
  • 建立失敗 - 留在原頁 signup
  • locals() 把 local 內的 username、email、password 帶過去
def post_signup(request):
    username = request.POST['username']
    email = request.POST['email']
    password = request.POST['password']

    user = User.objects.create_user(username,email,password)
    if user:
        return redirect('/',locals())
    else:
        return redirect('/signup',locals())

測試

填入後回到首頁,目前還沒辦法登入,所以到admin去檢查

有看到資料代表成功了!!

下課囉 ~ 請鎖定 柚子放學後的網頁生活


上一篇
[Day20] 柚子放學後的網頁生活 - Cookie / Session
下一篇
[Day22] 柚子放學後的網頁生活 - Log in / out
系列文
🍐放學後的網頁開發30

尚未有邦友留言

立即登入留言