快捷導(dǎo)航

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

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

本文主要介紹了Django 登錄注冊(cè)的實(shí)現(xiàn)示例,這是做網(wǎng)頁(yè)登錄和注冊(cè)基本上都是必要一步,具有一定的參考價(jià)值,感興趣的可以了解一下

最近在準(zhǔn)備上線一個(gè)網(wǎng)站（基于django的編程技術(shù)學(xué)習(xí)與外包服務(wù)網(wǎng)站），所以會(huì)將自己的在做這個(gè)項(xiàng)目的過(guò)程中遇到的模塊業(yè)務(wù)以及所涉及到的部分技術(shù)記錄在CSDN平臺(tái)里，一是希望可以幫到有需要的同學(xué)，二十以供自己后續(xù)回顧學(xué)習(xí)。

今天要分享的是django的登錄和注冊(cè)頁(yè)面功能，其實(shí)做網(wǎng)頁(yè)登錄和注冊(cè)基本上都是必要的一步啦，那么今天我們就來(lái)了解一下。

登錄注冊(cè)前端Html以及Css我就不細(xì)說(shuō)啦，畢竟我主要是負(fù)責(zé)后端業(yè)務(wù)的，再說(shuō)即使你我不會(huì)前端的內(nèi)容，網(wǎng)上一大堆的登錄注冊(cè)的模板，直接拿來(lái)下載就好了，我這個(gè)登陸注冊(cè)的前端模板就是直接在網(wǎng)站上Copy的，另外說(shuō)到這個(gè)登錄注冊(cè)一般有兩種情況（1：登錄為一個(gè)頁(yè)面，注冊(cè)為一個(gè)頁(yè)面，2：登錄注冊(cè)同是在一個(gè)頁(yè)面）。

我先說(shuō)一下在django框架里我們實(shí)現(xiàn)登錄注冊(cè)的一個(gè)大概流程：

拿到前端的模板，我們更據(jù)需要建立對(duì)應(yīng)的數(shù)據(jù)庫(kù)里的字段，然后回來(lái)前端來(lái)看，比如說(shuō)我們點(diǎn)擊注冊(cè)，那么我們把注冊(cè)的按鈕的類(lèi)型設(shè)置為submit，給每一個(gè)注冊(cè)頁(yè)面的輸入框設(shè)置一個(gè)name屬性，然后回到后端來(lái)看，在后端里，我們?cè)诤瘮?shù)中需要寫(xiě)入判斷函數(shù)，如果是GET方法則返回注冊(cè)頁(yè)面，如果是POST方法（submit即提交表單），我們則會(huì)獲取我們輸入框的信息，然后我們將其存放在數(shù)據(jù)庫(kù)里即可，同時(shí)回到登錄頁(yè)面，然后輸入框輸入對(duì)應(yīng)的信息，如果輸入的信息（賬號(hào)和密碼）存在在數(shù)據(jù)庫(kù)里，則信息正確進(jìn)入我們的首頁(yè)（指定頁(yè)面）。

前端頁(yè)面如下：

<!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="注冊(cè)" 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="注冊(cè)" 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)錯(cuò)頁(yè)面：

<!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">返回首頁(yè)</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 注冊(cè)')
        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ù)：昵稱(chēng)or賬號(hào)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ù)庫(kù)：

from django.db import models
class User(models.Model):
    name=models.CharField(verbose_name='昵稱(chēng)',max_length=30)
    account=models.CharField(verbose_name='賬號(hào)',max_length=30)
    password=models.CharField(verbose_name='密碼',max_length=30)
    checkpassword=models.CharField(verbose_name='確認(rèn)密碼',max_length=30)

效果圖：

自定義404報(bào)錯(cuò)頁(yè)面：

另外說(shuō)一下，我這個(gè)前端的登陸注冊(cè)頁(yè)面是在一個(gè)外網(wǎng)Copy下載的，且登陸注冊(cè)的右側(cè)的那個(gè)圖片是你每次登錄注冊(cè)都會(huì)隨機(jī)生成不同的圖片，所以加載的時(shí)候可能會(huì)出現(xiàn)慢的情況。

到此這篇關(guān)于Django 登錄注冊(cè)的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Django 登錄注冊(cè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: