半天速成Python超简网站(1)

最新推荐文章于 2024-05-15 09:10:58 发布

2401_84093054

最新推荐文章于 2024-05-15 09:10:58 发布

阅读量894

点赞数 18

分类专栏：程序员文章标签： python 开发语言

本文链接：https://blog.csdn.net/2401_84093054/article/details/138564025

版权

程序员专栏收录该内容

278 篇文章 0 订阅

订阅专栏


(venv)~/hello_world$ pip install flask

在hello_world目录下，使用flask run命令启动Flask应用。


(venv)~/hello_world$ flask run

如果操作没有错误的话，服务会成功启动，你会看到如下输出：


 * Environment: production

   WARNING: This is a development server. Do not use it in a production deployment.

   Use a production WSGI server instead.

 * Debug mode: off

 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

服务启动成功后，你只需要打开浏览器，然后在地址栏中输入：http://127.0.0.1:5000，然后回车，就能在浏览器中看到 Hello World字样，如下图：

01.hello-world.png

你还可以尝试在地址栏中输入：http://127.0.0.1:5000?name=小明，观察一下会发生什么吧！

Hello World 应用解析

Hello World 执行的逻辑

当我们使用 flask run 命令启动 hello_world 项目之后，该项目就变成了一个服务，执行在本机（127.0.0.1指本地，等同于localhost），它监听本机的5000端口，实时查看是否有新的请求传来（就像名叫hello_world的富二代，住在地址是127.0.0.1的大别墅中，对着编号为5000的窗口喊，有人来找我玩吗？）。

我们在浏览器地址栏中输入http://127.0.0.1:5000/后，点击回车，就利用浏览器向hello_world服务发送了一个请求。

服务器在接收到我们的请求后，就会调用对应的函数为我们提供服务，这个函数在Flask中被称为视图，例如hello_world项目中的hello方法：


def hello():

    name = request.args.get("name", "World")

    return f'Hello, {escape(name)}!'

虽然本例中只有一个hello视图，但是一个服务通常具备许多提供不同功能的视图，每当用户通过浏览器发送请求的时候，服务器都要从众多视图中准确的找到我们想要的那个。这种将请求和视图（也就是函数）一一对应起来的程序，被称为路由（映射），也就是hello_world中的@app.route('/')。

一旦Flask中的函数头上被放置了路由，那么他就从普通函数变成了视图，用于处理我们的请求。

现在还有一个问题，我们是如何表达我们想要的服务的呢？这就是URL，也就是我们在浏览器地址栏中输入 http://127.0.0.1:5000后面的 /（地址后不输入任何内容，默认就是 /，所以我们直接输入http://127.0.0.1:5000效果是一样的）。

到这里，我们就可以简单的总结以上工作：

首先，我们通过浏览器向hello_world服务器发送了一个请求，请求地址是127.0.0.1:5000，请求的内容是/。

hello_world服务器在接收到我们的请求 / 后，通过路由找到 /对应的服务内容是hello()函数，然后就调用hello()函数。

hello()函数在处理完我们的请求后，向我们返回了请求的结果，也就是显示Hello World的页面。

Hello World 代码解读

当我们了解了整个Flask应用的运行逻辑（B/S架构的执行逻辑），再回头看Flask官方的解读可能会有更多收获，针对Hello World应用，官方文档代码解释如下

首先我们导入了 Flask 类。该类的实例将会成为我们的 WSGI 应用（整个hello_world服务本质上就是一个Flask类的实例）。
接着我们创建一个该类的实例。第一个参数是应用模块或者包的名称。如果你使用一个单一模块（就像本例），那么应当使用 __name__ ，因为名称会根据这个模块是按应用方式使用还是作为一个模块导入而发生变化（可能是__main__ ，也可能是实际导入的名称）。这个参数是必需的，这样 Flask 才能知道在哪里可以找到模板和静态文件等东西。更多内容详见 Flask 文档。
然后我们使用 route() 装饰器来告诉 Flask 触发函数的 URL（告诉Flask什么样的URL需要调用这个函数）。
函数名称被用于生成相关联的 URL 。函数最后返回需要在用户浏览器中显示的信息。

提示：

当我们使用http://127.0.0.1:5000?name=xiaoming访问hello_world服务的时候，就为服务器提供了一个参数，参数名是name，参数值是xiaoming。在服务端，通过request.args.get("name", "World")可以取得参数name的值，如果没有找到name（也就是我们没有提供），那么就返回默认值World。

Hello World 应用增强

显然，一个只会问好的服务并不是我们想要的，想要更酷炫的内容就需要为hello_world添加更多的能力。

为了彰显自己的丰功伟绩，我决定为自己搭建一个个人主页，用以记录本人曾经和以后的光辉时刻。

下面，我将从hello_world出发，逐步搭建出一个只有一个页面的个人主页。

Flask本身非常的轻量（简单），可以通过安装插件的方式，使用各种神奇的功能，为了降低代码量，下面将使用 bootstrap-flask插件编写前端代码。

市面上还有一个 flask-bootstrap插件，这是一个老的版本，我们这里使用最新的bootstrap-flask。

templates 和 static 文件夹

直接返回字符串的方式过于简陋，我们需要使用HTML页面展示更复杂的内容。在Flask中默认存放HTML页面的位置是根目录下的 templates文件夹，对应的存放静态文件（例如图片、css、js文件）的目录是static。我们需要创建这两个文件夹。

展示个人信息的HTML页面需要放置在 templates 下，我将其命名为 me.html

如此，整个加强版的hello_world项目框架就搭建完成了，这个项目目录树如下：


hello_world      # 项目根目录

├── app.py       # 代码文件

├── static/      # 静态文件夹

├── templates/   # 模板文件夹、存放HTML

│   └── me.html  # 个人主页

└── venv/        # 虚拟环境

安装bootstrap-flask插件

首先，我们需要在虚拟环境中安装bootstrap-flask插件，在虚拟环境激活状态先执行：


(venv)~/hello_world$ pip install bootstrap-flask

配置bootstrap-flask插件

在app.py中配置bootstrap-flask插件只需要两步：

从bootstrap-flask导入Bootstrap类，如下:


from flask_bootstrap import Bootstrap5

bootstrap-flask插件中有多个Bootstrap类，如Bootstrap、Bootstrap4和Bootstrap5，其中Bootstrap对应版本3，Bootstrap4对应版本4，Bootstrap5对应版本5。

之所以选择Bootstrap5，自然是因为我觉得一个拥有个人主页的我能驾驭~

创建Bootstrap实例

在app = Flask(__name__)语句后插入：


bootstrap = Bootstrap5(app)

到这里就完成了bootstrap-flask插件的配置，你的app.py文件应该如下：


# save this as app.py

from ensurepip import bootstrap

from flask import Flask, escape, request

from flask_bootstrap import Bootstrap5



app = Flask(__name__)

bootstrap = Bootstrap5(app)



@app.route('/')

def hello():

    name = request.args.get("name", "World")

    return f'Hello, {escape(name)}!'

HTML引入 bootstrap-flask

Flask的HTML页面使用了Jinja2模板引擎，由于本文只是演示Flask的简单用法，这里就不详细介绍引擎的使用方法了，如果有学习的兴趣，可以追更本系列，后继文章会围绕Flask介绍全栈的知识点。

在me.html引入bootstrap之前，我们需要先写一个HTML文件的框架，如下：


<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>{{ title }}</title>

</head>

<body>

    <!-- 主体内容 -->

    <div id="main" class="container">



    </div>

</body>

</html>

引入bootstrap-flask需要引入css和js文件，步骤如下：

引入css文件，在<head>标签中插入以下代码：


{{ bootstrap.load_css() }}

引入js文件，在</body>标签前插入如下代码：


    {{ bootstrap.load_js() }}

配置完成后，me.html的内容应该和下面相同：


<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入css文件 -->

    {{ bootstrap.load_css() }}

    <title>{{ title }}</title>

</head>

<body>

    <!-- 主体内容 -->

    <div id="main" class="container">



    </div>

    <!-- 引入js文件 -->

    {{ bootstrap.load_js() }}

</body>

</html>

修改路由和视图

正常情况下一个网站的 ‘/’ URL用于展示网站的主页，当前，我们还没有其他页面，可以先让/指向个人主页。于此同时，新增路由/me。

改动步骤如下：

在hello()函数上面添加路由/me
修改hello()函数名称为me()

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-UOsfOD2J-1715137338734)]

[外链图片转存中…(img-zbMJoHLp-1715137338734)]

[外链图片转存中…(img-0bLhDRam-1715137338735)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84093054

关注

18
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
半天速成Python超简网站(1)

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫