flask创建和运行

Werkzeug WSGI(socket服务端）

Werkzeug是一个WSGI工具包，他可以作为一个Web框架的底层库。这里稍微说一下， werkzeug 不是一个web服务器，也不是一个web框架，而是一个工具包，官方的介绍说是一个 WSGI 工具包，它可以作为一个 Web 框架的底层库，因为它封装好了很多 Web 框架的东西，例如 Request，Response 等等

Werkzeug is a comprehensive WSGI web application library. It began as a simple collection of various utilities for WSGI applications and has become one of the most advanced WSGI utility libraries.
Werkzeug 是一个综合性 WSGI Web 应用程序库。它最初是 WSGI 应用程序的各种实用程序的简单集合，现已成为最先进的 WSGI 实用程序库之一。

Werkzeug doesn’t enforce any dependencies. It is up to the developer to choose a template engine, database adapter, and even how to handle requests
Werkzeug 不强制执行任何依赖关系。由开发人员选择模板引擎、数据库适配器，甚至如何处理请求

# https://werkzeug.palletsprojects.com/en/3.0.x/
from werkzeug.wrappers import Request, Response
@Request.application
def hello(request):
    return Response('Hello World!')

if __name__ == '__main__':
    from werkzeug.serving import run_simple
    run_simple('localhost', 4000, hello)

Jinja template engine

Jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document
Jinja 是一个快速、富有表现力、可扩展的模板引擎。模板中的特殊占位符允许编写类似于 Python 语法的代码。然后向模板传递数据以渲染最终文档

Clik CLI

# flask 2 版本加入的---》定制命令的工具
    python manage.py init_db
    
# 介绍
# 1 Click is a Python package for creating beautiful command line interfaces in a composable way with as little code as necessary. It’s the “Command Line Interface Creation Kit”. It’s highly configurable but comes with sensible defaults out of the box
Click 是一个 Python 包，用于以可组合的方式使用尽可能少的代码创建漂亮的命令行界面。它是“命令行界面创建工具包”。它具有高度可配置性，但具有开箱即用的合理默认值

# 2  It aims to make the process of writing command line tools quick and fun while also preventing any frustration caused by the inability to implement an intended CLI API
它的目的是使编写命令行工具的过程变得快速而有趣，同时也防止因无法实现预期的 CLI API 而造成的任何挫败感

# 3  Click in three points:
  arbitrary nesting of commands    
  automatic help page generation
  supports lazy loading of subcommands at runtime 
Click三点：
  命令的任意嵌套
  自动生成帮助页面
  支持运行时延迟加载子命令

案例

# pip3 install click
import click
@click.command()
@click.option('--count', default=1, help='打印次数')
@click.option('--name', prompt='你的名字',help='The person to greet.')
def hello(count, name):
    for x in range(count):
        print(f"Hello {name}!")

if __name__ == '__main__':
    hello()

执行命令：
# 1  python3 app.py --count=3
# 2  python3 app.py --help
# 3  python3 app.py --count=3 --name=lqz

flask安装

最新的flask要python3.8以上

安装：pip install  flask
必选依赖：

Werkzeug ：wsgi的工具包
Jinja  ：模板渲染
MarkupSafe ：解决了xss攻击
ItsDangerous：加密解密的---》session会用到
Click：定制命令的
Blinker ：信号会用到 signal

#### 可选依赖：这些依赖不会自动安装。如果您安装它们，Flask 将检测并使用它们

watchdog使用

import sys
import time
import logging
from watchdog.observers import Observer
from watchdog.events import LoggingEventHandler

if __name__ == "__main__":
    logging.basicConfig(level=logging.INFO,
                        format='%(asctime)s - %(message)s',
                        datefmt='%Y-%m-%d %H:%M:%S')
    path = sys.argv[1] if len(sys.argv) > 1 else '.'
    event_handler = LoggingEventHandler()
    observer = Observer()
    observer.schedule(event_handler, path, recursive=True)
    observer.start()
    try:
        while True:
            time.sleep(1)
    except KeyboardInterrupt:
        observer.stop()
    observer.join()

python_dotenv

# pip3 install python-dotenv
import os
from dotenv import load_dotenv
from dotenv import dotenv_values
## 1 加载配置文件
# 必须在根路径下新建一个 .env 的文件，并写入配置才能返回True,会把.env下的配置文件设置进环境变量
# res=load_dotenv()  # take environment variables from .env
# # print(res)
# print(os.environ.get('MYSQL_HOST'))
# You will probably want to add .env to your .gitignore, especially if it contains secrets like a password.


## 2 获取环境变量字典
config = dotenv_values(".env")
print(config)
print(config.get('DOMAIN'))

虚拟环境

介绍

Use a virtual environment to manage the dependencies for your project, both in development and in production.
# 在开发和生产中,使用虚拟环境来管理项目的依赖关系

What problem does a virtual environment solve? The more Python projects you have, the more likely it is that you need to work with different versions of Python libraries, or even Python itself. Newer versions of libraries for one project can break compatibility in another project.
# 虚拟环境解决什么问题？您拥有的 Python 项目越多，您就越有可能需要使用不同版本的 Python 库，甚至是 Python 本身。一个项目的较新版本的库可能会破坏另一项目的兼容性。

Virtual environments are independent groups of Python libraries, one for each project. Packages installed for one project will not affect other projects or the operating system’s packages.
# 虚拟环境是一组独立的 Python 库，每个项目对应一个。为一个项目安装的软件包不会影响其他项目或操作系统的软件包

Python comes bundled with the venv module to create virtual environments.

使用：venv 做为虚拟环境

# 创建虚拟环境
mkdir myproject
cd myproject
py -3 -m venv .venv
# 激活虚拟环境
.venv\Scripts\activate

下载创建flask（pip install flask）

创建py文件，写：

from flask import Flask

app= Falsk(__name__)


@app.route('/')
def index():
    return 'hello world'

运行项目方式

方式一：pycharm配置，配置中选择script，里面有app的py文件
方式二：推荐使用
flask --app  py文件名 run
方式三：
python38 -m flask --app py文件名字 run
方式四：
if __name__ == '__main__':
        app.run()
方式五：
python38 py文件名

debug模式

flask --app 5-app.py run --debug
浏览器会显示出错误信息

fastapi

from fastapi import FastAPI
import asyncio
app = FastAPI()


@app.get("/")
async def read_root():
    # 如果有io
    await asyncio.sleep(2)

    return {"Hello": "World"}

运行：需要安装uvicorn
# uvicorn 6-fastapi快速体验:app

显示用户小案例

from flask import Flask, request, render_template, redirect, session,jsonify

app = Flask(__name__)
# 如果要用session，必须加这一句
app.secret_key = 'asdfasdfasdf-lqz-justin'
USERS = {
    1: {'name': '李清照', 'age': 18, 'gender': '男',
        'text': "刘亦菲，1987年8月25日出生于湖北省武汉市，华语影视女演员、歌手，毕业于北京电影学院2002级表演系本科",
        'img': 'https://img2.woyaogexing.com/2021/10/16/e3ccba623848430ba83209c0621a2256!400x400.jpeg'},
    2: {'name': '彭于晏', 'age': 28, 'gender': '男',
        'text': "彭于晏，1982年3月24日出生于中国台湾省澎湖县，毕业于不列颠哥伦比亚大学，华语影视男演员。。。。。。。。",
        'img': 'https://img2.woyaogexing.com/2021/10/16/e71aa35728c34313bccb4c371192990f!400x400.jpeg'},
    3: {'name': '迪丽热巴', 'age': 38, 'gender': '女',
        'text': "迪丽热巴（Dilraba），1992年6月3日出生于中国新疆乌鲁木齐市，毕业于上海戏剧学院，中国内地影视女演员",
        'img': 'https://img2.woyaogexing.com/2021/10/30/6a34146dde2d4f1c832463a5be1ed027!400x400.jpeg'},
    4: {'name': '亚瑟', 'age': 38, 'gender': '男',
        'text': "亚瑟，是腾讯手游《王者荣耀》中一名战士型英雄角色，也是《王者荣耀》的新手英雄之一，既可攻又可守",
        'img': 'https://img2.woyaogexing.com/2021/10/30/371b2aa7a03c4f53b7b1bc86f877d7d1!400x400.jpeg'},
}


@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        return render_template('login.html')
    else:
        username = request.form.get('username')
        password = request.form.get('password')
        if username == 'lqz' and password == '123':
            # 登录成功，把登录信息，写入到session中
            session['username'] = username
            # 登录成功，重定向到首页
            # return redirect('http://www.baidu.com')
            return redirect('/')
        else:
            return render_template('login.html', error='用户名或密码错误')


@app.route('/', methods=['GET'])
def index():

    username = session.get('username')
    if username:
        return render_template('index.html', user_dict=USERS)
    else:
        return redirect('/login')


@app.route('/detail/<int:pk>')
def detail(pk):
    username = session.get('username')
    if username:
        user = USERS.get(pk)
        return render_template('detail.html', user=user)
    else:
        return redirect('/login')

flask中学到

1、request是全局的：request.method   request.path
2、request.form  前端post提交的数据
3、request.args  前端get请求提交的数据
4、路由注册是使用装饰器
    @app.route('/detail/<int:pk>')
    def detail(pk):
5、路由有转换器：
/detail/<int:pk>
/detail/?pk=1
6、新手四件套
    return '字符串'
    return render_template('index.html', user_dict=USERS)
    return redirect('/login')
    return jsonify(字典，列表)
7、session的使用（全局导入，必须加密钥）
    放值：session['key']=value
    取值：session.get('key')

渲染模板

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <title>Title</title>
</head>
<body>
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
    <div class="row align-items-center g-lg-5 py-5">
        <div class="col-lg-7 text-center text-lg-start">
            <h1 class="display-4 fw-bold lh-1 mb-3">亚洲最大交友平台</h1>
            <p class="col-lg-10 fs-4">Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark
                Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为5.0</p>
        </div>
        <div class="col-md-10 mx-auto col-lg-5">
            <form class="p-4 p-md-5 border rounded-3 bg-light" method="post">
                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="floatingInput" placeholder="name@example.com" name="username">
                    <label for="floatingInput">用户名</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password" name="password">
                    <label for="floatingPassword">密码</label>
                </div>
                <div class="checkbox mb-3">
                    <label>
                        <input type="checkbox" value="remember-me"> 记住密码
                    </label>
                </div>
                <button class="w-100 btn btn-lg btn-primary" type="submit">登录</button>
                <hr class="my-4">
                <small class="text-muted">{{error}}</small>
            </form>
        </div>
    </div>
</div>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <title>Title</title>
</head>
<body>

<div class="container">

    <!--    头部-->
    <div class="sticky-top">
        <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
            <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
                <svg class="bi me-2" width="40" height="32">
                    <use xlink:href="#bootstrap"></use>
                </svg>
                <span class="fs-4">交友平台</span>
            </a>

            <ul class="nav nav-pills">
                <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">首页</a></li>
                <li class="nav-item"><a href="#" class="nav-link">女生</a></li>
                <li class="nav-item"><a href="#" class="nav-link">男生</a></li>
                <li class="nav-item"><a href="#" class="nav-link">国产</a></li>
                <li class="nav-item"><a href="#" class="nav-link">欧美</a></li>
            </ul>
        </header>
    </div>
    <!--轮播图-->
    <div>
        <div class="bd-example-snippet bd-code-snippet">
            <div class="bd-example">
                <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class=""
                                aria-label="Slide 1"></button>
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                                aria-label="Slide 2" class="active" aria-current="true"></button>
                        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                                aria-label="Slide 3" class=""></button>
                    </div>
                    <div class="carousel-inner">
                        <div class="carousel-item">
                            <img src="https://img.zcool.cn/community/01fb5458fedf57a801214550f9677a.jpg@2o.jpg" alt=""
                                 width="100%" height="300">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>激情绿荫</h5>
                                <p>Some representative placeholder content for the first slide.</p>
                            </div>
                        </div>
                        <div class="carousel-item active">
                            <img src="https://img2.baidu.com/it/u=2951612437,4135887500&fm=253&fmt=auto&app=138&f=JPEG"
                                 alt="" width="100%" height="300">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>品牌雨伞</h5>
                                <p>Some representative placeholder content for the second slide.</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://img1.baidu.com/it/u=1417689082,3333220267&fm=253&fmt=auto&app=138&f=JPEG"
                                 alt="" width="100%" height="300">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>家装节</h5>
                                <p>Some representative placeholder content for the third slide.</p>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                            data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                            data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>
        </div>

    </div>

    <!--    内容-->
    <div class="row row-cols-md-2" style="padding: 10px">
        {% for k,v in user_dict.items() %}
        <div class="card">
            <div class="row " style="padding: 10px">
                <img src="{{v.get('img')}}" alt="" class="col-md-4">
                <div class="col-md-8">
                    <div class="card-body">
                        <h5 class="card-title">{{v['name']}}</h5>
                        <p class="card-text">{{v.text}}</p>
                        <p class="card-text">
                            <a href="/detail/{{k}}" class="btn btn-danger">查看详细</a>
                        </p>
                    </div>
                </div>

            </div>

        </div>
        {%endfor%}
    </div>
    <!--    table-->
    <div class="bd-example" style="margin-top: 30px">
        <table class="table table-hover table-striped table-bordered">
            <thead>
            <tr class="table-danger">
                <th colspan="3" class="text-center">更多交友</th>
            </tr>
            </thead>
            <tbody>
            <tr class="table-success">
                <th>杨幂</th>
                <td>女</td>
                <td>33</td>
            </tr>
            <tr class="table-warning">
                <th scope="row">刘亦菲</th>
                <td>未知</td>
                <td>40</td>
            </tr>
            <tr class="table-success">
                <th scope="row">彭于晏</th>
                <td>男</td>
                <td>23</td>
            </tr>
            <tr class="table-warning">
                <th scope="row">陈奕迅</th>
                <td>男</td>
                <td>44</td>
            </tr>
            <tr class="table-success">
                <th scope="row">薛之谦</th>
                <td>男</td>
                <td>36</td>
            </tr>
            <tr class="table-warning">
                <th>李清照</th>
                <td>女</td>
                <td>未知</td>
            </tr>

            </tbody>
        </table>
    </div>
    <!--分页-->
    <div class="d-flex justify-content-center">
        <ul class="pagination pagination-lg">
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">4</a></li>
            <li class="page-item"><a class="page-link" href="#">5</a></li>
            <li class="page-item"><a class="page-link" href="#">6</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
        </ul>
    </div>

    <!--    尾部-->
    <div>
        <footer class="py-3 my-4">
            <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">首页</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">特性</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">联系我们</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">资料获取</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">关于</a></li>
            </ul>
            <p class="text-center text-muted">Copyright © 1998 - 2029 liuqingzheng. All Rights Reserved. </p>
        </footer>
    </div>
</div>
</body>
</html>

detail.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <title>Title</title>

</head>
<body>
<div class="container">


    <div class="sticky-top">
        <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
            <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
                <svg class="bi me-2" width="40" height="32">
                    <use xlink:href="#bootstrap"></use>
                </svg>
                <span class="fs-4">交友平台</span>
            </a>

            <ul class="nav nav-pills">
                <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">首页</a></li>
                <li class="nav-item"><a href="#" class="nav-link">女生</a></li>
                <li class="nav-item"><a href="#" class="nav-link">男生</a></li>
                <li class="nav-item"><a href="#" class="nav-link">国产</a></li>
                <li class="nav-item"><a href="#" class="nav-link">欧美</a></li>
            </ul>
        </header>
    </div>

    <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
        <div class="col-md-5 p-lg-5 mx-auto my-5">
            <h1 class="display-4 fw-normal">{{user.name}}</h1>
            <img src="{{user.img}}" alt=""
                 width="300px" height="300px" style="margin: 20px">

            <p class="lead fw-normal">{{user.text}}</p>
            <a class="btn btn-outline-secondary" href="#">收藏</a>
        </div>
        <div class="product-device shadow-sm d-none d-md-block"></div>
        <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
    </div>
    <div>
        <footer class="py-3 my-4">
            <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">首页</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">特性</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">联系我们</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">资料获取</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">关于</a></li>
            </ul>
            <p class="text-center text-muted">Copyright © 1998 - 2029 liuqingzheng. All Rights Reserved. </p>
        </footer>
    </div>

</div>
</body>
</html>