Python-Django学习笔记2-前端开发（表单）
前端开发：表格、表单
表格-案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户列表</h1>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>头像</th>
<th>姓名</th>
<th>邮箱</th>
<th>更多信息</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="/static/a1.jpg" alt="用户1的头像" style="height: 50px;"/>
</td>
<td>徐泽林</td>
<td>[email protected]</td>
<td>
<a href="https://www.baidu.com" target="_blank">点击查看</a>
</td>
<td>
编辑
删除
</td>
</tr>
<tr>
<td>1</td>
<td>
<img src="/static/a2.jpg" alt="用户1的头像" style="height: 50px;"/>
</td>
<td>徐泽林</td>
<td>[email protected]</td>
<td>
<a href="https://www.baidu.com" target="_blank">点击查看</a>
</td>
<td>
编辑
删除
</td>
</tr>
<tr>
<td>1</td>
<td>
<img src="/static/a3.jpg" alt="用户1的头像" style="height: 50px;"/>
</td>
<td>徐泽林</td>
<td>[email protected]</td>
<td>
<a href="https://www.baidu.com" target="_blank">点击查看</a>
</td>
<td>
编辑
删除
</td>
</tr>
<tr>
<td>1</td>
<td>
<img src="/static/a1.jpg" alt="用户1的头像" style="height: 50px;"/>
</td>
<td>徐泽林</td>
<td>[email protected]</td>
<td>
<a href="https://www.baidu.com" target="_blank">点击查看</a>
</td>
<td>
编辑
删除
</td>
</tr>
</tbody>
</table>
</body>
</html>
2.4.9 input系列（7个）
<input type="text" /> - 文本输入框
<input type="password" /> - 密码输入框
<input type="file" /> - 文件选择框
- 单选框（name必须一致才能互斥）
<input type="radio" name="n1">男
<input type="radio" name="n1">女
- 复选框
<input type="checkbox">羽毛球
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
- Button按钮
<input type="button" value="提交"> ---》普通按钮
<input type="submit" value="提交"> ---》提交表单
2.4.10 下拉框
- 单选
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
</select>
- 多选
<select multiple>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
</select>
2.4.11 多行文本
<textarea></textarea>
案例：用户注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<div>
用户名：<input type="text" />
</div>
<div>
密码：<input type="password">
</div>
<div>
性别：
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</div>
<div>
爱好：
<input type="checkbox">乒乓球
<input type="checkbox">篮球
<input type="checkbox">羽毛球
<input type="checkbox">足球
<input type="checkbox">棒球
<input type="checkbox">瑜伽
</div>
<div>
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>广州</option>
<option>佛山</option>
</select>
</div>
<div>
擅长领域：
<select multiple>
<option>画原型</option>
<option>写需求</option>
<option>怼开发</option>
<option>做测试</option>
<option>聊运营</option>
</select>
</div>
<div>
备注：<textarea rows="5"></textarea>
</div>
<div>
<input type="button" value="button按钮提交">
<input type="submit" value="submit按钮提交">
</div>
</body>
</html>
网络请求
GET请求【URL方法 / 表单提交】
- 现象：GET请求、跳转、想后端传入数据，数据参数会拼接在URL上
https://www.sogou.com/web?query=安卓&age=19&name=XXX....- 注意：GET请求的数据会在URL中体现
POST请求【表单提交】
- 现象：提交的数据参数不在URL中体现，而是在请求体中
案例：用户注册
- 新创建一个项目
- 创建Flask代码
from flask import Flask,render_template,request
app = Flask(__name__)
@app.route('/register', methods=['GET', "POST"])
def register():
if request.method == 'GET':
return render_template('register.html')
else:
# 1.接受用户通过get形式发送过来的数据
# print(request.form)
user = request.form.get("user")
pwd = request.form.get("pwd")
sex = request.form.get("sex")
hobby = request.form.getlist("hobby")
city = request.form.get("city")
skill = request.form.getlist("skill")
more = request.form.get("more")
print('接收到的用户名为：', user)
# 将用户信息写入文件中实现注册、写入到Excel中实现注册、写入数据库中实现注册
# 2.给用户返回结果
return '注册成功'
# @app.route('/do/reg', methods=["GET"])
# def do_register():
# # 1.接受用户通过get形式发送过来的数据
# print(request.args)
# # 2.给用户返回结果
# return '注册成功'
# @app.route('/post/reg', methods=["POST"])
# def post_register():
if __name__ == '__main__':
app.run()
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<form method="post" action="/post/reg">
<div>
用户名：<input type="text" name="user"/>
</div>
<div>
密码：<input type="password" name="pwd">
</div>
<div>
性别：
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
</div>
<div>
爱好：
<input type="checkbox" name="hobby" value="10">乒乓球
<input type="checkbox" name="hobby" value="20">篮球
<input type="checkbox" name="hobby" value="30">羽毛球
<input type="checkbox" name="hobby" value="40">足球
<input type="checkbox" name="hobby" value="50">棒球
</div>
<div>
城市：
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="gz">广州</option>
<option value="fs">佛山</option>
</select>
</div>
<div>
能力：
<select multiple name="skill">
<option value="100">画原型</option>
<option value="101">写需求</option>
<option value="102">怼开发</option>
<option value="103">做测试</option>
<option value="104">聊运营</option>
</select>
</div>
<div>
备注：
<textarea rows="5" name="more"></textarea>
</div>
<input type="submit" value="submit按钮提交">
</form>
</body>
</html>
案例：登录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户注册</h1>
<form method="post", action="/login">
用户名：<input type="text" name="user"/>
密码：<input type="password" name="pwd">
<input type="submit" value="submit按钮提交">
</form>
</body>
</html>
@app.route('/login', methods=["GET", "POST"])
def login():
if request.method == 'GET':
return render_template('login.html')
else:
user = request.form.get("user")
pwd = request.form.get("pwd")
print(user, pwd)
return '登录成功'
s
页面上的数据，想要提交到后台：
- 必须要form标签包裹要提交的标签
- 提交方式：
method="get" - 目的地址：
action="/xxx/xxx/xx" - 在form标签里面必须要有一个submit标签（submit与form搭配使用）
- 提交方式：
- 在form里面的一些标签：
input/select/textarea...- 标签一定要写name属性
总结
- 称呼
- 浏览器能够识别的标签（不专业）
- HTML标签
什么是HTML？ = 超文本传输语言（与浏览器搭配）
HTML标签（都有默认的格式/样式；以后可以通过属性/CSS来修改样式）
HTML标签与编程语言无关
- java+HTML
- python+HTML
- PHP+HTML
- c#+HTML
HTML标签还有非常多，不必逐一学会，后续在实用场景时再练习
