用python flask搭建一个网站[二]——使用bootstrap模板

来源：互联网发布：ipadhd软件编辑：程序博客网时间：2024/06/19 03:01

经过上一篇的学习，网站有了基本的框架结构。可是只返回这种字符串如何能行，基本的HTML文件还是需要的。

果然，下一个例子通过一个叫render_template方法，调用了HTML文件。

from flask import Flask, render_template# ...@app.route('/index')def index():    return render_template('index.html')@app.route('/user/<name>')def user(name):    return render_template('user.html', name=name)

嗯，看起来只需要修改对应的2个方法，把之前返回字符串改为使用render_template，把HTML和需要用到的参数传递给他就OK。

不过HTML文件是放在哪里呢？

checkout对应的版本后，发现是在一个叫templates的文件夹下。(这个文件夹名称很重要，不能更改或者添加，否则就无法找到HTML文件了。千万记住也别少了最后的s)

观察这里的HTML文件，好像和字符串一致。从最后的观察效果上看，是没有区别的。愿意修改的同学可以尝试修改一下HTML看看不同的效果。

再往下看，好像代码中引入了一个叫bootstrap的东西，虽然不理解是神马，但还是跟着做。

首先安装flask-bootstrap: pip install flask-bootstrap

然后添加代码

from flask.ext.bootstrap import Bootstrap

在原代码

manager = Manager(app)

下面添加

bootstrap = Bootstrap(app)

OK，代码修改完成。

可是看后面对HTML已经修改的面目全非。

实在是搞不懂情况。只好checkout对应的版本，运行一下看看效果

顿时感觉有了网页的雏形。

再仔细看一下对应的代码

第一行

{% extends "bootstrap/base.html" %}

好像是引用了bootstrap下的base.html，去bootstrap安装文件夹下查看，的确有这么一个文件。

打开看，和我之前见过的HTML不太一样，都是一堆{%- block xxx %} {%- endblock xxx %}。再去看工程里面的HTML，也是一堆{% block navbar %} {% endblock %}

对于我这种网络小白来说，这些都不明白。好吧，继续往下。

下一个例子添加了2个方法，是专门处理返回状态错误的情况，一个是404，一个是500。

@app.errorhandler(404)def page_not_found(e):    return render_template('404.html'), 404@app.errorhandler(500)def internal_server_error(e):    return render_template('500.html'), 500

然后又是针对HTML的修改。看得我头大，再checkout对应的版本。发现这次在templates下多了一个base.html，里面定义的东西和上个版本的user.html很像。而这个版本的user.html却异常的简洁

{% extends "base.html" %}{% block title %}Flasky{% endblock %}{% block page_content %}<div class="page-header">    <h1>Hello, {{ name }}!</h1></div>{% endblock %}

嗯，根据之前的理解，好像是调用了那个多出来的base.html，然后定义了一个title，定义了page_content。

再对比404.html

{% extends "base.html" %}{% block title %}Flasky - Page Not Found{% endblock %}{% block page_content %}<div class="page-header">    <h1>Not Found</h1></div>{% endblock %}

也是类似。只不过对应的内容不同。再看看效果

嗯，看来是修改了网页内容和网页的名称。

这时候再用浏览器自带的inspect element看一下，就明白了，其他就是类似定义HTML的变量。最基本的模型是bootstrap下的base.html，工程下面的base.html只是针对这个工程的一些修改。最后的404.html，user.html又是在工程下的base.html基础上完成网页内容。这样就能做到代码复用了。

其实学到现在我就已经跃跃欲试了，因为再怎么看别人的代码也无法完全掌握，不动手是不行的。

后记：

后来我曾尝试过不使用flask-bootstrap，直接使用bootstrap的代码来进行网页开发，其实也是可以的。

只需要把bootstrap的代码放到工程目录下，然后在html中把相应的css和js的路径设置正确就OK

0 0