Flask入门系列教程_第1页
Flask入门系列教程_第2页
Flask入门系列教程_第3页
Flask入门系列教程_第4页
Flask入门系列教程_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

在通常的Web程序中，访问一个URL地址，一般都会返回一个HTML贝面，而我们的数据就是嵌套在这些HTML代码当中的，再辅以JavaScript和CSS等,就组成了一个完整的前端页面了。当然，对于Flask来说，它所包含的HTML页面还会包含一些变量和逻辑运算等代码，这些组合到一起就是模板。执行这些变量替换和逻辑计算工作的过程被称为渲染，这个工作山Flask自带的模板渲染引擎一一Jinja2来完成。按照默认的设置，Flask会从程序实例所在模块同级U录的templates文件夹中寻找模板，所以我们可以在app.py文件的同级日录下创建一个templates文件夹，用来存储模板文件。下面我们先来简单熟悉下Flask模板的用法模板基本语法我们先来看一段例子，下面是HTML代码中嵌套了Jinja2的控制语法<hl>({username}}的Web网站(%ifauth%}<p>({admin|}</p>(%else%}vp>陌生人</p>(%endif%|{#大部分Jinja语句都需要声明关闭#}模板基本的三种定界符({...})用来标记变量。比如在上例中就可以渲染出usenKime所对应的具体数舍甫{% %}用来标记语句，比如if语句pfor语句等。例子中的if..・else…语句就是简单的判断{札・.甜用来写注释。在Jinjn2中允许我们使用大部分Python对象，比如字符吊、列表、字典、元组、整型、浮点型、布尔值。它支持基本的运算符号(+、/等)、比较符号(比如二、！二等)、逻辑符号(and、or、not和括号)以及in、is、None和布尔值(True、False)°渲染模板我们一般使用Flask提供的渲染函数render_teinplate()来渲染模板fromflaskimportrender_template@app-routeC/tesf)deftest():name='admin'returnrender_template{*test.html\user=naine)render_teinplate函数第一个参数为模板文件名，一般会在templatesU录下寻找。还可以以关键字参数的形式传入变量到模板，这样在模板中就可以使用user这个变量了，其变量值为，adinin\下面我们就把上一节中在视图函数中书写的HTML代码整理到对应的模板中整理模板对于needLogin1页面，我们原来的视图函数是@app-routeC/needloginI/')defneedLogin1():if'loginlD'insession:return'<hl>HelIo,needLoginl!<Zhl>*else:return<h1>Login</h1><ahref=〃％s〃〉GoToLogin</a>〃〃〃％url_forClogin\next=request.url)我们可以分别在templates创建两个文件》hello.htinl和needlogin.htinl对于hello.html文件<!DOCTYPEhtinl><htmllang='*en〃><head><metacharset=〃UTF-8*'><title>MyWeb</title></head><body><hI>Hello,((user}}!<Zhl></body></html>对于needlogin.htinl文件<!DOCTYPEhtmi><htmlIang='*en〃><head><metacharset=〃UTF-8〃><title>MyWeb</title></head><body><hI>Login</h1><ahref="((url_for(4ogin\next=request.url))f'>GoToLogin</a></body></html>接着我们再改写视图函数needLoginl@app.routeC/needloginI/')defneedLogin1():if'loginlD'insession:user='needLoginrreturnrender_template(*heno.htinl\user=user)else:returnrender_template{*needlogin.htinr)这部分代码可以榆出代码％来查看链接在上面needlogin.htinl文件中你应该发现了，对于href属性，我们使用了urLforO这个函数来获取URL链接，这是和前面讲解的视图函数中urLfor非常相似的。urLforO函数最简单的用法是以视图函数名作为参数，返回对应的URL。当然还是像例子中展示的那样，传递额外的参数到查询字符串中url_for('login\next二request.url)o变最与结构控制在前面我们简单实践了Flask模板的变量与结构控制的用法，下面我们来详细说明下它们的功能：变量在上面的例子中，我们使用了{{user}}表示一个变量，它是一种特殊的占位符，告诉模板引擎这个位置的值需要从渲染模板时使用的数据中获取。Jinja2可以识别很多复杂的变量类型，比如列表、字典，对象等。

vp>这是字典：{{inydict[*key']}}.</p><p>这是列表：{{mylist[3](}.</p><p>可变索引的列表：{{inylist[myindex](}.</p>vp>调用方法：vp>调用方法：{{inyobj.somemethodO}).</p>还可以使用一些过滤器，来修改变量，从而达到快速处理数据的效果。过滤器名添加在变量名之后，中间使用竖线分隔。({naineltitle}}#把变量name标题化一些常用的过滤器过滤器 说明safe渲染值时不转义capitalize首字母大写，其余字母小写lower转换成小写upper转换成大写trim去掉首尾空格escape转义HTML文本default设置默认值这里我们着重说一下safe过滤器，默认情况下，Jinja2会转义所有HTML标签，比如如果传<hl>f尔好</hl>会被渲染成yhi>你好此时浏览器就会把<hl>标签当作时一个普通字符来展示。而当我们需要把变量按照HTML代码来展示时，就可以使用safe过滤器({〃<hl>你好</hl>”lsafe)}控制结构我们常用的控制结构有两种，即for循环和if判断。下面是这两种控制结构的例子：#if判断(%ifuser%}Hello,{{user}}!(%else%}Hello,Stranger!{%endif%}#for循环(%foruserinusers%}<li>({user})<Zli>(%endfor%}模板继承模板的继承类似于Python中的继承，即我们可以把页面上的一些通用原始

编写到基模板中，然后其他子模版只需要编写对应页面特殊的代码即可，其他比如导航栏，页脚等内容可以放到基模板中编写。先来编写基模板，base.htinl<html><head>(%blockhead%}<title>(%blocktitle%((%endblock%}-MyWeb</title>(%endblock%}</head><body>(%blockbody%)(%endblock%}</body></html>在基模板中，我们用block来标记需要替换的部分，在上面的例子中我们定义了head、title和body块，那么子模版就可以任意修改这三块内容了。编写子模板，我们创建一个user.html模板(%extends〃bnse.html〃%}(%blocktitle%}User{%endblock%)(%blockhead%}({superO)1<slyle></style>(%endblock%}(%blockbody%}<hI>Hello,World!</hl>(%endblock%}使用extends来引入基模板，之后再重新定义3个block块。这里需要注意super的使用，如果在子模板中没有super，那么子模板会覆盖基模板中的内容，如果添加了super就是追加内容，即对应的block块中会包含基模板的内容。集成Bootstrap集成BootstrapBootstrap是Twitter开发一个开源框架，他有许多可用的界面组件，可以帮助我们快速的搭建前端页面。当然要集成Bootstrap框架，我们就需要对模板进行相关的改动，而这些完全可用交给插件Flask-Bootstrap来完成。pipinstallflask-bootstrap#安装插件在flask-bootstrap#安装插件在Raskdpp中初始化Rask-Bootstrapfromflask_bootstrapimportBootstrapbootstrap=Bootstrap(app)初始化Flask-Bootstrap之后，就可以在程序中使用一个包含所有Bootstrap文件的基模板。这个模板利用Jinja2的模板继承机制，让程序扩展一个具有基本页面结构的基模板。完善程序下面我们就把前面写的模板通过bootstrap来优化下，首先是基模板，包含通用的导航栏(%extends"bootstnipZbase.html”%}(%blocktitle%}MyWeb(%endblock%)(%blocknavbar%)

<divclass=''navbarnavbar-defaultnavbar-static-top"role=〃navigation〃><divclass='*container*'><divclass='*navbar-header〃><buttonclass='*navbar-toggle〃data-toggle=''collapse"data-target='\navbar-collapse”><spanclass="iconiconbar"></span>vspanclass="iconicon-bar*'></span><spanclass="iconicon-bar"></span></button><ahred"#"class=〃navbar-brand〃>He!IoFlask</a></div><divclass="collapsenavbar-collapse">href="#home"class=href="#home"class=〃smoothScroir'>"'href="#intro'*class="sinoothScron">网站间介</a></li>href="#team"class="sinoothScron">风格</a></li>href—二“portfolio"class="sinoothScroir*>作口口</a></li>href="#contact"cIass="sinoothScron">联系我们</a></Ii><li><a<li><a<li><a<li><a<li><a</ul></div></div></div>(%endblock%((%blockcontent%}<divclass=''container')(%blockpage_content%}(%endblock%}</div>(%endblock%}接下来我们在hello.html模板上继承该基模板，并查看效果(%extends"bnse.html"%}(%blocktitle%}MyWeb-Index(%endblock%}(%blockpage_content%}<divclass="header〃〉<hI>Hello,((user)}!</hl></div>(%endblock%}刷新页面，可以看到现在的页面如下Hello*ta3fcHello,needLoginI!添加FaviconFavicon是网站的特殊标记，可以展示在收藏夹、浏览器标签中的图标。现在我ffJ就为我们的网站添加一个FaviconO首先我们在templates文件夹的同级U录上创建一个static文件夹，然后在使用一些在线工具制作favicon.ico文件，并放置到该U录下。最后我们在HTML页面中声明Favicon的路径，在base.htinl模板中的标签中添加一个<head>(%blockhead%)({superO}1<metacharset="utf-8"><title>(%blocktitle%}MyWeb(%endblock%)</title><linkrei=''icon"type=〃image/x-icon"href='*({url_forCstatic',filename二Taviconjco')}}">(%endblock%}</head>消息闪现Flask还提供了一个非常有用的函数flashO.它可以在页面上闪现需要展示给用户的消息。它的工作原理就是把相关的信息存储在浏览器的session中，然后我们在模板中使用全局函数getflashedmessages()获取消息并将其显示出来。下面我们对登陆成功的用户闪现消息，先在登陆视图函数中添加flash@app-route(yiogin/')defloginO：session['loginID']='admin*target=request.args.get('ne

人人文库> 全部分类> 图纸下载 > 毕业设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论