zoukankan      html  css  js  c++  java
  • 基于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:

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

  • 相关阅读:
    WPF XAML之bing使用StringFormat
    C#程序以管理员权限运行
    注册表REG文件编写大全
    linux 的基本操作(编写shell 脚本)
    linux的基本操作(正则表达式)
    linux的基本操作(shell 脚本的基础知识)
    linux的基本操作(RPM包或者安装源码包)
    linux的基本操作(文件压缩与打包)
    linux的基本操作(文本编辑工具vim)
    linux的基本操作(磁盘管理)
  • 原文地址:https://www.cnblogs.com/fragrant-breeze/p/12261036.html
Copyright © 2011-2022 走看看