Django教程(二)- Django视图与网址进阶1. HTML表单2.CSRF3.代码操作

1. HTML表单

HTML 表单用于搜集不同类型的用户输入。 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form> 来设置:

<form>
input elements
</form>

HTML 表单 - 输入元素 多数情况下被用到的表单标签是输入标签(<input>)。 输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

  • 文本域(Text Fields) 文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form> 

注意:表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。

  • 密码字段 密码字段通过标签<input type="password"> 来定义:
<form>
Password: <input type="password" name="pwd">
</form> 

注意:密码字段字符不会明文显示,而是以星号或圆点替代。

  • 单选按钮(Radio Buttons) <input type="radio"> 标签定义了表单单选框选项
<form>
<input type="radio" name="gender" value="male">Male<br>
<input type="radio" name="gender" value="female">Female
</form> 
  • 复选框(Checkboxes) <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form> 
  • 提交按钮(Submit Button) <input type="submit"> 定义了提交按钮. 当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form

2.CSRF

CSRF(Cross-site request forgery)通常缩写为CSRF或者XSRF:跨站请求伪造

CSRF攻击可以理解为:攻击者盗用了你的身份,以你的名义发送恶意请求。 举例来讲,某个恶意的网站上有一个指向你的网站的链接,如果 某个用户已经登录到你的网站上了,那么当这个用户点击这个恶意网站上的那个链接时,就会向你的网站发来一个请求, 你的网站会以为这个请求是用户自己发来的,其实呢,这个请求是那个恶意网站伪造的。

CSRF能够做的事情包括:以你名义发送邮件,发消息,盗取你的账号,甚至于购买商品,虚拟货币转账......造成的问题包括:个人隐私泄露以及财产安全。

Django 提供的 CSRF 防护机制 django 第一次响应来自某个客户端的请求时,会在服务器端随机生成一个 token,把这个 token 放在 cookie 里。然后每次 POST 请求都会带上这个 token, 这样就能避免被 CSRF 攻击。

  1. 在返回的 HTTP 响应的 cookie 里,django 会为你添加一个 csrftoken 字段,其值为一个自动生成的 token
  2. 在所有的 POST 表单时,必须包含一个 csrfmiddlewaretoken 字段 (只需要在模板里加一个 tag, django 就会自动帮你生成,见下面)
  3. 在处理 POST 请求之前,django 会验证这个请求的 cookie 里的 csrftoken 字段的值和提交的表单里的 csrfmiddlewaretoken 字段的值是否一样。如果一样,则表明这是一个合法的请求,否则,这个请求可能是来自于别人的 csrf 攻击,返回 403 Forbidden.
  4. 在所有 ajax POST 请求里,添加一个 X-CSRFTOKEN header,其值为 cookie 里的 csrftoken 的值

Django 里如何使用 CSRF 防护:

  1. 首先,最基本的原则是:GET 请求不要用有副作用。也就是说任何处理 GET 请求的代码对资源的访问都一定要是“只读“的。
  2. 要启用 django.middleware.csrf.CsrfViewMiddleware 这个中间件
  3. 再次,在所有的 POST 表单元素时,需要加上一个 {% csrf_token %} tag
  4. 在渲染模块时,使用 RequestContext。RequestContext 会处理 csrf_token 这个 tag, 从而自动为表单添加一个名为 csrfmiddlewaretoken 的 input

3.代码操作

需求:模拟登录功能,如果用户的名字是你的名字全拼且密码是12345,则显示登录成功,否则登录失败 1.创建app:python manage.py startapp login 2.在app中创建templates文件夹,并简单写三个网页,分别是登陆页面,登陆成功页面,登陆失败页面。

login.html

3.建立项目视图的练习,详情请见Django教程(一)- Django视图与网址

逻辑示意图.png

  • 定义视图函数

定义视图函数views.py

  • 在app中创建urls.py,定义视图函数相关的url

创建urls.py

  • 在项目的urls.py中,导入django.conf.urls.include模块,并且添加到urlpatterns列表

修改项目中的urls.py

  • 把新定义的app加到settings.py中的INSTALL_APPS中 测试:

输入正确的用户名和密码:

反之:

这里只是为了完成需求,不考虑网页的显示的效果!233

注意:测试之前需在终端打开服务器python manage.py runserver 8001(端口号默认是8000,也可以选择不设置!)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏假装我会写代码

highlight.js 在 Vue 中使用的一点儿经验

32020
来自专栏守望轩

Visual Studio 2008 每日提示(五)

#041、 通过返回标记,在编辑器向前或向后定位代码 原文地址:http://blogs.msdn.com/saraford/archive/2007/09/...

35060
来自专栏Android干货

小程序实践(五):for循环绑定item的点击事件

--------------------------------------------------------------------------------...

22010
来自专栏技术博文

Fiddler 跟踪数据包

随着 HTML5 的急速增长,现在越来越多的人,开始涉及到移动终端的 Web 开发领域,但手机端始终没有 PC 端这么多的调试工具。即使 PC 端浏览器模拟 u...

42050
来自专栏前端架构

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询、监听用户事件。

9820
来自专栏BestSDK

开发微信小程序,必知的40个小技巧

微信小程序开发者和开发需求者必读的40条技巧分享: Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一个没有...

64230
来自专栏salesforce零基础学习

salesforce lightning零基础学习(七) 列表展示数据时两种自定义编辑页面

上一篇Lightning内容描述的是LDS,通过LDS可以很方便的实例化一个对象的数据信息。当我们通过列表展示数据需要编辑时,我们常使用两种方式去处理编辑页面:...

15420
来自专栏ArrayZoneYour的专栏

借助Babel 7和Webpack构建React Toolchain

React不是完全开箱即用的。它使用了一些最近node才支持的关键字和语法(在本教程中我使用了v 9.3.0版本)。因此需要一些很麻烦的设置,但是Faceboo...

27140
来自专栏IMWeb前端团队

Ques前端组件化体系(一)

Ques是一套组件化系统,解决如何定义、嵌套、扩展、使用组件。 项目地址:https://github.com/miniflycn/Ques 传统开发模式的痛点...

276100
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

教你轻松修改React Native端口

告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。 当我们运行一个React Na...

46240

扫码关注云+社区

领取腾讯云代金券