当前位置:   article > 正文

python怎么编写一个登录界面,python做用户登录界面_python做一个前端登录

python做一个前端登录

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

html标签学习(二)

1、 < span >作用

<span>标签对文字进行着色,例:

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

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

  1. <form>
  2. {%csrf_token%}
  3. </form>

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

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

使用font-awesome图标库

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

2、在html中使用
htmlhead中引入:

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

使用时:

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

(在class中填写想要使用的图标,font-size是大小)
代码示例:

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

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

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

html的图标

把图标放到static中的文件夹中,然后在htmlhead中添加:

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

在这里插入图片描述

让< div >中元素水平排列

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

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

在这里插入图片描述

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

在head中添加:

  1. <!--设背景颜色为eee,设p2字体大小为15px,设p1字体大小为25px-->
  2. <style>
  3. body {background-color: #eee;
  4. }
  5. p1 {font-size:25px;
  6. }
  7. p2 {font-size:15px;
  8. }
  9. </style>

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

简单的登录跳转页面

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

html完整代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="x-ua-compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="shortcut icon" href="/static/icon/html_ico.png" />
  8. <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  9. <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css">
  10. <title>登录</title>
  11. <style>
  12. body {
  13. background-color: #eee;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="container">
  19. <div class="row">
  20. <div class="col-md-4 col-md-offset-4" style="margin-top: 100px">
  21. <h1 class="text-center">登录</h1>
  22. <form class="form-horizontal" action="/login/" method="post" >
  23. {% csrf_token %}
  24. <div class="form-group">
  25. <label for="inputEmail3" class="col-sm-2 control-label"></label>
  26. <div class="input-group col-sm-8">
  27. <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  28. <!--type=""指不限定用户名的输入类型-->
  29. <input type="" class="form-control" name="username" id="inputEmail3" placeholder="用户名">
  30. </div>
  31. </div>
  32. <div class="form-group">
  33. <label for="inputPassword3" class="col-sm-2 control-label"></label>
  34. <div class="input-group col-sm-8">
  35. <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  36. <input type="password" name="pwd" class="form-control" id="inputPassword3" placeholder="密码">
  37. </div>
  38. </div>
  39. <div class="form-group">
  40. <div class="input-group col-sm-offset-2 col-sm-8">
  41. <div class="checkbox">
  42. <label>
  43. <input type="checkbox"> 记住我
  44. </label>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="form-group">
  49. <div class="input-group col-sm-offset-2 col-sm-8">
  50. <button type="submit" class="btn btn-primary btn-block">登录</button>
  51. </div>
  52. </div>
  53. <p class="text-danger text-center">{{ error }}</p>
  54. </form>
  55. </div>
  56. </div>
  57. </div>
  58. </body>
  59. </html>

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

  1. from django.shortcuts import render
  2. # Create your views here.
  3. from django.shortcuts import render, redirect
  4. from django.views.generic.base import View
  5. class LoginView(View):
  6. @staticmethod
  7. def post(request):
  8. #打开、请求网页时method为get
  9. if request.method == "GET":
  10. return render(request, 'login.html') # 如果触发GET就直接返回login.html页面
  11. elif request.method == "POST": # 触发post
  12. username = request.POST.get("username", None) # 接收用户名,如果未接收到,返回None
  13. pwd = request.POST.get("pwd", None) # 接收密码,如果未接收到,返回None
  14. print(username, pwd)
  15. # 判断用户名密码
  16. if username == "jcy" and pwd == "jcy321": # 用户名&密码
  17. # 响应函数
  18. return redirect("/index1/") #跳转index1页面
  19. elif username == "jcy" and pwd == "jcy123":
  20. # 响应函数
  21. return redirect("/index2/") #跳转index2页面
  22. else:
  23. # 登陆失败
  24. error_msg = "用户名或密码错误"
  25. return render(request, "login.html", {"error": error_msg})
  26. class GetIndex1(View):
  27. @staticmethod
  28. def get_index1(request):
  29. return render(request, 'index1.html', )
  30. class GetIndex2(View):
  31. @staticmethod
  32. def get_index2(request):
  33. return render(request, 'index2.html', )

urls.py代码:

  1. """MyDjango URL Configuration
  2. The `urlpatterns` list routes URLs to views. For more information please see:
  3. https://docs.djangoproject.com/en/3.1/topics/http/urls/
  4. Examples:
  5. Function views
  6. 1. Add an import: from my_app import views
  7. 2. Add a URL to urlpatterns: path('', views.home, name='home')
  8. Class-based views
  9. 1. Add an import: from other_app.views import Home
  10. 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
  11. Including another URLconf
  12. 1. Import the include() function: from django.urls import include, path
  13. 2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
  14. """
  15. # Django 路由,view.py视图与url建立映射关系
  16. from django.contrib import admin
  17. from django.urls import path
  18. from django.conf.urls import url
  19. from django.contrib import admin
  20. from myapp.views import LoginView, GetIndex1, GetIndex2
  21. urlpatterns = [
  22. url(r'^admin/', admin.site.urls),
  23. url(r'^login/', LoginView.post),
  24. url(r'^index1/', GetIndex1.get_index1),
  25. url(r'^index2/', GetIndex2.get_index2)
  26. ]

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

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

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

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

在这里插入图片描述

views.py中添加代码print(request.POST),将request.post输出出来:

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

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

  1. <QueryDict: {'csrfmiddlewaretoken':
  2. ['TC9KOHNZxhEUVNwFYWBreKGzS9M7ip3OJSqljsoDthDFbjueYNrOgHjmmYW5bYm5'],
  3. 'username': ['jcy'], 'pwd': ['jcy123']
  4. , 'submit': ['']}>

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

  1. <QueryDict: {'csrfmiddlewaretoken':
  2. ['ifVvpYSEoV3gmB7aPJASE77gr9Y5ZoSv8vc6UJtikV21C75JPAqfG4K3VY83SXbM'],
  3. 'username': ['jcy'], 'pwd': ['jcy123']
  4. , '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文件中创建表的类,加入代码:

  1. from django.db import models
  2. # Create your models here.
  3. class Eple(models.Model): #表名
  4. number = models.AutoField(primary_key=True) #AutoField integer型字段,主键
  5. username = models.CharField(max_length=50) #char型
  6. 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,添加代码:

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

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

Feild常用字段:

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

model常用参数:

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

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

文章知识点与官方知识档案匹配,可进一步学习相关知识
Python入门技能树首页概览425874 人正在系统学习中
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/724463
推荐阅读
相关标签
  

闽ICP备14008679号