Web开发day1：使用flask快速搭建网站

1. 简单跑通

2. 浏览器能识别的标签

2.1 编码（head中）

2.2 标题（head中）

2.3 标题（body中，块级标签）

2.4 div和span（body中，div块级标签，span行内标签）

2.5 超链接（body中，行内标签）

2.6 图片（body中，行内标签）

2.7 列表（body中，块级标签）

2.8 表格（body中，块级标签）

2.9 input系列（body中，行内标签）

2.10 下拉框（body中，行内标签）

2.11 多行文本（body中，行内标签）

3. Flask网站请求流程图

4. 案例

进度来源：最新Python的web开发全家桶（django+前端+数据库）

网址：最新Python的web开发全家桶（django+前端+数据库）_哔哩哔哩_bilibili

1. 简单跑通

from flask import Flask
from flask import render_template  # 搭配templates文件夹下的html文件使用app = Flask(__name__)  # 实例化一个对象# 修饰器，创建了网址和函数的对应关系，只有访问地址就会执行此函数
@app.route("/show/info")
def index():# return "中国联通"# return "中<h1>国</h1><span style='color:red;'>联通</span>"# Flask内部会自动打开这个文件，并读取内容，返回，默认去当前文件夹的templates文件夹去找return render_template("index.html")if __name__ == '__main__':app.run()  # 在地址后加/show/info会执行index函数，想要shut需要自己停止

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>出卖我的爱</h1>
</body>
</html>

结果展示：

2. 浏览器能识别的标签

2.1 编码（head中）

以UTF-8的格式读取html文件

<meta charset="UTF-8">

2.2 标题（head中）

网页的标题是Title，即标签页上显示的内容

<title>Title</title>

2.3 标题（body中，块级标签）

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.4 div和span（body中，div块级标签，span行内标签）

div：一整行。【块级标签】

span：有多少占多少。【行内标签、内联标签】

<div>自己占一整行</div>
<span>内联</span><span>有多少占多少</span>

注意：后期加上CSS可丰富样式

2.5 超链接（body中，行内标签）

跳转到其他网站：

<a href="https://www.bilibili.com/">点击跳转</a>

跳转到自己网站的其他网址：

<a href="https://127.0.0.1:5000/get/news">点击跳转</a>
<a href="/get/news">点击跳转</a>

2.6 图片（body中，行内标签）

自结束标签（只有一对<>）：

<img src="https://pic1.zhimg.com/80/v2-650e91dd2baf0dfda1be2a0305d81237_720w.webp?source=1940ef5c" />

当需要显示自己的图片时，图片要放在当前目录的static目录下，可设置大小：

<img style="height:100px; width:100px;" src="/static/wbg.png" />

<img style="height:60%;" src="/static/wbg.png" />

<a>和<img>配合使用，可实现点击图片跳转，加入target="_blank"可打开新页面：

<a href="https://www.mi.com/"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ab5c6d195d2b3dde69683966891d5a9.png" target="_blank"/>
</a>

2.7 列表（body中，块级标签）

<ul>是无序标签，<ol>是有序标签

<ul><li>中国移动</li><li>中国联通</li>
</ul><ol><li>百度搜索</li><li>百度学术</li>
</ol>

2.8 表格（body中，块级标签）

<thead>表头，<tbody>是表格体，<tr>表示一行。加入border="1"后表格会加上边框

<table border="1"><thead><tr> <th>ID</th> <th>name</th> <th>mail</th> </tr></thead><tbody><tr> <td>1</td> <td>张三</td> <td>qq.com</td> </tr><tr> <td>2</td> <td>李四</td> <td>163.com</td> </tr></tbody>
</table>

2.9 input系列（body中，行内标签）

<!--文本框，输入文字-->
<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="button" value="提交">  <!--普通按钮-->
<input type="submit" value="提交">  <!--可提交表单-->

2.10 下拉框（body中，行内标签）

<!--单选-->
<select><option>北京</option><option>上海</option><option>深圳</option>
</select><!--多选，按住shift或者ctrl可实现多选-->
<select multiple><option>北京</option><option>上海</option><option>深圳</option>
</select>

2.11 多行文本（body中，行内标签）

<!--可输入多行文本，rows控制默认显示的行数-->
<textarea rows="3"></textarea>

3. Flask网站请求流程图

浏览器向后端发送请求主要有两种方式：

GET请求：URL方法 / 表单提交，请求的信息体现在URL中，例如上图中的“提交请求”步骤。
POST请求：表单提交，请求的信息体现在请求体（Form data）中。

4. 案例

# app.py
from flask import Flask, render_template, requestapp = Flask(__name__)@app.route("/register", methods=["GET", "POST"])
def register():if request.method == "GET":return render_template("register.html")else:# 接受用户通过POST请求发送过来的数据，GET请求是request.argsuname = request.form.get("uname")upass = request.form.get("upass")gender = request.form.get("gender")hobby_list = request.form.getlist("hobby")city = request.form.get("city")skill_list = request.form.getlist("skill")memo = request.form.get("memo")print("用户名：", uname)print("性别：", gender)print("擅长领域：", *skill_list)return "注册成功"@app.route("/login", methods=["GET", "POST"])
def login():if request.method == "GET":return render_template("login.html")else:uname = request.form.get("uname")upass = request.form.get("upass")print("uname：", uname)print("upass：", upass)return "登陆成功"if __name__ == '__main__':app.run()

<!--/templates/register.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户注册</title><base target="_blank" />  <!--使超链接的参数target="_blank"能够生效-->
</head>
<body><h1>用户注册<a href="https://www.mi.com/"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ab5c6d195d2b3dde69683966891d5a9.png" style="height:100px; width:100px;" target="_blank" /></a></h1><!--使用form把需要提交的数据包裹起来，method表示提交方式，action表示提交到哪里--><!--注意：form中需要提交的数据必须有name参数--><!--一般注册请求都是POST--><form method="post" action="/register"><div>用户名：<input type="text" name="uname"></div><div>密码：<input type="password" name="upass"></div><div>性别：<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女</div><div>爱好：<input type="checkbox" name="hobby" value="basketball">篮球<input type="checkbox" name="hobby" value="soccer">足球<input type="checkbox" name="hobby" value="pingpang">乒乓球</div><div>城市：<select name="city"><option value="beijing">北京</option><option value="tianjin">天津</option><option value="shanghai">上海</option></select></div><div>擅长领域：<select multiple name="skill"><option value="coding">代码</option><option value="writing">写作</option><option value="eating">吃饭</option></select></div><div>备注：<textarea name="memo"></textarea></div><div><input type="button" value="普通按钮"><input type="submit" value="提交表单按钮">  <!--与form搭配，提交数据--></div></form>
</body>
</html>

<!--/templates/login.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户登录</title>
</head>
<body><h1>用户登录</h1><form method="post" action="/login"><div>用户名：<input type="text" name="uname">密码：<input type="password" name="upass"></div><input type="submit" value="提交登录信息"></form>
</body>
</html>

用户注册界面如下所示：

用户登录界面如下所示：