创意电子

标题: python的web服务器:flask+boostrap 实现网站框架,源码分享 [打印本页]

作者: 小辉算个球    时间: 2018-2-5 00:07
标题: python的web服务器:flask+boostrap 实现网站框架,源码分享
先先容一下flask中必须的两个功能。
模板渲染

用python生成html十分无趣,而且相当繁琐,由于你必须手动对html做转义来保证应用的安全。为此,flask配备了Jinja2模板引擎。
你可以利用render_template()方法来渲染模板。你必要做的统统就是将模板名和你想作为关键字的参数传入模板的变量。举例如下:
起首在你的代码中添加from flask import render_template
然后再添加如下函数

                               
登录/注册后可看大图

flask会在templates文件夹中探求模板,所以如果你的应用是个模块,那templates文件夹应该与模块同级;如果它是一个包,那这个templates文件夹作为包的子目录。
我们再看一下hello.html文件的内容

                               
登录/注册后可看大图

然后运行你的app,并用浏览器访问/hello大概/hello/username的网址,应该都能获得相应的页面。这里就不多说了。
在模板里,你也可以访问request,session和g对象,以及get_flashed_messages()函数。
静态文件

动态web应用也会必要静态文件,通常是CSS和js文件。理想状况下,你已经配置好web服务器来提供静态文件,但是在开发中,flask也可以做到。只要在你的包中大概模块所在的目录中创建一个名为static的文件夹,在应用中利用/static即可访问。
给静态文件生成URL,利用特别的‘static’端点名:
url_for('static',filename='style.css')
这个文件应该存储在文件体系上的static/style.css
bootstrap应用

好了,学到这里,我们就可以利用bootstrap前端来实现一个网站的基本框架了。
1.起首去bootstrap网站下载一个前端的例子
网站列出了许多例子,小编选择了末了一个,Carousel jumbotron。打开这个例子的链接 http://getbootstrap.com/2.3.2/examples/carousel.html ,小编要做的就是在本身的网站上实现同样的网页。用如下命令可以下载网页的全部内容。
sudo wget -r http://getbootstrap.com/2.3.2/examples/carousel.html
下载完成后进入路径getbootstrap.com/2.3.2,你应该能看到两个文件夹assets和examples. assets里面全是静态文件,examples里面只有一个carousel.html文件,我把这个文件改成index.html文件了。
2.起首创建一个简单的应用
着实小编也没有创建新的应用,就是利用了hello.py,在hello.py里面添加了如下代码:

                               
登录/注册后可看大图

3.把bootstrap文件放入flask工程
这里只有两个步骤,把index.html文件放入templates文件夹中,把assets里面的内容放入static文件夹。templates和static文件夹如果不存在,请自行创建。
4.修改index.html文件
由于静态文件的路径改变了,因此必要在index.html中修改引用静态文件的路径。修改方法都是一致的,例如"../assets/css/bootstrap.css" 修改为"static/css/bootstrap.css".
最终体现效果如下:

                               
登录/注册后可看大图

源代码分享

私信我,内容为"bootstrap",体系会自动回复链接哦。
作者: 小辉算个球    时间: 2018-2-5 00:30
bootstrap的页面不错,出自twitter之手,效果果然前卫。
作者: 广东陈百祥    时间: 2018-2-5 00:35
没看到自动回复
作者: 大大小小的家    时间: 2018-2-5 01:13
收到,谢谢
作者: 新乡北斗    时间: 2018-2-5 06:52
不是flask-bootstrap吗?
作者: 释永信的师父    时间: 2018-12-7 22:57
转发了
作者: 魅帝180373496    时间: 2018-12-15 17:10
这个简单 但是前后台数据交换我代码没问题 但总是报404 烦的人快疯了 下一期可以出个这个嘛 ?




欢迎光临 创意电子 (https://www.wxcydz.cc/) Powered by Discuz! X3.4