【Python百日进阶-WEB开发-冲進Flask】Day181 - Flask简单流程

最新推荐文章于 2024-03-11 14:30:23 发布
最新推荐文章于 2024-03-11 14:30:23 发布
阅读量437 收藏 1
点赞数
分类专栏： 前端 文章标签： python flask 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuetaope/article/details/122872934
版权

文章目录

一、day01项目环境和结构搭建

1.1 新建虚拟环境

E:\VirtualEnv\cmd
virtualenv RushInFlask
cd rushinflask
scripts\activate
pip list

在这里插入图片描述

1.2 安装Flask

pip install -i https://mirrors.aliyun.com/pypi/simple flask
pip list

在这里插入图片描述

1.3 配置Python解释器

在这里插入图片描述

二、后端知识要点

2.1 Flask 文档

https://dormousehole.readthedocs.io/en/latest/
在这里插入图片描述

2.2 实例化flask对象

2.2.1 新建独立的配置文件settings.py

在这里插入图片描述

2.2.2 实例化flask对象时加载配置文件

import settings
app = Flask(__name__)
app.config.from_object(settings)

2.3 基本路由

2.3.1 常用路由及唯一性

######### 常用路由,建议路由格式为 '/path',即前有后无，这样可以确保路由的唯一性
@app.route('/')  # 路由  http://127.0.0.1:5000/
def hello_world():  # 视图
    return 'Hello World~~~!!!'

2.3.2 路由底层调用

########## 路由底层调用
def index():
    return '通过add_url_rul返回!'
app.add_url_rule('/index/', view_func=index)

2.4 路由规则

2.4.1 字符串路由

data = {'bj': '北京', 'sh': '上海', 'gz': '广州', 'sz': '深圳'}
@app.route('/getcity/<city>/')  # city是变量名，默认字符串
def get_city(city):
    print(type(city))
    return f'进入{data.get(city)}市'

2.4.2 path路径路由

@app.route('/index/<path:p>')  # http://127.0.0.1:5001/index/username/page_1
def get_path(p):
    print(type(p))  # str
    return p  # 页面返回 username/page_1

2.4.3 数字(整数int、浮点数float)路由

@app.route('/add/<int:num>')  # 变量类型不是字符串需要指定，可以是int,float,path,uuid
def add(num):
    result = 10 + num
    return f'10+{num}={result}'

2.4.4 多参数路由

# 路由多参数传递
@app.route('/add/<int:num1>/<int:num2>')  # 变量类型不是字符串需要指定，可以是int,float,path,uuid
def add1(num1, num2):
    result = num1 + num2
    return f'{num1}+{num2}={result}'

2.4.5 UUID路由

import uuid
res_uid = uuid.uuid4()
print(res_uid)  # af8e20c0-876b-4ab2-83d1-f0851e46ac49
# 指定了UUID类型，后面必须放符合uuid格式的变量，接收到的也是uuid变量
@app.route('/index/<uuid:uid>')  # http://127.0.0.1:5001/index/af8e20c0-876b-4ab2-83d1-f0851e46ac49
def get_uuid(uid):
    print(type(uid))  # <class 'uuid.UUID'>
    return str(uid)  # af8e20c0-876b-4ab2-83d1-f0851e46ac49

2.5 返回值：Response对象

2.5.1 返回值-字符串

@app.route('/')  # 路由  http://127.0.0.1:5000/
def hello_world():  # 视图
    return 'Hello World~~~!!!'

2.5.2 返回值-元组：需要转换为Response对象

from flask import Response
tuple1 = ('12', 'ab', '32')
@app.route('/index1')
def index1():
    return Response(tuple1)  # 页面显示 12ab32

2.5.3 返回值-Response对象

2.5.4 返回值-渲染模板render_template

########### app与模板的结合，默认使用Jinjia2模板引擎，模板文件夹默认为templates
from flask import render_template
@app.route('/', endpoint='index')   # endpoint为路由别名
def index():
    return render_template('index.html')     # Jinjia2模板引擎转化为字符串格式

2.5.5 返回值-重定向redirect

# 接收页面数据
from flask import redirect
@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        # 提取 post 方式提交的数据
        username1 = request.form.get('username')
        password1 = request.form.get('password')
        print(username1, password1)
        users.append(request.form.to_dict())
        return redirect('index.html')

2.6 request对象

########### request 对象
from flask import request 
@app.route('/index2')
def index2():
    print(request.headers)
    print(request.path)
    print(request.base_url)
    print(request.url)
    print(request.full_path)
    return 'request对象'

2.7 url_for反向解析

2.7.1 endpoint为路由指定别名

别名可以与函数名不一致

########### app与模板的结合，默认使用Jinjia2模板引擎，模板文件夹默认为templates
@app.route('/', endpoint='index')   # endpoint为路由别名
def index():
    return render_template('index.html')     # Jinjia2模板引擎转化为字符串格式

2.7.2 url_for反向解析

users = []
# 接收页面数据
@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        # 提取 post 方式提交的数据
        username1 = request.form.get('username')
        password1 = request.form.get('password')
        print(username1, password1)
        users.append(request.form.to_dict())
        return redirect(url_for('index'))    # 路由endpoint别名反向解析，然后重定向会有两次响应
    if request.method == 'GET':
        # 提取 get 方式提交的数据
        print(request.args)
        return render_template('register.html')

2.8 渲染模板时向前端传递参数

2.8.1 字典列表转化为json字符串

json.dumps(users)

2.8.2 渲染模板时向前端传递参数

@app.route('/show')
def show():
    context = {}
    context['user'] = json.dumps(users)
    msg = '<h1>我不想被转义</h1>'
    return render_template('show.html', context=users, msg=msg)

2.9 打印当前项目路由映射表

print(app.url_map)      # 路由表

三、前端知识要点

3.1 表单提交路由、模式和变量名

  1. 表单提交路由：/register
  2. 表单提交模式：post
  3. 表单提交变量名：name=“username”
<div>
	<!-- action="register"为视图函数的路由 -->
	<form action="register" method='post'>
		<p><input type="text" name="username" placeholder="请输入用户名"></p>
		<p><input type="password" name="password" placeholder="请输入密码"></p>
		<p><input type="submit" value="注册"></p>
	</form>
</div>

3.2 接收后端传来的变量 {{ msg }}

3.3 循环结构

  • loop.index 取序号
  • loop.last 判断是否是最后一个，返回布尔值
{% for item in context %}
	<tr {% if loop.last %} style="background-color: deeppink;" {% endif %}>
		<td>{{loop.index}}</td>
		<td>{{item.username}}</td>
		<td>{{item.password}}</td>
	</tr>
{% endfor %}

3.4 判断结构

{% if loop.last %} style="background-color: deeppink;" 
{% else %}
{% endif %}>

3.5 过滤器

3.5.1 列表过滤器

<p>列表过滤器</p>
{{ context|length }}<br>
{{ context|first }}<br>
{{ context|last }}<br>
{{ [1,2,3,4]|sum }}<br>
{{ [2,6,5,10,8]|sort }}<br>

3.5.2 字典过滤器

<p>字典过滤器</p>
items()取字典的所有key和value
<br>
{% for k,v in context.0.items() %}
	{{k}}--{{v}}
{% endfor %}
<br>
keys()取字典的所有key
<br>
{% for k in context.0.keys() %}
	{{k}}
{% endfor %}
<br>
values()取字典的所有value
<br>
{% for v in context.0.values() %}
	{{v}}
{% endfor %}

四、项目完整代码

4.1 项目目录结构

在这里插入图片描述

4.2 后端代码

4.2.1 settings.py文件

# 配置文件

ENV = 'development'
DEBUG = True

4.2.2 app.py

# Flask 文档  https://dormousehole.readthedocs.io/en/latest/
from flask import Flask, Response, request, render_template, redirect, url_for
import settings
import json

app = Flask(__name__)
app.config.from_object(settings)


######### 常用路由,建议路由格式为 '/path',即前有后无，这样可以确保路由的唯一性
# @app.route('/')  # 路由  http://127.0.0.1:5000/
# def hello_world():  # 视图
#     return 'Hello World~~~!!!'


# ########## 路由底层调用
# def index():
#     return '通过add_url_rul返回!'
# app.add_url_rule('/index/', view_func=index)


######### 路由变量规则
data = {'bj': '北京', 'sh': '上海', 'gz': '广州', 'sz': '深圳'}
@app.route('/getcity/<city>/')  # city是变量名，默认字符串
def get_city(city):
    print(type(city))
    return f'进入{data.get(city)}市'


@app.route('/add/<int:num>')  # 变量类型不是字符串需要指定，可以是int,float,path,uuid
def add(num):
    result = 10 + num
    return f'10+{num}={result}'

# 路由多参数传递
@app.route('/add/<int:num1>/<int:num2>')  # 变量类型不是字符串需要指定，可以是int,float,path,uuid
def add1(num1, num2):
    result = num1 + num2
    return f'{num1}+{num2}={result}'


@app.route('/index/<path:p>')  # http://127.0.0.1:5001/index/username/page_1
def get_path(p):
    print(type(p))  # str
    return p  # 页面返回 username/page_1


import uuid
res_uid = uuid.uuid4()
# print(res_uid)  # af8e20c0-876b-4ab2-83d1-f0851e46ac49
# 指定了UUID类型，后面必须放符合uuid格式的变量，接收到的也是uuid变量
@app.route('/index/<uuid:uid>')  # http://127.0.0.1:5001/index/af8e20c0-876b-4ab2-83d1-f0851e46ac49
def get_uuid(uid):
    print(type(uid))  # <class 'uuid.UUID'>
    return str(uid)  # af8e20c0-876b-4ab2-83d1-f0851e46ac49


########### Response 对象
tuple1 = ('12', 'ab', '32')
@app.route('/index1')
def index1():
    return Response(tuple1)  # 页面显示 12ab32


########### request 对象
@app.route('/index2')
def index2():
    print(request.headers)
    print(request.path)
    print(request.base_url)
    print(request.url)
    print(request.full_path)
    return 'request对象'


########### app与模板的结合，默认使用Jinjia2模板引擎，模板文件夹默认为templates
@app.route('/', endpoint='index')   # endpoint为路由别名
def index():
    return render_template('index.html')     # Jinjia2模板引擎转化为字符串格式


users = []
# 接收页面数据
@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'POST':
        # 提取 post 方式提交的数据
        username1 = request.form.get('username')
        password1 = request.form.get('password')
        print(username1, password1)
        users.append(request.form.to_dict())
        return redirect(url_for('index'))    # 路由endpoint别名反向解析，然后重定向会有两次响应
    if request.method == 'GET':
        # 提取 get 方式提交的数据
        print(request.args)
        return render_template('register.html')


@app.route('/show')
def show():
    context = {}
    context['user'] = json.dumps(users)
    msg = '<h1>我不想被转义</h1>'
    return render_template('show.html', context=users, msg=msg)



if __name__ == '__main__':
    print(app.url_map)      # 路由表
    app.run(port=5001)

4.3 前端代码

4.3.1 index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
	</head>
	<body>
		<a href="/register">注册<br></a>
		<a href="">登录<br></a>
		<a href="/show">展示用户<br></a>
	</body>
</html>

在这里插入图片描述

4.3.2 register.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		<style type="text/css">
			div{
				width: 50%;
				height: 180px;
				border: 2px solid brown;
			}
		</style>
	</head>
	<body>
		<h1>欢迎注册</h1>
		<div>
			<!-- action="register"为视图函数的路由 -->
			<form action="register" method='post'>
				<p><input type="text" name="username" placeholder="请输入用户名"></p>
				<p><input type="password" name="password" placeholder="请输入密码"></p>
				<p><input type="submit" value="注册"></p>
			</form>
		</div>

	</body>
</html>

在这里插入图片描述

4.3.3 show.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户展示</title>
	</head>
	<body>
		<h1>用户展示</h1>
		<ul>
			{% for item in context %}
				<li> {{item.username}}  {{item.password}} </li>
			{% endfor %}
		</ul>
		<table border="1" cellspacing="0" cellpadding="0">
			<tr>
				<th>序号</th>
				<th>用户名</th>
				<th>密码</th>
			</tr>
			{% for item in context %}
				<tr {% if loop.last %} style="background-color: deeppink;" {% endif %}>
					<td>{{loop.index}}</td>
					<td>{{item.username}}</td>
					<td>{{item.password}}</td>
				</tr>
			{% endfor %}
		</table>
		<hr >
		<p>共有{{context|length}}人</p>
		<p>{{ msg|safe }}</p>
		<p>{{ '%s is %d years old' | format('lily', 18) }}</p>
		<hr >
		<p>列表过滤器</p>
		{{ context|length }}<br>
		{{ context|first }}<br>
		{{ context|last }}<br>
		{{ [1,2,3,4]|sum }}<br>
		{{ [2,6,5,10,8]|sort }}<br>
		<hr >
		<p>字典过滤器</p>
		items()取字典的所有key和value
		<br>
		{% for k,v in context.0.items() %}
			{{k}}--{{v}}
		{% endfor %}
		<br>
		keys()取字典的所有key
		<br>
		{% for k in context.0.keys() %}
			{{k}}
		{% endfor %}
		<br>
		values()取字典的所有value
		<br>
		{% for v in context.0.values() %}
			{{v}}
		{% endfor %}


	</body>
</html>

在这里插入图片描述

岳涛@心馨电脑
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【Python百日进阶-Web开发-Feffery】Day306 - Flask网页中嵌入多个dash应用
岳涛的博客
03-17 804
文章目录一、Flask网页中嵌入多个dash应用1.1 页面效果1.2 完整代码1.2.1 flask_app.py1.2.2 dash_app1.py1.2.3 dash_app2.py1.2.4 wsgi.py1.2.5 index.html 一、Flask网页中嵌入多个dash应用 Dash 有一个小秘密：它是在 Flask 的帮助下实现的。 事实上，Dash 实际上扩展了 Flask：每次我们制作 Dash 应用程序时，我们实际上都是在创建一个带有额外花里胡哨的 Flask 应用程序。 这听起来很合
【Python百日进阶-Web开发-Feffery】Day617- 趣味dash_17：微型系统--引入flask-login
岳涛的博客
05-05 687
【代码】【Python百日进阶-Web开发-Feffery】Day617- 趣味dash_17：微型系统--引入flask-login。
Flask ==＞ 目录结构
Cool的博客
12-01 4126
Flask ==>   目录结构 一：目标 1.要求： 　　1. 熟悉Flask的目录结构。 　　2. 了解应用，装上新的组件往里面放，改怎么弄？   2.作业：  　　1.基于flask实现权限管理 　　2.笔记： 　　　　-  flask的请求周期   二：目录结构内容 知识点： 　　1.  从全局上了解flask项目的目录结构 　　2. flask项目的运行机制 　　3.flask框架实现M...
python flask项目结构_Flask----目录结构
weixin_35718351的博客
03-01 4986
以此结构为例，这个小项目是《Flask Web开发：基于python的web应用开发实战》第一部分结束后的代码框架第一层有app、tests、migrations三个文件夹和config.py、manage.py两个py文件以及data-dev.sqlite、data-tests.sqlite两个sqlite数据库app文件夹下主要写flask程序；migrations文件夹包含数据库迁移脚本；...
Python Flask项目结构参考
wang_ze6456的博客
01-05 1767
3 FlaskDemo下的__init__.py文件。4 exts目录下的__init__.py文件。5 exts目录下的auth.py文件。6 demo目录下的baidu.py。7 demo目录下的urls.py。
【Flask】Flask 项目的组织架构
书山有路，学海无涯。记录成长，追逐梦想
11-16 4912
在大型Flask项目中，主要有三种常见的项目组织架构：功能式架构（也就是 Bluelog 程序使用的架构）、分区式架构和混合式架构。我们将以一个示例程序 myapp 作为示例来介绍这三种架构的特点和区别，这个程序按照功能主要分为三部分：前台页面 front、认证 auth、后台管理 dashboard，为每个部分创建一个蓝本。
万哥的数据库笔记（四）数据库、模式、表、索引
qq_46226034的博客
11-06 473
文章目录前言定义模式：删除模式：创建数据库：修改数据库:删除数据库：创建表：修改表：删除表：创建索引： 前言 一个关系数据库管理系统的实例中可以建立多个数据库，一个数据库中可以建立多个模式，一个模式下通常包括多个表、视图和索引等数据库对象 定义模式： Create schema 模式名 authorization 用户名 --如果没有指定模式名，那么模式名隐含为用户名 create schema 'S-T' authorization WANG --为用户WANG定义一个学生-课程模式S-T 删除模式：
python web开发 之 flask教程（三）
gcaxuxi的博客
03-30 1万+
都知道python是对格式要求很严格的，写了一些python但是也没发现他严格在哪里，今天遇到了IndentationError: unexpected indent错误我才知道他是多么的严格。      以后遇到了IndentationError: unexpected indent你就要知道python编译器是在告诉你“Hi，老兄，你的文件里格式不对了，可能是tab和空格没对齐的问题，你
Python Web 框架-FLASK day05
时光
09-27 551
  目录   1.FLASK-SQLALCHEMY - 查询 2.FLASK-SQLALCHEMY - 删除 和 修改 3.FLASK-SQLALCHEMY - 关系映射 day04回顾 1.模型   使用名为SQLAlchemy的ORM框架，并且需要 Flask-SQLAlchemy   配置     from flask_sqlalchemy import SQLAlchemy ...
【Python百日进阶-Web开发-Feffery】Day368 - fac实例：美军海外军事基地
岳涛的博客
05-19 171
文章目录前言：fac是什么？“人生苦短，我用Python；Web开发，首选Feffery！”↓↓↓ 今日笔记 ↓↓↓一、安装依赖二、页面效果三、项目源码 前言：fac是什么？ feffery-antd-components（简称fac），是国内大佬费弗里(Feffery)老师基于著名的React UI组件库ant design进行二次开发，将ant design中的诸多实用组件及特性引入Dash，帮助开发者使用极低的纯Python代码量，即可快速开发出现代化的交互式web应用，将你有关web应用的美好憧
【Python百日进阶-Web开发-Feffery】Day363 - fac实例：数据库变更刷新页面
岳涛的博客
05-10 192
文章目录前言：fac是什么？“人生苦短，我用Python；Web开发，首选Feffery！”↓↓↓ 今日笔记 ↓↓↓一、安装peewee1.1 设置pycharm打开终端自动进入虚拟环境1.1.1 设置前没有自动进入虚拟环境1.1.2 设置方法1.1.3 修改后:打开直接进入虚拟环境1.2 安装peewee二、设计原理三、运行效果3.1 model.py后台间隔5-10秒持续更新数据3.2 前端页面效果四、项目源码4.1 模型文件 model.py4.2 app.py 前言：fac是什么？ feffer
【Python百日进阶-Web开发-Feffery】Day355 - fac数据展示09：AntdComment评论
岳涛的博客
05-02 308
文章目录前言：fac是什么？“人生苦短，我用Python；Web开发，首选Feffery！”↓↓↓ 今日笔记 ↓↓↓九、fac数据展示：AntdComment评论9.1 语法与参数9.1.1 语法9.1.2 主要参数说明9.2 使用示例9.2.1 基础使用9.2.2 自定义头像9.2.3 相对发表时间模式9.2.4 嵌套评论9.2.5 预设点赞/反对状态9.2.6 回调示例 前言：fac是什么？ feffery-antd-components（简称fac），是国内大佬费弗里(Feffery)老师基于著名
Flask项目目录设计
晴天的博客
05-17 3050
Flask项目目录设计
Flask python 开发篇：项目布局
最新发布
snow_love_xia的博客
03-11 1187
Flask应用程序可以像单个文件一样简单。就像上一篇简单实现一个接口一样，所有的东西都在一个python文件内；然而，当项目越来越大的时候，把所有代码放在单个文件中就有点不堪重负了。Python 项目使用 包 来管理代码，把代码分为不同的模块，然后在需要的地方导入模块。
【flask进阶】手把手带你搭建可扩展的flask项目脚手架
阿牛的博客
09-18 1560
flask不像我们的django可以用指令快速搭建我们的项目目录，因此，对于初学者，做一个项目结构稍微复杂一些，功能多一些的web项目时，用flask搭建一个可扩展且看起来比较舒服的项目时，可能会面临很多困难与bug，因此在这篇文章中，我将我花时间搭建的类似django的项目目录的flask项目分享给大家，让大家可以快速搭建flask的脚手架！
各类Python项目的项目结构及代码组织最佳实践
热门推荐
Python技术探索
11-24 1万+
介绍 Python项目结构，Python代码组织， Python代码结构， 应用最广泛的 python 项目结构的形式， 基本Python项目结构，多应用Python项目结构，AI项目结构，Flask项目结构
flask的目录结构和文件依赖关系
zgy124590的博客
07-02 309
Flask是一个Python的轻量级Web应用框架，它的目录结构通常是根据开发者的偏好进行组织的。
Flask项目目录结构和demo工程示例
扬雨于今
04-07 308
不建议使用flask_script，高版本flask会报错，需要降级或修改源码。
python项目结构示例（python代码结构、python目录结构）与python部署结构、python部署目录、flask项目结构、flask目录
Dontla的博客
07-05 5675
这样的目录结构可以使你的项目更加清晰和易于维护。实际开发可以根据真实需求对目录结构进行调整和扩展。这只是一个基本的项目结构示例，实际项目的结构可能会根据具体需求有所不同。
Flask-WTF教程：Python Flask框架下的Web登录验证
在Python的Flask Web开发框架中，Flask-WTF是一个常用的表单插件，它极大地增强了Flask处理表单的能力。通常，Flask本身依赖于WTForms库来处理基础的表单需求，但Flask-WTF提供了一个更简洁的接口和额外的功能，如...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

岳涛@心馨电脑

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

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

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

打赏作者

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

抵扣说明：

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

余额充值