Flask学习笔记--5

来源：互联网发布：java制作骰子编辑：程序博客网时间：2024/06/07 04:53

要学的东西太多了，进展太慢啦　

Version-7 :

Bootstrap网站里有一些网页模板，选择最简单的这个Starter Template for Bootstrap．网页是这样的：

这里写图片描述

（1）查看Starter Template for Bootstrap页面源代码，复制body标签中的内容到index.html 中，稍微修改几行代码.

index.html:

<!DOCTYPE html><html>    <head>        <title>FlaskApp</title>        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    </head>    <body>        <nav class="navbar navbar-default">      <div class="container">        <div class="navbar-header">          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">            <span class="sr-only">Toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>          <a class="navbar-brand" href="#">Flaskapp</a>        </div>        <div id="navbar" class="collapse navbar-collapse">          <ul class="nav navbar-nav">            <li class="active"><a href="/">Home</a></li>            <li><a href="/about">About</a></li>            <li><a href="/articles">Articles</a></li>          </ul>        </div><!--/.nav-collapse -->      </div>    </nav>    <div class="container">      <div class="jumbotron text-center">        <h1>FlaskApp</h1>        <p>A month ago,I followed the video course series "Python Flask From Scrach" (133 minutes) and finished this project in 5 days.<br> But when I dive into this project and want to understand the meanings bebind the code.Oh, gosh, I think I need 5 5-days.</p>      </div>    </div><!-- /.container -->          <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">        </script>    </body></html>

(2) 运行程序，在网页中查看修改后变化（变得和Starter template页面差不多啦）：

这里写图片描述

（3）注意上面index.html中代码太多了，看起来太乱了．
要Jinja2 文档中的语法和方法了：

Version-8：

(1)首先，建立一个layout.html文件，定义网页样式:
（nav标签太长了，新建一个_nav.html文件来存放nav标签，用jinja2的模板include方法调用 _nav.html中的内容）

注：
Portions of template code that need to be repeated in several places can be stored in a separate file and included from all the templates to avoid repetition.

摘自：Flask Web Development然后，layout.html变成了这样：

<!DOCTYPE html><html>    <head>        <title>FlaskApp</title>        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">    </head>    <body>        {% include 'includes/_navbar.html' %}        <div class="container">            {% block body%}{% endblock %}        </div>        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">        </script>    </body></html>

（2）刚才提到的_navbar.html 存放在Templates/includes中：

_navbar.html:

<nav class="navbar navbar-default">      <div class="container">        <div class="navbar-header">          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">            <span class="sr-only">Toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>          <a class="navbar-brand" href="#">Flaskapp</a>        </div>        <div id="navbar" class="collapse navbar-collapse">          <ul class="nav navbar-nav">            <li class="active"><a href="/">Home</a></li>            <li><a href="/about">About</a></li>            <li><a href="/articles">Articles</a></li>          </ul>        </div><!--/.nav-collapse -->      </div>    </nav>

（3）index.html就变得很简洁了：

{% extends 'layout.html'%}<div class="jumbotron text-center">    <h1>FlaskApp</h1>    <p>A month ago,I followed the video course series "Python Flask From Scrach" (133 minutes) and finished this project in 5 days.<br> But when I dive into this project and want to understand the meanings bebind the code.Oh, gosh, I think I need 5 5-days.</p></div>{% endblock %}

（4）整个项目的结构变成了这样：

这里写图片描述

（5）运行代码，网页效果和Version-7一样：

这里写图片描述

下次就可以添加更多路由，再设计用户登录页面
需要用到 WTForms ,还有更多的HTML的知识

阅读全文

0 0