网站的外观往往是决定第一印象的关键,优美雅观的界面才能最大程度留下访问网站的人,所以这一篇我们就开始讲一讲网站的前端与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

评论

  • 最新随笔

  • 尝试让DALLE生成一些连续的精灵图,让gpt帮忙生成一些提示词,如果能稳定输出的话就很强大了。
    让gpt帮忙生成的DALLE提示词
    "Generate a pixel art sprite sheet of a character walking in four directions (north, south, east, west) in a retro video game style."
    "Create a series of pixel art frames showing a character performing different actions like walking, running, jumping, and attacking in a classic 2D game aesthetic."
  • 路过别人山庄的门口,被一条大黑狗边叫边追过来,幸好骑电动车,不然还不一定跑得过,哈哈哈哈哈哈哈哈哈哈。
  • 最近两周也没咋出去玩,主要也是觉得没啥好玩的(笑哭)。看完布莱恩阿瑟的《复杂经济学》后,里面那个酒吧问题勾起我的兴趣,最近空了就花了些时间实现个python版本,顺便搞了篇博文,很享受这种新知识能和已有知识碰撞的感觉。(配张前段时间拍的图片,梧桐山门口前面那条路,挺漂亮的)
  • 盐田港夜景
  • 为啥这猫总喜欢喝杯子里的水
  • 确实开始冷了,在树林里至少要比人类聚集区低个几度,进出入口就能很明显感觉到。看看深圳水库的风景,貌似后面的视野更开阔。
  • 给随笔加了多图的功能,传一传周末拍的风景图,漫无目的的逛也挺好玩的。
  • 逻辑自洽是一套体系的根基,最根本的因素,最吸引人的地方