【實戰演練】Python+Django網站開發系列05-非BASE頁的開發

前一篇已經介紹過BASE頁與index靜態頁面的開發了，可是目前index靜態頁面的輸入框與提交按鈕實際上是沒有任何做用的。

若是須要與後臺交互，還須要在數據庫建立相應的表格，以及編寫對應的業務邏輯去操做數據庫。

本篇咱們暫時不去弄數據庫，仍是先對學生登陸成功後的頁面，編輯導航BASE頁以及非BASE頁的靜態頁面。

以前聊過：【實戰演練】Python+Django網站開發系列02-Django完整開發環境部署http://www.javashuo.com/article/p-hcssixvx-w.html

學生登陸後頁面包括以下功能：

1）我的信息：登陸後顯示學生我的信息

2）學生選課：學生能夠看到課程名、授課老師、上課時間，點擊選課，能夠選取課程，最多兩門（超過不能繼續選課），同一門課程不能重複選。

3）成績查詢：查詢已選課程的成績

4）修改密碼：修改用戶密碼

5）註銷：註銷後自動返回登陸頁面

註銷時不須要頁面的，那麼咱們起碼要建立5個頁面，1個BASE02頁，4個功能頁面。

一、建立html文件

建立BASE02，而後經過magicbox拖拉拽，建立橫向與縱向導航，而後打block標記

我的信息取名stuinfo，學生選課selcourse，成績查詢queryscore，修改密碼mopasswd，註銷logout。能夠在block內添加文本內容

二、修改views.py

對於每個頁面，都定義一個函數，而且定義業務邏輯，返回頁面。

def stuinfo(request):
    return render_to_response('stuinfo.html',locals())

def selcourse(request):
    return render_to_response('selcourse.html',locals())

def queryscore(request):
    return render_to_response('queryscore.html',locals())

def mopasswd(request):
    return render_to_response('mopasswd.html',locals())

三、修改views.py

前面是匹配url，後面是指向須要調用的views.py函數名稱。

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', index),
    url(r'^stuinfo/', stuinfo),
    url(r'^selcourse/', selcourse),
    url(r'^queryscore/', queryscore),
    url(r'^mopasswd/', mopasswd),
]

訪問127.0.0.1:8000/stuinfo，看看是否正常返回。

四、修改導航超連接

此時點擊導航左邊的按鈕，沒有辦法跳轉的，由於按鈕上面並無綁定url。

<span>標籤修改成須要顯示的內容，<a>標籤的href修改成對應的url。

<li {% if request.path == "/stuinfo/" %} class="active" {% endif %} >
    <a href="/stuinfo/"> <i class="fa fa-dashboard ">                            </i>
        <span>我的信息</span> <i class="fa fa-fw "></i> </a>
    <ul id="demo" class="collapse"> </ul>
</li>

所有修改完成後，刷新頁面測試，發現已經能夠點擊對應的按鈕跳轉到對應的頁面。

五、一些細節

5.1左邊導航不是全屏

修改base02裏面的對應div的css參數，增長king-full-height

<div class="king-vertical-nav9    f14 king-full-height">

5.2下滑滾動後，橫向導航消失

將base頁橫向導航css樣式

<div style="overflow:hidden; z-index: inherit;" class="navbar king-horizontal-nav1  f14 ">

修改成

<div style="overflow:hidden; position: fixed;top:0;left:0; z-index:999 inherit;width:100%;height:45px;" class="navbar king-horizontal-nav1  f14">

將base頁縱向導航css樣式

<div class="king-layout1-main clearfix">

修改成

<div class="king-layout1-main clearfix" style="position: fixed;top: 45px;left: 0;z-index: 999;width: 100%;height: 50px">

5.3導航按鈕按下後無陰影

對於導航欄的<li>，

<li class="active">

修改成

<li {% if request.path == "/stuinfo/" %} class="active" {% endif %} >

刷新頁面，從新點擊後，頁面正常跳轉，並且陰影也正常顯示後，正面功能正常。