大鼠引物在線設(shè)計(jì)網(wǎng)站朋友圈廣告推廣
最近在準(zhǔn)備上線一個網(wǎng)站（基于django的編程技術(shù)學(xué)習(xí)與外包服務(wù)網(wǎng)站），所以會將自己的在做這個項(xiàng)目的過程中遇到的模塊業(yè)務(wù)以及所涉及到的部分技術(shù)記錄在CSDN平臺里，一是希望可以幫到有需要的同學(xué)，二十以供自己后續(xù)回顧學(xué)習(xí)。
今天要分享的是django的登錄和注冊頁面功能，其實(shí)做網(wǎng)頁登錄和注冊基本上都是必要的一步啦，那么今天我們就來了解一下。
登錄注冊前端Html以及Css我就不細(xì)說啦，畢竟我主要是負(fù)責(zé)后端業(yè)務(wù)的，再說即使你我不會前端的內(nèi)容，網(wǎng)上一大堆的登錄注冊的模板，直接拿來下載就好了，我這個登陸注冊的前端模板就是直接在網(wǎng)站上Copy的，另外說到這個登錄注冊一般有兩種情況（1：登錄為一個頁面，注冊為一個頁面，2：登錄注冊同是在一個頁面）。
我先說一下在django框架里我們實(shí)現(xiàn)登錄注冊的一個大概流程：
拿到前端的模板，我們更據(jù)需要建立對應(yīng)的數(shù)據(jù)庫里的字段，然后回來前端來看，比如說我們點(diǎn)擊注冊，那么我們把注冊的按鈕的類型設(shè)置為submit，給每一個注冊頁面的輸入框設(shè)置一個name屬性，然后回到后端來看，在后端里，我們在函數(shù)中需要寫入判斷函數(shù)，如果是GET方法則返回注冊頁面，如果是POST方法（submit即提交表單），我們則會獲取我們輸入框的信息，然后我們將其存放在數(shù)據(jù)庫里即可，同時回到登錄頁面，然后輸入框輸入對應(yīng)的信息，如果輸入的信息（賬號和密碼）存在在數(shù)據(jù)庫里，則信息正確進(jìn)入我們的首頁（指定頁面）。
前端頁面如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>DjangoText</title><link href="https://fonts.googleapis.com/css?family=Comfortaa|Spartan&display=swap" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"/><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><meta charset="utf-8"><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover"><meta name="apple-mobile-web-app-capable" content="yes"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><link rel="stylesheet" href="/static/css/loginstyle.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body><div class="container"><div class="content"><div class="login-container animated fadeInDown" style="animation-delay:.3ms;"><!-- Login --><div class="login justify-content-center" id="login-form"><h1 class="form-title"><i class="fas fa-user" style="color:#55a0ff;"></i> <br> LOGIN<hr></h1><div class="form-container animated fadeIn" style="animation-delay:.7ms;"><form method="POST">{% csrf_token %}<label for=""><i class="fas fa-at"></i> Email </label><input type="text" name="account" placeholder="Account"><label for=""><i class="fab fa-slack-hash"></i> Password </label><input type="password" name="password" placeholder="Password"><div class="submit-buttons"><input type="submit" value="登錄" name="loginsubmit"><input type="button" value="注冊" class="btn-register"></div></form></div></div><!-- Login --><!-- Register --><div class="register justify-content-cente animatedr" style="animation-delay:.3s"><h1 class="form-title "><i class="fas fa-user-plus" style="color:#57efc4;"></i> <br> REGISTER<hr></h1><div class="form-container animated fadeIn" style="animation-delay:.3s;"><form method="POST" action="/login/" >{% csrf_token %}<label for=""><i class="fab fa-amilia"></i> Name </label><input type="text" name="name" placeholder="Name"><label for=""><i class="fas fa-at"></i> Account </label><input type="text" name="account" placeholder="Account"><label for=""><i class="fab fa-slack-hash"></i> Password </label><input type="password" name="password" placeholder="Password"><label for=""><i class="fab fa-slack-hash"></i> Confirm Password </label><input type="password" name="password_confirmation" placeholder="Password"><div class="submit-buttons"><input type="submit" name="registersubmit" value="注冊" style="background:#55efc4;"><input type="button" value="登錄" class="btn-login"></div></form></div></div><!-- Register --><div class="login animated fadeIn" style="animation-delay:.7s;animation-duration:4s;" id="login-bg"></div></div></div>
</div></body>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'></script>
<script src="/static/js/loginscript.js"></script></body>
</html>
自定義404報(bào)錯頁面：
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>404 Page</title><link rel="stylesheet" href="/static/css/style_error.css"></head>
<body>
<section class="wrapper"><div class="container"><div id="scene" class="scene" data-hover-only="false"><div class="circle" data-depth="1.2"></div><div class="one" data-depth="0.9"><div class="content"><span class="piece"></span><span class="piece"></span><span class="piece"></span></div></div><div class="two" data-depth="0.60"><div class="content"><span class="piece"></span><span class="piece"></span><span class="piece"></span></div></div><div class="three" data-depth="0.40"><div class="content"><span class="piece"></span><span class="piece"></span><span class="piece"></span></div></div><p class="p404" data-depth="0.50">Error</p><p class="p404" data-depth="0.10">Error</p></div><div class="text"><article><p>{{ errorMsg }}</p><button id="back">返回首頁</button></article></div></div>
</section><script src='/static/js/parallax.min.js'></script>
<script src='/static/js/jquery.min.js'></script>
<script src="/static/js/script.js"></script>
<script>var back = document.getElementById('back');back.onclick = function(e){history.back()}
</script>
</body>
</html>后端業(yè)務(wù)處理代碼如下：
def login(request):if request.method == "GET":return render(request,'login.html')elif request.POST.get('registersubmit'):print('nihao 注冊')name = request.POST.get('name')account = request.POST.get('account')password = request.POST.get('password')checkpassword = request.POST.get('password_confirmation')try:User.objects.get(account=account)except:if not name or not account or not password or not checkpassword:return errorResponse(request, '定義技術(shù)：昵稱or賬號or密碼存在空值')if password != checkpassword:return errorResponse(request, '定義技術(shù)：兩次密碼不吻合')User.objects.create(name=name, account=account, password=password, checkpassword=checkpassword)return render(request,"login.html")elif request.POST.get('loginsubmit'):print('nihao 登錄')account1 = request.POST.get('account')password1 = request.POST.get('password')try:User.objects.get(account=account1,password=password1)except:return errorResponse(request,'定義技術(shù)：輸入信息有誤')數(shù)據(jù)庫：
from django.db import models
class User(models.Model):name=models.CharField(verbose_name='昵稱',max_length=30)account=models.CharField(verbose_name='賬號',max_length=30)password=models.CharField(verbose_name='密碼',max_length=30)checkpassword=models.CharField(verbose_name='確認(rèn)密碼',max_length=30)效果圖：
自定義404報(bào)錯頁面：
另外說一下，我這個前端的登陸注冊頁面是在一個外網(wǎng)Copy下載的，且登陸注冊的右側(cè)的那個圖片是你每次登錄注冊都會隨機(jī)生成不同的圖片，所以加載的時候可能會出現(xiàn)慢的情況。