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

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

  • 基本思路
  • 显示所有用户列表index.jsp
  • 添加新用户add.jsp
  • 修改用户信息modify.jsp
  • 浏览用户详细信息browse.jsp
  • 确认删除用户deleteConfirm.jsp
  • 包含的文件和健值
    • 引入系统使用的框架beginning-notheme.jsp
    • 清空表单数据
    • 帮助的处理
    • 健值的处理Messages.properties
  • 进一步的思考

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

基本思路

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

显示所有用户列表index.jsp

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


<%@ 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">
  
  <title><s:text name="Application.name"/> - <s:text name="Users.page.title"/>title>
  
  <jsp:include page="../includes/beginning-notheme.jsp" flush="true" />  
head>
<body>
  <h4>
    
    <i class="fa fa-home">i> 
    <a href="${pageContext.request.contextPath}/"><s:text name="Navigation.application.homepage"/>a>
     <i class="fa fa-angle-right">i> 
    <a href="${pageContext.request.contextPath}/admin/index"><s:text name="Navigation.admin.homepage"/>a>
     <i class="fa fa-angle-right">i> 
    <s:text name="Navigation.admin.users.homepage"/>
    
  h4>
  
  
  <h3><s:text name="Users.title.index"/>h3>
  
  <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>
  
  <br/><br>
  
  
  
  <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" />
  
body>
html>

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

添加新用户add.jsp

在这里将添加新用户,具体代码如下:


<%@ 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">
  
  <title><s:text name="Application.name"/> - <s:text name="Users.page.title"/>title>
  
  <jsp:include page="../includes/beginning-notheme.jsp" flush="true" />  
head>
<body>
  <h4>
    
    <i class="fa fa-home">i> 
    <a href="${pageContext.request.contextPath}/"><s:text name="Navigation.application.homepage"/>a>
     <i class="fa fa-angle-right">i> 
    <a href="${pageContext.request.contextPath}/admin/index"><s:text name="Navigation.admin.homepage"/>a>
     <i class="fa fa-angle-right">i> 
    <a href="${pageContext.request.contextPath}/admin/users/index"><s:text name="Navigation.admin.users.homepage"/>a>
    
  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>
  
  
  <h3><s:text name="Users.title.add"/>h3>
  
  <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"/> <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"/> <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"/> <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"/> <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"/> <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">
    
    <span class="glyphicon glyphicon-arrow-left">span> <s:text name="Users.button.home"/>
    
  a>
  
  <br/><br/>
  
  
  
  <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" />
  
body>
html>

修改用户信息modify.jsp

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


<%@ 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">
  
  <title><s:text name="Application.name"/> - <s:text name="Users.page.title"/>title>
  
  <jsp:include page="../includes/beginning-notheme.jsp" flush="true" />	
head>
<body>
  <h4>
    
    <i class="fa fa-home">i> 
    <a href="${pageContext.request.contextPath}/"><s:text name="Navigation.application.homepage"/>a>
     <i class="fa fa-angle-right">i> 
    <a href="${pageContext.request.contextPath}/admin/index"><s:text name="Navigation.admin.homepage"/>a>
     <i class="fa fa-angle-right">i> 
    <a href="${pageContext.request.contextPath}/admin/users/index"><s:text name="Navigation.admin.users.homepage"/>a>
    
  h4>
  
  
  <h3><s:text name="Users.title.modify"/>h3>
  
  <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">
    
    <span class="glyphicon glyphicon-arrow-left">span> <s:text name="Users.button.home"/>
    
  a>
  
  <br/><br/>
  
  
  <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" />
  
body>
html>

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

浏览用户详细信息browse.jsp

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


<%@ 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">
  
  <title><s:text name="Application.name"/> - <s:text name="Users.page.title"/>title>
  
  <jsp:include page="../includes/beginning-notheme.jsp" flush="true" />	
head>
<body>
  <h4>
    
    <i class="fa fa-home">i> 
    <a href="${pageContext.request.contextPath}/"><s:text name="Navigation.application.homepage"/>a>
     <i class="fa fa-angle-right">i> 
    <a href="${pageContext.request.contextPath}/admin/index"><s:text name="Navigation.admin.homepage"/>a>
     <i class="fa fa-angle-right">i> 
    <a href="${pageContext.request.contextPath}/admin/users/index"><s:text name="Navigation.admin.users.homepage"/>a>
    
  h4>
  
  
  <h3><s:text name="Users.title.browse"/> - <s:property value="model.userName"/>h3>
  
  <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">
    
    <span class="glyphicon glyphicon-arrow-left">span> <s:text name="Users.button.home"/>
    
  a>
  
  <br/><br>
  
  
  
  <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" />
  
body>
html>

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

确认删除用户deleteConfirm.jsp

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


<%@ 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">
  
  <title><s:text name="Application.name"/> - <s:text name="Users.page.title"/>title>
  
  <jsp:include page="../includes/beginning-notheme.jsp" flush="true" />	
head>
  <h4>
    
    <i class="fa fa-home">i> 
    <a href="${pageContext.request.contextPath}/"><s:text name="Navigation.application.homepage"/>a>
     <i class="fa fa-angle-right">i> 
    <a href="${pageContext.request.contextPath}/admin/index"><s:text name="Navigation.admin.homepage"/>a>
     <i class="fa fa-angle-right">i> 
    <a href="${pageContext.request.contextPath}/admin/users/index"><s:text name="Navigation.admin.users.homepage"/>a>
    
  h4>
  
  
  <h3><s:text name="Users.title.deleteConfirm"/>h3>
  
  <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="'Button.delete'/>" class="btn btn-danger" />
      <input type="button" value="'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">
    
    <span class="glyphicon glyphicon-arrow-left">span> <s:text name="Users.button.home"/>
    
  a>
  
  <br/><br>
  
  
  
  <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" />
  
html>

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

包含的文件和健值

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

一步一步做项目(7)管理用户信息之Web页面构建_第1张图片每个部分应该能够单独改变而不会影响其他页面,这样的设计才便于修改和扩展。

引入系统使用的框架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"%>
  
  <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>  
  
  <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>
  
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/fontawesome-free-5.10.2-web/css/all.min.css">link>
  
  <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代码如下:

  
  
  <div id="helpModal" class="modal fade">
    
    <div class="modal-dialog">
      
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×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>
      
    div>
    
  div>
  
  

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

健值的处理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 © \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框架的基本原理,你要想进行深入学习,了解基本原理是有必要的,当然,现在你可以用它来工作了。
这里给出的用户信息,只有几个简单的属性,事实上是远远不够的,还可能有其它的属性处理,例如用户分类,这可能涉及到列表的展示;用户有效时间,这可能涉及到日期的显示和处理;用户信息是否关联了角色信息,等等…所有的这些,你只有处理到了,才可能了解。多练,别无它途。

你可能感兴趣的:(开发技术,ssh,web,网页)