用python编写用户登录界面,python登录页面代码

2401_84668251

于 2024-05-02 06:31:39 发布

阅读量28

点赞数 10

文章标签： python

本文链接：https://blog.csdn.net/2401_84668251/article/details/138386113

版权

大家好，给大家分享一下用python编写用户登录界面，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！

大家好，本文将围绕用python做一个窗口登录程序展开说明，python怎么编写一个登录界面是一个很多人都想弄明白的事情，想搞清楚python做用户登录界面需要先了解以下几个事情。

html标签学习（二）

1、 < span >作用

<span>标签对文字进行着色，例：

<span style="color: red;">错误</span>

运行结果：
在这里插入图片描述
2、 {%csrf_token%}作用

<form>
{%csrf_token%}
</form>

在django中我们需要在templates的form中加入{%csrf_token%}这串内容，它的作用是当我们get表单页面时，服务器返回页面的同时也会向前端返回一串随机字符，post提交时服务器会验证这串字符来确保用户是在服务端返回的表单页面中提交的数据，防止有人通过例如jquery脚本向某个url不断提交数据，是一种数据提交的验证机制怎样用python画弧形花瓣。

3、< meta >标签
<meta>标签永远位于 head 元素内部，提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词python编程代码画爱心。

使用font-awesome图标库

1、安装
地址：Font Awesome，一套绝佳的图标字体库和CSS框架
下载完以后解压，修改一下文件名为fontawesome然后放到项目的static文件夹中。

2、在html中使用
在html的head中引入：

<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">

使用时：

<i class="fa fa-500px" style="font-size:24px"></i>

（在class中填写想要使用的图标，font-size是大小）
代码示例：

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome 图标</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-500px" style="font-size:24px"></i>
</body>
</html>

执行结果：
在这里插入图片描述

图标的class名除了在上方的下载链接中有，还可以参照：
Font Awesome 参考手册 | 菜鸟教程

html的图标

把图标放到static中的文件夹中，然后在html的head中添加:

<link rel="shortcut icon" href="/static/icon/html_ico.png" />

在这里插入图片描述

让< div >中元素水平排列

在<div>的所有子元素的style中添加float:left;属性。
例如：

        <div class="box2" style="margin-top: 0px;width:100%;height:990px;border:1px solid #000000;">
            <div class="box2_1" style="margin-top: 0px;width:10%;height:100px;float:left;border:1px solid #000000;background-color:blue;">
            <!--添加内容-->
            </div>
            <div class="box2_2" style="margin-top: 0px;width:10%;height:100px;float:left;border:1px solid #000000;background-color:yellow;">
            <!--添加内容-->
            </div>
        </div>

在这里插入图片描述

自定义 p 和 h 标签的字体大小

在head中添加：

    <!--设背景颜色为eee,设p2字体大小为15px,设p1字体大小为25px-->
    <style>
        body {background-color: #eee;         
        }
        p1 {font-size:25px;              
        }
        p2 {font-size:15px;              
        }
    </style>

然后直接使用<p1>和<p2>就可以了。

简单的登录跳转页面

首先在login.html中添加action(表示提交的地址)和method(提交方式)。为用户名和密码的input输入框添加name，之后使用这个name来获取输入框提交的内容。
在这里插入图片描述

html完整代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/static/icon/html_ico.png" />
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
    <title>登录</title>
    <style>
        body {
            background-color: #eee;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4" style="margin-top: 100px">
            <h1 class="text-center">登录</h1>
            <form class="form-horizontal" action="/login/" method="post" >
                {% csrf_token %}
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label"></label>
                    <div class="input-group col-sm-8">
                        <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
                        <!--type=""指不限定用户名的输入类型-->
                        <input type="" class="form-control" name="username" id="inputEmail3" placeholder="用户名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label"></label>
                    <div class="input-group col-sm-8">
                        <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                        <input type="password" name="pwd" class="form-control" id="inputPassword3" placeholder="密码">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group col-sm-offset-2 col-sm-8">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> 记住我
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group col-sm-offset-2 col-sm-8">
                        <button type="submit" class="btn btn-primary btn-block">登录</button>
                    </div>
                </div>
                <p class="text-danger text-center">{{ error }}</p>
            </form>
        </div>
    </div>
</div>
</body>
</html>

view.py代码：
这一部分代码我做了一下修改：

from django.shortcuts import render
# Create your views here.
from django.shortcuts import render, redirect
from django.views.generic.base import View


class LoginView(View):
    @staticmethod
    def post(request):
        #打开、请求网页时method为get
        if request.method == "GET":
            return render(request, 'login.html')      # 如果触发GET就直接返回login.html页面
        elif request.method == "POST":          # 触发post
            username = request.POST.get("username", None)   # 接收用户名，如果未接收到，返回None
            pwd = request.POST.get("pwd", None)     # 接收密码，如果未接收到，返回None
            print(username, pwd)
            # 判断用户名密码
            if username == "jcy" and pwd == "jcy321":    # 用户名&密码
                # 响应函数
                return redirect("/index1/")    #跳转index1页面
            elif username == "jcy" and pwd == "jcy123":
                # 响应函数
                return redirect("/index2/")   #跳转index2页面
            else:
                # 登陆失败
                error_msg = "用户名或密码错误"
                return render(request, "login.html", {"error": error_msg})

class GetIndex1(View):
    @staticmethod
    def get_index1(request):
        return render(request, 'index1.html', )


class GetIndex2(View):
    @staticmethod
    def get_index2(request):
        return render(request, 'index2.html', )

urls.py代码：

"""MyDjango URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
# Django 路由,view.py视图与url建立映射关系
from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from django.contrib import admin
from myapp.views import LoginView, GetIndex1, GetIndex2

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^login/', LoginView.post),
    url(r'^index1/', GetIndex1.get_index1),
    url(r'^index2/', GetIndex2.get_index2)
]

接着，在登录中输入用户名密码就能成功登录了。

html中有多个按钮时，区分点击了哪个按钮

在上面的代码基础上，用于探究怎么区分点击了哪个按钮，我在html中再添加一个按钮，按钮就叫不登陆吧，并为两个按钮添加name:

<button type="submit" name="submit" class="btn btn-primary btn-block">登录</button>
<button type="submit" name="notsubmit" class="btn btn-primary btn-block">不登录</button>

在这里插入图片描述

在views.py中添加代码print(request.POST)，将request.post输出出来：

class LoginView(View):
    @staticmethod
    def post(request):
        if request.method == "POST":          # 触发post
            print(request.POST)      #将request.post输出
            username = request.POST.get("username", None)   # 接收用户名，如果未接收到，返回None
            pwd = request.POST.get("pwd", None)     # 接收密码，如果未接收到，返回None

输入用户名密码，点击登录按钮，输出的request.POST为：

<QueryDict: {'csrfmiddlewaretoken': 
['TC9KOHNZxhEUVNwFYWBreKGzS9M7ip3OJSqljsoDthDFbjueYNrOgHjmmYW5bYm5'], 
'username': ['jcy'], 'pwd': ['jcy123']
, 'submit': ['']}>

返回，并点击不登陆按钮，输出的request.POST为：

<QueryDict: {'csrfmiddlewaretoken': 
['ifVvpYSEoV3gmB7aPJASE77gr9Y5ZoSv8vc6UJtikV21C75JPAqfG4K3VY83SXbM'], 
'username': ['jcy'], 'pwd': ['jcy123']
, 'notsubmit': ['']}>

观察输出结果，发现按钮在点击以后，它的name就会出现在request.POST中。
因此，判断登录按钮是否被点击时，只需加一个判断就行了：

if "submit" in request.POST:

登录后台管理系统

在Terminal中输入：python manage.py createsuperuser来创建后台管理系统的用户。

在这里插入图片描述
接着分别输入username、邮箱和密码（注意，输入以后不显示数字，并不是输不进去）就完成超级用户的创建了。

接着启动服务，并在浏览器打开admin网页（将login页面的地址中login改为admin，如：192.168.1.5:8000/admin/），接着将创建好的超级用户的username和密码登录。
在这里插入图片描述

数据模式中创建表格并同步到数据库

在app中的models.py文件中创建表的类，加入代码：

from django.db import models

# Create your models here.
class Eple(models.Model):     #表名
    number = models.AutoField(primary_key=True)       #AutoField integer型字段，主键
    username = models.CharField(max_length=50)        #char型
    pwd = models.CharField(max_length=50)

生成迁移文件: 接着执行：python manage.py makemigrations
在这里插入图片描述
如果报错： No changes detected
检查settings.py中的INSTALLED_APPS，看一下是否是models.py所在的app没有注册。

（其实就是把app中的apps.py模块中的MyappConfig类加入到Settings.py中。）

同步到数据库: 接着Terminal中执行python manage.py migrate
在这里插入图片描述
执行python manage.py inspectdb可以查看创建的表的信息。

表格显示在后台管理系统admin中：
打开app中的admin.py，添加代码：

from django.contrib import admin  # Django自动在admin.py文件中导入
from myapp.models import Eple     # 按自己的填写，app + models + model中的类表
admin.site.register([Eple])   #多个表格中间用逗号隔开

接着，从浏览器打开到admin页面并登录，注册的表格已经显示在了下面。
在这里插入图片描述

附

Feild常用字段：

1、models.AutoField　　
       自增列 = int(11)
       如果没有的话，默认会生成一个名称为 id 的列
       如果要显式的自定义一个自增列，必须设置primary_key=True。
 
2、models.CharField　　
       字符串字段
　　   必须设置max_length参数
 
3、models.BooleanField　 　
       布尔类型=tinyint(1) 
       不能为空，可添加Blank=True
 
4、models.ComaSeparatedIntegerField　　
       用逗号分割的数字=varchar
　     继承CharField，所以必须 max_lenght 参数
 
5、models.DateField
       日期类型 date
　     DateField.auto_now：保存时自动设置该字段为现在日期，最后修改日期
　     DateField.auto_now_add：当该对象第一次被创建是自动设置该字段为现在日期，创建日期。
 
6、models.DateTimeField　　
       日期时间类型 datetime
       同DateField的参数
 
7、models.Decimal　　
       十进制小数类型 = decimal
       DecimalField.max_digits：数字中允许的最大位数
       DecimalField.decimal_places：存储的十进制位数
 
8、models.EmailField　　
　　    一个带有检查 Email 合法性的 CharField
 
9、models.FloatField　　
       浮点类型 = double
 
10、models.IntegerField　　
       整形
 
11、models.BigIntegerField　　
       长整形
　　integer_field_ranges = {
　　　　'SmallIntegerField': (-32768, 32767),
　　　　'IntegerField': (-2147483648, 2147483647),
　　　　'BigIntegerField': (-9223372036854775808, 9223372036854775807),
　　　　'PositiveSmallIntegerField': (0, 32767),
　　　　'PositiveIntegerField': (0, 2147483647),
　　}
 
12、models.GenericIPAddressField　　
        一个带有检查 IP地址合法性的 CharField
 
13、models.NullBooleanField　　
       允许为空的布尔类型
 
14、models.PositiveIntegerFiel　　
       正整数
 
15、models.PositiveSmallIntegerField　　
       正smallInteger
 
16、models.SlugField　　
       减号、下划线、字母、数字
 
17、models.SmallIntegerField　　
       数字
       数据库中的字段有：tinyint、smallint、int、bigint
 
18、models.TextField　　
        大文本。默认对应的form标签是textarea。
 
19、models.TimeField　　
       时间 HH:MM[:ss[.uuuuuu]]
 
20、models.URLField　　
        一个带有URL合法性校验的CharField。
 
21、models.BinaryField　　
       二进制
       存储二进制数据。不能使用filter函数获得QuerySet。
 
22、models.ImageField   
       图片
       ImageField.height_field、ImageField.width_field：如果提供这两个参数，则图片将按提供的高度和宽度规格保存。
       该字段要求 Python Imaging 库Pillow。
       会检查上传的对象是否是一个合法图片。
 
23、models.FileField(upload_to=None[, max_length=100, ** options])
       文件
       FileField.upload_to：一个用于保存上传文件的本地文件系统路径，该路径由 MEDIA_ROOT 中设置
       这个字段不能设置primary_key和unique选项.在数据库中存储类型是varchar，默认最大长度为100
 
24、models.FilePathField(path=None[, math=None, recursive=False, max_length=100, **options])
       FilePathField.path：文件的绝对路径，必填
       FilePathField.match：用于过滤路径下文件名的正则表达式，该表达式将用在文件名上（不包括路径）。
       FilePathField.recursive：True 或 False，默认为 False，指定是否应包括所有子目录的路径。
       例如：FilePathField(path="/home/images", match="foo.*", recursive=True)
       将匹配“/home/images/foo.gif”但不匹配“/home/images/foo/bar.gif”

model常用参数：

1、null
        如果是True，Django会在数据库中将此字段的值置为NULL，默认值是False
 
2、blank
　　如果为True时django的 Admin 中添加数据时可允许空值，可以不填。如果为False则必须填。默认是False。
       null纯粹是与数据库有关系的。而blank是与页面必填项验证有关的
 
3、primary_key = False
　  主键，对AutoField设置主键后，就会代替原来的自增 id 列
 
4、auto_now 和 auto_now_add
　　auto_now   自动创建---无论添加或修改，都是当前操作的时间
　　auto_now_add  自动创建---永远是创建时的时间
 
5、choices
      一个二维的元组被用作choices，如果这样定义，Django会select box代替普通的文本框，
      并且限定choices的值是元组中的值
      GENDER_CHOICE = (
            (u'M', u'Male'),
            (u'F', u'Female'),
      )
      gender = models.CharField(max_length=2,choices = GENDER_CHOICE)
 
6、max_length
        字段长度
 
7、default
        默认值
 
8、verbose_name　　
       Admin中字段的显示名称，如果不设置该参数时，则与属性名。
 
9、db_column　　
       数据库中的字段名称
 
10、unique=True　　
      不允许重复
 
11、db_index = True　　
     数据库索引
 
12、editable=True　　
      在Admin里是否可编辑
 
13、error_messages=None　　
      错误提示
 
14、auto_created=False　　
      自动创建
 
15、help_text　　
      在Admin中提示帮助信息
 
16、validators=[]
         验证器
 
17、upload-to
        文件上传时的保存上传文件的目录

资源来自：django 框架模型之models常用的Field，这些Field的参数、及常见错误原因及处理方案。_positivesmallintegerfield和integerfield-CSDN博客