一步一步做项目（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页面的用户列表中，点击删除按钮来进入该页面，这样就可以进行删除用户确认的操作了，就可以删除指定的用户。
包含的文件和健值
在系统中，为了模块化处理，应该对页面进行布局设计，例如导航、侧边栏、页脚等，如下图所示：
每个部分应该能够单独改变而不会影响其他页面，这样的设计才便于修改和扩展。
引入系统使用的框架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框架的基本原理，你要想进行深入学习，了解基本原理是有必要的，当然，现在你可以用它来工作了。
这里给出的用户信息，只有几个简单的属性，事实上是远远不够的，还可能有其它的属性处理，例如用户分类，这可能涉及到列表的展示；用户有效时间，这可能涉及到日期的显示和处理；用户信息是否关联了角色信息，等等…所有的这些，你只有处理到了，才可能了解。多练，别无它途。