JSP+Servlet培训班作业管理系统[2]-后台管理页面
2017-03-01 15:57
609 查看
上一篇中,我们实现了登录功能,本篇主要关注点是不同用户登录后,根据用户角色不同(校长、教师、学生)进入到不同的页面。为了便于理解,猫哥贴下当前的项目结构图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/4d4ec1b3fad92a7c5682cef7690657c4)
最容易理解的,就是根据登录角色的不同,跳转到不同的页面,然后根据角色对应的功能设计,不同页面显示不同的内容。好的,我们就先来实现这一点。
首先是校长这个角色,我们希望他登录成功后,进入一个后台界面,这个界面上方有我们的系统名称和登录用户的信息,左边有菜单可以选择对应的操作,右边是具体的文字、按钮等功能显示区域。那么我们应该简单的设计为:
预览下界面,大体还可以,凑合着用吧。
对应css也调整下
好的,感觉自己棒棒哒,大体样子出来啦:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201908/31/a05b459e8e9842d40be92deb4bf806ed)
本篇到此为止,下一篇还得继续完善下,完善的内容还有:
这些还是属于schoolmaster.jsp内容,所以下一篇依然是
task2-1,首先要理解不同的页面,所谓不同的页面,是指校长或者教师或者学生登录进来,看到的菜单、功能、显示是有所不同的。但是对于程序设计者来说,有多重方式可以实现这种不同。
最容易理解的,就是根据登录角色的不同,跳转到不同的页面,然后根据角色对应的功能设计,不同页面显示不同的内容。好的,我们就先来实现这一点。
首先是校长这个角色,我们希望他登录成功后,进入一个后台界面,这个界面上方有我们的系统名称和登录用户的信息,左边有菜单可以选择对应的操作,右边是具体的文字、按钮等功能显示区域。那么我们应该简单的设计为:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>schoolmaster.jsp</title> </head> <body> <div id="top"> </div> <div id="left"> </div> <div id="right"> </div> </body> </html>
task2-2,参考猫哥的前文《猫哥带你去战斗——Java Web开发——网页篇[6]——布局 》,简单设计一下布局如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>schoolmaster.jsp</title> <style type="text/css"> /*星号表示选择全部,设置外边距0,内边距0,字体大小12px,宋体*/ *{ margin:0px; padding:0px; font-size:12px; font-family:"宋体"; } /*整个body区域背景色为#F5F5F5,这个很简单,自己下载个取色器,找个漂亮的网页,取个颜色就行*/ body { background-color: #FCFCFC; } /*在top、left、right外面套用一层main是为了控制宽度,并且整体居中*/ #main{ width:1000px; margin:0px auto; } /*宽度占满它爹的宽度,高度64px是瞎试的,不好看再调整,猫哥喜欢用16px、32px、64px、128px这些,你懂的。 背景色猫哥继续取色器,文字颜色取色器,标题部分啊文字用微软雅黑,大气! line-height表示文字占用的高度,它也是64那就是文字占用高度跟top区域高度是一样的嘛,所以文字就居中了*/ #top{ width:100%; height:64px; background-color:#000000; color:#FFFFFF; font-family:"微软雅黑"; line-height:64px; font-size:36px; } /*宽度占200px差不多了吧 float表示漂浮,left的话就是靠左了,所以这个left区域就得靠左飘飘了 内部的东西跟边距有点距离好看点,暂时定为10px,上下左右都是哦*/ #left{ width:200px; height:536px;/*猫哥认为600-64=536*/ float:left; background-color:#EEEEEE; padding:10px; } /*同理right向右飘*/ #right{ width:760px;/*1000-200-10*4=760,此处一定要注意padding的内容会拓宽div整体宽度,有志于前端的可以专门去研究下*/ min-width:600px; height:536px;/*猫哥认为600-64=536*/ float:right; background-color:#FFFFFF; padding:10px; } </style> </head> <body> <div id="main"> <div id="top"> 猫哥培训班作业管理系统 </div><!-- top部分是标题栏 --> <div id="left"> 这边是菜单 </div><!-- left部分是菜单栏 --> <div id="right"> 这边是内容 </div><!-- right部分是具体内容显示区 --> </div> </body> </html>
预览下界面,大体还可以,凑合着用吧。
task2-3,咱们再把左边菜单栏弄上。如下:
<div id="left"> <ul> <li>菜单1</li> <li>菜单1</li> <li>菜单1</li> <li>菜单1</li> <li>菜单1</li> </ul> </div><!-- left部分是菜单栏 -->
对应css也调整下
/*调整id=left的div中的ul标签下的li标签的样式为上边距10px,左边距15px*/ #left ul li{ margin:10px 0px 0px 15px; }
好的,感觉自己棒棒哒,大体样子出来啦:
本篇到此为止,下一篇还得继续完善下,完善的内容还有:
1,顶部标题栏,分为左右两侧,左侧系统名称,右侧登录信息提示 2,左侧菜单栏菜单内容改为超级链接形式 3,研究左侧点击按钮后,右侧跳转到不同的内容
这些还是属于schoolmaster.jsp内容,所以下一篇依然是
task2-x。
相关文章推荐
- JSP+Servlet培训班作业管理系统[18] -完结篇之后端源代码
- JSP+Servlet培训班作业管理系统[23] -番外篇之Java Web日志
- JSP+Servlet培训班作业管理系统[22] -番外篇之过滤器与权限管理
- JSP+Servlet培训班作业管理系统[5]-加载角色对应菜单
- JSP+Servlet培训班作业管理系统[4]-记录登录用户信息
- JSP+Servlet培训班作业管理系统[13] -使用基于Action的后端(用户登录为例)
- JSP+Servlet培训班作业管理系统[6]-人员管理功能实现
- JSP+Servlet培训班作业管理系统[9] -登录功能的实现
- JSP+Servlet培训班作业管理系统[20] -番外篇之登录页美工设计
- JSP+Servlet培训班作业管理系统[7] -Mysql数据库设计
- JSP+Servlet培训班作业管理系统[21] -番外篇之登录页美工实现
- JSP+Servlet培训班作业管理系统[15] -事务的使用时机(以新增作业为例)
- JSP+Servlet培训班作业管理系统[14] -分页(以人员管理为例)
- JSP+Servlet培训班作业管理系统[16] -使用事务完成新增作业功能
- JSP+Servlet培训班作业管理系统[0]-功能设计(必须看下)
- JSP+Servlet培训班作业管理系统[17] -完结篇之功能点介绍
- JSP+Servlet培训班作业管理系统[1]-登录功能的简单实现
- JSP+Servlet培训班作业管理系统[19] -完结篇之前端源代码
- JSP+Servlet培训班作业管理系统[11] -通用CRUD后端的实现(以人员管理为例)
- 基于jsp+servlet图书管理系统之后台用户信息插入操作