LNMP系列網站零基礎開發記錄（三）

時間 2019-11-12

標籤 lnmp 系列網站零基礎開發記錄欄目 PHP 简体版

原文原文鏈接

[目錄]

扯淡吹逼之開發前奏
Django 開發環境搭建及配置
web 頁面開發
Django app開發
Django 站點管理
Python 簡易爬蟲開發
Nginx&uWSGI 服務器配置
...

3、web頁面開發

　　好吧，原本想單獨寫一章bootstrap的，可是前端確實沒什麼好寫的，這裏咱們直接結合實際直接開搞吧。作WEB我習慣先把想要的頁面模板作完，而後再根據razar或者這裏要用到的django template修改。美工確實不太好，P得一手爛圖，因此通常都用現成的開源框架，這裏咱們選用瞭如今很流行的bootstrap，因爲懶得改CSS，因此所有用原生的代碼，基本不加修改。javascript

這裏在強調一下咱們的目標，作一個簡單的開發錯誤查詢網站，同時須要提供相應錯誤的解決方案

　　帶着這樣的目標，咱們大概須要以下幾個web頁面：css

主頁（查詢頁面）
查詢結果頁面
錯誤詳細頁面
維護頁面

　　對的，灰常的簡單，頁面不多，先給出幾個頁面的圖吧（維護頁面後面站點管理部分會介紹）html

　　這裏頁面共有的 Header和Footer咱們能夠放到一個base.html頁面，內容頁經過模板繼承實現，具體代碼以下：　　前端

<!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="/">首頁</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號</a> | 京公網安備XXXXXXXX</p> </footer> </body> </html>

　　前面咱們已經定義了/media/做爲靜態文件的根目錄（Django 開發環境搭建及配置），所以咱們把bootstrap整個目錄放在/media/下面，並引入jquery.js, bootstrap.js以及bootstrap.css，注意jquery和bootstrap的順序，同時注意引入相對路徑。java

　　首先說下bootstrap的部分，在大屏幕下顯示效果如上述三幅圖的所示，而切換到小屏幕時就會自動切換成下圖，這是響應式設計的帶來的優點，可使咱們的站點自適應於各類類型的設備，具體原理和實現方式請自行閱讀bootstrap源碼吧。jquery

　　再說下django template部分，django tempalte以{% %}表示指令，{{ }}表示變量，指令須要有相應的{%end-op%}塊，這個比起razar有些不方便。base.html中，咱們定義了三個block，分別是web

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

　　簡單說來，和razar中的section同樣，在繼承的子模板中，若是定義了相同名稱的block，那麼母版中的相應block之間的內容換徹底被替換，上面三個從名字和對應的區域應該很容易看出是幹什麼的了吧。django

　　block中詳細的實現部分由於涉及到了傳入的參數，所以咱們在app的實現中來詳細討論。bootstrap

PS.服務器

表達能力較差，之後慢慢更新，同時[目錄]會隨着跟新進度隨時調整，歡迎你們拍磚！
網站連接會在數據積累一段時間後提供

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。