网站的外观往往是决定第一印象的关键,优美雅观的界面才能最大程度留下访问网站的人,所以这一篇我们就开始讲一讲网站的前端与flask的实际操作,本文主要讲的是前端框架与模板继承,让我们开始学习吧!

一、前端框架

frog.py

@app.route('/')
def index():
    return '<h1>hello,world!</h1>'

当用户打开你的网站访问,出现一个这样的页面显然过于简单了,对于网站来说也不利于留住用户,我们需要让网站变得更加地“漂亮”,所以css样式应运而生,不过我们现在正在学习的是后端框架,重头写样式显得太过麻烦,当然如果你对于自己写样式非常有兴趣,我也是非常支持的,但是为了更加方便我就使用前端UI框架啦。

现在网上的前端框架有非常多,比如Bootstrap、Foundation、Uikit等等都是非常不错的,不过今天我跟大家推荐一个国人写的前端框架叫做MDUI,是按照谷歌Material Design规范设计的一套前端框架,我的另一个项目Meow的前端UI框架就是使用MDUI的,这是他们的官网地址https://www.mdui.org/,可以去读一下他们的文档,写得挺清晰的,我们接下来就使用MDUI来作为Frog的前端框架啦!

二、模板使用基础

1、渲染模板

<h1>hello Felix</h1>这么短的html代码写在py文件还好,后面代码量上来了还放在py文件里显然就是不太现实,所以使用模板就尤为重要了,flask实现了一个基于Jinja模板引擎的函数render_template,它允许我们使用模板来生成返回给用户的界面,我们来看看如何实现吧!

首先在Frog中添加一个templates文件夹

Frog/
 |
 |-venv/
 |-frog.py
 |-templates/

这个templates文件夹就是用来存放模板的地方,我们也可以多添加一个static文件夹,用于存放类似图片、样式表之类的静态文件。

Frog/
 |
 |-venv/
 |-frog.py
 |-templates/
 |-static/

接下来我们为主页写一个好看的界面并放在templates文件夹中

templates/index.html

<html>
    <head>
        <title>Frog</title>
        <link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
        <script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"> var SS=mdui.JQ;</script>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body class='mdui-theme-primary-light-green'>
        <div class="mdui-toolbar mdui-color-theme">
            <a href='/' class='mdui-typo-headline mdui-text-color-white' style='font-weight:bold'>Frog</a>
        </div>
        <div class='mdui-container'>
            <h1>hello world!</h1>
        </div>
    </body>
</html>

frog.py

from flask import render_template

@app.route('/')
def index():
    return render_template('index.html')

然后我们打开浏览器再看看

模板也支持传入参数,只需作为参数传入render_template函数中,在模板使用变量名调用即可,写法为双大括号包裹,让我们来看看如何操作

写一个hello.html文件放入templates文件夹

templates/hello.html

<html>
    <head>
        <title>Frog</title>
        <link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
        <script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"> var SS=mdui.JQ;</script>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body class='mdui-theme-primary-light-green'>
        <div class="mdui-toolbar mdui-color-theme">
            <a href='/' class='mdui-typo-headline mdui-text-color-white' style='font-weight:bold'>Frog</a>
        </div>
        <div class='mdui-container'>
            <h1>hello {{ user }}!</h1>
        </div>
    </body>
</html>

frog.py

@app.route('/hello/<user>')
def hello(user):
    return render_template('hello.html',user=user)

2、模板继承

通过观察上面可以发现两个模板大部分地方都是相同的,就是几个字不同,这样很多空间就被白白浪费,而且过于复杂也不利于修改,所以模板继承就非常重要了,Jinja支持模板继承,这样我们就可以写更少的代码也实现同样的效果,让我们看看怎么写吧

写一个base.html

templates/base.html

<html>
    <head>
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
        <script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"> var SS=mdui.JQ;</script>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body class='mdui-theme-primary-light-green'>
        <div class="mdui-toolbar mdui-color-theme">
            <a href='/' class='mdui-typo-headline mdui-text-color-white' style='font-weight:bold'>Frog</a>
        </div>
        <div class='mdui-container'>
            {% block content %}{% endblock %}
        </div>
    </body>
</html>

然后再重写一下index.html和hello.html文件

templates/index.html

{% extends 'base.html' %}

{% block title %}Frog{% endblock %}

{% block content %}<h1>hello world!</h1>{% endblock %}

templates/hello.html

{% extends 'base.html' %}

{% block title %}{{ user }}-Frog{% endblock %}

{% block content %}<h1>hello {{ user }}!</h1>{% endblock %}

我们来看看效果

我们在base.html中设置{% block name %}{% endblock %}之类的区块,在需要继承base.html的文件中声明

{% extends 'base.html' %}

并在区块中填入内容以达到复用模板的效果,需要注意一点就是在子模板中区块内容是会覆盖父模板区块的内容的,若想不覆盖可以这样写:

{% block content %}
{{ super() }}
<h1>hello world!</h1>
{% endblock %}

目前项目目录一览

Frog/
 |
 |-venv/
 |-frog.py
 |-templates/
     |-base.html
     |-index.html
     |-hello.html
 |-static/

因为flask模板这部分东西比较多,我就分成一篇篇来写,所以这一篇先写到这里,下一篇也是继续讲flask模板的。任何疑问欢迎留言交流,有不对的地方也欢迎大家多多指正,我们下篇再见!
点击这里进入下一篇。

当前Frog项目仓库地址:http://codemole.cn/felix/Frog/src/frog3.1

评论

  • 最新随笔

  • 对我来说,写东西很好的一点是,自己写的东西,后面基本都会再看,一遍或者很多遍。这样就可以很好地发现自己之前的漏洞,并看看现在有什么变化。
  • 前段时间应该是百度更新了页面结构,那个黑帽泛目录网站我也没有去更新代码,就导致了文章页没有相关推荐,没想到这时候谷歌开始收录了,而且效果还不错。其实之前在谷歌一直不收录的时候就有怀疑过没有尽头的相关推荐很可能是导致不收录的原因,不过也一直没有去管它,而这次误打误撞的收录也恰恰证实了这个想法。(btw,其实这个网站从出现固定链接开始叫泛目录应该不太准确)
  • 最近吉他谱网站iloveguitar上线了,这几天在填充一些内容花了一些时间,这个网站也是使用flask作为后端框架的,前端UI框架使用的是bootstrap4,喜欢吉他的小伙伴欢迎来这里逛一逛哟,有什么建议欢迎在留言板提一下哟。
  • 那个泛目录网站发布了几个星期了,百度没怎么来爬,收了一个首页,谷歌直接就不收了,倒是一个查外链的网站天天来爬(笑哭),还有建议一点就是泛目录还是用在有建站历史的域名比较好(因为已经过了审核期),新域名就尽量不要用了。
  • 刚刚又发了一篇,最近文章百度都不太收录,orz,哈哈
  • 之前那个用python做的静态资源服务器,我又发现了一大用处,现在我都用来在局域网里的不同电脑之间传输文件,真的好用哈哈
  • 今天交换到了博客有史以来第一条友情链接
  • 刚刚更新了一下博客,修复了一些bug,添加了一个项目页