1 2 3 4

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

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

posted @ 2020-02-04 20:40  Breezerf  阅读(312)  评论(0编辑  收藏  举报