LNMP系列網(wǎng)站零基礎(chǔ)開(kāi)發(fā)記錄（三）

2019-11-14 17:44:16

字體：大中小

供稿：網(wǎng)友

[目錄](méi)

扯淡吹逼之開(kāi)發(fā)前奏
Django 開(kāi)發(fā)環(huán)境搭建及配置
web 頁(yè)面開(kāi)發(fā)
Django app開(kāi)發(fā)
Django 站點(diǎn)管理
Python 簡(jiǎn)易爬蟲(chóng)開(kāi)發(fā)
Nginx&uWSGI 服務(wù)器配置
...

三、web頁(yè)面開(kāi)發(fā)

　　好吧，本來(lái)想單獨(dú)寫(xiě)一章bootstrap的，但是前端確實(shí)沒(méi)什么好寫(xiě)的，這里我們直接結(jié)合實(shí)際直接開(kāi)搞吧。做WEB我習(xí)慣先把想要的頁(yè)面模板做完，然后再根據(jù)razar或者這里要用到的django template修改。美工確實(shí)不太好，P得一手爛圖，所以一般都用現(xiàn)成的開(kāi)源框架，這里我們選用了現(xiàn)在很流行的bootstrap，由于懶得改CSS，所以全部用原生的代碼，基本不加修改。

這里在強(qiáng)調(diào)一下我們的目標(biāo)，做一個(gè)簡(jiǎn)單的開(kāi)發(fā)錯(cuò)誤查詢(xún)網(wǎng)站，同時(shí)需要提供相應(yīng)錯(cuò)誤的解決方案

　　帶著這樣的目標(biāo)，我們大概需要如下幾個(gè)web頁(yè)面：

主頁(yè)（查詢(xún)頁(yè)面）
查詢(xún)結(jié)果頁(yè)面
錯(cuò)誤詳細(xì)頁(yè)面
維護(hù)頁(yè)面

　　對(duì)的，灰常的簡(jiǎn)單，頁(yè)面很少，先給出幾個(gè)頁(yè)面的圖吧（維護(hù)頁(yè)面后面站點(diǎn)管理部分會(huì)介紹）

　　這里頁(yè)面共有的 Header和Footer我們可以放到一個(gè)base.html頁(yè)面，內(nèi)容頁(yè)通過(guò)模板繼承實(shí)現(xiàn)，具體代碼如下：　　

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>模板- {% block title %}{% endblock %}</title>
　　<script src="/media/javascript/jquery-1.11.1.js"></script>
　　<script src="/media/bootstrap/js/bootstrap.js"></script>
　　<link href="/media/bootstrap/css/bootstrap.css" rel="stylesheet"/>
</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

    <div class="container">        <div class="row">            <div class="col-md-3"></div>            <div class="col-md-6">                <div class="navbar-header">                    <button type="button" class="navbar-toggle" data-toggle="collapse"                            data-target="#bs-example-navbar-collapse-1">                        <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="#">                        <img src="/media/image/icon.png">                    </a>                </div>                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                    <ul class="nav navbar-nav nav-d">                    <li>                        <a href="/">首頁(yè)</a>                    </li>                    <li>                        <a href="#">推薦</a>                    </li>                </ul>                     <form class="navbar-form pull-right form-inline" action="/search/" >                        <div class="form-group"><input type="text" class="form-control" name="q" value="{{ q | default:'' }}" ></div>                        <div class="form-group"><button type="submit" class="btn btn-default" >Go</button></div>                    </form>                 </div>            </div>        </div>    </div></nav><div class="spliter"></div><div class="container">    <div class="row">        <div class="col-md-3">            <div>&nbsp;</div>            {% block widget-nav %}            {% endblock %}        </div>        <div class="col-md-6">            <div>&nbsp;</div>            {% block content %}            {% endblock %}        </div>    </div></div><footer class="footer">      <p>XXXXXXXXXXXXXXXX | Powered By | <a href="http://www.miibeian.gov.cn/" target="_blank">京ICP備XXXXXX號(hào)</a> | 京公網(wǎng)安備XXXXXXXX</p></footer></body></html>

　　前面我們已經(jīng)定義了/media/作為靜態(tài)文件的根目錄（Django 開(kāi)發(fā)環(huán)境搭建及配置），因此我們把bootstrap整個(gè)目錄放在/media/下面，并引入jquery.js, bootstrap.js以及bootstrap.css，注意jquery和bootstrap的順序，同時(shí)注意引入相對(duì)路徑。

　　首先說(shuō)下bootstrap的部分，在大屏幕下顯示效果如上述三幅圖的所示，而切換到小屏幕時(shí)就會(huì)自動(dòng)切換成下圖，這是響應(yīng)式設(shè)計(jì)的帶來(lái)的優(yōu)勢(shì)，可以使我們的站點(diǎn)自適應(yīng)于各種類(lèi)型的設(shè)備，具體原理和實(shí)現(xiàn)方式請(qǐng)自行閱讀bootstrap源碼吧。

　　再說(shuō)下django template部分，django tempalte以{% %}表示指令，{{ }}表示變量，指令需要有相應(yīng)的{%end-op%}塊，這個(gè)比起razar有些不方便。base.html中，我們定義了三個(gè)block，分別是

{% block title %}{% endblock %}
{% block widget-nav %}{% endblock %}
{% block content %}{% endblock% }

　　簡(jiǎn)單說(shuō)來(lái)，和razar中的section一樣，在繼承的子模板中，如果定義了相同名稱(chēng)的block，那么母版中的相應(yīng)block之間的內(nèi)容換完全被替換，上面三個(gè)從名字和對(duì)應(yīng)的區(qū)域應(yīng)該很容易看出是干什么的了吧。

　　block中詳細(xì)的實(shí)現(xiàn)部分因?yàn)樯婕暗搅藗魅氲膮?shù)，因此我們?cè)赼pp的實(shí)現(xiàn)中來(lái)詳細(xì)討論。

PS.