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 "中国
联通"
# Flask内部会自动打开这个文件，并读取内容，返回，默认去当前文件夹的templates文件夹去找
return render_template("index.html")
if __name__ == '__main__':
app.run() # 在地址后加/show/info会执行index函数，想要shut需要自己停止html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h1>出卖我的爱h1>
body>
html>结果展示：
2. 浏览器能识别的标签
2.1 编码（head中）
以UTF-8的格式读取html文件
<meta charset="UTF-8">2.2 标题（head中）
网页的标题是Title，即标签页上显示的内容
<title>Titletitle>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" />和配合使用，可实现点击图片跳转，加入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中，块级标签）
- 是无序标签，
- GET请求：URL方法 / 表单提交，请求的信息体现在URL中，例如上图中的“提交请求”步骤。
- POST请求：表单提交，请求的信息体现在请求体（Form data）中。
- 是有序标签
<ul>
<li>中国移动li>
<li>中国联通li>
ul>
<ol>
<li>百度搜索li>
<li>百度学术li>
ol>2.8 表格（body中，块级标签）
表头，
是表格体，<table border="1">
<thead>
<tr> <th>IDth> <th>nameth> <th>mailth> tr>
thead>
<tbody>
<tr> <td>1td> <td>张三td> <td>qq.comtd> tr>
<tr> <td>2td> <td>李四td> <td>163.comtd> tr>
tbody>
table>2.9 input系列（body中，行内标签）
<input type="text">
<input type="password">
<input type="file">
<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>
<select multiple>
<option>北京option>
<option>上海option>
<option>深圳option>
select>2.11 多行文本（body中，行内标签）
<textarea rows="3">textarea>3. Flask网站请求流程图
浏览器向后端发送请求主要有两种方式：
4. 案例
# app.py
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:
# 接受用户通过POST请求发送过来的数据，GET请求是request.args
uname = 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()
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册title>
<base 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="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="提交表单按钮">
div>
form>
body>
html>
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>用户注册界面如下所示：
用户登录界面如下所示：
