
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, 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()


<!--/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>

用户注册界面如下所示：

用户登录界面如下所示：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/51618