前一篇已經介紹過BASE頁與index靜態頁面的開發了,但是目前index靜態頁面的輸入框與提交按鈕其實是沒有任何作用的。

如果需要與后臺交互,還需要在數據庫創建相應的表格,以及編寫對應的業務邏輯去操作數據庫。


本篇我們暫時不去弄數據庫,還是先對學生登錄成功后的頁面,編輯導航BASE頁以及非BASE頁的靜態頁面。

之前聊過:【實戰演練】Python+Django網站開發系列02-Django完整開發環境部署https://blog.51cto.com/14423403/2418370

學生登錄后頁面包括如下功能:

1)個人信息:登錄后顯示學生個人信息

2)學生選課:學生可以看到課程名、授課老師、上課時間,點擊選課,可以選取課程,最多兩門(超過不能繼續選課),同一門課程不能重復選。

3)成績查詢:查詢已選課程的成績

4)修改密碼:修改用戶密碼

5)注銷:注銷后自動返回登錄頁面

注銷時不需要頁面的,那么我們起碼要創建5個頁面,1個BASE02頁,4個功能頁面。


1、創建html文件

創建BASE02,然后通過magicbox拖拉拽,創建橫向與縱向導航,然后打block標記

【實戰演練】Python+Django網站開發系列05-非BASE頁的開發_第1張圖片

個人信息取名stuinfo,學生選課selcourse,成績查詢queryscore,修改密碼mopasswd,注銷logout。可以在block內添加文本內容

【實戰演練】Python+Django網站開發系列05-非BASE頁的開發_第2張圖片

2、修改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())
          

3、修改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,看看是否正常返回。

【實戰演練】Python+Django網站開發系列05-非BASE頁的開發_第3張圖片


4、修改導航超鏈接

此時點擊導航左邊的按鈕,沒有辦法跳轉的,因為按鈕上面并沒有綁定url。

標簽修改為需要顯示的內容, 標簽的href修改為對應的url。

            
  • ???? ? ???????????????????????????? ???????? 個人信息 ? ? ????
      ?
  • 全部修改完成后,刷新頁面測試,發現已經可以點擊對應的按鈕跳轉到對應的頁面。

    【實戰演練】Python+Django網站開發系列05-非BASE頁的開發_第4張圖片

    5、一些細節

    5.1左邊導航不是全屏

    修改base02里面的對應div的css參數,增加king-full-height

                

    5.2下滑滾動后,橫向導航消失

    將base頁橫向導航css樣式

                

    修改為

                

    將base頁縱向導航css樣式

                

    修改為

                

    【實戰演練】Python+Django網站開發系列05-非BASE頁的開發_第5張圖片

    5.3導航按鈕按下后無陰影

    對于導航欄的


  •               
  • 修改為

                  
  • 刷新頁面,重新點擊后,頁面正常跳轉,而且陰影也正常顯示后,正面功能正常。

    【實戰演練】Python+Django網站開發系列05-非BASE頁的開發_第6張圖片