Flask+Bootstrap实战一
项目教程地址：
Youtobe源地址:Bootstrap Flask
Bilibili搬运:哔哩哔哩
新建一个HELLO WORLD
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return "hello world"
if __name__ == '__main__':
app.run(debug=True)
使用render_template
使用render_template的作用就是路由函数一次性返回过大的模块，而在templates文件夹下进行操作
<html>
<head>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
运行结果如下
在index.html中传参数是通过这种方式进行的<p>{{title}}</p>
利用if和循环语句控制templates渲染
html中的if语句可以着么写
<head>
{% if title %}
<title>{{title}}</title>
{% else %}
<title> home </title>
{% endif %}
</head>
如果是要写一个for循环的话
这里注意，如果是写成{}花括号，在模板进行渲染的时候顺序就会变乱
paragraphs = [
"section 1",
"section 2",
"section 3"
]
return render_template("index.html", data = paragraphs)
index模板如下
<body>
<h1>hello world</h1>
{% for i in data %}
<p>{{ i }}</p>
{% endfor %}
</body>
模板的继承和引用
模板继承
在网页的设计开发中，往往是好多个页面共用某些个元素，但是没有必要把他们都copy，所以这时候就需要用到模板的继承了，这里也是分了父模板和子模板。
父模板往往用base.html来表示，子模版这里还是用index.html。模板的继承部分用extends关键字表示，还可以用block进行具体的修改，下面是在父模板中的部分
<body>
<h3><a href="/">Flask App</a></h3>
<hr>
{% block content %}
{% endblock %}
</body>
在子模板中，写成这样，将原先的title文字渲染出来，注意这里是endblock中间没有空格
{% extends "base.html" %}
{% block content %}
<p>{{ title }}</p>
{% endblock %}
最后的显示结果如下
模板引用
这个就是比如一个模块需要很多次引用，就可以给他单独新建一个html文件，然后使用include关键字进行引用
这里新建一个navbar.html文件，之后原先在这里的内容更换一下
<body>
{% include "navbar.html" %}
{% block content %}
{% endblock %}
</body>
就可以单独在navbar.html文件当中进行修改了
利用Flaks-bootstrap来优化布局
需要pip安装flask-bootstrap，因为它不支持bootstrap4，所以在用的都是bootstrap3。
如何使用flask-bootstrap的组件库
首先，导入官方文档的实例程序，修改我们的base.html文件
{% extends "bootstrap/base.html" %}
{% block title %}This is an example page{% endblock %}
{% block navbar %}
<div class="navbar navbar-fixed-top">
<!-- ... -->
</div>
{% endblock %}
{% block content %}
<h1>Hello, Bootstrap</h1>
{% endblock %}
我们把navbar部分的程序修改为include自己的navbar.html即可
之后，我们修改index.html文件
{% extends "base.html" %}
{% block content %}
<h1>Hello Flask-Bootstrap</h1>
{% endblock %}
对于navbar.html文件也可以进行适当的修改
浙公网安备 33010602011771号