使用Flask web框架快速搭建一个网站（学习笔记1）

已于 2023-01-20 21:20:04 修改
阅读量2.8k 收藏 37
点赞数 5
分类专栏： 前端 文章标签： flask 前端 python
于 2023-01-16 22:07:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyqyqyi/article/details/128709680
版权

1.快速开发网站

  • 创建一个新项目

  • 安装flask

conda install flask
conda list

  • 安装成功

  • 新创建一个文件web.py

from flask import Flask

# 实力化对象Flask
app = Flask(__name__)


# 创建了网址/show/info和函数index的对应关系
# 以后用户再浏览器访问/show/info时，网站自动执行函数index
@app.route("/show/info")
def index():
    return "hello world"


if __name__ == "__main__":
    app.run()

  • 关闭这个程序的运行（点击pycharm右上角的红色正方形），这个网站就无法访问停止。

  • 为了让网页更加美观，flask框架支持将标签写入一个文件，并访问。

from flask import Flask, render_template

# 实力化对象Flask
app = Flask(__name__)


# 创建了网址/show/info和函数index的对应关系
# 以后用户再浏览器访问/show/info时，网站自动执行函数index
@app.route("/show/info")
def index()
    # flask内部会自动打开这个文件，读取内容，并将内容返回给用户
    # 默认：去当前项目目录的templates文件夹中找。
    return render_template("index.html")


if __name__ == "__main__":
    app.run()

  • 在当前文件夹中创建一个文件夹templates，再templates目录下再创建一个index.html文件。

  • 再标签下添加

<h1>hello world</h1>

  • 再次运行web.py文件，"hello world"就变成了加粗加大的一集标题。

2.HTML标签

超文本传输语言（与浏览器搭配）

2.1编码（head）

<meta charset="UTF-8"><!--文字编码-->

2.2title（head）

<title>hot & cold</title><!--浏览器的标题-->

2.3标题

<h1></h1>
<h2></h2>
<h3></h3>

2.4div和span

<!--块级标签，无论有多少文字占据一行空间-->
<div>hello</div>
<div>world</div>
<!--行内标签，内链标签，文字有多少占多少空间-->
<span style="color:lightblue">hello</span>
<span style="color:lightblue">world</span>

2.5超链接

<!--超链接，跳转其他的网站时需要写全网址-->
<a href="https://www.baidu.com">百度</a>
<!--超链接，跳转到自己网站的其他地址-->
<a href="/goods/list">查看更多</a>

2.6图片

<!--显示网上的图片，如果不能显示就说明别人加了防盗链-->
<img src="xxxx"/>
<!--显示自己的图片，创建static目录，图片放在static里-->
<div>
    <!--设置大小，像素形式-->
    <img style="height:200px;width:200px" src="/static/xxx.jpeg" />
</div>
<div>
    <!--设置大小，只能用宽度设置百分比形式-->
    <img style="width:15%" src="/static/xxx.jpeg"/>
</div>

2.7列表

<!--无序列表-->
<ul>
    <li>KAI</li>
    <li>SEULGI</li>
    <li>JENO</li>
    <li>KARINA</li>
</ul>
<!--有序列表-->
<ol>
    <li>KAI</li>
    <li>SEULGI</li>
    <li>JENO</li>
    <li>KARINA</li>
</ol>

2.8表格

<table border="1">
    <!--表头-->
    <thead>
        <tr>    <th>ID</th> <th>name</th>   <th>age</th>    </tr>
    </thead>
    <!--表格内容-->
    <tbody>
        <tr>    <td>1111</td>   <td>Tina</td>   <td>20</td> </tr>
        <tr>    <td>1112</td>   <td>Jack</td>   <td>21</td> </tr>
        <tr>    <td>1111</td>   <td>Jeno</td>   <td>22</td> </tr>
    </tbody>
</table>

2.9input系列

<!--input系列-->
<!--1.纯文本框-->
<input type="text">
<!--2.密码框-->
<input type="password">
<!--3.选择文件-->
<input type="file">
<!--4.单选框-->
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<!--5.复选框-->
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">排球
<!--按钮 6.button普通按钮 7.submit提交表单的按钮-->
<input type="button" value="提交">
<input type="submit" value="提交">

2.10下拉框

<!--下拉框 多选加上multiple-->
<select multiple>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
    <option>广州</option>
</select>

2.11多行文本框

<!--多行文本-->
<textarea rows="3"></textarea>

3.网络请求

  • 在浏览器的URL中输入地址，回车，访问

  • 浏览器向后段发送请求时

  • GET请求【URL方法/表单提交】

  • 现象：跳转、向后台传入数据，数据会拼接在URL上

  • 比如，在百度中搜索时，就会发送GET请求

  • POST请求【表单提交】

  • 现象：提交数据不会出现在URL中，而是出现在请求体中

  • 比如，进行登录的时候，会发送POST请求

  • 页面上的数据想要提交到后台，需要满足以下条件：

  • form标签必须包裹那些要提交的数据，并且这些标签需要有name属性

  • 提交的方式：method="get"

  • 提交的地址：action="/xxx/xxx/xx"

  • 在form标签里面必须要有submit标签

<form method="get" action="/do/reg">
    <div>
        用户名：<input type="text" name="username">
    </div>
    <div>
        密码：<input type="password" name="userpassword">
    </div>
    <input type="submit" value="xxx">
</form>

案例：用户注册

from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/register', methods=['GET'])
def register():
    return render_template("register.html")


@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():
    # 1.接收用户通过GET形式发送的数据
    print(request.form)
    # 2.给用户返回结果
    return "注册成功"


if __name__ == "__main__":
    app.run()

  • register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <h1>【GET】注册</h1>
    <form method="get" action="/do/reg">
        <div>
            用户名：<input type="text" name="username">
        </div>
        <div>
            密码：<input type="password" name="userpwd">
        </div>
        <input type="submit" value="注册">
    </form>
    <h1>【POST注册】</h1>
    <form method="post" action="/post/reg">
        <div>
            用户名：<input type="text" name="username">
        </div>
        <div>
            密码：<input type="password" name="userpwd">
        </div>
        <input type="submit" value="注册">
    </form>
</body>
</html>

  • 如果使用POST形式的注册，输入好用户名和密码后，点击注册，会显示“注册成功”。上面的URL变为http://127.0.0.1:5000/post/reg

  • 但一般来说，注册时的操作是POST请求

案例：登陆和注册结合

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)
        username = request.form.get("username")
        userpwd = request.form.get("userpwd")
        sex = request.form.get("sex")
        hobby = request.form.get("hobby")
        city = request.form.get("city")
        notes = request.form.get("notes")
        print(username, userpwd, sex, hobby, city, notes)
        # 2.给用户返回结果
        return "注册成功"


@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == "GET":
        return render_template("login.html")
    else:
        # 1.接收用户通过GET形式发送的数据
        print(request.form)
        username = request.form.get("username")
        userpwd = request.form.get("userpwd")
        print(username, userpwd)
        # 2.给用户返回结果
        return "登陆成功"


if __name__ == "__main__":
    app.run()

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
    <h1>【POST注册】</h1>
    <form method="post" action="/register">
        <div>
            用户名：<input type="text" name="username">
        </div>

        <div>
            密码：<input type="password" name="userpwd">
        </div>

        <div>
            性别：
            <input type="radio" name="sex" value="man">男
            <input type="radio" name="sex" value="woman">女
        </div>

        <div>
            爱好：
            <input type="checkbox" name="hobby" value="basketball">篮球
            <input type="checkbox" name="hobby" value="football">足球
            <input type="checkbox" name="hobby" value="volleyball">排球
        </div>

        <div>
            城市：
            <select name="city">
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="guangzhou">广州</option>
            </select>
        </div>
        <div>
            备注：<textarea name="notes"></textarea>
        <div>
            <input type="submit" value="注册">
        </div>
        <a href="/login">去登陆</a>
    </form>
</body>
</html>

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="username">
        </div>
        <div>
            密码：<input type="password" name="userpwd">
        </div>
        <div>
            <input type="submit" value="登陆">
        </div>
        <a href="/register">还没有账号？去注册</a>
    </form>

</body>
</html>

4.总结

1.网站请求流程

2.HTML标签

h/div/span/a/img/ul/ol/li/table/input/textarea/select/form

基于flask+vue框架的某高校学生学习笔记共享平台的设计与实现[开题+论文+程序]-计算机毕设
zhihao503的博客
08-14 980
本研究的主要目的是设计并开发一个功能完善、用户友好的学习笔记共享平台，具体目标包括：1）构建用户管理系统，实现用户注册、登录、个人信息管理等基本功能；通过上述功能的实现，旨在为学生创造一个更加开放、互动、高效的学习环境。本研究的意义在于通过设计并实现某高校学生学习笔记共享平台，一方面能够为学生提供一个便捷、高效的学习工具，帮助他们更好地整理、保存和回顾学习笔记，减少重复劳动，提高学习效率；另一方面，该平台能够促进学生之间的交流与合作，通过笔记的共享与交流，激发创新思维，形成学习共同体，共同提升学术水平。
【Python Web】Flask框架（一）快速开发网站
qq_51670115的博客
09-15 1985
Flask快速开发网站,网站优化
本地部署Python Flask并搭建web问答应用程序框架实现远程访问
旋律 | 话语 | 色彩 | 情景
12-01 3170
本地部署Python Flask并搭建web问答应用程序框架实现远程访问
用flask搭建了一个简易网站
10-30
基于python3.6开发。用flask搭建了一个简易网站，实现登录功能，注册功能，评论功能，发表文章功能，数据库连接功能，压缩包是完整项目代码。解压后可用，但需在自己电脑创建mysql数据库：zlktqa_demo
【Web】React框架项目搭建指南
最新发布
2301_82101106的博客
03-19 470
和朋友聊天以及帮助一个实验室的学姐搭建项目后有感，基于相关资料和本人拙见，就为大家详细介绍如何搭建一个基于React框架的网站。
基于Flask的自定义网站设计与实现（代码全文+讲解V1.0）
小林同学的计算机学习
06-11 4211
本项目使用flask设计了一个深度学习项目平台，用来实现一个展示各种关于python（主要是深度学习方向）的毕设（课设/项目等）。本项目借鉴于开源博客项目，由于项目具体需求，对部分代码进行了修改。按照二次开发原则，同样开源在csdn和GitHub中。由于本项目纯属自娱自乐，故不定期更新...(当然在首次更新时会有一个较为完整的东西，后续更新见版本号或其它博客)最新版项目首页展示。
Web开发day1：使用flask快速搭建网站
m0_56681374的博客
11-12 2861
使用flask简单搭建一个本地网站，介绍部分html语法
使用 Python 的 flask 架构搭建一个简单web网站
K_AAbb的博客
08-29 4082
使用flask搭建一个简单web网站 1.flask最简单框架，返回hello world： from flask import * app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello World!' if __name__=="__main__": app.run(host='0.0.0.0',port=8080) # 0.0.0.0地址可给本机所有的IP地址访问 我们可以在app路由处的
使用Python Flask搭建一个简单的Web站点并发布到公网上访问
fq157856469的博客
12-28 9634
Flask是一个Python编写的Web微框架，让我们可以使用Python语言快速实现一个网站或Web服务，本期教程我们使用Python Flask搭建一个web问答应用程序框架，并结合cpolar内网穿透工具将我们的应用程序发布到公共网络上，实现可多人远程进入到该web应用程序访问。在操作上我们将使用HTML来创建网页的结构，然后使用css设计这个结构并且使其看起来更漂亮，此外还会利用Javascript与页面上的不同元素进行交互，最后使用python与web服务器（也成为后端）进行连接。
Flask框架知识点快速上手-flask
01-20
Flask是一个轻量级的Web应用框架，它遵循Python的“约定优于配置”的理念，让开发者能够快速上手并创建Web应用。它内置了开发服务器和调试器，特别适合小型项目、单页应用、API服务和原型开发。Flask的灵活性让它...
FLask学习笔记源（1）源码 demo1.rar
11-06
**FLask学习笔记源（1）源码 demo1.rar** 这个压缩包文件是关于Python Flask框架的学习资源，其中包含了创建一个简单的个人博客系统的源代码。`demo1`是压缩包内的主要子文件，通常它会包含一系列的Python文件，如...
学习《Flask Web开发：基于Python的Web应用开发实战》分享.zip
02-22
Flask是一个轻量级的Web服务器网关接口（WSGI）Web应用框架，以其灵活性、模块化和易于上手的特点深受开发者喜爱。本压缩包文件可能包含书中各个章节的示例代码，通过“kwan1117”这个文件名，我们可以推测这可能是...
快速搭建Flask基础Web应用与笔记系统教程
资源摘要信息:"Flask是一个使用Python编写的轻量级Web应用框架，它遵循MIT许可证。Flask也被认为是一个微框架，因为它使用简单，模块较少，但是功能上却非常灵活和可扩展。它被设计为可插拔的，提供了丰富的扩展，...
Python-网站基于PythonFlask开发
08-10
网站基于Python Flask开发
Flask开发微电影网站(二)
renpingsheng66的博客
05-19 537
&#13; 1.安装数据库连接依赖包 pip install flask-sqlalchemy 2.创建movie数据库 在CentOS虚拟机，进入MaridDB数据库提示符，创建movie数据库 create database movie 3.定义MaridDB数据库连接 在app目录下的__init__.py文件中添加以下内容 # _*_coding:utf-8_*_ ...
基于Flask开发的知名网站或平台
Flask Web
09-27 1062
这本书通过一个完整的项目开发案例，系统介绍了在统信UOS操作系统上进行Flask Web应用开发的过程。基于Flask直接开发的知名网站或平台相对较少，因为Flask通常更适用于小型项目、原型开发或API服务。需要注意的是，由于Flask的灵活性和可扩展性，它经常被用于构建API服务或作为大型项目中的一部分。因此，如果您正在寻找基于Flask开发的知名网站或平台的直接例子，可能会比较困难。但如果您对Flask在Web开发中的应用感兴趣，可以关注一些使用Flask构建的开源项目、个人博客或小型创业公司项目。
Flask 10天开发一个网站
iqifenxia的博客
10-30 403
https://www.fgba.net/sitemap.xml
flask简单搭建一个网站
m0_59691154的博客
06-30 1355
一，安装 pip install flask 二，导入 from flask import Flask 三，添加路由 app = Flask(__name__) @app.route("/",methods=['GET','POST']) def index(): return "欢迎来到我的页面" 四，设置端口和ip app.run(host="0.0.0.0", port=8080) 点击运行这样一个简单的页面就成功了 ...
利用Flask开发一个简单的资讯网站
ywangjiyl的博客
08-26 925
该网站可以展示文章列表，以及每个文章里的详细内容 $ wget http://labfile.oss.aliyuncs.com/courses/923/week2/helloshiyanlou.json $ wget http://labfile.oss.aliyuncs.com/courses/923/week2/helloworld.json 这两个 json 文件是我们的资讯网站将使用的两篇文章数据。内部的格式为 json，包含下面的数据项： title: 文章名称（字符串） created_tim
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qyqyqyi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值