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

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()