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

news2024/11/19 17:52:41

文章目录

  • 一、day01项目环境和结构搭建
    • 1.1 新建虚拟环境
    • 1.2 安装Flask
    • 1.3 配置Python解释器
  • 二、后端知识要点
    • 2.1 Flask 文档
    • 2.2 实例化flask对象
      • 2.2.1 新建独立的配置文件settings.py
      • 2.2.2 实例化flask对象时加载配置文件
    • 2.3 基本路由
      • 2.3.1 常用路由及唯一性
      • 2.3.2 路由底层调用
    • 2.4 路由规则
      • 2.4.1 字符串路由
      • 2.4.2 path路径路由
      • 2.4.3 数字(整数int、浮点数float)路由
      • 2.4.4 多参数路由
      • 2.4.5 UUID路由
    • 2.5 返回值:Response对象
      • 2.5.1 返回值-字符串
      • 2.5.2 返回值-元组:需要转换为Response对象
      • 2.5.3 返回值-Response对象
      • 2.5.4 返回值-渲染模板render_template
      • 2.5.5 返回值-重定向redirect
    • 2.6 request对象
    • 2.7 url_for反向解析
      • 2.7.1 endpoint为路由指定别名
      • 2.7.2 url_for反向解析
    • 2.8 渲染模板时向前端传递参数
      • 2.8.1 字典列表转化为json字符串
      • 2.8.2 渲染模板时向前端传递参数
    • 2.9 打印当前项目路由映射表
  • 三、前端知识要点
    • 3.1 表单提交路由、模式和变量名
    • 3.2 接收后端传来的变量 {{ msg }}
    • 3.3 循环结构
    • 3.4 判断结构
    • 3.5 过滤器
      • 3.5.1 列表过滤器
      • 3.5.2 字典过滤器
  • 四、项目完整代码
    • 4.1 项目目录结构
    • 4.2 后端代码
      • 4.2.1 settings.py文件
      • 4.2.2 app.py
    • 4.3 前端代码
      • 4.3.1 index.html
      • 4.3.2 register.html
      • 4.3.3 show.html

一、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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/29387.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

中央空调系统运行原理以及相关设备介绍

目录前言一、中央空调系统工作原理1-1、工作原理1-2、中央空调系统构成二、室内空调三、制冷机组3-1、概述3-2、原理3-3、蒸发器3-4、冷凝器3-5、压缩机3-6、总结四、冷却塔总结前言 今天也是为了30岁开始养老而奋斗的一天。 一、中央空调系统工作原理 1-1、工作原理 中央空…

FFmpeg入门 - rtmp推流

FFmpeg入门 - 视频播放_音视频开发老马的博客-CSDN博客介绍了怎样用ffmpeg去播放视频. 里面用于打开视频流的avformat_open_input函数除了打开本地视频之外,实际上也能打开rtmp协议的远程视频,实现拉流: ./demo -p 本地视频路径 ​ ./demo -p rtmp://服务器ip/视频流路径 这篇…

JVM垃圾回收总结

常见面试题 如何判断对象是否死亡 简单介绍一下强引用、软引用、弱引用、虚引用 如何判断常量是一个废弃常量 如何判断类是一个无用类 垃圾收集有哪些算法、各自的特点&#xff1f; 常见的垃圾回收器有哪些&#xff1f; 介绍一下CMS&#xff0c;G1收集器&#xff1f; minor gc和…

[附源码]计算机毕业设计JAVA课后作业提交系统关键技术研究与系统实现

[附源码]计算机毕业设计JAVA课后作业提交系统关键技术研究与系统实现 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&am…

[附源码]计算机毕业设计JAVA课堂点名系统

[附源码]计算机毕业设计JAVA课堂点名系统 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis M…

【2】Anaconda基本命令以及相关工具:jupyter、numpy、Matplotilb

上一篇请移步【1】Anaconda基本命令以及相关工具&#xff1a;jupyter、numpy、Matplotilb_水w的博客-CSDN博客 目录 3 Numpy数组基础索引&#xff1a;索引和切片 ◼ 基础索引 4 Numpy非常重要的数组合并与拆分操作 ◼ 数组的合并-concatenate、vstack、hstack numpy.vstac…

生产制造管理:供应商管理系统

随着经济全球化和信息技术的快速推进发展&#xff0c;传统的管理模式早已不再适应现代市场竞争与生产制造的需要&#xff0c;以顾客需求为中心的供应链管理显得更为重要。供应链是围绕核心企业&#xff0c;通过对信息流、物流、资金流等关键部分的控制连成一个整体的功能网链结…

期末前端web大作业——我的家乡陕西介绍网页制作源码HTML+CSS+JavaScript

家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法&#xff0c;如盒子的嵌套、浮动、margin、border、background等属性的使用&#xff0c;外部大盒子设定居中&#xff0c;内部左中右布局&#xff0c;下方横向浮动排列&#xff0c;大学学习的前端知识点和布局方式都有…

[附源码]计算机毕业设计JAVA科院垃圾分类系统

[附源码]计算机毕业设计JAVA科院垃圾分类系统 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybati…

Flutter For Web——一个简单的图片素材网站

一个简单的图片素材网站效果视频登录注册页效果图UI初始化TabBarPageView组合登录账号输入按键处理SharedPreferences封装保存数据取出数据清除缓冲内容搜索栏效果图UI首页效果图UIDio网络请求Dio单例封装构造Dio对象GetPostResponse使用解析Json图片阅览UIDialog下载UI调用浏览…

Spring之IOC 为什么能解耦

1.1 什么是IOC &#xff08;1&#xff09;控制反转&#xff0c;把对象的创建和对象之间的调用过程&#xff0c;都交给Spring进行管理 &#xff08;2&#xff09;使用IOC目的&#xff1a;为了耦合性降低 1.2 IOC的底层原理 &#xff08;1&#xff09;使用的技术&#xff1a;…

完美解决-RuntimeError: CUDA error: device-side assert triggered

网上的解决方案意思是对的&#xff0c;但并没有给出相应的实际解决方法&#xff1a; 问题描述&#xff1a; 当使用ImageFolder方式构建数据集的时候&#xff1a; train_data torchvision.datasets.ImageFolder(train_path, transformtrain_transform)train_loader DataLoad…

学习Git看这一篇就够了

文章目录Git简单介绍官方网址Git是什么版本控制系统的演化Git安装 - Windows版需要熟悉的几个Linux命令Git命令行状态对应目录位置Git命令1. git init2. git status3. git add4. git commit5. git config6. git reset7. git diff练习 - 创建学生管理系统练习提交代码练习修改代…

传感模块:MATEKSYS Optical Flow LIDAR 3901-L0X

传感模块&#xff1a;MATEKSYS Optical Flow & LIDAR 3901-L0X1. 模块介绍2. 规格参数3. 使用方法Step1: 接线方式Step2: 安装方式Step3: 使用范围4. 存在问题4.1 MATEKSYS 3901-L0X 输出协议格式&#xff1f;4.1.1 支持光流计协议(iNav-CXOF)4.1.2 支持光流计激光测距协议…

混合SDN中的安全性问题研究

混合SDN中的安全性问题研究混合SDN中的安全性问题研究1.学习目标2.学习内容3.目前存在的问题4.解决办法1.关于欺骗ARP的讨论2.DDoS攻击探讨5.解决方案现有文献的解决方案6.目前面临的挑战申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xf…

美食杰项目(一)登录注册页

目录前言&#xff1a;具体效果&#xff1a;代码思路相应的组件&#xff1a;具体代码&#xff1a;all页面的具体代码&#xff1a;login页面具体代码&#xff1a;**登录和注册的基本功能都一样所以没有注释**enroll页面的具体代码&#xff1a;路由相关代码&#xff1a;相关引入&a…

Swagger2依赖的版本问题导致其配置文件一直报错的终极解决方案

Swagger2依赖的版本问题 在项目中使用的报错的版本 springboot2.2.1.RELEASE swagger2.9.2导致在写swagger的配置类时&#xff0c;一直引入不了依赖 导入正确的依赖 <!--swagger--> <dependency><groupId>io.springfox</groupId><artifactId>sp…

JIRA on K8s helm部署实战

JIRA on K8s helm部署实战jira on k8s实战waht&#xff1f;架构![在这里插入图片描述](https://img-blog.csdnimg.cn/7b007d9bfb4648c7b1ab816105f51701.png)如何选择chart官方的chartmox 的chart【1】mox chart 安装脚本【2】生产环境的yamljira 的sharedHome 和localHome 的区…

spring源码 - @Condition原理及运用

1.在源码中&#xff0c;在生成beanfinition中有有如一段代码 以下代码逻辑中执行this.conditionEvaluator.shouldSkip返回true直接跳出beandefinition生成逻辑 private <T> void doRegisterBean(Class<T> beanClass, Nullable String name,Nullable Class<? …

实验数据处理

来源 加热冷却温度实验&#xff0c;相同实验参数可能有一次或多次重复实验&#xff0c;一次实验中也可能有多次。如何分别每一次周期&#xff0c;并把每个周期的数据都分析出来&#xff0c;成为一个问题。 解决思想 想根据冷却后的平台划分不同周期&#xff0c;但是由于冷却…