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

经过上一篇的学习,网站有了基本的框架结构。可是只返回这种字符串如何能行,基本的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


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭