【Flask学习手记】(二) 制作漂亮的页面

2.1 路由>视图函数>页面模版初体验

建立templates模版页面

1、在templates目录下建立一个 page.html，用来进行测试和学习。

2、打开page.html，别的代码不变的情况下，增加一行在<body></body>中。

你好！<b>{{ username }}</b>

引入render_template

从flask导入render_template和url_for,修改程序代码为：

from flask import Flask,render_template,url_for

render_template

1、改写视图函数index()里的代码，一是定义一个变量，二是返回渲染过后的结果，有注释。

# 设置路由
@app.route('/')
# 视图函数，我将其先改成里index
def index():
    # 定义一个变量，然后给其赋值，等下渲染时候在html对应的位置显示
    # 等下传递的可以是单个变量，也可以是其他数据类型，比如list,字典等
    username = '林天宇'
    # 返回渲染过后的结果
    # 注意两个username代表的意义不同，第一个username是page.html的 {{ username }}
    #   第二个username是在本视图函数中定义的username变量
    return render_template('page.html',username=username)

2、运行，返回的页面达到效果。

至此，我们已经成功地将路由、视图函数、模版页面打通了。

2.2 强大且有点意思的 url_for

url_for是个什么东东

调用视图函数的url

在Jinja的HTML文件中，使用url_for('视图函数名称')，可以得到视图函数的url。如下例：

<a href="{{ url_for('login') }}">登 录</a>

显示成Html时候便是调用对应的视图函数的url。

加载静态文件

静态文件一般存放在/static子目录下，可用形同下述的方法，即可获得文件路径。

{{url_for('static',filename='路径名+文件名')}}

常用的有css、img、js等文件，如下面例子所示，便可加载/static/css/index.css这个文件：

<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">

重点笔记

1、从flask中增加import
2、url_for：
用法一：url_for('视图函数名')，得到视图函数的链接；
用法二：url_for('static',filename=‘css/style.css’) 得到静态文件地址 /static/css/style.css
用法三：url_for('static',filename=‘css/style.css’, _external=True)得到静态文件的绝对地址 http://网站/static/css/style.css
扩展用法：使用 url_for() 生成动态地址时，将动态部分作为关键字参数传入。例如，url_for ('user', name='john', _external=True)的返回结果是http://localhost:5000/user/john。
传入 url_for() 的关键字参数不仅限于动态路由中的参数。函数能将任何额外参数添加到查询字符串中。例如，url_for('index', page=2)的返回结果是/?page=2。

2.3 将bootstrap引进来

一、安装Bootstrap

1、下载Bootstrap代码：我是从bootcss(http://www.bootcss.com) 下载代码的，进行了一些摘取，总共有以下几个文件，我还是按习惯给它们建立了子目录，分别Ctrl+C和Ctrl+V到Static目录下。

安装Bootstrap

这里有必要说一声，Python下也有技术大牛做了Flask-Bootstrap包，但我现在还没有用。毕竟封装得太多了，新手一下子被遮掩了，反而不一定是最好的事情。（其实也是因为我自己也还没用心去看Flask-Bootstrap包的用法，自己也还不会。）

2、下载JQuery.js代码：Bootstrap需要JQuery支持的，在本地学习和调试时候不一定有网络，所以为了方便，我干脆也下载下来了，直接放到本地。

目前我相当于在static目录下建立了两个子目录：bootstrap和jquery，为了方便，我又再建了3个子目录：css、js、img，目的是希望以后文件管理起来清晰一些，自己写的放在自己的目录下，人家固定的包放在人家的目录下。

static目录结构

2.4 基于bootstrap写个简单页面

建立一个模版页面

1、在template目录下新建一个webpage.html模版页面，代码如下：
代码有点长，我给予细细注释：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN"> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入css，这里用到了url_for函数 ---->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='bootstrap/css/bootstrap.min.css')}}" />
      <!---  建立一个自己的css文档，放在／statci/css/style.css 用来自己写css- -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/style.css')}}" />
<title>FlaskWeb</title>
</head>
<body>

<!-- 1、导航栏部分 -->
<div class="navbar navbar-default navbar-fixed-top"> 
 <div class="container"> 
 
 <!-- 移动设备显示 -->
  <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse" aria-expanded="false">
        <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="{{ url_for('index') }}">{{ APPName }}</a>
  </div> 
  
  <!-- PC设备显示-->
  <div class="collapse navbar-collapse" id="bs-navbar-collapse">

      <!-- 1.1 菜单链接部分 -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="{{ url_for('index') }}">{{ username }} <span class="sr-only">(current)</span></a></li>
        <li><a href="#">常用链接</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的链接 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="https://user.qzone.qq.com/278754/">QQ空间</a></li>
            <li><a href="http://weibo.com/u/5519494764/">微博</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="http://weibo.com/5519494764/">我的网站</a></li>
          </ul>
        </li>
      </ul>

      <!-- 1.2 居右的菜单部分 -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">注册</a></li>
        <li><a href="#">登陆</a></li>
      </ul>   

      <!-- 1.3 查询框 -->
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="请输入...">
        </div>
        <button type="submit" class="btn btn-default">查询</button>
      </form>
    </div><!-- /.navbar-collapse -->
  
 </div> 
</div>

<!---导航栏结束---> 
 
<!-- 2.页面部分 -->
<!-- 2.1 容器----->
<div class="container-fluid">
<div class="row">

<!--主体部分开始-->

<!--主体部分结束-->

</div> <!---row结束----->
</div><!---container-fluid结束------>


<!--3.footer尾部--->
<footer>
    <nav class="navbar navbar-default">
        <div class="text-right">
            <p> </p>
            <p><a href="#">Back to top</a></p>
        </div>
    </nav>
</footer>

<!---4.尾部引入js部分---->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{ url_for('static',filename='jquery/1.12.4/jquery.min.js') }}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ url_for('static',filename='bootstrap/js/bootstrap.min.js') }}"></script>


</body>
</html>

2、在/static/css／目录中建立一个style.css文件。作用是用来写自己的css，目前干了两件事：一是字体，二是控制navbar的距离。

body,button, input, select, textarea,h1 ,h2, h3, h4, h5, h6 { 
    font-family:"HanHei SC","PingFang SC","Helvetica Neue","Helvetica","STHeitiSC-Light","Arial",sans-serif;
}

body { padding-top: 50px; }

3、修改index视图函数中的rend_template文件为刚才建立的webpage.html：

return render_template('webpage.html',username=username)

4、运行，达到预期效果。

2.5 共用刚刚写好的页面模版

首先体会一下共用模版的应用

1、将webpage.html就作为我们的共用模版的基本模版（我的理解是类似于.NET里的masterpage），在各个页面可能要变化的部分增加两行代码。

<!--主体部分开始-->
    {% block mainbody %}
    {% endblock %}
<!--主体部分结束-->

在这里，我定义了一个mainbody的块，用来其他页面放置内容。

2、新建立一个index.html文件，作为首页。先测试一下，所以就简单写个代码如下：

{% extends 'webpage.html' %}
{% block mainbody %}
    <b>MainBody</b>
{% endblock %}

extends：扩展自webpage.html
block mainbody: 将mainbody的内容写在这一块。在这里我为了测试，就简单地使用了加粗的Mainbody字符串。

3、修改视图函数index中渲染的页面为刚刚建立的index.html。

    return render_template('index.html',username=username)

4、运行测试成功，效果如下：

显示效果

写真正的index.html代码

1、有了信心，于是我继续在mainbody块里写下以下代码，最后成为这样：

{% extends 'webpage.html' %}

{% block mainbody %}
    <!----1.巨幕------------>
    <div class="jumbotron">
    <div class="container">
      <h1>关于工作和生活</h1>
      <p> 生活不止眼前的苟且，还有诗与远方。<small>周振宇的个人网站，逐步完善中。</small></p>
    </div><!---end container--->
    </div><!---end jumbotron--->



    <!----2.主体内容--------------->
    <!--- 按bootstrap习惯放在容器里--->
    <div class="container">
        <div class="row">

          <!---2.1第一个框，小的显示器占6个位，大的显示器占3个位。（bootstrap的栅格系统）------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio01.jpg') }})
              <div class="caption">
                <h3>互联网+</h3>
                <p>“互联网+”不是把业务或者信息系统放到网上而已，而是通过互联网的技术和思维，对传统业态进行颠覆，或是直接创造新的业态。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

        <!---2.2第二个框------>
         <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio04.jpg') }})
              <div class="caption">
                <h3>人工智能</h3>
                <p>30年前，自动化控制就是智能；20年前，信息系统就是智能；10年前，聊天机器人就是智能；现在，像人一样学习和思考就是人工智能。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

         <!---2.3第三个框------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio03.jpg') }})
              <div class="caption">
                <h3>大数据</h3>
                <p>大数据时代，要是想分一杯羮，请注意在以下三个方面发力：1、拥有大数据；2、拥有应用大数据的商业模式；3、拥有处理大数据的技术能力。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

          <!---2.4第三个框------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio02.jpg') }})
              <div class="caption">
                <h3>生活札记</h3>
                <p>生活不止眼前的苟且，还有诗与远方。<br />虽然不喜欢这个死胖子，但是还是很欣赏他的歌。。。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

        </div><!--end row-->
    </div> <!--End container------>
{% endblock %}

2、得有图，于是制作了几张图片，放到static/img/下面。

3、运行看效果。

运行效果一

还是响应式的：

运行效果2

至此，已经基于bootstrap写了一个漂亮的页面了。当然，不采用bootstrap也是可以的，比如采取layui(http://www.layui.com)这种国人自己写的东东可能更适合中国人的审美。

最后编辑于：2020.01.30 14:20:07

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,098评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,213评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,960评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,519评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,512评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,533评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,914评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,574评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,804评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,563评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,644评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,350评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,933评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,908评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,146评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,847评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,361评论 2赞 342