上一节，我们基本了解了 Django 的一些配置，这一节，我们将通过一个简单的登录页面，进一步学习 Django 的使用。

新建项目

首先，新建一个 Django 项目，记得别弄错了哦。

settings 中静态文件、templates 路径配置

这里我们已经写好了登录页面（点我下载密码：abh5），但是这一个登录页面不单只是一个 HTML 文件，还有一些静态文件。我们上一次已经说过了，想要在 HTML 中引进静态文件的话，需要在 settings 中配置静态文件夹。login.html 放在 templates 目录下，也需要在 settings 中配置 templates 文件夹。配置完成后如下图。

"""
Django settings for mysite project.Generated by 'django-admin startproject' using Django 2.0.5.For more information on this file, see
https://docs.djangoproject.com/en/2.0/topics/settings/For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.0/ref/settings/
"""import os# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.0/howto/deployment/checklist/# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '-3+5fklj6_ard3d!^66n9=a^6p!v381pvm6r6h=c#84w%nzm1f'# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = TrueALLOWED_HOSTS = []# Application definition

INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles',
]MIDDLEWARE = ['django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','django.middleware.common.CommonMiddleware','django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware',
]ROOT_URLCONF = 'mysite.urls'TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [os.path.join(BASE_DIR, 'templates')],'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]WSGI_APPLICATION = 'mysite.wsgi.application'# Database
# https://docs.djangoproject.com/en/2.0/ref/settings/#databases

DATABASES = {'default': {'ENGINE': 'django.db.backends.sqlite3','NAME': os.path.join(BASE_DIR, 'db.sqlite3'),}
}# Password validation
# https://docs.djangoproject.com/en/2.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [{'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',},{'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',},{'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',},{'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',},
]# Internationalization
# https://docs.djangoproject.com/en/2.0/topics/i18n/

LANGUAGE_CODE = 'en-us'TIME_ZONE = 'UTC'USE_I18N = TrueUSE_L10N = TrueUSE_TZ = True# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.0/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),
]

settings.py

逻辑及 url 规划

我们想要浏览器能够找到这一个页面，首先要给它配置一个 url。

urls.py 中放的是函数与路径的对应关系。但是函数不应该放在 urls.py 中，应该新建一个 views.py ，专门用来写函数逻辑。

这里，我们在 views.py 中定义一个 login 函数，用来收到请求后返回 login.html 页面。要返回一个 HTML 页面，我们就可以选择导入 render 模块，render 模块可以方便地返回浏览器请求，HTML 页面，还有我们想要返回的参数。

from django.shortcuts import renderdef login(request):return render(request, 'login.html')

views.py

写好逻辑处理函数之后，我们就来写函数与路径的对应关系，也就是 url 。

from django.conf.urls import urlfrom .views import loginurlpatterns = [url(r'^login/$', login),
]

urls.py

此时的项目目录应该如下图。

登录页面配置

我们在 login.html 中通过一个 form 表单，完成用户账号密码的输入和传送。

form 表单 action 属性表示输入往哪里送，往哪个 url 送。method 属性是方法，一般都设置成 post。

这里，我们先设置 action="/baobao/" method="post"，也就是专门写一个名为 baobao 的函数，用以获取用户提交的数据，做是否登录成功的判断。

在 baobao 函数中，我们打印了浏览器 form post 过来的数据，然后返回一个 'O98K' 到页面显示 (#^.^#)

from django.conf.urls import urlfrom .views import login, baobaourlpatterns = [url(r'^login/$', login),url(r'^baobao/$', baobao),
]

urls.py

from django.shortcuts import render, HttpResponsedef login(request):return render(request, 'login.html')def baobao(request):# 获取用户提交的数据，做是否登录成功的判断email = request.POSTprint(request.POST)return HttpResponse('O98K')

views.py

<!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="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css"><title>mysite-登录页面</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"><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><input type="email" name="email" class="form-control" id="inputEmail3" placeholder="Email"></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="Password"></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></form></div></div>
</div>
</body>
</html>

启动项目，在浏览器输入 http://127.0.0.1:8000/login/，回车，顺利出现了我们的登录页面。

一脸兴奋，输入随便一个邮箱、密码，点击登录。什么？怎么提示错误了！！！

你确定你输入的是邮箱地址吗(*/ω＼*).....

这一个提示，是 bootstrap 前端框架帮我们做的，在前端就进行了一次简单的表单验证。boostrap 是什么？你现在姑且把它当成是一个前端框架，我们以后再讲。

初涉 CSRF

再一次，输入正确的邮箱地址，密码，点击登录。Forbidden？这是什么鬼？？？

可以看到，url 已经成功跳转到 baobao 了，不过页面却显示 Forbidden。下面还有一行 CSRF verification failed. Request aborted. 这一个是 Django 自带的 CSRF 防范机制。CSRF 是什么？某度百科有言：“CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。”（可以看出，我们的 Django 框架，可是相当的严谨和方便。）

那么，这里我们应该怎么做呢？我们只需要在 form 表单标签内部加上一句 {% csrf_token %} 即可。

此时的 login.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="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css"><title>mysite-登录页面</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"><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><input type="email" name="email" class="form-control" id="inputEmail3" placeholder="Email"></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="Password"></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>{% csrf_token %}</form></div></div>
</div>
</body>
</html>

重启项目，再次回到 login 页面，输入，登录。终于看到我们想要的 ‘O98K’ 了。 o(╥﹏╥)o

提取数据及账号密码验证

而且可以在 pycharm 的 Terminal 中看到打印出来的数据。（我是在 pycharm 的 Terminal 中启动项目的，所以可以在这里看到打印的数据）

'email' 对应的是我们输入的邮箱。'pwd' 对应的是我们输入的密码。'email' 和 'pwd' 是在哪里定义的呢？是我们在 login.html 的 form 的 input 中定义的 name 属性。要想给服务器传数据，必须给它们起一个 name。

既然可以获取到浏览器传过来的数据了，我们就可以在 baobao 函数中取出这些数据，做邮箱、密码的验证。

from django.shortcuts import render, HttpResponsedef login(request):return render(request, 'login.html')def baobao(request):# 获取用户提交的数据，做是否登录成功的判断分别# 取出邮箱和密码进行验证email = request.POST.get('email', None)pwd = request.POST.get('pwd', None)if email == '123@qq.com' and pwd == 'abc123':# 登录成功return HttpResponse('登录成功')else:# 登录失败return HttpResponse('登录失败')

views.py

输入错误的邮箱和密码进行登录，再输入正确的邮箱和密码进行登录。可以看到，我们想要的逻辑都能够正确运行。

逻辑及 url 优化

整理一下逻辑

首先，启动项目之后，在浏览器输入 http://127.0.0.1:8000/login/，浏览器就会给服务器发送一个 GET 请求，服务器给浏览器返回 login 页面。当用户填完登录表单点击登录的时候，浏览器就会向服务器发送一个 POST 请求，给服务器提交数据。服务器收到浏览器提交过来的数据（邮箱、密码），在逻辑函数中进行验证，并给浏览器返回相应的结果。

到这里，不知道你是否发现，我们的逻辑函数和 url 设置太过累赘。明明是一个登录功能，却写了两个页面，用两个函数进行处理。下面，我们将对代码进行改进。把返回 login 页面和邮箱密码验证功能都写进 login 函数中。

from django.shortcuts import render, HttpResponsedef login(request):if request.method == 'POST':# 获取用户提交的数据，做是否登录成功的判断分别# 取出邮箱和密码进行验证email = request.POST.get('email', None)pwd = request.POST.get('pwd', None)if email == '123@qq.com' and pwd == 'abc123':# 登录成功return HttpResponse('登录成功')else:# 登录失败return HttpResponse('登录失败')# 如果不是POST，就返回login页面return render(request, 'login.html')

views.py

相应的，login.html 中 form 的 action 也要改变成 login，urls.py 和 views.py 中的 baobao 相关可以删除。

登录测试，发现可以正常运行，而且 url 一直都是 login。

页面优化

什么？你说这样太丑了？？？

对，这样的登录功能实在是太丑了，一般的登录失败之后都不会跳转到另一个页面说你登录失败，而是在输入邮箱和密码的页面就提示登录失败了。

好的，那我们就动手改一下吧。要想错误信息显示在登录界面，就是说需要后端返回一个值到前端来。我们在 login 函数里面整理逻辑，在函数一开始的时候，就先给它一个空的错误信息，如果浏览器传过来的是 POST 方法，并且账号密码不正确，那么错误信息 error_msg 就是 ‘账号或密码错误’。然后再通过 render 模块返回浏览器。

from django.shortcuts import render, HttpResponsedef login(request):error_msg = ''if request.method == 'POST':# 获取用户提交的数据，做是否登录成功的判断分别# 取出邮箱和密码进行验证email = request.POST.get('email', None)pwd = request.POST.get('pwd', None)if email == '123@qq.com' and pwd == 'abc123':# 登录成功return HttpResponse('登录成功')else:# 登录失败error_msg = '账号或密码错误'# 如果不是POST，就返回login页面return render(request, 'login.html', {'error': error_msg})

views.py

同时，login.html 也需要提取后端传过来的 error_msg ，并显示在登录页面上，相应的代码如下。

<!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="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css"><title>mysite-登录页面</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"><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><input type="email" name="email" class="form-control" id="inputEmail3" placeholder="Email"></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="Password"></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><p class="text-danger text-center">{{ error }}</p></div>{% csrf_token %}</form></div></div>
</div>
</body>
</html>

测试登录功能，一切正常，登陆成功跳转页面并显示“登录成功”，登录失败直接在表单下显示错误信息。

初涉模板语言

你可能会疑惑，刚才我们在 login.html 中加的一句 {{ error }} 是什么意思啊？没见过啊？

这个，是 Django 自带的模板语言。不知道你是否还记得，在之前讲动态页面的时候，用 “@@xx@@”作为占位符，并在后端通过字符串替换的方法，把“@@xx@@”换成了当前时间。同理，这里的 {{ error }} 也类似于一个占位符，不过这里就不需要我们写函数去更改了，只要我们把同名的参与以字典的形式传给前端页面，Django 就会自动帮我们替换。

当然，你也可以在登录成功之后，跳转到其他的网页去，例如你自己的博客。

这里就会用到一个新的函数重定向 redirect。redirect 的作用，回复一个特殊的响应，这个响应会让用户浏览器请求指定的URL。

from django.shortcuts import render, HttpResponse, redirectdef login(request):error_msg = ''if request.method == 'POST':# 获取用户提交的数据，做是否登录成功的判断分别# 取出邮箱和密码进行验证email = request.POST.get('email', None)pwd = request.POST.get('pwd', None)if email == '123@qq.com' and pwd == 'abc123':# 登录成功# 回复一个特殊的响应，这个响应会让用户浏览器请求指定的URLreturn redirect('http://www.cnblogs.com/chuangming/')else:# 登录失败error_msg = '账号或密码错误'# 如果不是POST，就返回login页面return render(request, 'login.html', {'error': error_msg})

views.py

小结一下

这一次，我们回顾了项目的新建、settings 中静态文件、templates 路径配置，对项目逻辑和 url 进行规划和优化，接触到了 form 表单的使用，并且初次涉猎到 CSRF 和 Django 的模板语言，还有重定义函数 redirect。

下节预告

你会发现，我们现在只弄了一个登录界面，就搞了这么多的逻辑，但是一个项目不是仅仅由一个登录页面构成的，它还会有其他的功能，登录只是它的一小部分。那么这样子的话，我们需要对其功能进行划分，分成一个个 APP，这样更便于管理。至于什么是 APP，我们下一节再讲，谢谢大家！(#^.^#)

转载于:https://www.cnblogs.com/chuangming/p/9095308.html

一步一步理解 python web 框架，才不会从入门到放弃 -- 简单登录页面相关推荐

python才不会从入门到放弃_一步一步理解 python web 框架，才不会从入门到放弃 -- 启程出发...
Hello yimi 这是yimi的小站! @@xx@@
Python Web框架
Bottle: Python Web框架中文文档 Bottle是一个快速,简单,轻量级的 Python WSGI Web框架.单一文件,只依赖 Python标准库 . URL映射(Routing): ...
一文读懂Python web框架和web服务器之间的关系
我们都知道 Python 作为一门强大的语言,能够适应快速原型和较大项目的制作,因此被广泛用于 web 应用程序的开发中. 在面试的过程中,大家或多或少都被问到过这样一个问题:一个请求从浏览器发出到数 ...
python web框架介绍对比
Django Python框架虽然说是百花齐放,但仍然有那么一家是最大的,它就是Django.要说Django是Python框架里最好的,有人同意也有人坚决反对,但说Django的文档最完善.市场占 ...
python的web框架哪个最好学_2018年要学习的10大Python Web框架
通过为开发人员提供应用程序开发结构,框架使开发人员的生活更轻松.他们自动执行通用解决方案,缩短开发时间,并允许开发人员更多地关注应用程序逻辑而不是常规元素. 在本文中,我们分享了我们自己的前十大Pyt ...
python论坛app_理解python web开发，轻松搭建web app！
大家好,今天分享给大家的是理解python web开发,轻松搭建web app,希望大家学有所获! 因为 python代码的优雅美观且易于维护这一特点,越来越多的人选择使用 Python做web开发. ...
“脚踢各大Python Web框架”，Sanic真有这能耐么？
在Github上,Sanic第一句介绍语就是: "Sanic is a Flask-like Python 3.5+ web server that's written to go fast ...
Python Web框架Tornado的异步处理代码演示样例
1. What is Tornado Tornado是一个轻量级但高性能的Python web框架,与还有一个流行的Python web框架Django相比.tornado不提供操作数据库的ORM接口 ...
python在线搭建教程_理解python web开发，轻松搭建web app！
大家好,今天分享给大家的是理解python web开发,轻松搭建web app,希望大家学有所获! 因为 python代码的优雅美观且易于维护这一特点,越来越多的人选择使用 Python做web开发. ...

一步一步理解 python web 框架，才不会从入门到放弃 -- 简单登录页面

新建项目

settings 中静态文件、templates 路径配置

逻辑及 url 规划

登录页面配置

初涉 CSRF

提取数据及账号密码验证

逻辑及 url 优化

页面优化

初涉模板语言

小结一下

下节预告

一步一步理解 python web 框架，才不会从入门到放弃 -- 简单登录页面相关推荐

最新文章

热门文章