Flask---使用Bootstrap新建第一个demo

参考自http://www.jianshu.com/p/417bcbad82fb

还有《Flask web开发》

前端用到Bootstrap开源框架,Bootstrap是客户端框架,后台当然就是Flask了。

服务器需要做的只是提供引用了Bootstrap层叠样式表(CSS)和JS文件的html响应,并且在html、css和js代码中实例化需要的组件,这些操作的最理想的执行环境就是模板

关于模板的介绍及其实现原理:https://kb.cnblogs.com/page/109638/

https://segmentfault.com/a/1190000006990480

安装Bootstrap包

pip install flask-bootstrap

创建test1.py

#coding:utf-8
from flask import Flask,render_template
#from flask.ext.bootstrap import Bootstrap #专为Flask开发发拓展都暴露在flask.ext命名空间下,Flask-Bootstrap输出一个Bootstrap类
from flask_bootstrap import Bootstrap
app=Flask(__name__)
bootstrap=Bootstrap(app)#Flask扩展一般都在创建实例时初始化,这行代码是Flask-Bootstrap的初始化方法
@app.route('/')
def index():
return render_template('index.html')
if __name__=="__main__":
app.run(debug=True)
创建templates模板文件夹在该文件夹下创建base.html


{% extends "bootstrap/base.html" %} <!-- base.html模板继承自bootstrap/base.html -->
{% block title %}Flask{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-taget=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<sapn class="icon-bar"></sapn>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar=collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="/">Home</a>
</li>
</ul>
</div>
</div>
</div>
{% endblock %}

{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}


<!--title、navbar、content都是bootstrap/base.html中定义的块。navbar是显示导航栏,其中的代码比较多,作用是添加Flasky和Home两个链接-->
<!--以后的html页面直接继承base.html就可以了-->


在templates下再创建index.html

{% extends "base.html" %}
{% block title %}首页{% endblock %}
{% block page_content %}
<h2>这里是首页,welcome</h2>

Technorati Tags: flask

{% endblock %}

运行:

项目的结构:

一个比较好的结构参考:

$ tree app
app
├── blog.py
├── build
│   ├── index.html
│   └── pages
│   ├── hello-world
│   │   └── index.html
│   └── test-flatpages
│   └── index.html
├── pages
│   ├── hello-world.md
│   └── test-flatpages.md
├── static
└── templates
├── base.html
├── index.html
└── page.html
 

Flask的开发web服务器支持很多的启动设置选项,但只能在脚本中作为参数传递给app.run()函数。Flask-Script扩展提供向Flask插入外部脚本的功能。包括运行一个开发用的服务器,一个定制的 Python shell,设置数据库的脚本,cronjobs,以及其他的运行在web应用之外的命令行任务。关于Flask-Script扩展包的介绍:http://blog.csdn.net/twc829/article/details/52154214还有文档的中文翻译:

https://my.oschina.net/lijsf/blog/158828

安装包:

pip install Flask-Script

或者下载最新开发版本:

git clone https://github.com/techniq/flask-script.git
cd flask-script
python setup.py develop
如果你使用virtualenv,需保证把Flask-Script和你的Flask应用安装在同一virtualenv环境下。

然后我们修改一下前面的那个py文件#coding:utf-8
from flask import Flask,render_template
#from flask.ext.bootstrap import Bootstrap #专为Flask开发发拓展都暴露在flask.ext命名空间下,Flask-Bootstrap输出一个Bootstrap类
from flask_bootstrap import Bootstrap
from flask_script import Manager
app=Flask(__name__)
#bootstrap=Bootstrap(app)#Flask扩展一般都在创建实例时初始化,这行代码是Flask-Bootstrap的初始化方法
manager=Manager(app)
@app.route('/')
def index():
return render_template('index.html')
if __name__=="__main__":
#app.run(debug=True)
manager.run()

 

Flask---使用Bootstrap新建第一个demo的更多相关文章

  1. Angular2 不明真相第一个Demo例子

    如果不是去年换工作接触到AngularJS,估计是不会花时间去学习这个框架的,毕竟是前端的框架,不是自己熟悉的领域.但是为了混得下去,去年就学习了AngularJS的一些用法,当时还整理了一些积累 & ...

  2. 在VS中实现webService的一个demo(图解)

    在VS中实现webService的一个demo(图解) 先创建一个web项目,创建好web项目后,添加新建项——web服务 在新建好的web服务文件中写如下代码: 生成当前解决方案. 新建一个winf ...

  3. [置顶] 一个demo学会c#

    学习了c#4.5高级编程这本书,自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的c#编程知识.让你一个demo掌握c#编程,如果有问题可以留言. 此demo主要包括五个文件:Stude ...

  4. Android Studio精彩案例(六)《使用一个Demo涵盖补间动画所有知识》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 元旦假期里,闲的无事,看到美团加载数据的动画,就突想写个Demo把动画知识集成一下.后来想了想,还是直接用一个Demo来把所有动画知识 ...

  5. 文档/视图(01):第一个Demo

    学习文档视图编程的第一个demo,程序比较简单,主要对文档模板,文档,视图等相互关系的一个了解. 功能:菜单添加一个[操作]项,然后新建四份空白文档,点击[操作]之后,在四份空白文档上面各绘制一个Bu ...

  6. 一、OPENERP 的一个demo

    安装好OPENERP后,使用 ps -aux|grep openerp 从输出的内容可以得到OPENERP的安装信息, /usr/bin/python /usr/bin/openerp-server ...

  7. 「小程序JAVA实战」 小程序手写属于自己的第一个demo(六)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-06/ 自己尝试的写一个小demo,用到自定义样式,自定义底部导航,页面之间的跳转等小功能.官方文档 ...

  8. Android中Service的一个Demo例子

    Android中Service的一个Demo例子  Service组件是Android系统重要的一部分,网上看了代码,很简单,但要想熟练使用还是需要Coding.  本文,主要贴代码,不对Servic ...

  9. 一个Demo让你掌握Android所有控件

    原文:一个Demo让你掌握Android所有控件 本文是转载收藏,侵删,出处:"安卓巴士"      下面给出实现各个组件的源代码: 1.下拉框实现--Spinner packag ...

随机推荐

  1. 软件图书,偏.net方向

    深入理解计算机系统(原书第2版) 作者:Randal E.Bryant:1981年在麻省理工学院获计算机科学博士学位,现任美国卡内基·梅隆大学计算机学院院长 内容: 深入浅出地介绍了处理器.编译器.操 ...

  2. 常用IDE插件

    Visual Studio 常用 Refactoring Essentials:代码重构分析 Roslynator:代码重构 CodeMaid:代码格式化 Github Extension for V ...

  3. Hibernate(九)

    三套查询之SQL查询 Native Sql Query原生的sql查询.要求写sql语句.SQLQuery 是 Query的子类 1.查询所有的学生 //1.查询所有的学生 @Test public ...

  4. String、Date、Calendar之间的转换

    1.String.Date.Calendar之间的转换 要用到格式化类SimpleDateFormat package com.rong.se; import java.text.ParseExcep ...

  5. js实现轮播功能

    先上图,效果大概就是这样子: 实现的功能: 1.鼠标经过第几个正方形,就要展示第几张图片,并且正方形的颜色也发生变化 2.图片自动轮播,(这需要一个定时器) 3.鼠标经过图片,图片停止自动播放(这需要 ...

  6. 成功解决JSP和Servlet的中文乱码问题

    表单提交时出现乱码: 在进行表单提交的时候,经常提交一些中文,自然就避免不了出现中文乱码的情况,对于表单来说有两种提交方式:get和post提交方式.所以请求的时候便有get请求和post请求.以前我 ...

  7. Post/Redirect/Get

    参考地址:https://www.cnblogs.com/TonyYPZhang/p/5424201.html 参考资料:Flask Web开发:基于Python的Web应用开发实战 Post/Red ...

  8. 第181天:HTML5——视频、音频

    一.HTML5新增的video.source标签 <video width="320" height="240" controls="contr ...

  9. 第103天:CSS3中Flex布局(伸缩布局)详解

    一.Flex布局 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行 ...

  10. SQL Server Management Studio(SSMS)的使用与配置整理

    目录 目录 SQL Server Management Studio的使用与配置 1 设置SSMS显示行号 2 添加注释与取消注释的快捷键 3 新建查询的快捷键 4 开启sql语句TIME与IO的统计 ...