python web框架 flask基础入门教程

python web框架 flask基础入门教程

今天我们写一个flask基础入门教程，当然也会覆盖很多重要的知识点，在这篇博客中，我们主要会讲解如下内容：

1、通过flask框架向web传输和接收参数

2、实现静态图片插入和图书上传

3、实现搭建的网站局域网共享

4、实现html模板继承

5、实现javascript 、css渲染

6、连接数据库，创建模型，实现自动建表

7、实现对数据库表的增删改查

8、实现按钮与函数交互

9、实现链接跳转

那么先开始我们的第一条内容：

项目文件结构如下：
在这里插入图片描述

然后导入相关库：


from flask import Flask, request, render_templatefrom datetime import datetime
from flask import render_template
from FlaskWebLearning import app
from flask_sqlalchemy import SQLAlchemyimport pymysql

1、通过flask框架向web传毒和接收参数

先让我们来看一下最简单的路由程序：

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

通过上面方法程序，我们就可以实现这样的结果
在这里插入图片描述

对于这部份内容，我们先看第一种传输数据的方式：

@app.route('/test2/<your_word>')
def test3(your_word):return '你想说的话:'+your_word

运行我们的app之后，输入如下网址，我们可以得到这样的结果：
在这里插入图片描述

第二中我们则也可以通过后端进行数据传输进行数据传输，并将数据传输给模板：


@app.route('/cs/<title>')
def cs(title):return render_template("about.html",title=title,message="测试程序")

输入链接：http://127.0.0.1:5555/cs/dfafd、得到如下界面

在这里插入图片描述

注：做到这一步其实就用到了模板，下面我们把本次用到的所有的模板列出来：

about.html

{% extends "layout.html" %}{% block content %}<h2>{{ title }}.</h2>
<h3>{{ message }}</h3><img src="{{url_for('static',filename='image/6.png')}}">
<p>Use this area to provide additional information.</p><address>One Microsoft Way<br />Redmond, WA 98052-6399<br /><abbr title="Phone">P:</abbr>425.555.0100
</address><address><strong>Support:</strong>   <a href="mailto:Support@example.com">Support@example.com</a><br /><strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
</address>{% endblock %}

form.html

{% extends "layout.html" %}{% block content %}<form action="{{ url_for('form') }}" method="post"><label for="username">Username</label><br><input type="text" name="username" placeholder="Héctor Rivera"><br><label for="password">Password</label><br><input type="password" name="password" placeholder="19001130"><br><input type="submit" name="submit" value="Log in">
</form><a href="https://bilibili.com">网址直接跳转</a>
<a href="/link">链接跳转</a><!--<a href="images/1.webp">相对路径跳转</a>网址直接跳转</a>--><address>One Microsoft Way<br />Redmond, WA 98052-6399<br /><abbr title="Phone">P:</abbr>425.555.0100</address><address><strong>Support:</strong>   <a href="mailto:Support@example.com">Support@example.com</a><br /><strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a></address>{% endblock %}

index.html

{% extends "layout.html" %}{% block content %}<div class="jumbotron"><h1>Flask</h1><p class="lead">Flask is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p><p><a href="http://flask.pocoo.org/" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<div><form method="post" action="/up_photo" enctype="multipart/form-data"><input type="file" size="30" name="photo" /><br><input type="text" class="txt_input" name="name" style="margin-top:15px;" /><input type="submit" value="提交信息" class="button-new" style="margin-top:15px;" /></form>
</div>
<div class="row"><div class="col-md-4"><h2>Getting started</h2><p>Flask gives you a powerful, patterns-based way to build dynamic websites thatenables a clean separation of concerns and gives you full control over markupfor enjoyable, agile development.</p><p><a class="btn btn-default" href="http://flask.pocoo.org/docs/">Learn more &raquo;</a></p></div><div class="col-md-4"><h2>Get more libraries</h2><p>The Python Package Index is a repository of software for the Python programming language.</p><p><a class="btn btn-default" href="https://pypi.python.org/pypi">Learn more &raquo;</a></p></div><div class="col-md-4"><h2>Microsoft Azure</h2><p>You can easily publish to Microsoft Azure using Visual Studio. Find out how you can host your application using a free trial today.</p><p><a class="btn btn-default" href="http://azure.microsoft.com">Learn more &raquo;</a></p></div>
</div>{% endblock %}

layout.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{ title }} - My Flask Application</title><link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="/static/content/site.css" /><script src="/static/scripts/modernizr-2.6.2.js"></script>
</head><body><div class="navbar navbar-inverse navbar-fixed-top"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="/" class="navbar-brand">Application name</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"></ul></div></div></div><div class="container body-content">{% block content %}{% endblock %}<hr /><footer><p>&copy; {{ year }} - My Flask Application</p></footer></div><script src="/static/scripts/jquery-1.10.2.js"></script><script src="/static/scripts/bootstrap.js"></script><script src="/static/scripts/respond.js"></script>{% block scripts %}{% endblock %}</body>
</html>

test.html

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{ title }} - My Flask Application</title><link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="/static/content/site.css" /><script src="/static/scripts/modernizr-2.6.2.js"></script>
</head><body><h2>濮撳悕锛歿{person.name}}</h2><h2>骞撮緞锛歿{person.age}}</h2><div class="container body-content">{% block content %}{% endblock %}<hr /><footer><p>&copy; {{ year }} - My Flask Application</p></footer></div><script src="/static/scripts/jquery-1.10.2.js"></script><script src="/static/scripts/bootstrap.js"></script><script src="/static/scripts/respond.js"></script>{% block scripts %}{% endblock %}</body>
</html>

test2.html

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{ title }} - My Flask Application</title><link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="/static/content/site.css" /><script src="/static/scripts/modernizr-2.6.2.js"></script>
</head><body><h2>{{strz|dformat}}</h2><div class="container body-content">{% block content %}{% endblock %}<hr /><footer><p>&copy; {{ year }} - My Flask Application</p></footer></div><script src="/static/scripts/jquery-1.10.2.js"></script><script src="/static/scripts/bootstrap.js"></script><script src="/static/scripts/respond.js"></script>{% block scripts %}{% endblock %}</body>
</html>

test3.html

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{ title }} - My Flask Application</title><link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="/static/content/site.css" /><script src="/static/scripts/modernizr-2.6.2.js"></script>
</head><body>{%if age<18 %}<p>鏈弧18宀侊紝鍙互鍘荤綉鍚т簡</p>{% else %}<p>宸叉弧18宀侊紝涓嶅彲浠ュ幓缃戝惂</p>{% endif %}<div class="container body-content">{% block content %}{% endblock %}<hr /><footer><p>&copy; {{ year }} - My Flask Application</p></footer></div><script src="/static/scripts/jquery-1.10.2.js"></script><script src="/static/scripts/bootstrap.js"></script><script src="/static/scripts/respond.js"></script>{% block scripts %}{% endblock %}</body>
</html>

同样，我们也可以传输我们的对象给前端：


@app.route('/person')
def person():p=Person("zhangsan",78)return render_template("test.html",person=p)

在这里插入图片描述
下面做一个小插曲，html过滤器的使用：
注意过滤器其实非常非常重要，他的作用性很大，可以帮助我们处理各种各样的字符，数字等转换

def filter1(value):return value[2:5]
app.add_template_filter(filter1,'dformat')@app.route('/filter/<s>')
def filter(s):return render_template("test2.html",strz=s)

在这里插入图片描述

2、实现静态图片插入和图书上传

（1）静态图片插入，这部分内容其实比较简单哈：
看一下代码：


<img src="{{url_for('static',filename='image/6.png')}}">

完整代码如下

{% extends "layout.html" %}{% block content %}<h2>{{ title }}.</h2>
<h3>{{ message }}</h3><img src="{{url_for('static',filename='image/6.png')}}">
<p>Use this area to provide additional information.</p><address>One Microsoft Way<br />Redmond, WA 98052-6399<br /><abbr title="Phone">P:</abbr>425.555.0100
</address><address><strong>Support:</strong>   <a href="mailto:Support@example.com">Support@example.com</a><br /><strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
</address>{% endblock %}

通过这个代码我们就可以实现静态图片插入：
在这里插入图片描述

（2）图片上传

路由函数


@app.route('/index')
def index():return render_template("index.html")@app.route('/up_photo', methods=['post'])
def up_photo():img = request.files.get('photo')username = request.form.get("name")path =r"FlaskWebLearning/static/image/"file_path = path+img.filenameimg.save(file_path)print('上传头像成功，上传的用户是：'+username)return render_template('index.html')

注意，先进入/index路由，会显示图片上传界面：
在这里插入图片描述

3、实现搭建的网站局域网共享

这里比简单：

只需要在app.run()的时候传入host=‘0.0.0.0’，那么你搭建的网站，链接局域网的就都可以访问了。

"""
#coding=gbk
from os import environfrom FlaskWebLearning import appif __name__ == '__main__':HOST = '222.19.67.89'try:PORT = int(environ.get('SERVER_PORT', '5555'))except ValueError:PORT = 5555app.run(host='0.0.0.0',port=5555)

4、实现html模板继承

模板继承：

{% extends "layout.html" %}

{% extends "layout.html" %}{% block content %}<h2>{{ title }}.</h2>
<h3>{{ message }}</h3><img src="{{url_for('static',filename='image/6.png')}}">
<p>Use this area to provide additional information.</p><address>One Microsoft Way<br />Redmond, WA 98052-6399<br /><abbr title="Phone">P:</abbr>425.555.0100
</address><address><strong>Support:</strong>   <a href="mailto:Support@example.com">Support@example.com</a><br /><strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
</address>{% endblock %}

这就是模板继承的代码，会把layout.html先加载，那么还有模板补充：
{% block content %} {% endblock %}之间的内容会被补充道layout.html网页里，补充的地方就在
对应的{% block content %} {% endblock %}之间
{% block content %} {% endblock %}

5、实现javascript 、css渲染

这个代码比较简单：

<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{ title }} - My Flask Application</title><link rel="stylesheet" type="text/css" href="/static/content/bootstrap.min.css" /><link rel="stylesheet" type="text/css" href="/static/content/site.css" /><script src="/static/scripts/modernizr-2.6.2.js"></script>
</head>

6、连接数据库，创建模型，实现自动建表

链接数据库：

pymysql.install_as_MySQLdb()# 设置数据库连接地址
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://root:密码@127.0.0.1:3306/数据库名?charset=utf8'
# 是否追踪数据库修改(开启后会触发一些钩子函数)  一般不开启, 会影响性能
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
# 是否显示底层执行的SQL语句
app.config['SQLALCHEMY_ECHO'] = Truedb = SQLAlchemy(app)

创建模型：

#ORM对象关系映射class User(db.Model):__tablename__='user'id=db.Column(db.Integer,primary_key=True,autoincrement=True)username=db.Column(db.String(100))password=db.Column(db.String(100))#   articles=db.relationship("Article",back_populates='author')class  Article(db.Model):__tablename__='article'id=db.Column(db.Integer,primary_key=True,autoincrement=True)title=db.Column(db.String(200),nullable=False)content=db.Column(db.Text,nullable=False)author_id=db.Column(db.Integer,db.ForeignKey("user.id"))author=db.relationship('User',backref='articles')

实现自动建表：

#user=User(username="张三",password="123456")with app.app_context():db.create_all()

7、实现对数据库表的增删改查

数据库增加表数据:

@app.route('/user/add')
def add_user():user1=User(username="张三",password="123456")user2=User(username="李四",password="123456")user3=User(username="王五",password="123456")db.session.add(user1)db.session.add(user2)db.session.add(user3)db.session.commit()return  "用户数据导入成功"

数据库删除表数据:

    
@app.route('/user/delete')
def delete_user():user1=db.query.get(1)#根据主键查找print(user1)db.session.delete(user1)db.session.commit()return  "数据删除成功"

数据库修改表数据:

@app.route('/user/update')
def updatae_user():users=User.query.filter_by(username='李四')#根据主键查找for user in users:user.password='222222'#  db.session.delete(user1)db.session.commit()return  "数据更新成功"

数据库查询表数据:

@app.route('/user/query')
def query_user():user1=User.query.get(1)#根据主键查找print(user1)users=User.query.filter_by(username='李四')#根据主键查找print(users)users=User.query.all()#根据主键查找s=''for  i in users:print(i.username,i.password)s=s+i.username+' '+i.password+'\n'db.session.commit()return s

8、实现按钮与函数交互

最后呢，我们做一个按钮和函数交互的操作，并实现，数据库的数据增加：

@app.route('/page', methods=['GET', 'POST'])
def page():return render_template("form.html")
@app.route('/form', methods=['GET', 'POST'])
def form():if request.method == 'POST':username1 = request.form['username']password1 = request.form['password']print(username1, password1)user1=User(username=username1,password=password1)db.session.add(user1)db.session.commit()return "数据导入成功"return "hello"
{% extends "layout.html" %}{% block content %}<form action="{{ url_for('form') }}" method="post"><label for="username">Username</label><br><input type="text" name="username" placeholder="Héctor Rivera"><br><label for="password">Password</label><br><input type="password" name="password" placeholder="19001130"><br><input type="submit" name="submit" value="Log in">
</form><a href="https://bilibili.com">网址直接跳转</a>
<a href="/link">链接跳转</a><!--<a href="images/1.webp">相对路径跳转</a>网址直接跳转</a>--><address>One Microsoft Way<br />Redmond, WA 98052-6399<br /><abbr title="Phone">P:</abbr>425.555.0100</address><address><strong>Support:</strong>   <a href="mailto:Support@example.com">Support@example.com</a><br /><strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a></address>{% endblock %}

首先进入page路由：
在这里插入图片描述
然后输入数据：
在这里插入图片描述

点击log in:
在这里插入图片描述
刚才输入的数据就会被导入数据库。

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

多测师肖sir_高级金牌讲师_jenkins搭建

多测师肖sir_高级金牌讲师_jenkins搭建

jenkins操作手册 一、jenkins介绍 1、持续集成&#xff08;CI&#xff09; Continuous integration 持续集成 团队开发成员每天都有集成他们的工作&#xff0c;通过每个成员每天至少集成一次&#xff0c;也就意味着一天有可 能多次集成。在工作中我们引入持续集成&#xff0c;通…
阅读更多...
在Flask中实现文件上传七牛云中并下载

在Flask中实现文件上传七牛云中并下载

在Flask中实现文件上传和七牛云集成 文件上传是Web应用中常见的功能之一&#xff0c;而七牛云则提供了强大的云存储服务&#xff0c;使得文件存储和管理变得更加便捷。在本篇博客中&#xff0c;我们将学习如何在Flask应用中实现文件上传&#xff0c;并将上传的文件保存到七牛云…
阅读更多...
Mysql数据库 8.SQL语言 外键约束

Mysql数据库 8.SQL语言 外键约束

一、外键约束 外键约束——将一个列添加外键约束与另一张表的主键&#xff08;唯一列&#xff09;进行关联之后&#xff0c;这个外键约束的列添加的数据必须要在关联的主键字段中存在 案例 创建原则&#xff1a;先创建不含外键的表也就是班级表 添加外键的方式 一般使用第一…
阅读更多...
社区分享｜杭银消费金融基于MeterSphere开展接口自动化测试

社区分享｜杭银消费金融基于MeterSphere开展接口自动化测试

杭银消费金融有限公司&#xff08;以下简称“杭银消费金融”&#xff09;成立于2015年12月&#xff0c;是经中国银保监会批准&#xff0c;由杭州银行作为主发起人&#xff0c;联合滴滴出行、中国银泰等企业组建的持牌消费金融机构&#xff0c;注册资本为25.61亿元。杭银消费金融…
阅读更多...
【HarmonyOS】HarmonyOS Test测试用例中一些断言API的使用

【HarmonyOS】HarmonyOS Test测试用例中一些断言API的使用

【关键词】 单元测试框架、HarmonyOS Test、assertThrowError、assertFail、assertEqual 【测试代码及测试结果展示】 这里以新建API9工程自动生成的ohosTest来编写单元测试代码。 1、 测试代码&#xff1a; import { describe, it, expect } from ohos/hypium import abil…
阅读更多...
JUC并发编程(5)（自定义线程池 + 共享模型之工具2）

JUC并发编程(5)（自定义线程池 + 共享模型之工具2）

JUC并发编程(5)&#xff08;自定义线程池 共享模型之工具2&#xff09; 笔记内容来源于黑马程序员教学视频 一、共享模型之工具2 ①&#xff1a;读写锁 1、ReentrantReadWriteLock 当读操作远远高于写操作时&#xff0c;这时候使用读写锁让读-读可以并发&#xff0c;提高性…
阅读更多...
Tomcat的类加载器

Tomcat的类加载器

详情可以参考&#xff1a;https://tomcat.apache.org/tomcat-10.1-doc/class-loader-howto.html 简要说明 Tomcat安装了多种类加载器&#xff0c;以便容器的不同部分、容器中的应用访问能够不同的类和资源。 在Java环境中&#xff0c;类加载器被组织为父-子树的形式。通常情况…
阅读更多...
发电机综合特性测试仪

发电机综合特性测试仪

发电机综合特性测试仪是可以测量发电机的电压、电流、功率因数、频率等参数&#xff0c;以评估发电机的质量和性能。可以测量发电机的输出电压&#xff0c;以确保其符合规定的标准和要求。测量发电机的输出电流&#xff0c;以确定其负载能力和稳定性。可以测量发电机的功率因数…
阅读更多...
五、计算机网络

五、计算机网络

&#xff08;一&#xff09;OSI/RM 七层模型 七层模型是计算机网络的基石&#xff0c;整个计算机网络是构建与七层模型之上的。 在数据链路层&#xff0c;数据开始以帧为单位&#xff0c;网卡的 MAC 地址就是数据帧的地址&#xff0c;数据的传输开始有地址了。 局域网是工作…
阅读更多...
关于稳定扩散最详细的介绍

关于稳定扩散最详细的介绍

推荐基于稳定扩散(stable diffusion) AI 模型开发的自动纹理工具&#xff1a; DreamTexture.js自动纹理化开发包 - NSDT Stable Diffusion 用途广泛&#xff0c;因为它可以以多种不同的方式使用。首先&#xff0c;让我们关注仅从文本 &#xff08;text2img&#xff09; 生成图像…
阅读更多...
Vb6 TCP Server服务端监听多个RFID读卡器客户端上传的刷卡数据

Vb6 TCP Server服务端监听多个RFID读卡器客户端上传的刷卡数据

本示例使用设备介绍&#xff1a;WIFI无线4G网络RFID云读卡器远程网络开关物流网阅读器TTS语音-淘宝网 (taobao.com) Option ExplicitConst BUSY As Boolean False 定义常量 Const FREE As Boolean TrueDim ConnectState() As Boolean 定义连接状态 Dim ServerSendbuf(…
阅读更多...
ansible第一天

ansible第一天

ansible 第一天 以上主机使用rhel-8.2-x86_64-dvd.iso镜像&#xff0c;配置ip、yum源&#xff0c;关闭防火墙和selinux规则 安装中文包&#xff0c;重启生效 [rootcontrol ~]# yum -y install langpacks-zh_CN.noarch && reboot 配置名称解析 [rootcontrol ~]# echo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023