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

基于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:

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