系统的用户界面作为人机接口起着越来越重要的作用。它的好坏直接影响到系统的使用性。具有友好界面的系统，对于用户来说，无疑是一种享受。
用户界面，作为软件的重要组成部分应具有可使用性、灵活性、复杂性和可靠性
本系统在界面设计中采用CSS技术，插入表格、框架和表单项，为丰富网页内容，加入丰富多彩的画面，更形象的为用户提供有用的信息，达到可视化的目的。
各模块界面如下：
(1) 用户登录模块界面：
图5.1登录界面
(2) 管理员管理首页：
图5.2主界面
(3) 用户模块界面：
图5.3管理员管理界面
(4) 运动员模块界面：
图5.4运动员管理界面
(5) 运动会模块界面：
图5.5运动会管理界面
(6) 成绩模块界面：
图5.6成绩管理界面
(7) 公告模块界面：
图5.7公告管理界面
(8) 密码修改模块界面：
图5.8密码修改界面
(9) 运动员查看公告界面：
图5.9运动员查看公告界面
(10) 运动员查看成绩界面：
图5.10运动员查看成绩界面
5.2 各模块功能设计
(1) 登录系统模块：
此模块主要完成院系用户登录信息的录入、核对功能。规定了登录用户的权限。用户登录后方可使用本系统进行相应的操作。
(2) 管理员系统模块：
由增加删除用户与运动员、设定比赛项目生成报名表格等模块组成。让管理员根据实际情况操作该系统。
(3) 运动员系统模块：
由查看公告、查看成绩等模块组成。让运动员根据实际情况操作该系统。
5.3系统代码实现
<%try{
//使用jdbc与odbc桥创建数据库联接
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
//声明连接接口，使用DriverManager类的getConnection()方法建立联接
Connection conn=DriverManager.getConnection("jdbc:odbc:demo11","","");
//创建SQL语句执行类
Statement stmt=conn.createStatement();
//创建数据集
ResultSet rs;
//创建查询的SQL语句
String sql="SELECT xmb_num,xmname,lx,jfdw,s_num,sname,sex,grade,cls,name,man,tel FROM bmb,xmb,student,dept WHERE s_num=student.id AND xmb_num=xmb.id AND dep_id=dept.id";
//执行查询操作
rs=stmt.executeQuery(sql);
//显示查询操作
while(rs.next())
{
%>
<tr><td><%=rs.getString("xmb_num")%></td>
<td><%=rs.getString("xmname")%></td>
<td><%=rs.getString("lx")%></td><td>
<%=rs.getString("jfdw")%></td>
<td><%=rs.getString("sname")%></td>
<td><%=rs.getString("s_num")%></td>
<td><%=rs.getString("sex")%></td>
<td><%=rs.getString("cls")%></td>
<td><%=rs.getString("grade")%></td>
<td><%=rs.getString("name")%></td>
<td><%=rs.getString("man")%></td>
<td><%=rs.getString("tel")%></td>
</tr>
<%
}
//关闭资源
rs.close();
stmt.close();
//关闭数据库联接
conn.close(); }
catch(Exception e){
e.printStackTrace();
}
%>
