前一篇已經(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)記
個(gè)人信息取名stuinfo,學(xué)生選課selcourse,成績查詢queryscore,修改密碼mopasswd,注銷logout。可以在block內(nèi)添加文本內(nèi)容
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,看看是否正常返回。
4、修改導(dǎo)航超鏈接
此時(shí)點(diǎn)擊導(dǎo)航左邊的按鈕,沒有辦法跳轉(zhuǎn)的,因?yàn)榘粹o上面并沒有綁定url。
標(biāo)簽修改為需要顯示的內(nèi)容, 標(biāo)簽的href修改為對應(yīng)的url。
-
?
全部修改完成后,刷新頁面測試,發(fā)現(xiàn)已經(jīng)可以點(diǎn)擊對應(yīng)的按鈕跳轉(zhuǎn)到對應(yīng)的頁面。
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樣式
修改為
5.3導(dǎo)航按鈕按下后無陰影
對于導(dǎo)航欄的
修改為
刷新頁面,重新點(diǎn)擊后,頁面正常跳轉(zhuǎn),而且陰影也正常顯示后,正面功能正常。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
