快捷導(dǎo)航

django聯(lián)系人登錄界面案例詳解

更新時(shí)間：2024年10月24日 11:13:19 作者：哈哈嘻喜

在本案例中,將介紹如何使用Django框架創(chuàng)建一個(gè)簡(jiǎn)單的聯(lián)系人登錄界面,案例涉及前端HTML頁面設(shè)計(jì),CSS和JS的應(yīng)用,以及后端views.py的編寫,在后端處理中,密碼將通過MD5進(jìn)行加密,保證安全性,本文給大家介紹了django聯(lián)系人登錄界面案例詳解,感興趣的朋友一起看看吧

預(yù)覽

代碼實(shí)現(xiàn)

html界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聯(lián)系人在線管理系統(tǒng)</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css" rel="external nofollow" >
    <style>
        .account{
        width:500px;
        height:320px;
        border:2px solid #999999;
        border-radius:20px;
        margin-left:auto;
        margin-right:auto;
        margin-top:200px;
        padding:20px 40px;
        }
        .h1{
        text-align:center;
        }
        .h2{
        color:#3887B6;
        }
        .b3{
        background-color:#C04849;
        border-radius:10px;
        color:#FFFFFF;
        display:block;
        margin:0 auto;
        margin-top:30px;
        width:350px;
        height:40px;
        box-shadow:5px 5px 10px #A3ADA4;
        }
    </style>
</head>
<body>
<form method="post" class="account">
    {% csrf_token %}
    <h1 class="h1 h2">聯(lián)系人在線管理系統(tǒng)</h1>
    <div class="form-group" style="margin-top:10px;">
        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
        <label id="exampleInputEmail1">用戶名</label>
        {{form.username}}
        {{form.username.error.0}}
        <span style="color:red;font-size:12px">{{font.username.error.0}}</span>
    </div>
    <div class="form-group" style="margin-top:10px;">
        <span class="glyphicon glyphicon-signal" aria-hidden="true"></span>
        <label id="exampleInputPassword1">密碼</label>
        {{form.password}}
        {{form.password.error.0}}
        <span style="color:red;font-size:12px">{{font.password.error.0}}</span>
    </div>
    <div>
        <input type="submit" value="登錄" class="b3">
    </div>
</form>
<script src="/static/js/jquery-3.7.1.min.js"></script>
<script src="/static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

此界面引入了css和js，連接了mysql數(shù)據(jù)庫

views.py

class LoginForm(forms.Form):
    username = forms.CharField(
        label="用戶名",
        widget=forms.TextInput(attrs={'class': 'form-control', "placeholder": "請(qǐng)輸入用戶名"}),
        required=True
    )
    password = forms.CharField(
        label="密碼",
        widget=forms.PasswordInput(attrs={'class': 'form-control', "placeholder": "請(qǐng)輸入密碼"}),
        required=True
    )
    def clean_password(self):
        pwd = self.cleaned_data.get("password")
        return md5(pwd)

密碼用了md5加密，引入的庫包括以下幾個(gè):

from django.shortcuts import render, redirect, HttpResponseRedirect
from contacts import models
from django import forms
from django.core.validators import RegexValidator
from contacts.encrpty import md5
from django.utils.safestring import mark_safe
from django.shortcuts import get_object_or_404

urls.py

urlpatterns = [
    path("admin/", admin.site.urls),
    path("getUser/", views.getUser),]

models.py

class Login(models.Model):
    username = models.CharField(verbose_name="用戶名",max_length=32)
    password = models.CharField(verbose_name="密碼",max_length=32)

最后，打開終端輸入