一步一步做项目（7）管理用户信息之Web页面构建

其他 2020-04-04 09:45:18 阅读次数: 0

一步一步做项目（7）管理用户信息之Web页面构建

在前面一步一步做项目（6）管理用户信息SSH配置的基础上继续。

基本思路

整个系统Web页面的构建是基于Bootstrap框架基础上进行的，Web页面主要负责和Struts的Action进行通信，struts.xml中的action配置映射到具体的web页面上，这可以从struts配置中可以看到，具体要构建的页面主要有：浏览用户信息，添加新用户，修改用户信息，删除用户等。
这里进行Web页面构建同样涉及模块化的设计问题，具体的设计可以从下面的代码中窥到。
注意：所有的页面都保存在WebContent/admin/users文件夹下，这里的WebContent指Web页面发布的位置。

显示所有用户列表index.jsp

在这里将显示所有用户清单，具体代码如下：

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- cmis.title -->
  <title><s:text name="Application.name"/> - <s:text name="Users.page.title"/></title>
  <!-- /cmis.title -->
  <jsp:include page="../includes/beginning-notheme.jsp" flush="true" />  
</head>
<body>
  <h4>
    <!-- cmis.navigation -->
    <i class="fa fa-home"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/"><s:text name="Navigation.application.homepage"/></a>
    &nbsp;<i class="fa fa-angle-right"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/admin/index"><s:text name="Navigation.admin.homepage"/></a>
    &nbsp;<i class="fa fa-angle-right"></i>&nbsp;
    <s:text name="Navigation.admin.users.homepage"/>
    <!-- /cmis.navigation -->
  </h4>
  <!-- mainContent -->
  <!-- cmis.Users.title -->
  <h3><s:text name="Users.title.index"/></h3>
  <!-- /cmis.Users.title -->
  <hr>
  <s:actionmessage cssClass="alert alert-danger"/>
            
  <table id="dataTable" class="table table-striped table-hover" style="width:100%;">
    <thead>
      <tr>
        <th><s:text name="Users.fieldName.userId"/></th>
        <th><s:text name="Users.fieldName.userName"/></th>
        <th><s:text name="Users.fieldName.userPassword"/></th>
        <th><s:text name="Users.fieldName.userPhone"/></th>
        <th width="300px"><s:text name="DataTables.title.operate"/></th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th><s:text name="Users.fieldName.userId"/></th>
        <th><s:text name="Users.fieldName.userName"/></th>
        <th><s:text name="Users.fieldName.userPassword"/></th>
        <th><s:text name="Users.fieldName.userPhone"/></th>
        <th width="300px"><s:text name="DataTables.title.operate"/></th>
      </tr>
    </tfoot>
    <tbody><s:iterator value="model">
      <tr>
        <td class="verticalMiddle">${userId}</td>
        <td class="verticalMiddle"><s:property value="userName"/></td>
        <td class="verticalMiddle"><s:property value="userPassword"/></td>
        <td class="verticalMiddle"><s:property value="userPhone"/></td>
        <td width="230px" class="verticalMiddle">
          <div class="btn-group">
            <a href="browse?userId=${userId}" class="btn btn-success">
              <span class="glyphicon glyphicon-eye-open"></span> <s:text name="DataTables.title.browse"/>
            </a>
            <a href="modify?userId=${userId}" class="btn btn-warning">
              <span class="glyphicon glyphicon-edit"></span> <s:text name="DataTables.title.modify"/>
            </a>
            <a href="deleteConfirm?userId=${userId}" class="btn btn-danger">
              <span class="glyphicon glyphicon-trash"></span> <s:text name="DataTables.title.delete"/>
            </a>
          </div>
       </td>
      </tr></s:iterator>
    </tbody>
  </table>
  <script type="text/javascript">
    "use strict";
    $(document).ready(function() {
      $('#dataTable').DataTable( {
        // 功能启用
        "paging":   true,
        "ordering": true,
        "info":     true,
        //分页样式：simple,simple_numbers,full,full_numbers
        "pagingType": "simple_numbers", 
        // 垂直滚动条
        //"scrollY": 350,
        //"scrollCollapse": true,
        // jQueryUI样式支持
        // "jQueryUI": true,
        "renderer": "bootstrap",
        // 保存状态
        "stateSave": true,
        "language": {
          // 格式化数字显示格式
          "decimal":",",
          "thousands":".",
          // 语言国际化
          "lengthMenu": "每页 _MENU_ 条记录",
          "search": "搜索：",
          "zeroRecords": "没有找到记录",
          "info": "当前显示第 _START_ 至 _END_ 项（共 _TOTAL_ 项），正在第 _PAGE_ 页（共 _PAGES_ 页）",
          "infoEmpty": "无记录",
          "infoFiltered": "(从 _MAX_ 条记录过滤)",
          "processing": "处理中...",
          "emptyTable": "表中数据为空",
          "loadingRecords": "载入中...",
          "infoThousands": ",",
          "paginate": {
              "first": "首页",
              "previous": "上页",
              "next": "下页",
              "last": "末页",
              "jump": "跳转"
          }
        },
        // 隐藏列
        "columnDefs": [
          {
            "targets": [ 0 ],
            "visible": false,
            "searchable": false
          },
          {
            "targets": [ 2 ],
            "visible": false
          }
        ],
        // 跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
        "order": [[ 1, "desc" ]]
      } );
    } );
  </script>
  <hr>
  <a href="${pageContext.request.contextPath}/admin/users/add" class="btn btn-primary">
    <span class="glyphicon glyphicon-file"></span> <s:text name="Users.button.add"/> 
  </a>
  <!-- BLANK -->
  <br/><br>
  <!-- /BLANK -->
  <!-- /mainContent -->
  <!-- cmis.help -->
  <jsp:include page="../includes/help1.jsp" flush="true" />
    <h4 class="modal-title"><s:text name="Users.help.indexTitle"/></h4>
  <jsp:include page="../includes/help2.jsp" flush="true" />
    <p>
      <s:text name="Users.help.index"/>
    </p>
  <jsp:include page="../includes/help3.jsp" flush="true" />
  <!-- /cmis.help -->
</body>
</html>

这里这给出了最基本的关于用户清单列表的代码，至于这部分代码是嵌入到其他页面的哪个位置，就需要读者根据自己的需要调整了。
下面的web页面也采用同样的处理方法。

添加新用户add.jsp

在这里将添加新用户，具体代码如下：

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- cmis.title -->
  <title><s:text name="Application.name"/> - <s:text name="Users.page.title"/></title>
  <!-- /cmis.title -->
  <jsp:include page="../includes/beginning-notheme.jsp" flush="true" />  
</head>
<body>
  <h4>
    <!-- cmis.navigation -->
    <i class="fa fa-home"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/"><s:text name="Navigation.application.homepage"/></a>
    &nbsp;<i class="fa fa-angle-right"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/admin/index"><s:text name="Navigation.admin.homepage"/></a>
    &nbsp;<i class="fa fa-angle-right"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/admin/users/index"><s:text name="Navigation.admin.users.homepage"/></a>
    <!-- /cmis.navigation -->
  </h4>
<% String help = java.util.ResourceBundle.getBundle("Messages").getString("Navigation.help"); %>
          <div class="btn btn-warning">
            <a data-toggle="modal" data-original-title="<%=help%>" data-placement="bottom"
               class="btn btn-default btn-sm"
               href="#helpModal">
               <i class="fa fa-question"></i>
            </a>
          </div>
  <!-- mainContent -->
  <!-- cmis.Users.title -->
  <h3><s:text name="Users.title.add"/></h3>
  <!-- /cmis.Users.title -->
  <hr>
  <s:actionmessage cssClass="alert alert-danger"/>

  <s:form id="myForm" action="create" method="post" namespace="/admin/users" cssClass="form-horizontal" theme="simple" validate="false">
    <div class="form-group">
      <label class="col-sm-6 text-danger" for="userId">
        <s:text name="Users.fieldName.userId"/>&nbsp;<i class="fa fa-flag text-danger"></i>
      </label>
      <div class="col-sm-6">
        <s:textfield id="userId" name="userId" 
                     placeholder="%{getText('Users.fieldPrompt.userId')}" cssClass="form-control"/>
      </div>
      <div class="col-sm-6">
        <s:fielderror fieldName="userId" cssClass="alert alert-danger"/>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-6 control-label" for="userName">
        <s:text name="Users.fieldName.userName"/>&nbsp;<i class="fa fa-pen-fancy text-danger"></i>
      </label>
      <div class="col-sm-6">
        <s:textfield id="userName" name="userName" 
                     placeholder="%{getText('Users.fieldPrompt.userName')}" cssClass="form-control"/>
      </div>
      <div class="col-sm-6">
        <s:fielderror fieldName="userName" cssClass="alert alert-danger"/>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-6 control-label" for="userPassword">
        <s:text name="Users.fieldName.userPassword"/>&nbsp;<i class="fa fa-ellipsis-h text-danger"></i>
      </label>
      <div class="col-sm-6">
        <s:textfield id="userPassword" name="userPassword" type="password" 
                     placeholder="%{getText('Users.fieldPrompt.userPassword')}" cssClass="form-control"/>
      </div>
      <div class="col-sm-6">
        <s:fielderror fieldName="userPassword" cssClass="alert alert-danger"/>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-6 control-label" for="userPassword2">
        <s:text name="Users.fieldName.userPasswordConfirm"/>&nbsp;<i class="fa fa-ellipsis-h text-danger"></i>
      </label>
      <div class="col-sm-6">
        <s:textfield id="userPassword2" type="password" 
                     placeholder="%{getText('Users.fieldPrompt.userPasswordConfirm')}" name="userPassword2" cssClass="form-control" />
      </div>
      <div class="col-sm-6">
        <s:fielderror fieldName="userPassword2" cssClass="alert alert-danger"/>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-6 control-label" for="userPhone">
        <s:text name="Users.fieldName.userPhone"/>&nbsp;<i class="fa fa-mobile-alt text-danger"></i>
      </label>
      <div class="col-sm-6">
        <s:textfield id="userPhone" name="userPhone" 
                     placeholder="%{getText('Users.fieldPrompt.userPhone')}" cssClass="form-control"/>
      </div>
      <div class="col-sm-6">
        <s:fielderror fieldName="userPhone" cssClass="alert alert-danger"/>
      </div>
    </div>
<% String reset = java.util.ResourceBundle.getBundle("Messages").getString("Users.button.reset"); %>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-6">
        <s:submit cssClass="btn btn-primary" value="%{getText('Users.button.save')}"/>
        <input type="button" id="reset" class="btn btn-info" value="<%=reset%>" onclick="cleanMyForm()"/>
      </div>
    </div>
  </s:form>
  <hr>
  <a href="${pageContext.request.contextPath}/admin/users/index" class="btn btn-info">
    <!-- cmis.Users.home -->
    <span class="glyphicon glyphicon-arrow-left"></span> <s:text name="Users.button.home"/>
    <!-- /cmis.Users.home -->
  </a>
  <!-- BLANK -->
  <br/><br/>
  <!-- /BLANK -->
  <!-- /mainContent -->
  <!-- cmis.help -->
  <jsp:include page="../includes/help1.jsp" flush="true" />
    <h4 class="modal-title"><s:text name="Users.help.addTitle"/></h4>
  <jsp:include page="../includes/help2.jsp" flush="true" />
    <p>
      <s:text name="Users.help.add"/>
    </p>
  <jsp:include page="../includes/help3.jsp" flush="true" />
  <!-- /cmis.help -->
</body>
</html>

修改用户信息modify.jsp

在这里将修改指定用户的信息，具体代码如下：

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- cmis.title -->
  <title><s:text name="Application.name"/> - <s:text name="Users.page.title"/></title>
  <!-- /cmis.title -->
  <jsp:include page="../includes/beginning-notheme.jsp" flush="true" />	
</head>
<body>
  <h4>
    <!-- cmis.navigation -->
    <i class="fa fa-home"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/"><s:text name="Navigation.application.homepage"/></a>
    &nbsp;<i class="fa fa-angle-right"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/admin/index"><s:text name="Navigation.admin.homepage"/></a>
    &nbsp;<i class="fa fa-angle-right"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/admin/users/index"><s:text name="Navigation.admin.users.homepage"/></a>
    <!-- /cmis.navigation -->
  </h4>
  <!-- mainContent -->
  <!-- cmis.Users.title -->
  <h3><s:text name="Users.title.modify"/></h3>
  <!-- /cmis.Users.title -->
  <hr>
  <s:actionmessage cssClass="alert alert-danger"/>
  
  <s:form id="myForm" method="post" action="update?userId=%{userId}" namespace="/admin/users" cssClass="form-horizontal" theme="simple">
    <div class="form-group">
      <label class="col-sm-6 control-label" for="userId"><s:text name="Users.fieldName.userId"/></label>
      <div class="col-sm-6">
        <s:if test="model.userId != null"> 
          <s:textfield id="userId" name="model.userId" readonly="true" cssClass="form-control"/>
        </s:if>
        <s:else>
          <s:textfield id="userId" name="userId" readonly="true" cssClass="form-control"/> 
        </s:else>
      </div>
      <div class="col-sm-6">
        <s:fielderror fieldName="userId" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-6 control-label" for="userName"><s:text name="Users.fieldName.userName"/></label>
      <div class="col-sm-6">
				<s:if test="model.userName != null"> 
	  			<s:textfield id="userName" name="model.userName" readonly="true" cssClass="form-control"/>
				</s:if>
				<s:else>
		   		<s:textfield id="userName" name="userName" readonly="true" cssClass="form-control"/> 
				</s:else>
	    </div>
	    <div class="col-sm-6">
	      <s:fielderror fieldName="userName" />
	    </div>
    </div>
    <div class="form-group">
      <label class="col-sm-6 control-label" for="userPassword"><s:text name="Users.fieldName.userPassword"/></label>
      <div class="col-sm-6">
	      <s:textfield id="userPassword" type="password" name="userPassword" placeholder="%{getText('Users.fieldPrompt.userPassword')}" cssClass="form-control" />
      </div>
      <div class="col-sm-6">
        <s:fielderror fieldName="userPassword" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-6 control-label" for="userPassword2"><s:text name="Users.fieldName.userPasswordConfirm"/></label>
      <div class="col-sm-6">
     		<s:textfield id="userPassword2" type="password" placeholder="%{getText('Users.fieldPrompt.userPasswordConfirm')}" name="userPassword2" cssClass="form-control" />
      </div>
      <div class="col-sm-6">
        <s:fielderror fieldName="userPassword2" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-6 control-label" for="userPhone"><s:text name="Users.fieldName.userPhone"/></label>
      <div class="col-sm-6">
	      <s:if test="model.userPhone != null"> 
	        <s:textfield id="userPhone" name="model.userPhone" placeholder="%{getText('Users.fieldPrompt.userPhone')}" cssClass="form-control"/>
	      </s:if>
	      <s:else>
	        <s:textfield id="userPhone" name="userPhone" placeholder="%{getText('Users.fieldPrompt.userPhone')}" cssClass="form-control"/> 
	      </s:else>
      </div>
	    <div class="col-sm-6">
        <s:fielderror fieldName="userPhone" />
	    </div>
    </div>
<% String reset = java.util.ResourceBundle.getBundle("Messages").getString("Users.button.reset"); %>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-6">
        <s:submit cssClass="btn btn-primary" value="%{getText('Users.button.modify')}"/>
        <input type="button" id="reset" class="btn btn-info" value="<%=reset%>" onclick="cleanMyForm()"/>
      </div>
    </div>
  </s:form>
  <hr>
  <a href="${pageContext.request.contextPath}/admin/users/index" class="btn btn-info">
    <!-- cmis.Users.home -->
    <span class="glyphicon glyphicon-arrow-left"></span> <s:text name="Users.button.home"/>
    <!-- /cmis.Users.home -->
  </a>
  <!-- BLANK -->
  <br/><br/>
  <!-- /BLANK -->
  <!-- cmis.help -->
  <jsp:include page="../includes/help1.jsp" flush="true" />
    <h4 class="modal-title"><s:text name="Users.help.modifyTitle"/></h4>
  <jsp:include page="../includes/help2.jsp" flush="true" />
    <p>
      <s:text name="Users.help.modify"/>
    </p>
  <jsp:include page="../includes/help3.jsp" flush="true" />
  <!-- /cmis.help -->
</body>
</html>

要修改用户信息，需要从index页面的用户列表中，点击修改按钮来进入该页面，这样就可以进行修改用户信息的操作了。

浏览用户详细信息browse.jsp

在这里将浏览用户详细信息，具体代码如下：

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- cmis.title -->
  <title><s:text name="Application.name"/> - <s:text name="Users.page.title"/></title>
  <!-- /cmis.title -->
  <jsp:include page="../includes/beginning-notheme.jsp" flush="true" />	
</head>
<body>
  <h4>
    <!-- cmis.navigation -->
    <i class="fa fa-home"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/"><s:text name="Navigation.application.homepage"/></a>
    &nbsp;<i class="fa fa-angle-right"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/admin/index"><s:text name="Navigation.admin.homepage"/></a>
    &nbsp;<i class="fa fa-angle-right"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/admin/users/index"><s:text name="Navigation.admin.users.homepage"/></a>
    <!-- /cmis.navigation -->
  </h4>
  <!-- mainContent -->
  <!-- cmis.Users.title -->
  <h3><s:text name="Users.title.browse"/> - <s:property value="model.userName"/></h3>
  <!-- /cmis.Users.title -->
  <hr>
  <s:actionmessage cssClass="alert alert-danger"/>
  
  <table class="table table-striped">
    <tr>
      <td class="span3 verticalMiddle text-right" width="120px"><s:text name="Users.fieldName.userId"/></td>
      <td class="span9 verticalMiddle"><s:property value="model.userId"/></td>
    </tr>
    <tr>
      <td class="span3 verticalMiddle text-right"><s:text name="Users.fieldName.userName"/></td>
      <td class="span9 verticalMiddle"><s:property value="model.userName"/></td>
    </tr>
    <tr>
      <td class="span3 verticalMiddle text-right"><s:text name="Users.fieldName.userPhone"/></td>
      <td class="span9 verticalMiddle"><s:property value="model.userPhone"/></td>
    </tr>
  </table>
  
  <hr>
  <a href="${pageContext.request.contextPath}/admin/users/index" class="btn btn-info">
    <!-- cmis.Users.home -->
    <span class="glyphicon glyphicon-arrow-left"></span> <s:text name="Users.button.home"/>
    <!-- /cmis.Users.home -->
  </a>
  <!-- BLANK -->
  <br/><br>
  <!-- /BLANK -->
  <!-- /mainContent -->
  <!-- cmis.help -->
  <jsp:include page="../includes/help1.jsp" flush="true" />
    <h4 class="modal-title"><s:text name="Users.help.browseTitle"/></h4>
  <jsp:include page="../includes/help2.jsp" flush="true" />
    <p>
      <s:text name="Users.help.browse"/>
    </p>
  <jsp:include page="../includes/help3.jsp" flush="true" />
  <!-- /cmis.help -->
</body>
</html>

要浏览用户详细信息，需要从index页面的用户列表中，点击浏览按钮来进入该页面，这样就可以浏览用户详细信息了。

确认删除用户deleteConfirm.jsp

在这里将进行删除用户确认，具体代码如下：

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- cmis.title -->
  <title><s:text name="Application.name"/> - <s:text name="Users.page.title"/></title>
  <!-- /cmis.title -->
  <jsp:include page="../includes/beginning-notheme.jsp" flush="true" />	
</head>
  <h4>
    <!-- cmis.navigation -->
    <i class="fa fa-home"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/"><s:text name="Navigation.application.homepage"/></a>
    &nbsp;<i class="fa fa-angle-right"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/admin/index"><s:text name="Navigation.admin.homepage"/></a>
    &nbsp;<i class="fa fa-angle-right"></i>&nbsp;
    <a href="${pageContext.request.contextPath}/admin/users/index"><s:text name="Navigation.admin.users.homepage"/></a>
    <!-- /cmis.navigation -->
  </h4>
  <!-- mainContent -->
  <!-- cmis.Users.title -->
  <h3><s:text name="Users.title.deleteConfirm"/></h3>
  <!-- /cmis.Users.title -->
  <hr>

  <s:form method="post" action="delete?userId=%{model.userId}" namespace="/admin/users" cssClass="form-horizontal" theme="simple">
    <p>
      <s:text name="Users.deleteConfirm.prompt">
        <s:param><s:text name="Users.deleteConfirm"/></s:param>
        <s:param><s:property value="model.userName" /></s:param>
      </s:text>
      <s:actionmessage cssClass="alert alert-danger"/>
    </p>
    <div class="btn-group">
      <input type="submit" value="<s:text name='Button.delete'/>" class="btn btn-danger" />
      <input type="button" value="<s:text name='Button.cancel'/>" class="btn btn-success" 
             onclick="window.location.href = '${pageContext.request.contextPath}/admin/users/index'" />
    </div>
  </s:form>
    <br />
  <hr>
  <a href="${pageContext.request.contextPath}/admin/users/index" class="btn btn-info">
    <!-- cmis.Users.home -->
    <span class="glyphicon glyphicon-arrow-left"></span> <s:text name="Users.button.home"/>
    <!-- /cmis.Users.home -->
  </a>
  <!-- BLANK -->
  <br/><br>
  <!-- /BLANK -->
  <!-- /mainContent -->
  <!-- cmis.help -->
  <jsp:include page="../includes/help1.jsp" flush="true" />
    <h4 class="modal-title"><s:text name="Users.help.deleteConfirmTitle"/></h4>
  <jsp:include page="../includes/help2.jsp" flush="true" />
    <p>
      <s:text name="Users.help.deleteConfirm"/>
    </p>
  <jsp:include page="../includes/help3.jsp" flush="true" />
  <!-- /cmis.help -->
</html>

要确认删除用户，需要从index页面的用户列表中，点击删除按钮来进入该页面，这样就可以进行删除用户确认的操作了，就可以删除指定的用户。

包含的文件和健值

在系统中，为了模块化处理，应该对页面进行布局设计，例如导航、侧边栏、页脚等，如下图所示：

主页布局每个部分应该能够单独改变而不会影响其他页面，这样的设计才便于修改和扩展。

引入系统使用的框架beginning-notheme.jsp

系统用到的框架如Bootstrap、DataTables等，需要进行声明，在这个文件中，处理系统中所用到的css、js等的引入，将其放入WebContent/admin/includes/beginning-notheme.jsp文件中，代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  <!-- 引入 Bootstrap -->
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/bootstrap-4.3.1/css/bootstrap.min.css"></link>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-4.3.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-4.3.1/dependencies/jquery-3.3.1.slim.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-4.3.1/dependencies/popper-1.14.7.min.js"></script>  
  <!-- 引入DataTables -->
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/datatables.min.css"></link>
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/datatables.min.js"></script>
  <!-- 引入fontawesome图标库 -->
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/fontawesome-free-5.10.2-web/css/all.min.css"></link>
  <!-- 自己编写的清空表单数据的js函数 -->
  <script type="text/javascript" src="${pageContext.request.contextPath}/js/cleanMyForm.js"></script>

清空表单数据

编写清空表单数据的js函数，放在WebContent/js/cleanMyForm.js文件中，代码如下：

function cleanMyForm()
{
	 $(':input', '#myForm')
	 .not(':button, :submit, :reset, :hidden, :radio, [readonly]') // 去除不需要重置的input类型
	 .val('')
	 .removeAttr('checked')
	 .removeAttr('selected'); // 如果任何radio/checkbox/select inputs有checked or selected 属性，将其移除
}

帮助的处理

系统处理帮助信息的时候，是通过模态框来显示的，将help模态框拆分成几个部分，然后，在各个处理中添加的过程中，只需要关注帮助的标题和帮助的内容即可，便于处理帮助信息，代码分三个部分，统一放在WebContent/admin/includes目录下，help1.jsp代码如下：

  <!-- #helpModal -->
  <!-- .modal -->
  <div id="helpModal" class="modal fade">
    <!-- .modal-dialog -->
    <div class="modal-dialog">
      <!-- .modal-content -->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

在对应的页面设置帮助的标题信息，之后是help2.jsp，代码如下：

        </div>
        <div class="modal-body">

在对应的页面设置帮助的内容，之后是help3.jsp，代码如下：

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal"><s:text name="Button.help.close"/></button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->
  <!-- /#helpModal -->

整个拆分的几个部分，组合起来就是一个完整的模态框，你页可以将整个模态框放在对应的页面里（整个页面会显得比较臃肿），或者将整个帮助单独放到一个文件中，然后在包含到提供对应帮助的页面里（这样的处理可能需要更多的各页面的帮助文件），具体这么做，请大家斟酌。

健值的处理Messages.properties

系统中所有的文字信息都通过健值来存储在Messages.properties文件中，保存在src文件夹下，要改变只需要找到健值即可，健值信息在前面步骤中已经有展示，这里列出来，健值如下：

#################### cmis.application ######################
Application.name=cmis
#################### /cmis.application ######################
#################### cmis.navigation ######################
Navigation.application.homepage=cmis
Navigation.admin.homepage=\u540E\u53F0\u7BA1\u7406
Navigation.help=\u5E2E\u52A9
#################### /cmis.navigation ######################
#################### cmis.footer ######################
Footer.copyright=2019 &copy; \u5F20\u805A\u793C
#################### /cmis.footer ######################
#################### cmis.DataTables ######################
DataTables.title.operate=\u64CD\u4F5C
DataTables.title.browse=\u6D4F\u89C8
DataTables.title.modify=\u4FEE\u6539
DataTables.title.delete=\u5220\u9664
#################### /cmis.DataTables ######################
#################### cmis.button ######################
Button.help.close=\u5173\u95ED
Button.delete=\u5220\u9664
Button.cancel=\u53D6\u6D88
#################### /cmis.button ######################
#################### cmis.admin.users ######################
Users.deleteConfirm=\u7528\u6237
Users.deleteConfirm.prompt=\u60A8\u771F\u7684\u8981\u5220\u9664\u201C{0}\u201D\uFF1A\u201C{1}\u201D\u5417\uFF1F
# navigation
Navigation.admin.users.homepage=\u7528\u6237\u7BA1\u7406
# page title
Users.page.title=\u7BA1\u7406\u7528\u6237\u4FE1\u606F
# title
Users.title.index=\u7528\u6237\u5217\u8868
Users.title.add=\u6DFB\u52A0\u65B0\u7528\u6237
Users.title.browse=\u6D4F\u89C8\u7528\u6237\u8BE6\u60C5
Users.title.deleteConfirm=\u786E\u8BA4\u5220\u9664\u8BE5\u7528\u6237
Users.title.modify=\u4FEE\u6539\u7528\u6237\u4FE1\u606F
Users.title.modifyPassword=\u4FEE\u6539\u7528\u6237\u5BC6\u7801
# button title
Users.deleteConfirm.user=\u7528\u6237
Users.button.home=\u8FD4\u56DE\u7528\u6237\u7BA1\u7406\u9996\u9875
Users.button.add=\u6DFB\u52A0\u65B0\u7528\u6237
Users.button.save=\u4FDD\u5B58\u65B0\u7528\u6237\u4FE1\u606F
Users.button.modify=\u4FDD\u5B58\u4FEE\u6539\u7684\u7528\u6237\u4FE1\u606F
Users.button.modifyPassword=\u4FEE\u6539\u7528\u6237\u5BC6\u7801
Users.button.reset=\u6E05\u7A7A\u7528\u6237\u4FE1\u606F
# Users help
Users.help.indexTitle=\u7BA1\u7406\u7528\u6237\u4FE1\u606F\u2014\u5E2E\u52A9
Users.help.addTitle=\u6DFB\u52A0\u65B0\u7528\u6237\u2014\u5E2E\u52A9
Users.help.browseTitle=\u6D4F\u89C8\u7528\u6237\u8BE6\u60C5\u2014\u5E2E\u52A9
Users.help.modifyTitle=\u4FEE\u6539\u7528\u6237\u4FE1\u606F\u2014\u5E2E\u52A9
Users.help.deleteConfirmTitle=\u786E\u8BA4\u5220\u9664\u8BE5\u7528\u6237\u2014\u5E2E\u52A9
Users.help.modifyPasswordTitle=\u4FEE\u6539\u7528\u6237\u5BC6\u7801\u2014\u5E2E\u52A9
Users.help.index=\u5217\u51FA\u6240\u6709\u7684\u7528\u6237\uFF0C\u53EF\u4EE5\u5BF9\u8FDB\u884C\u76F8\u5E94\u7684\u7BA1\u7406\u64CD\u4F5C\u3002
Users.help.add=\u6DFB\u52A0\u65B0\u7684\u7528\u6237
Users.help.browse=\u6D4F\u89C8\u7528\u6237\u8BE6\u60C5\uFF0C\u67E5\u770B\u7279\u5B9A\u7684\u7528\u6237\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002
Users.help.modify=\u4FEE\u6539\u7528\u6237\u4FE1\u606F
Users.help.deleteConfirm=\u786E\u8BA4\u5220\u9664\u8BE5\u7528\u6237\uFF0C\u4E00\u65E6\u5220\u9664\uFF0C\u4E0D\u80FD\u6062\u590D\uFF01
Users.help.modifyPassword=\u4FEE\u6539\u7528\u6237\u5BC6\u7801\uFF0C\u9700\u8981\u8F93\u5165\u539F\u5BC6\u7801\uFF0C\u7136\u540E\u8F93\u5165\u65B0\u5BC6\u7801\u4E24\u6B21\uFF01
# Users field error
Users.fieldError.userId=\u7528\u6237\u7F16\u53F7\u4E0D\u80FD\u4E3A\u7A7A\u6216\u91CD\u590D
Users.fieldError.userName=\u7528\u6237\u540D\u4E0D\u80FD\u4E3A\u7A7A\u6216\u91CD\u590D
Users.fieldError.userPassword=\u7528\u6237\u5BC6\u7801\u4E0D\u80FD\u4E3A\u7A7A
Users.fieldError.userPasswordConfirm=\u8BF7\u518D\u6B21\u8F93\u5165\u7528\u6237\u5BC6\u7801
Users.fieldError.status=\u8BF7\u9009\u62E9\u7528\u6237\u72B6\u578B\uFF0C\u9ED8\u8BA4\u4E3A\u8003\u751F\u7528\u6237\uFF0C\u53EF\u7528
# Users field prompt
Users.fieldPrompt.userId=\u8BF7\u8F93\u5165\u7528\u6237\u7F16\u53F7
Users.fieldPrompt.userName=\u8BF7\u8F93\u5165\u7528\u6237\u540D
Users.fieldPrompt.userPassword=\u8BF7\u8F93\u5165\u7528\u6237\u5BC6\u7801
Users.fieldPrompt.userPasswordConfirm=\u8BF7\u518D\u6B21\u8F93\u5165\u7528\u6237\u5BC6\u7801
Users.fieldPrompt.userPhone=\u8BF7\u8F93\u5165\u624B\u673A\u53F7
# Users field name
Users.fieldName.userId=\u7528\u6237\u7F16\u53F7
Users.fieldName.userName=\u7528\u6237\u540D
Users.fieldName.userPassword=\u7528\u6237\u5BC6\u7801
Users.fieldName.userPasswordConfirm=\u786E\u8BA4\u5BC6\u7801
Users.fieldName.userPhone=\u624B\u673A\u53F7
# Users result
Users.result.createError=\u8BE5\u7528\u6237\u7F16\u53F7\u6216\u7528\u6237\u540D\u4EE3\u8868\u7684\u7528\u6237\u5DF2\u5B58\u5728\uFF0C\u7528\u6237\u7F16\u53F7\u6216\u7528\u6237\u540D\u4E0D\u80FD\u91CD\u590D\uFF01
Users.result.create=\u521B\u5EFA\u65B0\u7528\u6237\u6210\u529F\uFF01
Users.result.delete=\u5220\u9664\u8BE5\u7528\u6237\u6210\u529F\uFF01
Users.result.deleteError=\u8BE5\u7528\u6237\u4E0D\u5B58\u5728\u6216\u5DF2\u5220\u9664\uFF01
Users.result.update=\u7528\u6237\u4FE1\u606F\u4FEE\u6539\u6210\u529F\uFF01
Users.result.updatePassword=\u7528\u6237\u5DF2\u627E\u5230\uFF0C\u5E76\u91CD\u7F6E\u7528\u6237\u5BC6\u7801\u6210\u529F\uFF01
Users.result.updateError=\u8BE5\u7528\u6237\u540D\u4EE3\u8868\u7684\u7528\u6237\u5DF2\u5B58\u5728\uFF0C\u4E0D\u80FD\u4F7F\u7528\u76F8\u540C\u7684\u7528\u6237\u540D\uFF01
#################### /cmis.admin.users ######################

部署之后，该部分应该可以正常运行，如果你不能正常运行，请根据错误提示仔细检查，看是否有遗漏，或其它问题。

进一步的思考

这里只是给大家介绍了SSH的框架的实现，没有讲解SSH框架的基本原理，你要想进行深入学习，了解基本原理是有必要的，当然，现在你可以用它来工作了。
这里给出的用户信息，只有几个简单的属性，事实上是远远不够的，还可能有其它的属性处理，例如用户分类，这可能涉及到列表的展示；用户有效时间，这可能涉及到日期的显示和处理；用户信息是否关联了角色信息，等等…所有的这些，你只有处理到了，才可能了解。多练，别无它途。

ZhangCurie
发布了42 篇原创文章 · 获赞 15 · 访问量 5873
私信 关注

猜你喜欢

转载自blog.csdn.net/ZhangCurie/article/details/100854770
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022