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

Posted 2020-08-29

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