【实战演练】Python+Django网站开发系列05-非BASE页的开发

前一篇已经介绍过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标记

012.png

个人信息取名stuinfo,学生选课selcourse,成绩查询queryscore,修改密码mopasswd,注销logout。可以在block内添加文本内容

013.png

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

015.png


4、修改导航超链接

此时点击导航左边的按钮,没有办法跳转的,因为按钮上面并没有绑定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>

全部修改完成后,刷新页面测试,发现已经可以点击对应的按钮跳转到对应的页面。

016.png

5、一些细节

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">

018.png

5.3导航按钮按下后无阴影

对于导航栏的<li>,

<li class="active">

修改为

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

刷新页面,重新点击后,页面正常跳转,而且阴影也正常显示后,正面功能正常。

19.png

猜你喜欢

转载自blog.51cto.com/14423403/2418642