首页 > 脚本专栏 > python > django联系人登录界面

django联系人登录界面案例详解

2024-10-24 11:13:20 作者：哈哈嘻喜

在本案例中,将介绍如何使用Django框架创建一个简单的联系人登录界面,案例涉及前端HTML页面设计,CSS和JS的应用,以及后端views.py的编写,在后端处理中,密码将通过MD5进行加密,保证安全性,本文给大家介绍了django联系人登录界面案例详解,感兴趣的朋友一起看看吧

目前还在学习中，这是一个简单的小案例，有错误的话，请批评指。

注意：此案例的运行前提是配置好python环境，MySQL环境，django环境

预览

代码实现

html界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系人在线管理系统</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">联系人在线管理系统</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数据库

views.py

class LoginForm(forms.Form):
    username = forms.CharField(
        label="用户名",
        widget=forms.TextInput(attrs={'class': 'form-control', "placeholder": "请输入用户名"}),
        required=True
    )
    password = forms.CharField(
        label="密码",
        widget=forms.PasswordInput(attrs={'class': 'form-control', "placeholder": "请输入密码"}),
        required=True
    )
    def clean_password(self):
        pwd = self.cleaned_data.get("password")
        return md5(pwd)

密码用了md5加密，引入的库包括以下几个:

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)

最后，打开终端输入

python manage.py runserver

到此这篇关于django联系人登录界面的文章就介绍到这了,更多相关django联系人登录界面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！