基于Flask框架搭建视频网站的学习日志（三）1.原始Web 表单

本节主要用于体验一下前端后端直接数据的交互，样例不是太完善，下一节会加入Flash处理，稍微完善一下页面

（备注：建议先阅读廖雪峰老师的博客，MVC：Model-View-Controller，中文名“模型-视图-控制器”）

负责HTML页面数据采集，通过表单将用户输入的数据提交给服务器。（Flask-WTF扩展封装了WTForms，并且有验证表单数据的功能，这样就可以少写很多验证输入数据的代码，比如判断两次输入的密码是否相同等等）

本节先探究最原始的web表单如何实现，下节在使用WTF

一、首先，在HTML页面中直接写form表单：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form method="post">

    <label>Username:</label> <input type = "text" name="username"> <br>

    <label>Password:</label> <input type = "password" name="password"> <br>

    <label>Make_sure:</label> <input type = "password" name="password2"> <br>

    <input type="submit" value="submit"> <br>

</form>

</body>

</html>

补充一些html知识：<br>表示换行；<hr>表示加一条分割线；由于name定义的是文本的名字，所以password和password2要区分开来，这在视图函数中的request.form.get(‘name’)里面的name要用到，这也就是MVC中的Model

二、视图函数中获取表单数据

明确目的：实现一个简单的登录的逻辑处理

1、由于路由需要有get和post两种请求方式，所以我们应该在代码中判断请求方式（from flask import request）

2、获取请求的参数，从表单中拿到数据

3、判断参数是否填写，密码是否输入

4、如果判断都ok，就返回success

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST']) #由于路由需要有get和post两种请求方式

def _hello():

    #1.判断请求方式，用request.method

    if request.method == 'POST':

        #2.获取请求的参数，用request.form.get()

        username = request.form.get('username')

        password = request.form.get('password')

        password2 = request.form.get('password2')

        print ('success')

        #3.判断参数是否填写，密码是否输入

        if not all([username, password, password2]):

            print("参数不完整")

        elif password != password2:

            print("密码不一致")

        #4.如果判断都ok，就返回success

        else :

            return 'success'

    return render_template('hello.html')

if __name__ == '__main__':

    app.run(debug=True)

HTML补充知识：

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 来设置:

<form>

.

*input 元素*

.

</form>

<form>里面的就是整个表单 ，<input>是输入标签，type定义输入文本类型，name定义输入文本的名字；

> > 文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

浏览器显示如下：

First name:

Last name:

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

>>密码字段

密码字段通过标签<input type="password"> 来定义:

<form>

Password: <input type="password" name="pwd">

</form>

浏览器显示效果如下:

Password:

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

基于Flask框架搭建视频网站的学习日志（三）之原始web表单的更多相关文章

  1. 基于Flask框架搭建视频网站的学习日志（一）

    ------------恢复内容开始------------ 基于Flask框架搭建视频网站的学习日志(一)2020/02/01 一.Flask环境搭建 创建虚拟环境 初次搭建虚拟环境 搭建完虚拟环境 ...

  2. 基于Flask框架搭建视频网站的学习日志（二）

    基于Flask框架搭建视频网站的学习日志(二)2020/02/02 一.初始化 所有的Flask程序都必须创建一个程序实例,程序实例是Flask类的对象 from flask import Flask ...

  3. 基于Flask框架搭建视频网站的学习日志（六）之数据库

    使用Flask-SQLSlchemy管理数据库(1)--初步安装调试 一.介绍: Flask-SQLSlchemy是一个Flask扩展,简化了Flask中对sql的操作,是一个高层的框架,可以避免直接 ...

  4. Flask 教程 第三章：Web表单

    本文翻译自 The Flask Mega-Tutorial Part III: Web Forms 这是Flask Mega-Tutorial系列的第三部分,我将告诉你如何使用Web表单. 在第二章中 ...

  5. vue学习笔记三：常见的表单绑定

    <template> <div id="app"> <input type="checkbox" id="checked ...

  6. SZhe_Scan碎遮：一款基于Flask框架的web漏洞扫描神器

    SZhe_Scan碎遮:一款基于Flask框架的web漏洞扫描神器 天幕如遮,唯我一刀可碎千里华盖,纵横四海而无阻,是谓碎遮 --取自<有匪> 写在前面 这段时间很多时间都在忙着编写该项目 ...

  7. Python基于Flask框架配置依赖包信息的项目迁移部署小技巧

    一般在本机上完成基于Flask框架的代码编写后,如果有接口或者数据操作方面需求需要把代码部署到指定服务器上. 一般情况下,使用Flask框架开发者大多数都是选择Python虚拟环境来运行项目,不同的虚 ...

  8. Python flask 构建微电影视频网站✍✍✍

    Python flask 构建微电影视频网站  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大 ...

  9. 【PHP】基于ThinkPHP框架搭建OAuth2.0服务

    [PHP]基于ThinkPHP框架搭建OAuth2.0服务 http://leyteris.iteye.com/blog/1483403

随机推荐

  1. 22.文本框验证和外部url的调用

    面板可以右键固定到浏览器并且横向纵向都剧中 如果要在图片上进行点击或者其他操作 可以覆盖一个图片热区或者矩形(透明的)充当一个按钮的操作 这个提示的图片是默认隐藏的 通过右上角那个隐藏的勾 文本框右边 ...

  2. vue文章学习路线

    vue学习笔记(一)入门 Vue实现简单的购物车功能 vue学习笔记(二)vue的生命周期和钩子函数 使用webstorm搭建vue-cli项目 vue-cli项目中引入第三方插件 vue-cli项目 ...

  3. unity3D 自定义公告牌

    前言 有时候我们希望公告牌跟随镜头旋转永远平行面向屏幕,同时跟随镜头缩放缩放大小不变(镜头远离物体,正常物体视觉效果变小,但公告牌视觉大小比例不变),或者跟随镜头缩放变化,本文记录C#脚本的两种实现方 ...

  4. Java方法的参数传递是值传递还是引用传递？

    当基本数据类型(Boolean,byte,char,String,int,Long,float,double)作为参数传递时,传递的是实参值的副本,即传的是值,无论在函数中怎么操作这个副本,实参的值是 ...

  5. C# event 事件

    事件第二篇:https://www.cnblogs.com/FavoriteMango/p/11731485.html 曾经面试碰到一道设计题: 现有一个人,一群鸟,人有一把手枪,当人开枪时,所有的鸟 ...

  6. 牛客挑战赛17E 跳格子 计数dp

    !!!学长做过的题 正解:计数dp 解题报告: 传送门 首先思考,这题和普通的走台阶有什么区别嘛(跳格子其实和走台阶都一样的嘛quq因为走台阶比较经典所以就说的走台阶) 那显然最大的区别就是它有限制 ...

  7. 【汇编】2.第一个程序：hello world

    前言 在上篇博文 [汇编]1.汇编环境的搭建:DOSBox的安装 中,我们完成了 1.汇编环境模拟器DOSBox的安装. 2.汇编编译相关程序MASM6的下载. 在上篇文章的最后我们提到了挂载DOS程 ...

  8. 1045 快速排序 (25 分)C语言

    著名的快速排序算法里有一个经典的划分过程:我们通常采用某种方法取一个元素作为主元,通过交换,把比主元小的元素放到它的左边,比主元大的元素放到它的右边. 给定划分后的 N 个互不相同的正整数的排列,请问 ...

  9. Scala实践14

    1.Scala的future 创建future import scala.concurrent._ import ExecutionContext.Implicits.global object Fu ...

  10. React16源码解读：开篇带你搞懂几个面试考点

    引言 如今,主流的前端框架React,Vue和Angular在前端领域已成三足鼎立之势,基于前端技术栈的发展现状,大大小小的公司或多或少也会使用其中某一项或者多项技术栈,那么掌握并熟练使用其中至少一种 ...