05. 通过falsk后端验证form表单提交数据

通过falsk后端验证form表单提交数据

1. falsk+html form表单

1.1 html前端代码

show code 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>form表单</title>
	</head>

	<body>
		<!--action  提交数据到后端的路径（给哪个服务器提交）-->
		<!--
			1.什么都不写   默认当前页面所在的url
			2.全路径 www.baidu.com 百度
			3.只写路径后缀 action='/index'
			自动识别出服务端的ip和port拼接到前面
			host:port/index
		-->
		<!--input 和  label一起使用-->
		<form action="http://127.0.0.1:5000/index" method="post" enctype="multipart/form-data">
			<p><label for="d1">
<!--				readonly 只读   disable 禁用
input type="hidden"  隐藏
-->
				username : <input type="text" id="d1" name="username" disabled value="默认值"/>
			</label></p>
			<!--通过id连接即可-->
			<p><label for="d2"></label> password : <input type="password" id='d2' name="password"/></p>
			<p>birthday ：
				<label for="d3"><input type="date" id="d3"  name="birthday"/></label>
			</p>
			<!--
				所有获取用户标签输入的标签 都应该有name属性
					name类似于字典的key
					用户数据类似于字典的value
			-->
			<p>gender :
				<input type="radio" value="男" name="gender" checked="checked" />男
				<input type="radio" value="女" name="gender" />女
				<input type="radio" value="其他" name="gender" >其他
			</p>
			<p>bobby :
				<input type="checkbox" name="bobby" value="打球"/> 打球
				<input type="checkbox" name="bobby" value="音乐"/> 音乐
			</p>
			<p>province:
				<select name="province" id="">
					<option value="桂林" >桂林</option>
					<option value="南宁" selected>南宁</option>
					<option value="梧州">梧州</option>
				</select>
			</p>
			<p>subject :
				<select name="subject" id="" multiple>
					<option value="python">python</option>
					<option value="java" selected>java</option>
					<option value="js">js</option>
				</select>
			</p>
<!--			<p> addr：-->
<!--				<select name="" id="">-->
<!--					<optgroup label="桂林">-->
<!--						<option value="">临桂</option>-->
<!--						<option value="">龙胜</option>-->
<!--						<option value="">恭城</option>-->
<!--					</optgroup>-->
<!--					<optgroup label="河池">-->
<!--						<option value="">宜州</option>-->
<!--						<option value="">金城江</option>-->
<!--					</optgroup>-->
<!--				</select>-->
<!--			</p>-->
			<p>上传文件:
				<input type="file" name="myfile" multiple/>
			</p>
			<p>自我介绍：
				<textarea name="introdue" id="" cols="30" rows="10" maxlength="20"></textarea>
			</p>
			<!--提交form表单数据页面刷新-->
			<input type="submit" value="注册" />
			<!--普通按钮，本身没有功能，后面有用，学js之后自定义功能-->
			<input type="button" value="按钮" />
			<!--用来重置内容-->
			<input type="reset" value="重置" />
			<!--button也可以提交表单数据-->
			<button>点我</button>

		</form>
	</body>

</html>

1.2 falsk后端代码

# -*- coding: utf-8 -*-

from flask import Flask, request

app = Flask(__name__)

# form表单是发送get请求
# 提交文件注意：
    # method必须是post
    # enctype="multipart/form-data"
    # enctype 默认是urlencoded   只能提交普通文本数据
@app.route('/index', methods=['get', 'post'])
def index():
    print(request.form)           # 获取form表单中非文件属性（没有name属性的获取不了）
    print(request.files)          # 获取文件数据
    file_obj = request.files.get('myfile')
    print(file_obj.name)
    file_obj.save(file_obj.name)
    return 'ok'

app.run()

2. 注意事项

2.1 form表单路径&文件传输

  • action = "http://127.0.0.1:5000/index"
  • 以上实现了文件传输，文件传输必须注意
    • method必须是post
    • ctype="multipart/form-data"
    • nctype 默认是urlencoded 只能提交普通文本数据
<form action="http://127.0.0.1:5000/index" method="post" enctype="multipart/form-data">
......
</form>>

2.2 小细节功能

<p><label for="d1">
<!--readonly 只读     disable 禁用    input type="hidden" 隐藏     value="默认值"-->
username : <input type="text" id="d1" name="username" disabled value="默认值"/>
</label></p>

<!--multiple  可以多选（比如上传多个文件，复选框选多个）-->
<input type="file" name="myfile" multiple/>

2.3 下拉框，单选框，复选框等说明

注意：默认情况下（下拉框，单选框，复选框等）用户选择的表单都需要设定一个默认值 value，才能从后端获取到值

<!--
所有获取用户标签输入的标签 都应该有name属性
name类似于字典的key
用户数据类似于字典的value
-->

运行说明

  • 先运行后端代码 后用户输入数据
posted @ 2021-08-09 13:57  超暖  阅读(108)  评论(0)    收藏  举报