深圳建设网站公司哪儿济南兴田德润有活动吗,个人电子简历模板,泰州网站建设 思创,福州高端品牌网站建设python web框架 flask基础入门教程
今天我们写一个flask基础入门教程#xff0c;当然也会覆盖很多重要的知识点#xff0c;在这篇博客中#xff0c;我们主要会讲解如下内容#xff1a;
1、通过flask框架向web传输和接收参数
2、实现静态图片插入和图书上传
3、实现搭建…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 pymysql1、通过flask框架向web传毒和接收参数
先让我们来看一下最简单的路由程序
app.route(/)
app.route(/home)
def home():returnhello 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,titletitle,message测试程序)输入链接http://127.0.0.1:5555/cs/dfafd、得到如下界面 注做到这一步其实就用到了模板下面我们把本次用到的所有的模板列出来
about.html
{% extends layout.html %}{% block content %}h2{{ title }}./h2
h3{{ message }}/h3img src{{url_for(static,filenameimage/6.png)}}
pUse this area to provide additional information./paddressOne Microsoft Waybr /Redmond, WA 98052-6399br /abbr titlePhoneP:/abbr425.555.0100
/addressaddressstrongSupport:/strong a hrefmailto:Supportexample.comSupportexample.com/abr /strongMarketing:/strong a hrefmailto:Marketingexample.comMarketingexample.com/a
/address{% endblock %}
form.html
{% extends layout.html %}{% block content %}form action{{ url_for(form) }} methodpostlabel forusernameUsername/labelbrinput typetext nameusername placeholderHéctor Riverabrlabel forpasswordPassword/labelbrinput typepassword namepassword placeholder19001130brinput typesubmit namesubmit valueLog in
/forma hrefhttps://bilibili.com网址直接跳转/a
a href/link链接跳转/a!--a hrefimages/1.webp相对路径跳转/a网址直接跳转/a--addressOne Microsoft Waybr /Redmond, WA 98052-6399br /abbr titlePhoneP:/abbr425.555.0100/addressaddressstrongSupport:/strong a hrefmailto:Supportexample.comSupportexample.com/abr /strongMarketing:/strong a hrefmailto:Marketingexample.comMarketingexample.com/a/address{% endblock %}
index.html
{% extends layout.html %}{% block content %}div classjumbotronh1Flask/h1p classleadFlask is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript./ppa hrefhttp://flask.pocoo.org/ classbtn btn-primary btn-largeLearn more raquo;/a/p
/div
divform methodpost action/up_photo enctypemultipart/form-datainput typefile size30 namephoto /brinput typetext classtxt_input namename stylemargin-top:15px; /input typesubmit value提交信息 classbutton-new stylemargin-top:15px; //form
/div
div classrowdiv classcol-md-4h2Getting started/h2pFlask 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./ppa classbtn btn-default hrefhttp://flask.pocoo.org/docs/Learn more raquo;/a/p/divdiv classcol-md-4h2Get more libraries/h2pThe Python Package Index is a repository of software for the Python programming language./ppa classbtn btn-default hrefhttps://pypi.python.org/pypiLearn more raquo;/a/p/divdiv classcol-md-4h2Microsoft Azure/h2pYou can easily publish to Microsoft Azure using Visual Studio. Find out how you can host your application using a free trial today./ppa classbtn btn-default hrefhttp://azure.microsoft.comLearn more raquo;/a/p/div
/div{% endblock %}
layout.html
!DOCTYPE html
html
headmeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0title{{ title }} - My Flask Application/titlelink relstylesheet typetext/css href/static/content/bootstrap.min.css /link relstylesheet typetext/css href/static/content/site.css /script src/static/scripts/modernizr-2.6.2.js/script
/headbodydiv classnavbar navbar-inverse navbar-fixed-topdiv classcontainerdiv classnavbar-headerbutton typebutton classnavbar-toggle data-togglecollapse data-target.navbar-collapsespan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona href/ classnavbar-brandApplication name/a/divdiv classnavbar-collapse collapseul classnav navbar-nav/ul/div/div/divdiv classcontainer body-content{% block content %}{% endblock %}hr /footerpcopy; {{ year }} - My Flask Application/p/footer/divscript src/static/scripts/jquery-1.10.2.js/scriptscript src/static/scripts/bootstrap.js/scriptscript src/static/scripts/respond.js/script{% block scripts %}{% endblock %}/body
/html
test.html
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetGBK /meta nameviewport contentwidthdevice-width, initial-scale1.0title{{ title }} - My Flask Application/titlelink relstylesheet typetext/css href/static/content/bootstrap.min.css /link relstylesheet typetext/css href/static/content/site.css /script src/static/scripts/modernizr-2.6.2.js/script
/headbodyh2濮撳悕锛歿{person.name}}/h2h2骞撮緞锛歿{person.age}}/h2div classcontainer body-content{% block content %}{% endblock %}hr /footerpcopy; {{ year }} - My Flask Application/p/footer/divscript src/static/scripts/jquery-1.10.2.js/scriptscript src/static/scripts/bootstrap.js/scriptscript src/static/scripts/respond.js/script{% block scripts %}{% endblock %}/body
/html
test2.html
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetGBK /meta nameviewport contentwidthdevice-width, initial-scale1.0title{{ title }} - My Flask Application/titlelink relstylesheet typetext/css href/static/content/bootstrap.min.css /link relstylesheet typetext/css href/static/content/site.css /script src/static/scripts/modernizr-2.6.2.js/script
/headbodyh2{{strz|dformat}}/h2div classcontainer body-content{% block content %}{% endblock %}hr /footerpcopy; {{ year }} - My Flask Application/p/footer/divscript src/static/scripts/jquery-1.10.2.js/scriptscript src/static/scripts/bootstrap.js/scriptscript src/static/scripts/respond.js/script{% block scripts %}{% endblock %}/body
/html
test3.html
!DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf8 /meta nameviewport contentwidthdevice-width, initial-scale1.0title{{ title }} - My Flask Application/titlelink relstylesheet typetext/css href/static/content/bootstrap.min.css /link relstylesheet typetext/css href/static/content/site.css /script src/static/scripts/modernizr-2.6.2.js/script
/headbody{%if age18 %}p鏈弧18宀侊紝鍙互鍘荤綉鍚т簡/p{% else %}p宸叉弧18宀侊紝涓嶅彲浠ュ幓缃戝惂/p{% endif %}div classcontainer body-content{% block content %}{% endblock %}hr /footerpcopy; {{ year }} - My Flask Application/p/footer/divscript src/static/scripts/jquery-1.10.2.js/scriptscript src/static/scripts/bootstrap.js/scriptscript src/static/scripts/respond.js/script{% block scripts %}{% endblock %}/body
/html
同样我们也可以传输我们的对象给前端 app.route(/person)
def person():pPerson(zhangsan,78)return render_template(test.html,personp) 下面做一个小插曲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,strzs) 2、实现静态图片插入和图书上传
1静态图片插入这部分内容其实比较简单哈 看一下代码 img src{{url_for(static,filenameimage/6.png)}}完整代码如下
{% extends layout.html %}{% block content %}h2{{ title }}./h2
h3{{ message }}/h3img src{{url_for(static,filenameimage/6.png)}}
pUse this area to provide additional information./paddressOne Microsoft Waybr /Redmond, WA 98052-6399br /abbr titlePhoneP:/abbr425.555.0100
/addressaddressstrongSupport:/strong a hrefmailto:Supportexample.comSupportexample.com/abr /strongMarketing:/strong a hrefmailto:Marketingexample.comMarketingexample.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 rFlaskWebLearning/static/image/file_path pathimg.filenameimg.save(file_path)print(上传头像成功上传的用户是username)return render_template(index.html)注意先进入/index路由会显示图片上传界面
3、实现搭建的网站局域网共享
这里比简单
只需要在app.run()的时候传入host‘0.0.0.0’那么你搭建的网站链接局域网的就都可以访问了。 #codinggbk
from os import environfrom FlaskWebLearning import appif __name__ __main__:HOST 222.19.67.89try:PORT int(environ.get(SERVER_PORT, 5555))except ValueError:PORT 5555app.run(host0.0.0.0,port5555)
4、实现html模板继承
模板继承
{% extends layout.html %}{% extends layout.html %}{% block content %}h2{{ title }}./h2
h3{{ message }}/h3img src{{url_for(static,filenameimage/6.png)}}
pUse this area to provide additional information./paddressOne Microsoft Waybr /Redmond, WA 98052-6399br /abbr titlePhoneP:/abbr425.555.0100
/addressaddressstrongSupport:/strong a hrefmailto:Supportexample.comSupportexample.com/abr /strongMarketing:/strong a hrefmailto:Marketingexample.comMarketingexample.com/a
/address{% endblock %}
这就是模板继承的代码会把layout.html先加载那么还有模板补充 {% block content %} {% endblock %}之间的内容会被补充道layout.html网页里补充的地方就在 对应的{% block content %} {% endblock %}之间
5、实现javascript 、css渲染
这个代码比较简单
headmeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0title{{ title }} - My Flask Application/titlelink relstylesheet typetext/css href/static/content/bootstrap.min.css /link relstylesheet typetext/css href/static/content/site.css /script src/static/scripts/modernizr-2.6.2.js/script
/head6、连接数据库创建模型实现自动建表
链接数据库
pymysql.install_as_MySQLdb()# 设置数据库连接地址
app.config[SQLALCHEMY_DATABASE_URI] mysql://root:密码127.0.0.1:3306/数据库名?charsetutf8
# 是否追踪数据库修改(开启后会触发一些钩子函数) 一般不开启, 会影响性能
app.config[SQLALCHEMY_TRACK_MODIFICATIONS] False
# 是否显示底层执行的SQL语句
app.config[SQLALCHEMY_ECHO] Truedb SQLAlchemy(app)
创建模型
#ORM对象关系映射class User(db.Model):__tablename__useriddb.Column(db.Integer,primary_keyTrue,autoincrementTrue)usernamedb.Column(db.String(100))passworddb.Column(db.String(100))# articlesdb.relationship(Article,back_populatesauthor)class Article(db.Model):__tablename__articleiddb.Column(db.Integer,primary_keyTrue,autoincrementTrue)titledb.Column(db.String(200),nullableFalse)contentdb.Column(db.Text,nullableFalse)author_iddb.Column(db.Integer,db.ForeignKey(user.id))authordb.relationship(User,backrefarticles)
实现自动建表
#userUser(username张三,password123456)with app.app_context():db.create_all()7、实现对数据库表的增删改查
数据库增加表数据:
app.route(/user/add)
def add_user():user1User(username张三,password123456)user2User(username李四,password123456)user3User(username王五,password123456)db.session.add(user1)db.session.add(user2)db.session.add(user3)db.session.commit()return 用户数据导入成功
数据库删除表数据: app.route(/user/delete)
def delete_user():user1db.query.get(1)#根据主键查找print(user1)db.session.delete(user1)db.session.commit()return 数据删除成功
数据库修改表数据:
app.route(/user/update)
def updatae_user():usersUser.query.filter_by(username李四)#根据主键查找for user in users:user.password222222# db.session.delete(user1)db.session.commit()return 数据更新成功
数据库查询表数据:
app.route(/user/query)
def query_user():user1User.query.get(1)#根据主键查找print(user1)usersUser.query.filter_by(username李四)#根据主键查找print(users)usersUser.query.all()#根据主键查找sfor i in users:print(i.username,i.password)ssi.username i.password\ndb.session.commit()return s8、实现按钮与函数交互
最后呢我们做一个按钮和函数交互的操作并实现数据库的数据增加
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)user1User(usernameusername1,passwordpassword1)db.session.add(user1)db.session.commit()return 数据导入成功return hello
{% extends layout.html %}{% block content %}form action{{ url_for(form) }} methodpostlabel forusernameUsername/labelbrinput typetext nameusername placeholderHéctor Riverabrlabel forpasswordPassword/labelbrinput typepassword namepassword placeholder19001130brinput typesubmit namesubmit valueLog in
/forma hrefhttps://bilibili.com网址直接跳转/a
a href/link链接跳转/a!--a hrefimages/1.webp相对路径跳转/a网址直接跳转/a--addressOne Microsoft Waybr /Redmond, WA 98052-6399br /abbr titlePhoneP:/abbr425.555.0100/addressaddressstrongSupport:/strong a hrefmailto:Supportexample.comSupportexample.com/abr /strongMarketing:/strong a hrefmailto:Marketingexample.comMarketingexample.com/a/address{% endblock %}
首先进入page路由 然后输入数据
点击log in: 刚才输入的数据就会被导入数据库。
