体育馆系统——前端设计

最新推荐文章于 2023-10-26 12:13:23 发布

IT开发者

最新推荐文章于 2023-10-26 12:13:23 发布

阅读量2.2k

点赞数

本文转自：广东海洋大学体育馆管理系统开发日记（10）——前端设计 - 郭剑锋 - 云代码空间 http://yuncode.net/article/a_50f4d7e4edc2393

本文主要内容是web前端设计，包括html，css，js，jsp等技术。页面采用div+css布局，前台模板均是jsp页面，但不能直接访问，而是通过控制器调用，后面将会讲到。整个系统分为两大部分——用户前台和管理员后台。用户前台使用红色作为主色调，体现体育的激情；管理员后台用了蓝色作为主色调。

GYM配色示意图

下面先制作页面公共部分。

header.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path2 = request.getContextPath();
	String basePath2 = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path2 + "/";
%>

<!--header-->

<div id="header">
  <div class="content">
    <div class="logo"> <a href="<%=basePath2 %>"><img src="<%=basePath2%>images/logo.png" width="100" height="100" /></a> </div>
    <div class="name">
      <h1> 广东海洋大学体育馆网上系统 </h1>
      <span class="version">beta1.0</span> </div>
    <div class="banner"> <img src="<%=basePath2%>images/banner.png" /> </div>
  </div>
</div>

<!--navigation-->
<div id="menu">
  <ul>
    <li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
    <li id="m_1" class='m_li' onmouseover='mover(1);'
			onmouseout='mout(1);'> <a href="<%=basePath2%>">首页</a> </li>
    <li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
    <li id="m_2" class='m_li' onmouseover='mover(2);'
			onmouseout='mout(2);'> <a href="<%=basePath2%>match/index.html">体育赛事</a> </li>
    <li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
    <li id="m_3" class='m_li' onmouseover='mover(3);'
			onmouseout='mout(3);'> <a href="<%=basePath2%>ground/index.html">场地预定</a> </li>
    <li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
    <li id="m_4" class='m_li' onmouseover='mover(4);'
			onmouseout='mout(4);'> <a href="<%=basePath2%>equipment/index.html">器材租借</a> </li>
    <li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
    <li id="m_5" class='m_li' onmouseover='mover(5);'
			onmouseout='mout(5);'> <a href="<%=basePath2%>user/index.html">个人中心</a> </li>
    <li class="m_line"> <img src="<%=basePath2%>images/line1.gif" /> </li>
    <li id="m_6" class='m_li' onmouseover='mover(6);'
			onmouseout='mout(6);'> <a href="<%=basePath2%>notice/index.html">公告</a> </li>
    <li class="m_line"> <img src="<%=basePath2%>admin/images/line1.gif" /> </li>
    <li id="m_7" class='m_li' onmouseover='mover(7);'
			onmouseout='mout(7);'> <a href="<%=basePath2%>help/index.html">帮助</a> </li>
  </ul>
</div>
<div style="height: 32px; background-color: #F1F1F1;">
  <ul class="smenu">
    <li style="padding-left: 29px;" id="s_1" class='s_li'
			onmouseover='mover(1);' onmouseout='mout(1);'> 欢迎光临广东海洋大学体育馆网上系统
      <% if(null == request.getSession().getAttribute("uName")) {%>
      <span class="login"><a href="<%=basePath2%>login.html">登录</a> </span> <span class="reg"><a href="<%=basePath2%>regist.html">注册</a> </span>
      <% }else{
				out.print(request.getSession().getAttribute("uName"));
%>
      <a href="<%=basePath2%>login.html?action=logout">退出登录</a>
      <%}%>
    </li>
    <li style="padding-left: 141px;" id="s_2" class='s_li'
			onmouseover='mover(2);' onmouseout='mout(2);'> </li>
    <li style="padding-left: 252px;" id="s_3" class='s_li'
			onmouseover='mover(3);' onmouseout='mout(3);'> </li>
    <li style="padding-left: 364px;" id="s_4" class='s_li'
			onmouseover='mover(4);' onmouseout='mout(4);'> </li>
    <li style="padding-left: 476px;" id="s_5" class='s_li'
			onmouseover='mover(5);' onmouseout='mout(5);'> <a href="<%=basePath2%>user/index.html?action=alterinfo">修改信息</a> <span class="split">|</span> <a href="<%=basePath2%>user/index.html?action=resetpwd">修改密码</a> <span class="split">|</span> <a href="<%=basePath2%>user/index.html?action=mybook">我的预约</a> <span class="split">|</span> <a href="<%=basePath2%>user/index.html?action=myrent">我的租借</a> </li>
    <li style="padding-left: 588px;" id="s_6" class='s_li'
			onmouseover='mover(6);' onmouseout='mout(6);'> </li>
    <li style="padding-left: 700px;" id="s_7" class='s_li'
			onmouseover='mover(7);' onmouseout='mout(7);'> </li>
  </ul>
</div>

<!--header-->

footer.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path3 = request.getContextPath();
	String basePath3 = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path3 + "/";
%>

<!--footer-->

<div class="clear"></div>
<div id="footer"> <a href="http://yuncode.net/10000" target="_blank">关于本站</a> - <a href="http://yuncode.net/10260" target="_blank">联系我们</a> - <a href="http://yuncode.net/10044" target="_blank">人才招聘</a> - <a href="http://yuncode.net/10044" target="_blank">免责条款</a> - <a href="http://yuncode.net/10056" target="_blank">意见反馈</a> - <a href="http://yuncode.net/10053" target="_blank">网站导航</a><br />
  <br />
  Copyright @ 2012-2013 www.jianfengstudio.com online services. <br />
  All rights reserved.Security Powered by GDOU SE Class 1102 Group 22 <br />
  粤ICP备xxxxxxxx号<br />
  <br />
</div>
<script>
	init();
	movec();
</script> 
<!--footer-->

header.jsp包括了页面头部和导航栏，footer.jsp包括了页面底部的相关信息和版权信息，这些每个页面都要用到，因此我把他们放在WebRoot/include里面，然后每个页面的头部和尾部都用<%@ include file="include/header.jsp"%>和<%@ include file="include/footer.jsp"%>来引用。这样做好处有两点，一是提高了代码的重用性，“以代码重用为荣，以复制粘贴为耻”；二是不会导致一处修改，每个文件都要修改。

接下来就是前台主页的设计了。
index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
	contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广东海洋大学体育馆管理系统</title>
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<script src="js/nav.js" type="text/javascript"></script>
<script src="js/focus.js" type="text/javascript"></script>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>

<body>
<%@ include file="include/header.jsp"%>
<div id="main">
  <div id="row_1">
    <div id="slide">
      <div class="sub_box">
        <div id="p-select" class="sub_nav">
          <div class="sub_more"> <a href="#" onfocus="this.blur()" title="更多"
									style="font-family: Tahoma; font-size: 12px;" target="_blank">更多</a> </div>
          <div class="sub_no" id="bd1lfsj">
            <ul>
              <li class="show"> 1 </li>
              <li class=""> 2 </li>
              <li class=""> 3 </li>
              <li class=""> 4 </li>
              <li class=""> 5 </li>
            </ul>
          </div>
        </div>
        <div id="bd1lfimg">
          <div>
            <dl class="show">
            </dl>
            <dl class="">
              <dt> <a href="http://yuncode.net/article/a_50e1aebfde00097" title="" target="_blank"><img src="upload/1.jpg" /> </a> </dt>
              <dd>
                <h2> <a href="http://yuncode.net/article/a_50e1aebfde00097" target="_blank">12306网上订票系统瘫痪背后的那些事儿</a> </h2>
              </dd>
            </dl>
            <dl class="">
              <dt> <a href="http://yuncode.net/article/a_50e14d20e55bd0" title="" target="_blank"><img src="upload/2.jpg" /> </a> </dt>
              <dd>
                <h2> <a href="http://yuncode.net/article/a_50e14d20e55bd0" target="_blank">Google数据中心探访</a> </h2>
              </dd>
            </dl>
            <dl class="">
              <dt> <a href="http://yuncode.net/article/a_50e43ba8dd10777" title="" target="_blank"><img src="upload/3.jpg" /> </a> </dt>
              <dd>
                <h2> <a href="http://yuncode.net/article/a_50e43ba8dd10777" target="_blank">10个问题找到答案 搜狗VS百度语音助手</a> </h2>
              </dd>
            </dl>
            <dl class="">
              <dt> <a href="http://yuncode.net/article/a_50e1561624b8078" title="" target="_blank"><img src="upload/4.jpg" /> </a> </dt>
              <dd>
                <h2> <a href="http://yuncode.net/article/a_50e1561624b8078" target="_blank">Java图形——水纹倒映效果</a> </h2>
              </dd>
            </dl>
            <dl class="">
              <dt> <a href="http://yuncode.net/article/a_50e152fd4706497" title="" target="_blank"><img src="upload/5.jpg" /> </a> </dt>
              <dd>
                <h2> <a href="http://yuncode.net/article/a_50e152fd4706497" target="_blank">JAVA图形操作类</a> </h2>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
    <div id="match">
      <div class="column"> 最新赛事 </div>
      <div class="content">
        <ul>
          <c:forEach items="${requestScope.matchList}" var="list">
            <li> <span class="title"><a href="match/index.html?mid=${list.getmId() }">${list.getmName()} </a> </span> <span class="time">${list.getmDate()}</span> </li>
          </c:forEach>
        </ul>
      </div>
    </div>
    <div class="clear"></div>
    <div id="sports-icon"> <img src="images/icon.jpg" /></div>
  </div>
</div>
<script>
	var def = "1";
</script>
<%@ include file="include/footer.jsp"%>
</body>
</html>

        这里用到的jstl标签可以暂时忽略。因为现在是前端设计，不考虑后端传送的数据，只考虑如何显示，如何布局。另外用到了一个图片幻灯片播放，这是网上找来的一个代码，稍作修改即可使用。
      代码底部的var def = "1"; 表示当前页面导航栏的第一个标签高亮。例如 var def = "2"; ，那么体育赛事标签高亮。这样做的好处是导航栏可以放到公共引用文件中，但在不同的页面下会高亮对应的标签，用户一看就知道自己当前在哪里。
      关于css类和id的命名，一般涉及布局方面的用id，因为这一般只出现一次；其余的考虑重复使用，都用class。命名方式是单词之间用“-”隔开。具体css文件可下载打包文件查看。

广东海洋大学体育馆管理系统首页

至此主页模板制作完成。其他模块模板制作过程类似，下面仅给出注册和登录的页面源代码。

regist.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
	contentType="text/html; charset=utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册 - 广东海洋大学体育馆网上系统</title>
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<script src="js/nav.js" type="text/javascript"></script>
<script src="js/focus.js" type="text/javascript"></script>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/account.css" rel="stylesheet" type="text/css" />
</head>

<body>
<%@ include file="include/header.jsp"%>
<div id="main">
  <div id="row_1">
    <div id="reg_banner"><img src="images/login_banner.jpg" /></div>
    <div id="reg_div">
      <form action="regist.html" method="post">
        校园卡号：
        <input name="uid" type="text" class="input_text" />
        * <br />
        姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
        <input name="name" type="text" class="input_text" />
        * <br />
        密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
        <input name="password" type="password" class="input_text" />
        * <br />
        确认密码：
        <input name="password2" type="password" class="input_text" />
        * <br />
        邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：
        <input name="email" type="text" class="input_text" />
        * <br />
        手机号码：
        <input name="phone" type="text" class="input_text" />
        * <br />
        身份证号：
        <input name="idcard" type="text" class="input_text" />
        * <br />
        <br />
        <br />
        <input type="submit" value="注册" class="btn" />
        <input type="reset" value="重置" class="btn" />
      </form>
    </div>
  </div>
</div>
<script>
	var def = "1";
</script>
<%@ include file="include/footer.jsp"%>
</body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
	contentType="text/html; charset=utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录 - 广东海洋大学体育馆网上系统</title>
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<script src="js/nav.js" type="text/javascript"></script>
<script src="js/focus.js" type="text/javascript"></script>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/account.css" rel="stylesheet" type="text/css" />
</head>

<body>
<%@ include file="include/header.jsp"%>
<div id="main">
  <div id="row_1">
    <div id="login_banner"><img src="images/login_banner.jpg" /></div>
    <div id="login_div">
      <form action="login.html" method="post">
        <span class="tmp">用户名：</span>
        <input name="uid" type="text" class="input_text" />
        <br />
        密&nbsp;&nbsp;&nbsp;码：
        <input name="password" type="password" class="input_text" />
        <br />
        <br />
        <br />
        <input type="submit" value="登录" class="btn" />
        <input type="reset" value="重置" class="btn" />
      </form>
    </div>
  </div>
</div>
<script>
	var def = "1";
</script>
<%@ include file="include/footer.jsp"%>
</body>
</html>

效果图如下：

广东海洋大学体育馆管理系统主注册页面

广东海洋大学体育馆管理系统登录页面

接下来就是管理员后台页面的前端设计了。管理员后台的所有页面、css以及js文件都放在WebRoot/admin目录下，目的是更好地管理和跟前台区分，不然写代码过程中会很容易混乱。这里跟前台设计过程差不多，但因为是后台，所以设计尽可能简洁。

admin/index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
	contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广东海洋大学体育馆管理系统后台</title>
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<script src="js/nav.js" type="text/javascript"></script>
<script src="js/focus.js" type="text/javascript"></script>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>

<body>
<%@ include file="include/header.jsp"%>
<div id="main">
  <div id="row_1">
    <% if(null == request.getSession().getAttribute("aId")) {%>
    <div id="admin-login">
      <form action="" method="post">
        <p> 工号&nbsp;&nbsp;
          <input name="aid" type="text" class="input_text" />
        </p>
        <p> 密码&nbsp;&nbsp;
          <input name="password" type="password" class="input_text" />
        </p>
        <p>
          <input name="action" type="hidden" value="login" />
          <input name="" type="submit" value="登录" class="btn_submit" />
          <input name="" type="reset" value="重置" class="btn_submit" />
        </p>
      </form>
    </div>
    <% }else{%>
    <table class="admin-info" cellspacing="2px">
      <c:forEach items="${requestScope.adminList}" var="list">
        <tr>
          <th scope="row">编号</th>
          <td>${list.getaId()}</td>
        </tr>
        <tr>
          <th scope="row">姓名</th>
          <td>${list.getaName()}</td>
        </tr>
        <tr>
          <th scope="row">身份证号</th>
          <td>${list.getIdCardNo()}</td>
        </tr>
        <tr>
          <th scope="row">出生日期</th>
          <td>${list.getBirthdate()}</td>
        </tr>
        <tr>
          <th scope="row">权限</th>
          <td>${list.getPower()}</td>
        </tr>
        <tr>
          <th scope="row">手机号码</th>
          <td>${list.getPhone()}</td>
        </tr>
        <tr>
          <th scope="row">入职日期</th>
          <td>${list.getaEntry()}</td>
        </tr>
        <tr>
          <th scope="row">状态</th>
          <td>${list.getStatus()}</td>
        </tr>
      </c:forEach>
    </table>
    <br />
    <br />
    <h3 class="align-center"> <a href="index.html?action=logout">退出登录</a> </h3>
    <%}%>
  </div>
</div>
<script>
	var def = "1";
</script>
<%@ include file="include/footer.jsp"%>
</body>
</html>

广东海洋大学体育馆管理系统后台首页

这个系统中有很多地方需要显示列表信息，例如场地列表，器材列表，用户列表......所有的表格都采用统一的无边框风格。

无边框表格

所有页面的目录结构如下

      每个模块下都有一个index.jsp，这是每个模块的首页，一般用于显示该模块下的信息。比如WebRoot/ground/index.jsp显示所有场地的列表。

      其实前端设计大部分工作量就是布局，以及调试css，直到跟原设计大致一样。写代码前一定要有一个大致的设计思路，比如配色，风格，页面整体布局，文件目录结构......不然的话做出来的网页会不协调，而且容易导致大量的返工。至于css的运用技巧和页面布局需要平时多观察，多积累。大家平时看到不错的网页，可以看看它的源代码；也可以多到这里逛逛 http://yuncode.net/list/web，有什么好的源码别忘了保存到自己的代码库里 http://yuncode.net/mylib。
      整个项目的源代码将在最后一篇文章里发布，系统有很多不完善的地方，有兴趣而且有时间的朋友可以一起去完善一下，并写一下开发日记记录自己的开发历程。