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

我选择四娃

已于 2022-11-19 10:22:18 修改

阅读量2.7k

点赞数 14

文章标签： flask 前端 python

于 2022-11-12 16:17:40 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_56681374/article/details/127817984

版权

目录

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网站请求流程图

进度来源：最新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, 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>

用户注册界面如下所示：

用户登录界面如下所示：

我选择四娃

关注

14
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web开发day1：使用flask快速搭建网站

使用flask简单搭建一个本地网站，介绍部分html语法
复制链接

扫一扫

我选择四娃 CSDN认证博客专家 CSDN认证企业博客

码龄3年

22: 原创

111万+: 周排名

10万+: 总排名

9966: 访问

: 等级

275: 积分

37: 粉丝

43: 获赞

2: 评论

58: 收藏

私信

关注

热门文章

最新评论

python 计时函数timeit
CSDN-Ada助手: 推荐 Python入门技能树：https://edu.csdn.net/skill/python?utm_source=AI_act_python
Web开发day16：Antv X6 + Vue（Chapter3）
我选择四娃: 主要代码都放上了，其余的就按照默认配置即可
Web开发day16：Antv X6 + Vue（Chapter3）
Shine: 源码能发下吗

您愿意向朋友推荐“博客详情页”吗？

强烈不推荐
不推荐
一般般
推荐
强烈推荐

提交

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

我选择四娃 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。