前一篇已經(jīng)介紹過BASE頁與index靜態(tài)頁面的開發(fā)了,但是目前index靜態(tài)頁面的輸入框與提交按鈕其實(shí)是沒有任何作用的。

如果需要與后臺交互,還需要在數(shù)據(jù)庫創(chuàng)建相應(yīng)的表格,以及編寫對應(yīng)的業(yè)務(wù)邏輯去操作數(shù)據(jù)庫。


本篇我們暫時(shí)不去弄數(shù)據(jù)庫,還是先對學(xué)生登錄成功后的頁面,編輯導(dǎo)航BASE頁以及非BASE頁的靜態(tài)頁面。

之前聊過:【實(shí)戰(zhàn)演練】Python+Django網(wǎng)站開發(fā)系列02-Django完整開發(fā)環(huán)境部署https://blog.51cto.com/14423403/2418370

學(xué)生登錄后頁面包括如下功能:

1)個(gè)人信息:登錄后顯示學(xué)生個(gè)人信息

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

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

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

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

注銷時(shí)不需要頁面的,那么我們起碼要創(chuàng)建5個(gè)頁面,1個(gè)BASE02頁,4個(gè)功能頁面。


1、創(chuàng)建html文件

創(chuàng)建BASE02,然后通過magicbox拖拉拽,創(chuàng)建橫向與縱向?qū)Ш剑缓蟠騜lock標(biāo)記

【實(shí)戰(zhàn)演練】Python+Django網(wǎng)站開發(fā)系列05-非BASE頁的開發(fā)_第1張圖片

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

【實(shí)戰(zhàn)演練】Python+Django網(wǎng)站開發(fā)系列05-非BASE頁的開發(fā)_第2張圖片

2、修改views.py

對于每一個(gè)頁面,都定義一個(gè)函數(shù),并且定義業(yè)務(wù)邏輯,返回頁面。

            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,后面是指向需要調(diào)用的views.py函數(shù)名稱。

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

【實(shí)戰(zhàn)演練】Python+Django網(wǎng)站開發(fā)系列05-非BASE頁的開發(fā)_第3張圖片


4、修改導(dǎo)航超鏈接

此時(shí)點(diǎn)擊導(dǎo)航左邊的按鈕,沒有辦法跳轉(zhuǎn)的,因?yàn)榘粹o上面并沒有綁定url。

標(biāo)簽修改為需要顯示的內(nèi)容, 標(biāo)簽的href修改為對應(yīng)的url。

            
  • ???? ? ???????????????????????????? ???????? 個(gè)人信息 ? ? ????
      ?
  • 全部修改完成后,刷新頁面測試,發(fā)現(xiàn)已經(jīng)可以點(diǎn)擊對應(yīng)的按鈕跳轉(zhuǎn)到對應(yīng)的頁面。

    【實(shí)戰(zhàn)演練】Python+Django網(wǎng)站開發(fā)系列05-非BASE頁的開發(fā)_第4張圖片

    5、一些細(xì)節(jié)

    5.1左邊導(dǎo)航不是全屏

    修改base02里面的對應(yīng)div的css參數(shù),增加king-full-height

                

    5.2下滑滾動后,橫向?qū)Ш较?

    將base頁橫向?qū)Ш絚ss樣式

                

    修改為

                

    將base頁縱向?qū)Ш絚ss樣式

                

    修改為

                

    【實(shí)戰(zhàn)演練】Python+Django網(wǎng)站開發(fā)系列05-非BASE頁的開發(fā)_第5張圖片

    5.3導(dǎo)航按鈕按下后無陰影

    對于導(dǎo)航欄的


  •               
  • 修改為

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

    【實(shí)戰(zhàn)演練】Python+Django網(wǎng)站開發(fā)系列05-非BASE頁的開發(fā)_第6張圖片