冲刺总结-day7

完成任务:前端设计

设计系统前端,利用html和css对登录页面和进入系统操作界面进行界面化设计,使系统看起来美观、简洁。

一、设计思路

       利用HTML对整个网页页面进行布局和设计内容,使用CSS对每一个组件的具体样式进行设计美化,在整体的布局和样式做好后让 JavaScript 负责与后台进行交互,实现整个网页的动态实现。

二、 登录界面

各部分代码功能:

1.欢迎界面

 

 2.侧边栏

 该部分为用户登录进入系统后网页左边显示的菜单栏。首先用HTML对整个菜单栏页面进行布局和设计内容,该部分我建立了一个表单,再将表单切割为几大模块。分别是管理员、单位和员工所对应的不同功能。再用CSS对每一个组件的具体样式进行设计美化。最后调用 JS脚本, 实现与后台进行交互,让菜单栏显示出与登录页面所选角色相对应的具体功能。

%>
<ul>
<%
if(adminlogin != null && adminlogin.size() != 0){
if(adminlogin.get(3).equals("2")){
%>
  <li><a href="<%=path %>/admin/document.jsp">公文管理</a></li>
<%}else{ %>
  <li><a href="javascript:void(0)" style="color:#CCC">公文管理</a></li>
<%} %>
<%if(adminlogin.get(3).equals("3")){ %>
  <li><a href="<%=path %>/admin/lingdao.jsp">院领导审批</a></li>
  <li><a href="<%=path %>/admin/examine.jsp">公文审批</a></li>
  <li><a href="<%=path %>/admin/issue.jsp">可下发公文</a></li>
<%}else{ %>
  <li><a href="javascript:void(0)" style="color:#CCC">院领导审批</a></li>
  <li><a href="javascript:void(0)" style="color:#CCC">公文审批</a></li>
  <li><a href="javascript:void(0)" style="color:#CCC">可下发公文</a></li>
<%} %>
<%if(adminlogin.get(3).equals("1")){ %>
  <li><a href="<%=path %>/admin/systemuser.jsp">系统用户管理</a></li>
  <li><a href="<%=path %>/admin/dep.jsp">学院部门管理</a></li>
<%}else{ %>
  <li><a href="javascript:void(0)" style="color:#CCC">系统用户管理</a></li>
  <li><a href="javascript:void(0)" style="color:#CCC">学院部门管理</a></li>
<%}} %>
</ul>
<title>公文流转系统</title>
<style>
.table-padding td {padding:5px;}
</style>
<div class="north-left">公文流转系统</div>
<div class="north-right">欢迎:<%=adminlogin != null && adminlogin.size() != 0?adminlogin.get(1):"" %>&nbsp;--&gt;&nbsp;
用户角色:<%
        if(adminlogin != null && adminlogin.size() != 0){
           if(adminlogin.get(3).equals("1") || adminlogin.get(3).equals("2")){
              %><%=adminlogin.get(4) %><%
           }else{
            ArrayList dep = array.getDep(adminlogin.get(4).toString());
            %><%=dep.get(1) %><%
           }
        }
        %>&nbsp;--&gt;&nbsp;<a href="javascript:void(0)" id="editpass">修改密码</a>&nbsp;--&gt;&nbsp;<a href="javascript:void(0)" id="click_logout">安全退出</a></div>

 

3.登录界面

 

<style>
.table-padding td {padding:5px;}
</style>
<form id="form_login" method="post">
  <table class="table-padding">
    <tr>
      <td align="right">用户名:</td>
      <td><input class="easyui-validatebox" type="text" name="name" required="true" validType="pattern" customize="Customize" /></td>
    </tr>
    <tr>
      <td align="right">密码:</td>
      <td><input class="easyui-validatebox" type="password" name="pwd" required="true" validType="pattern" customize="Customize" /></td>
    </tr>
  </table>
</form>

4.用户管理

在此界面下可对所有用户进行查看,并可删除用户,也可以跳转至用户添加界面。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path %>/css/base.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/admin-css.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/js/admin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('tbody tr:even').css({'background':'#ffffff'});
   $('tbody tr:odd').css({'background':'#eeeeff'});
   var message = <%=message %>;
   if(message != null && message != ""){
      alert(message);
   }
   login('<%=path %>',<%=closed %>);
   $("#click_logout").click(function(){
      logout('<%=path %>');
   });
   $("#editpass").click(function(){
      editpass('<%=path %>');
   });
})
</script>
</head>
<body class="easyui-layout" style="overflow-y: hidden"  scroll="no" resizable="false">
<div id="north" region="north" split="false" border="false">
  <jsp:include page="/admin/head.jsp"></jsp:include>
</div>
<div region="west" split="false" border="false" title="导航菜单" style="width:180px;" id="west">
  <div id="left-menus" border="false" fit="true">
    <jsp:include page="/admin/left.jsp"></jsp:include>
  </div>
</div>
<div id="mainPanle" region="center" border="true" style="background:#f7f7f7; padding:5px;">
  <table width="100%">
    <thead>
      <tr>
        <td colspan="4" align="center" style="padding:5px;">系统用户管理</td>
      </tr>
      <tr>
        <td colspan="4" style="padding:5px;"><a href="<%=path %>/admin/systemuser_add.jsp">添加系统用户</a></td>
      </tr>
      <tr class="thead">
        <td align="center">序号</td>
        <td align="center">用户名</td>
        <td align="center">身份</td>
        <td align="center">操作</td>
      </tr>
    </thead>
    <tbody class="tbody">
    <%
    if(admin != null && admin.size() != 0){
       for(int i = 0;i < admin.size();i++){
          ArrayList alRow = (ArrayList)admin.get(i);
    %>
      <tr>
        <td align="center"><%=i+1 %></td>
        <td align="center"><%=alRow.get(1) %></td>
        <td align="center"><%
           if(alRow.get(3).equals("1") || alRow.get(3).equals("2")){
              %><%=alRow.get(4) %><%
           }else{
            ArrayList dep = array.getDep(alRow.get(4).toString());
            %><%=dep.get(1) %><%
           }
        %></td>
        <td align="center"><a href="<%=path %>/DelServlet?admin=<%=alRow.get(0) %>">删除</a></td>
      </tr>
      <%}} %>
    </tbody>
  </table>
</div>
</body>
</html>

5.用户添加

此界面用于新用户注册并赋予权限。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path %>/css/base.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/admin-css.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/js/admin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('tbody tr:even').css({'background':'#ffffff'});
   $('tbody tr:odd').css({'background':'#eeeeff'});
   var message = <%=message %>;
   if(message != null && message != ""){
      alert(message);
   }
   login('<%=path %>',<%=closed %>);
   $("#click_logout").click(function(){
      logout('<%=path %>');
   });
   $("#editpass").click(function(){
      editpass('<%=path %>');
   });
   $("#admin_add").click(function(){
      adminAdd('<%=path %>');
   });
   $('#cc').combogrid('disable');
   $('input[name=type]').click(function(){
      var lives = $(this).attr('lives');
      $('#cc').combogrid(lives);
   })
})
function check(){
   if($('#form_systemuser_add').form('validate') == false){
      return false;
   }
   if($('#cc').combobox('getValue') == "0" && $(':radio[name=type][checked]').val() == "3"){
      $.messager.alert('系统消息','请选择学院部门!','info');
      return false;
   }
}
</script>
</head>
<body class="easyui-layout" style="overflow-y: hidden"  scroll="no" resizable="false">
<div id="north" region="north" split="false" border="false">
  <jsp:include page="/admin/head.jsp"></jsp:include>
</div>
<div region="west" split="false" border="false" title="导航菜单" style="width:180px;" id="west">
  <div id="left-menus" border="false" fit="true">
    <jsp:include page="/admin/left.jsp"></jsp:include>
  </div>
</div>
<div id="mainPanle" region="center" border="true" style="background:#f7f7f7; padding:5px;"><br/><br/><br/><br/><br/>
  <form id="form_systemuser_add" method="post" action="<%=path %>/AdminAddServlet" onSubmit="return check()">
    <table border="1" align="center" cellpadding="5">
      <tr>
        <td colspan="2" align="center">系统用户添加</td>
      </tr>
      <tr>
        <td align="right">用户名:</td>
        <td><input class="easyui-validatebox" type="text" name="name" required="true" validType="pattern" customize="Customize" /></td>
      </tr>
      <tr>
        <td align="right">密码:</td>
        <td><input class="easyui-validatebox" type="password" name="pwd" required="true" validType="pattern" id="systemusers_pwd" customize="Customize" /></td>
      </tr>
      <tr>
        <td align="right">重复密码:</td>
        <td><input class="easyui-validatebox" type="password" name="repeatpwd" required="true" validType="repeat'#systemusers_pwd'" customize="Customize" /></td>
      </tr>
      <tr>
        <td align="right">发布类型:</td>
        <td><input type="radio" name="type" value="1" lives="disable" checked>
          <span>管理员</span>&nbsp;
          <input type="radio" name="type" value="2" lives="disable">
          <span>拟稿人</span>&nbsp;
          <input type="radio" name="type" value="3" lives="enable">
          <span>学院部门</span></td>
      </tr>
      <tr>
        <td align="right">学院部门:</td>
        <td><select id="cc" class="easyui-combobox" name="status" editable="false" required="true" style="width:200px;">
           <option value="0">-- 请选择学院部门  --</option>
            <%
               ArrayList dep = array.getDep();
               for(int i = 0;i < dep.size();i++){
                  ArrayList alRow = (ArrayList)dep.get(i);
               %>
            <option value="<%=alRow.get(0) %>"><%=alRow.get(1) %></option>
            <%} %>
          </select></td>
      </tr>
      <tr>
        <td align="right">&nbsp;</td>
        <td><input type="submit" value="提交"></td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>

6.账户密码修改

对用户账户密码进行修改。

<style type="text/css">
.table-padding td {padding:5px;}
</style>
<form id="form_pwd_update" method="post">
  <table class="table-padding">
    <tr>
      <td align="right">新密码:</td>
      <td><input class="easyui-validatebox" type="password" name="newpwd" required="true" validType="pattern" id="admin_new_pwd" customize="Customize" /></td>
    </tr>
    <tr>
      <td align="right">重复新密码:</td>
      <td><input class="easyui-validatebox" type="password" name="repeatpwd" required="true" validType="repeat'#admin_new_pwd'" customize="Customize" /></td>
    </tr>
  </table>
</form>

7.学院部门管理

查看学院所有部门,并可以进行删除操作,并可以跳转至部门添加界面。原理同用户管理。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path %>/css/base.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/admin-css.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/js/admin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('tbody tr:even').css({'background':'#ffffff'});
   $('tbody tr:odd').css({'background':'#eeeeff'});
   var message = <%=message %>;
   if(message != null && message != ""){
      alert(message);
   }
   login('<%=path %>',<%=closed %>);
   $("#click_logout").click(function(){
      logout('<%=path %>');
   });
   $("#editpass").click(function(){
      editpass('<%=path %>');
   });
})
</script>
</head>
<body class="easyui-layout" style="overflow-y: hidden"  scroll="no" resizable="false">
<div id="north" region="north" split="false" border="false">
  <jsp:include page="/admin/head.jsp"></jsp:include>
</div>
<div region="west" split="false" border="false" title="导航菜单" style="width:180px;" id="west">
  <div id="left-menus" border="false" fit="true">
    <jsp:include page="/admin/left.jsp"></jsp:include>
  </div>
</div>
<div id="mainPanle" region="center" border="true" style="background:#f7f7f7; padding:5px;">
  <table width="100%">
    <thead>
      <tr>
        <td colspan="3" align="center" style="padding:5px;">学院部门管理</td>
      </tr>
      <tr>
        <td colspan="3" style="padding:5px;"><a href="<%=path %>/admin/dep_add.jsp">添加学院部门</a></td>
      </tr>
      <tr class="thead">
        <td align="center">序号</td>
        <td align="center">学院部门名称</td>
        <td align="center">操作</td>
      </tr>
    </thead>
    <tbody class="tbody">
    <%
    if(dep != null && dep.size() != 0){
       for(int i = 0;i < dep.size();i++){
          ArrayList alRow = (ArrayList)dep.get(i);
    %>
      <tr>
        <td align="center"><%=i+1 %></td>
        <td align="center"><%=alRow.get(1) %></td>
        <td align="center"><a href="<%=path %>/DelServlet?dep=<%=alRow.get(0) %>">删除</a></td>
      </tr>
      <%}} %>
    </tbody>
  </table>
</div>
</body>
</html>

8.公文审批管理

查看当前公文审批情况,并添加新公文,原理同用户管理。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path %>/css/base.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/admin-css.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/js/admin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('tbody tr:even').css({'background':'#ffffff'});
   $('tbody tr:odd').css({'background':'#eeeeff'});
   var message = <%=message %>;
   if(message != null && message != ""){
      alert(message);
   }
   login('<%=path %>',<%=closed %>);
   $("#click_logout").click(function(){
      logout('<%=path %>');
   });
   $("#editpass").click(function(){
      editpass('<%=path %>');
   });
})
</script>
</head>
<body class="easyui-layout" style="overflow-y: hidden"  scroll="no" resizable="false">
<div id="north" region="north" split="false" border="false">
  <jsp:include page="/admin/head.jsp"></jsp:include>
</div>
<div region="west" split="false" border="false" title="导航菜单" style="width:180px;" id="west">
  <div id="left-menus" border="false" fit="true">
    <jsp:include page="/admin/left.jsp"></jsp:include>
  </div>
</div>
<div id="mainPanle" region="center" border="true" style="background:#f7f7f7; padding:5px;">
  <table width="100%">
    <thead>
      <tr>
        <td colspan="8" align="center" style="padding:5px;">审批公文管理</td>
      </tr>
      <tr>
        <td colspan="8" style="padding:5px;color:red;">注:如公文审批未通过,请删除后重新添加</td>
      </tr>
      <tr>
        <td colspan="8" style="padding:5px;"><a href="<%=path %>/admin/document_add.jsp">添加新审批公文</a></td>
      </tr>
      <tr class="thead">
        <td align="center">序号</td>
        <td align="center">公文标题</td>
        <td align="center">审批类型</td>
        <td align="center">审批部门/审批状态</td>
        <td align="center">院领导审批</td>
        <td align="center">下发部门</td>
        <td align="center">提交日期</td>
        <td align="center">&nbsp;</td>
      </tr>
    </thead>
    <tbody class="tbody">
    <%
    if(document != null && document.size() != 0){
       for(int i = 0;i < document.size();i++){
          ArrayList alRow = (ArrayList)document.get(i);
          ArrayList examine = array.getExamineDocument(alRow.get(0).toString());
          ArrayList depd = array.getDep(alRow.get(5).toString());
          String flag = "0";
          String str = "";
          if(alRow.get(7).equals("0")){
             str = "审批中";
           }else if(alRow.get(7).equals("1")){
              str = "审批已通过";
           }else if(alRow.get(7).equals("2")){
              str = "审批未通过";
              flag = "1";
           }
    %>
      <tr>
        <td align="center"><%=i+1 %></td>
        <%
        if(!alRow.get(8).equals("0")){
        %>
        <td align="center"><a href="<%=path %>/admin/document_show.jsp?id=<%=alRow.get(0) %>"><%=alRow.get(2) %></a></td>
        <%}else{ %>
        <td align="center"><a style="color:red" href="<%=path %>/admin/document_show.jsp?id=<%=alRow.get(0) %>"><%=alRow.get(2) %></a></td>
        <%} %>
        <td align="center"><%=alRow.get(4) %></td>
        <td align="center"><table width="100%">
        <%
        for(int n = 0;n < examine.size();n++){
           ArrayList alRow1 = (ArrayList)examine.get(n);
           ArrayList dep = array.getDep(alRow1.get(2).toString());
           String state = "";
           if(alRow1.get(3).equals("0")){
              state = "审批中";
           }else if(alRow1.get(3).equals("1")){
              state = "审批已通过";
           }else if(alRow1.get(3).equals("2")){
              state = "审批未通过";
              flag = "1";
           }
        %>
          <tr>
            <td align="center"><%=dep.get(1) %></td>
            <td align="center"><%=state %></td>
          </tr>
         <%} %>
        </table></td>
        <td align="center"><%=str %></td>
        <td align="center"><%=depd.get(1) %></td>
        <td align="center"><%=alRow.get(6).toString().substring(0,10) %></td>
        <td align="center"><%=flag.equals("1")?"<a href="+path+"/DelServlet?document="+alRow.get(0)+">删除</a>":"" %></td>
      </tr>
      <%}} %>
    </tbody>
  </table>
</div>
</body>
</html>

9.公文审批

对当前公文进行审批,分通过与未通过。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=path %>/css/base.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/admin-css.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/css/themes/icon.css">
<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path %>/js/admin.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('tbody tr:even').css({'background':'#ffffff'});
   $('tbody tr:odd').css({'background':'#eeeeff'});
   var message = <%=message %>;
   var flag = <%=flag %>;
   if(flag == "1"){
      alert('您不是院领导,不能操作此项目!');
      window.location.href('<%=path %>/admin/index.jsp');
   }
   if(message != null && message != ""){
      alert(message);
   }
   login('<%=path %>',<%=closed %>);
   $("#click_logout").click(function(){
      logout('<%=path %>');
   });
   $("#editpass").click(function(){
      editpass('<%=path %>');
   });
})
</script>
</head>
<body class="easyui-layout" style="overflow-y: hidden"  scroll="no" resizable="false">
<div id="north" region="north" split="false" border="false">
  <jsp:include page="/admin/head.jsp"></jsp:include>
</div>
<div region="west" split="false" border="false" title="导航菜单" style="width:180px;" id="west">
  <div id="left-menus" border="false" fit="true">
    <jsp:include page="/admin/left.jsp"></jsp:include>
  </div>
</div>
<div id="mainPanle" region="center" border="true" style="background:#f7f7f7; padding:5px;">
  <table width="100%">
    <thead>
      <tr>
        <td colspan="6" align="center" style="padding:5px;">公文审批</td>
      </tr>
      <tr class="thead">
        <td align="center">序号</td>
        <td align="center">公文标题</td>
        <td align="center">审批类型</td>
        <td align="center">提交日期</td>
        <td align="center">是否套红</td>
        <td align="center">操作</td>
      </tr>
    </thead>
    <tbody class="tbody">
    <%
    if(document != null && document.size() != 0){
       for(int i = 0;i < document.size();i++){
          ArrayList alRow = (ArrayList)document.get(i);
          String str = "";
          if(alRow.get(7).equals("1")){
             str = "已通过";
          }else if(alRow.get(7).equals("2")){
             str = "未通过";
          }
    %>
      <tr>
        <td align="center"><%=i+1 %></td>
        <%
        if(!alRow.get(8).equals("0")){
        %>
        <td align="center"><a href="<%=path %>/admin/document_show.jsp?id=<%=alRow.get(0) %>"><%=alRow.get(2) %></a></td>
        <%}else{ %>
        <td align="center"><a style="color:red" href="<%=path %>/admin/document_show.jsp?id=<%=alRow.get(0) %>"><%=alRow.get(2) %></a></td>
        <%} %>
        <td align="center"><%=alRow.get(4) %></td>
        <td align="center"><%=alRow.get(6).toString().substring(0,10) %></td>
        <td align="center"><a href="<%=path %>/LingdaoServlet?id=<%=alRow.get(0) %>&state=0">文件套红</a></td>
        <td align="center"><%=alRow.get(7).equals("0")?"<a href='"+path+"/LingdaoServlet?id="+alRow.get(0)+"&state=1'>已通过</a>&nbsp;&nbsp;<a href='"+path+"/LingdaoServlet?id="+alRow.get(0)+"&state=2'>未通过</a>":str %></td>
      </tr>
      <%}} %>
    </tbody>
  </table>
</div>
</body>
</html>

 

上一篇:“String.h” 源代码总结


下一篇:loj 6077 「2017 山东一轮集训 Day7」逆序对 题解