【Flask學(xué)習(xí)手記】(二) 制作漂亮的頁(yè)面

2.1 路由>視圖函數(shù)>頁(yè)面模版初體驗(yàn)

建立templates模版頁(yè)面

1郎嫁、在templates目錄下建立一個(gè) page.html，用來(lái)進(jìn)行測(cè)試和學(xué)習(xí)。

2批幌、打開(kāi)page.html经伙，別的代碼不變的情況下扶叉，增加一行在<body></body>中。

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

引入render_template

從flask導(dǎo)入render_template和url_for,修改程序代碼為：

from flask import Flask,render_template,url_for

render_template

1枣氧、改寫(xiě)視圖函數(shù)index()里的代碼，一是定義一個(gè)變量垮刹，二是返回渲染過(guò)后的結(jié)果达吞，有注釋。

# 設(shè)置路由
@app.route('/')
# 視圖函數(shù)荒典，我將其先改成里index
def index():
    # 定義一個(gè)變量酪劫，然后給其賦值，等下渲染時(shí)候在html對(duì)應(yīng)的位置顯示
    # 等下傳遞的可以是單個(gè)變量寺董，也可以是其他數(shù)據(jù)類(lèi)型契耿，比如list,字典等
    username = '林天宇'
    # 返回渲染過(guò)后的結(jié)果
    # 注意兩個(gè)username代表的意義不同，第一個(gè)username是page.html的 {{ username }}
    #   第二個(gè)username是在本視圖函數(shù)中定義的username變量
    return render_template('page.html',username=username)

2螃征、運(yùn)行搪桂，返回的頁(yè)面達(dá)到效果。

至此盯滚，我們已經(jīng)成功地將路由踢械、視圖函數(shù)、模版頁(yè)面打通了魄藕。

2.2 強(qiáng)大且有點(diǎn)意思的 url_for

url_for是個(gè)什么東東

調(diào)用視圖函數(shù)的url

在Jinja的HTML文件中内列，使用url_for('視圖函數(shù)名稱(chēng)')，可以得到視圖函數(shù)的url背率。如下例：

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

顯示成Html時(shí)候便是調(diào)用對(duì)應(yīng)的視圖函數(shù)的url话瞧。

加載靜態(tài)文件

靜態(tài)文件一般存放在/static子目錄下，可用形同下述的方法寝姿，即可獲得文件路徑交排。

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

常用的有css、img饵筑、js等文件埃篓，如下面例子所示，便可加載/static/css/index.css這個(gè)文件：

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

重點(diǎn)筆記

1根资、從flask中增加import
2架专、url_for：
用法一：url_for('視圖函數(shù)名')同窘，得到視圖函數(shù)的鏈接；
用法二：url_for('static',filename=‘css/style.css’) 得到靜態(tài)文件地址 /static/css/style.css
用法三：url_for('static',filename=‘css/style.css’, _external=True)得到靜態(tài)文件的絕對(duì)地址 http://網(wǎng)站/static/css/style.css
擴(kuò)展用法：使用 url_for() 生成動(dòng)態(tài)地址時(shí)部脚，將動(dòng)態(tài)部分作為關(guān)鍵字參數(shù)傳入想邦。例如，url_for ('user', name='john', _external=True)的返回結(jié)果是http://localhost:5000/user/john委刘。
傳入 url_for() 的關(guān)鍵字參數(shù)不僅限于動(dòng)態(tài)路由中的參數(shù)丧没。函數(shù)能將任何額外參數(shù)添加到查詢(xún)字符串中。例如钱雷，url_for('index', page=2)的返回結(jié)果是/?page=2。

2.3 將bootstrap引進(jìn)來(lái)

一吹零、安裝Bootstrap

1罩抗、下載Bootstrap代碼：我是從bootcss(http://www.bootcss.com) 下載代碼的，進(jìn)行了一些摘取灿椅，總共有以下幾個(gè)文件套蒂，我還是按習(xí)慣給它們建立了子目錄，分別Ctrl+C和Ctrl+V到Static目錄下茫蛹。

安裝Bootstrap

這里有必要說(shuō)一聲操刀，Python下也有技術(shù)大牛做了Flask-Bootstrap包，但我現(xiàn)在還沒(méi)有用婴洼。畢竟封裝得太多了骨坑，新手一下子被遮掩了，反而不一定是最好的事情柬采。（其實(shí)也是因?yàn)槲易约阂策€沒(méi)用心去看Flask-Bootstrap包的用法欢唾，自己也還不會(huì)。）

2粉捻、下載JQuery.js代碼：Bootstrap需要JQuery支持的礁遣，在本地學(xué)習(xí)和調(diào)試時(shí)候不一定有網(wǎng)絡(luò)，所以為了方便肩刃，我干脆也下載下來(lái)了祟霍，直接放到本地。

目前我相當(dāng)于在static目錄下建立了兩個(gè)子目錄：bootstrap和jquery盈包，為了方便沸呐，我又再建了3個(gè)子目錄：css、js呢燥、img垂谢，目的是希望以后文件管理起來(lái)清晰一些，自己寫(xiě)的放在自己的目錄下疮茄，人家固定的包放在人家的目錄下滥朱。

static目錄結(jié)構(gòu)

2.4 基于bootstrap寫(xiě)個(gè)簡(jiǎn)單頁(yè)面

建立一個(gè)模版頁(yè)面

1根暑、在template目錄下新建一個(gè)webpage.html模版頁(yè)面，代碼如下：
代碼有點(diǎn)長(zhǎng)徙邻，我給予細(xì)細(xì)注釋?zhuān)?/p>

<!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函數(shù) ---->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='bootstrap/css/bootstrap.min.css')}}" />
      <!---  建立一個(gè)自己的css文檔，放在／statci/css/style.css 用來(lái)自己寫(xiě)css- -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/style.css')}}" />
<title>FlaskWeb</title>
</head>
<body>

<!-- 1缰犁、導(dǎo)航欄部分 -->
<div class="navbar navbar-default navbar-fixed-top"> 
 <div class="container"> 
 
 <!-- 移動(dòng)設(shè)備顯示 -->
  <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設(shè)備顯示-->
  <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 >QQ空間</a></li>
            <li><a >微博</a></li>
            <li role="separator" class="divider"></li>
            <li><a >我的網(wǎng)站</a></li>
          </ul>
        </li>
      </ul>

      <!-- 1.2 居右的菜單部分 -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">注冊(cè)</a></li>
        <li><a href="#">登陸</a></li>
      </ul>   

      <!-- 1.3 查詢(xún)框 -->
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="請(qǐng)輸入...">
        </div>
        <button type="submit" class="btn btn-default">查詢(xún)</button>
      </form>
    </div><!-- /.navbar-collapse -->
  
 </div> 
</div>

<!---導(dǎo)航欄結(jié)束---> 
 
<!-- 2.頁(yè)面部分 -->
<!-- 2.1 容器----->
<div class="container-fluid">
<div class="row">

<!--主體部分開(kāi)始-->

<!--主體部分結(jié)束-->

</div> <!---row結(jié)束----->
</div><!---container-fluid結(jié)束------>


<!--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／目錄中建立一個(gè)style.css文件。作用是用來(lái)寫(xiě)自己的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視圖函數(shù)中的rend_template文件為剛才建立的webpage.html：

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

4遣钳、運(yùn)行，達(dá)到預(yù)期效果麦乞。

2.5 共用剛剛寫(xiě)好的頁(yè)面模版

首先體會(huì)一下共用模版的應(yīng)用

1蕴茴、將webpage.html就作為我們的共用模版的基本模版（我的理解是類(lèi)似于.NET里的masterpage），在各個(gè)頁(yè)面可能要變化的部分增加兩行代碼姐直。

<!--主體部分開(kāi)始-->
    {% block mainbody %}
    {% endblock %}
<!--主體部分結(jié)束-->

在這里倦淀，我定義了一個(gè)mainbody的塊，用來(lái)其他頁(yè)面放置內(nèi)容声畏。

2撞叽、新建立一個(gè)index.html文件，作為首頁(yè)插龄。先測(cè)試一下能扒，所以就簡(jiǎn)單寫(xiě)個(gè)代碼如下：

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

extends：擴(kuò)展自webpage.html
block mainbody: 將mainbody的內(nèi)容寫(xiě)在這一塊。在這里我為了測(cè)試辫狼，就簡(jiǎn)單地使用了加粗的Mainbody字符串初斑。

3、修改視圖函數(shù)index中渲染的頁(yè)面為剛剛建立的index.html膨处。

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

4见秤、運(yùn)行測(cè)試成功，效果如下：

顯示效果

寫(xiě)真正的index.html代碼

1真椿、有了信心鹃答，于是我繼續(xù)在mainbody塊里寫(xiě)下以下代碼，最后成為這樣：

{% extends 'webpage.html' %}

{% block mainbody %}
    <!----1.巨幕------------>
    <div class="jumbotron">
    <div class="container">
      <h1>關(guān)于工作和生活</h1>
      <p> 生活不止眼前的茍且突硝，還有詩(shī)與遠(yuǎn)方测摔。<small>周振宇的個(gè)人網(wǎng)站，逐步完善中。</small></p>
    </div><!---end container--->
    </div><!---end jumbotron--->



    <!----2.主體內(nèi)容--------------->
    <!--- 按bootstrap習(xí)慣放在容器里--->
    <div class="container">
        <div class="row">

          <!---2.1第一個(gè)框锋八，小的顯示器占6個(gè)位浙于，大的顯示器占3個(gè)位。（bootstrap的柵格系統(tǒng)）------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio01.jpg') }})
              <div class="caption">
                <h3>互聯(lián)網(wǎng)+</h3>
                <p>“互聯(lián)網(wǎng)+”不是把業(yè)務(wù)或者信息系統(tǒng)放到網(wǎng)上而已挟纱，而是通過(guò)互聯(lián)網(wǎng)的技術(shù)和思維羞酗，對(duì)傳統(tǒng)業(yè)態(tài)進(jìn)行顛覆，或是直接創(chuàng)造新的業(yè)態(tài)紊服。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

        <!---2.2第二個(gè)框------>
         <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年前檀轨，自動(dòng)化控制就是智能；20年前欺嗤，信息系統(tǒng)就是智能参萄；10年前，聊天機(jī)器人就是智能煎饼；現(xiàn)在讹挎，像人一樣學(xué)習(xí)和思考就是人工智能。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

         <!---2.3第三個(gè)框------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio03.jpg') }})
              <div class="caption">
                <h3>大數(shù)據(jù)</h3>
                <p>大數(shù)據(jù)時(shí)代腺占，要是想分一杯羮淤袜，請(qǐng)注意在以下三個(gè)方面發(fā)力：1痒谴、擁有大數(shù)據(jù)衰伯；2、擁有應(yīng)用大數(shù)據(jù)的商業(yè)模式积蔚；3意鲸、擁有處理大數(shù)據(jù)的技術(shù)能力。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

          <!---2.4第三個(gè)框------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio02.jpg') }})
              <div class="caption">
                <h3>生活札記</h3>
                <p>生活不止眼前的茍且尽爆，還有詩(shī)與遠(yuǎn)方怎顾。<br />雖然不喜歡這個(gè)死胖子，但是還是很欣賞他的歌漱贱。槐雾。。</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擎值、運(yùn)行看效果。

運(yùn)行效果一

還是響應(yīng)式的：

運(yùn)行效果2

至此逐抑，已經(jīng)基于bootstrap寫(xiě)了一個(gè)漂亮的頁(yè)面了鸠儿。當(dāng)然，不采用bootstrap也是可以的，比如采取layui(http://www.layui.com)這種國(guó)人自己寫(xiě)的東東可能更適合中國(guó)人的審美进每。

最后編輯于：2020.01.30 14:20:07

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末汹粤，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子品追，更是在濱河造成了極大的恐慌玄括，老刑警劉巖，帶你破解...
沈念sama閱讀 221,635評(píng)論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件肉瓦，死亡現(xiàn)場(chǎng)離奇詭異遭京，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)泞莉，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,543評(píng)論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)哪雕，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人鲫趁，你說(shuō)我怎么就攤上這事斯嚎。” “怎么了挨厚？”我有些...
開(kāi)封第一講書(shū)人閱讀 168,083評(píng)論 0贊 360
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵堡僻，是天一觀的道長(zhǎng)。經(jīng)常有香客問(wèn)我疫剃，道長(zhǎng)钉疫，這世上最難降的妖魔是什么？我笑而不...
開(kāi)封第一講書(shū)人閱讀 59,640評(píng)論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任巢价，我火速辦了婚禮牲阁，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘壤躲。我一直安慰自己城菊，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 68,640評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布碉克。她就那樣靜靜地躺著凌唬，像睡著了一般。火紅的嫁衣襯著肌膚如雪漏麦。梳的紋絲不亂的頭發(fā)上客税，一...
開(kāi)封第一講書(shū)人閱讀 52,262評(píng)論 1贊 308
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音唁奢，去河邊找鬼霎挟。笑死，一個(gè)胖子當(dāng)著我的面吹牛麻掸，可吹牛的內(nèi)容都是我干的酥夭。我是一名探鬼主播，決...
沈念sama閱讀 40,833評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼熬北！你這毒婦竟也來(lái)了疙描？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 39,736評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤讶隐，失蹤者是張志新（化名）和其女友劉穎起胰，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體巫延，經(jīng)...
沈念sama閱讀 46,280評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡效五，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,369評(píng)論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了炉峰。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片畏妖。...
茶點(diǎn)故事閱讀 40,503評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖疼阔，靈堂內(nèi)的尸體忽然破棺而出戒劫，到底是詐尸還是另有隱情，我是刑警寧澤婆廊，帶...
沈念sama閱讀 36,185評(píng)論 5贊 350
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布迅细，位于F島的核電站，受9級(jí)特大地震影響淘邻，放射性物質(zhì)發(fā)生泄漏茵典。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,870評(píng)論 3贊 333
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一列荔、第九天我趴在偏房一處隱蔽的房頂上張望敬尺。院中可真熱鬧枚尼，春花似錦贴浙、人聲如沸。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,340評(píng)論 0贊 24
一樁弒父案崎溃，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至盯质，卻和暖如春袁串，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背呼巷。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,460評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工囱修，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人王悍。一個(gè)月前我還...
沈念sama閱讀 48,909評(píng)論 3贊 376
代替公主和親
正文我出身青樓破镰，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子鲜漩，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,512評(píng)論 2贊 359