快捷導(dǎo)航

Django 登錄注冊的實(shí)現(xiàn)示例

更新時間：2023年10月30日 11:14:04 作者：小熊Coding

本文主要介紹了Django 登錄注冊的實(shí)現(xiàn)示例,這是做網(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  rel="external nofollow"  rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
    <link rel="stylesheet"  rel="external nofollow" />
    <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"  rel="external nofollow" >
    <link rel="stylesheet"  rel="external nofollow" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="/static/css/loginstyle.css" rel="external nofollow" >
</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報錯頁面：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>404 Page</title>

<link rel="stylesheet" href="/static/css/style_error.css" rel="external nofollow" >

</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)

效果圖：