1、对前台页面的提炼处理

dodow458

已于 2024-09-10 16:18:43 修改

阅读量750

点赞数 8

分类专栏： java 文章标签： okhttp java html5 bootstrap 前端框架 xhtml

于 2024-09-10 16:12:20 首次发布

本文链接：https://blog.csdn.net/2403_87142815/article/details/142100348

版权

java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、对前台页面的处理，

对于一般的业务管理系统，一般都是表的增删查改操作，所以对于页面来讲，可以在前面模板文件的基础之上，对每个单独的页面也可以利用ajax及js操作，来实现一个页面实现表的增删查改操作：以角色管理为例，我们以列表展示页为主要页面，在这个页面中定义其他几个表单，通过一定的操作，实现角色的增加、删除、查看、修改、以及为角色设置资源项的操作，在一个页面中，比如list.xhtml中，我们定义<h:form id="tableForm"></h:form>这个表单做为数据列表的展示表单、将添加和修改操作，放在另外一个<h:form id="inputForm"></h:form>；同理可以定义多个form来实现相应的操作，这样我们每个页面就可以精简成如下模式：

这样对于所有这样不复杂的业务操作页面，都可以统一成这种模式，也方便每个这样的业务操作在后台定义一个view这一层的bean做统一的处理，

以上面为例，对于tableForm这个页面主要实现以下几个功能：

2、数据列表

作为数据列表展示，这样就可以利用primefaces的<p:dataTable>这个控件来展示，后台view这一层的bean只需要把返回的list，绑定到这个控件上即可，如下面的代码：

<p:dataTable id="roleDataTable" var="row" value="#{roleBean.roleList}"
						emptyMessage="未查询到数据！" paginatorPosition="bottom"  rowIndexVar="rowIndex" rowKey="#{rowIndex}" paginator="true" rows="10"  
						paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport} {RowsPerPageDropdown}"
						currentPageReportTemplate="{currentPage}/{totalPages}"  
						rowsPerPageTemplate="5,10,20,50" selection="#{roleBean.instance}"  selectionMode="single">
						<f:facet name="header">
							<h:outputText value="角色列表" />
						</f:facet> 
						<p:column headerText="名称">
							<h:outputText value="#{row.roleName}" />
						</p:column>
						<p:column headerText="描述">
							<h:outputText value="#{row.description}" />
						</p:column>
						<p:column headerText="所属系统">
							<h:outputText value="#{row.systemInfo.name}" />
						</p:column>
	
						<p:column headerText="操作" styleClass="operating_120"> 
							<p:commandButton action="#{roleBean.loadTreeData}" update=":resourceTableForm:resourceTable"
								oncomplete="resourceDialogTable.show();" title="设置资源权限"
								icon="ui-icon ui-icon-gear">
								<f:setPropertyActionListener value="#{row}"
									target="#{roleBean.currentRole}" />
								<f:setPropertyActionListener value="#{row.systemInfo.id}"
									target="#{roleBean.sysId}" />
							</p:commandButton>
							
							<p:commandButton actionListener="#{roleBean.clear}" update=":viewForm:roleView"
								oncomplete="roleDialogView.show();" title="查看"
								icon="ui-icon ui-icon-zoomin">
								<f:setPropertyActionListener value="#{row}"
									target="#{roleBean.instance}" />
								<f:setPropertyActionListener value="#{row.systemInfo.id}"
									target="#{roleBean.sysId}" />
							</p:commandButton>
							<p:commandButton actionListener="#{roleBean.clear}" update=":inputForm:roleInput"
								oncomplete="roleDialog.show();" title="修改"
								icon="ui-icon ui-icon-pencil">
								<f:setPropertyActionListener value="#{row}"
									target="#{roleBean.instance}" />
								<f:setPropertyActionListener value="#{row.systemInfo.id}"
									target="#{roleBean.sysId}" />
							</p:commandButton>
							<p:commandButton oncomplete="confirmation.show()" icon="ui-icon ui-icon-close"
									title="删除" >
									<f:setPropertyActionListener value="#{row}"
										target="#{roleBean.instance}" />
							</p:commandButton>
						</p:column>
    			</p:dataTable>

这样就在RoleBean的初始化操作时，取得相应的数据，绑定到roleList里，通过上述代码就实现了数据的展示作用，同时把需要的操作也放在每行上面，用primefaces就可以实现对当前行做操作

当然对于列表展示的时候，还需要提供查询功能，所以在这个form中我们还需要封装一些变量，用它来保存条件，传入到后台RoleBean中，由其来处理相关查询。所以在列表展示的前面，我们提统一一组<p:toolbar>，来提供查询，其统一代码格式如下：

<p:toolbar>
						<p:toolbarGroup align="left">
							
							<p:commandButton value="新增" actionListener="#{roleBean.clear}"
								icon="ui-icon-document" oncomplete="roleDialog.show();"
								update=":inputForm:roleInput" />
								
							<p:selectOneMenu id="query_systemInfo_id" value="#{roleBean.sysId}">
								<f:selectItem itemValue="" itemLabel="---全部---"/>
								<f:selectItems value="#{roleBean.sysItems}"/>
								<p:ajax listener="#{roleBean.search}" update="roleDataTable"></p:ajax>
							</p:selectOneMenu>
							<p:separator />
						</p:toolbarGroup>
					</p:toolbar>

如果查询条件比较多的时候，就用map来保存。这样我们列表展示的操作就完成了，当然后面操作的时候，可能需要反映操作的相关情况，我们统一用

<p:growl id="messages" />

来输出相关操作的提示信息。这样一个完整的list form的相关代码如下：

<h:form id="tableForm">
				<p:panel styleClass="panel1">
					<p:growl id="messages" />
					
					<p:toolbar>
						<p:toolbarGroup align="left">
							
							<p:commandButton value="新增" actionListener="#{roleBean.clear}"
								icon="ui-icon-document" oncomplete="roleDialog.show();"
								update=":inputForm:roleInput" />
								
							<p:selectOneMenu id="query_systemInfo_id" value="#{roleBean.sysId}">
								<f:selectItem itemValue="" itemLabel="---全部---"/>
								<f:selectItems value="#{roleBean.sysItems}"/>
								<p:ajax listener="#{roleBean.search}" update="roleDataTable"></p:ajax>
							</p:selectOneMenu>
							<p:separator />
						</p:toolbarGroup>
					</p:toolbar>
					<p:dataTable id="roleDataTable" var="row" value="#{roleBean.roleList}"
						emptyMessage="未查询到数据！" paginatorPosition="bottom"  rowIndexVar="rowIndex" rowKey="#{rowIndex}" paginator="true" rows="10"  
						paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport} {RowsPerPageDropdown}"
						currentPageReportTemplate="{currentPage}/{totalPages}"  
						rowsPerPageTemplate="5,10,20,50" selection="#{roleBean.instance}"  selectionMode="single">
						<f:facet name="header">
							<h:outputText value="角色列表" />
						</f:facet> 
						<p:column headerText="名称">
							<h:outputText value="#{row.roleName}" />
						</p:column>
						<p:column headerText="描述">
							<h:outputText value="#{row.description}" />
						</p:column>
						<p:column headerText="所属系统">
							<h:outputText value="#{row.systemInfo.name}" />
						</p:column>
	
						<p:column headerText="操作" styleClass="operating_120"> 
							<p:commandButton action="#{roleBean.loadTreeData}" update=":resourceTableForm:resourceTable"
								oncomplete="resourceDialogTable.show();" title="设置资源权限"
								icon="ui-icon ui-icon-gear">
								<f:setPropertyActionListener value="#{row}"
									target="#{roleBean.currentRole}" />
								<f:setPropertyActionListener value="#{row.systemInfo.id}"
									target="#{roleBean.sysId}" />
							</p:commandButton>
							
							<p:commandButton actionListener="#{roleBean.clear}" update=":viewForm:roleView"
								oncomplete="roleDialogView.show();" title="查看"
								icon="ui-icon ui-icon-zoomin">
								<f:setPropertyActionListener value="#{row}"
									target="#{roleBean.instance}" />
								<f:setPropertyActionListener value="#{row.systemInfo.id}"
									target="#{roleBean.sysId}" />
							</p:commandButton>
							<p:commandButton actionListener="#{roleBean.clear}" update=":inputForm:roleInput"
								oncomplete="roleDialog.show();" title="修改"
								icon="ui-icon ui-icon-pencil">
								<f:setPropertyActionListener value="#{row}"
									target="#{roleBean.instance}" />
								<f:setPropertyActionListener value="#{row.systemInfo.id}"
									target="#{roleBean.sysId}" />
							</p:commandButton>
							<p:commandButton oncomplete="confirmation.show()" icon="ui-icon ui-icon-close"
									title="删除" >
									<f:setPropertyActionListener value="#{row}"
										target="#{roleBean.instance}" />
							</p:commandButton>
						</p:column>
    			</p:dataTable>
				<p:confirmDialog message="您确定要删除此角色吗？" header="删除警告" draggable="false"
					severity="alert" widgetVar="confirmation" modal="true" appendToBody="@(body)">
					<div align="center">
						<p:commandButton update=":tableForm:messages,:tableForm:roleDataTable" value="确定"
							oncomplete="confirmation.hide()"
							actionListener="#{roleBean.del}" />
						&#160;&#160;
						<p:commandButton value="取消" onclick="confirmation.hide()" type="button" />
					</div>
				</p:confirmDialog> 
			</p:panel>	
		</h:form>

当然每次加载页面的时候，也要根据各种情况，通知后台的roleBean做提前的准备工作，我们就可以在页面的前面，利用 Conversation这个类来做数据加载时的初始化操作。所以在后台所有的view这一层的bean,我们都封装成ConversationBean，这在后面我们会介绍：

在页面中，我们做如下声明使用即可：

    <ui:define name="metadata">
		<f:metadata>
			<f:event type="preRenderView" listener="#{roleBean.initConversation}" />
		</f:metadata>
	</ui:define>

这样我完成了其它功能数据列表展示的方式，都是如此，达到统一

2、关于新增和修改的form中，通过

<ui:include src="inc-input-item.xhtml" />

把需要做输出的界面统一放在另外一个页面中，这个页面只是简单的输入项而已，引入后面的操作按钮如下代码：

<h:form id="inputForm">
			<h:panelGroup id="roleInput">
				<p:dialog header="#{roleBean.instance.id==null?'添加角色':'修改角色'}" draggable="false"
					widgetVar="roleDialog" resizable="false" id="roleDlg"
					width="600" modal="true" appendToBody="@(body)">
					<h:panelGrid id="display" columns="4"
						columnClasses="column41,column42,column41,column42"
						footerClass="footer1">
						<ui:include src="inc-input-item.xhtml" />
						<f:facet name="footer">
							<p:commandButton id="btn_role_Save"
								actionListener="#{roleBean.addOrEdit}" value="保存"
								update=":tableForm:messages,:tableForm:roleDataTable,:tableForm:query_systemInfo_id"
								icon="ui-icon ui-icon-disk"
								oncomplete="handleComplete(roleDialog,args);" />&#160;&#160;
							<p:commandButton type="button" value="取消"
								onclick="roleDialog.hide()" icon="ui-icon ui-icon-cancel" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>
			</h:panelGroup>
		</h:form>

关于新增和修改引入的页面（inc-input-item.xhtml）内容，大体都如下：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

	<h:outputText value="所属系统：" />
	<p:selectOneMenu id="input_systemInfo_id"
		value="#{roleBean.sysId}" required="true"
		requiredMessage="请选择所属系统！" style="width:142px;">
		<f:selectItem itemValue="" itemLabel="---请选择---" />
		<f:selectItems value="#{roleBean.sysItems}" />
	</p:selectOneMenu>
	<h:outputText value="名称：" />
	<p:inputText id="input_roleName_id" value="#{roleBean.instance.roleName}" required="true" requiredMessage="角色名称不能为空！"/>
	<h:outputText value="描述：" />
	<p:inputText id="input_description_id" value="#{roleBean.instance.description}" />

</ui:composition>

这样就完成了其它功能新增或修改的方式，都是如此，达到统一

3、查看页面跟删除修改类似，就不过多介绍，大体上代码都被包含在inc-view.xhtml这个页面中：

其form内容如下：

<h:form id="viewForm">
			<h:panelGroup id="roleView">
				<p:dialog header="查看角色" widgetVar="roleDialogView" draggable="false"
					resizable="false" id="roleDlgView" width="600" modal="true" appendToBody="@(body)">
					<h:panelGrid id="displayView" columns="4"
						columnClasses="column41,column42,column41,column42"
						footerClass="footer1">

						<ui:include src="inc-view.xhtml" />

						<f:facet name="footer">
							<p:commandButton type="button" value="关闭"
								onclick="roleDialogView.hide()"
								icon="ui-icon ui-icon-cancel" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>
			</h:panelGroup>
		</h:form>

如果还涉及到多表操作，如下，为角色指定资源项，则如下操作：

form内容：

		<h:form id="resourceTableForm">
			<h:panelGroup id="resourceTable">
				<p:dialog header="角色【 #{roleBean.currentRole.roleName} 】拥有的资源如下：" widgetVar="resourceDialogTable"
					resizable="false" id="resourceDlgTable" width="600"  modal="true" appendToBody="@(body)" draggable="false">
					<h:panelGrid id="displayTable" columns="1"
						footerClass="footer1">

						<ui:include src="../resource/inc-select-table.xhtml" />

						<f:facet name="footer">
							<p:commandButton actionListener="#{roleBean.saveRoleRes}" update=":tableForm:messages"
								icon="ui-icon ui-icon-check"
								oncomplete="handleComplete(resourceDialogTable,args);" value="确定"/>&#160;&#160;
							<p:commandButton type="button" value="关闭"
								onclick="resourceDialogTable.hide()"
								icon="ui-icon ui-icon-cancel" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>
			</h:panelGroup>
			
		</h:form>

被包含页面inc-select-table.xhtml的内容如下：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

	<p:dataTable id="roleDataTable" var="row" value="#{userBean.mediumRoleModel}"
		emptyMessage="未查询到数据！" paginatorPosition="bottom"  paginator="true" rows="10"  
		paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport} {RowsPerPageDropdown}"
		currentPageReportTemplate="{currentPage}/{totalPages}"  
		rowsPerPageTemplate="5,10,20,50" selection="#{userBean.selectedRoleList}" >
		<f:facet name="header">
			<h:outputText value="角色列表" />
		</f:facet>
		<p:column selectionMode="multiple" style="width:60px;" />
		<p:column headerText="名称" style="width:200px;" >
			<h:outputText value="#{row.roleName}" />
		</p:column>
		<p:column headerText="描述" style="width:320px;" >
			<h:outputText value="#{row.description}" />
		</p:column>
	</p:dataTable>
				
</ui:composition>

这样我们每个功能的页面开发都是如此，因为统一而高效，同时下一个帖子介绍对以上前台页面的后台类的处理介绍。如果对你有帮助，请点个赞再走。后面附上这个页面的全部代码：

<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/template/template.xhtml">
	
	<ui:define name="metadata">
		<f:metadata>
			<f:event type="preRenderView" listener="#{roleBean.initConversation}" />
		</f:metadata>
	</ui:define>
	<ui:define name="title">角色管理</ui:define>
	<ui:define name="styleAndScript">
		<style type="text/css">

			
		</style>
	</ui:define>
	<ui:define name="content">
		<h:form id="tableForm">
				<p:panel styleClass="panel1">
					<p:growl id="messages" />
					
					<p:toolbar>
						<p:toolbarGroup align="left">
							
							<p:commandButton value="新增" actionListener="#{roleBean.clear}"
								icon="ui-icon-document" oncomplete="roleDialog.show();"
								update=":inputForm:roleInput" />
								
							<p:selectOneMenu id="query_systemInfo_id" value="#{roleBean.sysId}">
								<f:selectItem itemValue="" itemLabel="---全部---"/>
								<f:selectItems value="#{roleBean.sysItems}"/>
								<p:ajax listener="#{roleBean.search}" update="roleDataTable"></p:ajax>
							</p:selectOneMenu>
							<p:separator />
						</p:toolbarGroup>
					</p:toolbar>
					<p:dataTable id="roleDataTable" var="row" value="#{roleBean.roleList}"
						emptyMessage="未查询到数据！" paginatorPosition="bottom"  rowIndexVar="rowIndex" rowKey="#{rowIndex}" paginator="true" rows="10"  
						paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport} {RowsPerPageDropdown}"
						currentPageReportTemplate="{currentPage}/{totalPages}"  
						rowsPerPageTemplate="5,10,20,50" selection="#{roleBean.instance}"  selectionMode="single">
						<f:facet name="header">
							<h:outputText value="角色列表" />
						</f:facet> 
						<p:column headerText="名称">
							<h:outputText value="#{row.roleName}" />
						</p:column>
						<p:column headerText="描述">
							<h:outputText value="#{row.description}" />
						</p:column>
						<p:column headerText="所属系统">
							<h:outputText value="#{row.systemInfo.name}" />
						</p:column>
	
						<p:column headerText="操作" styleClass="operating_120"> 
							<p:commandButton action="#{roleBean.loadTreeData}" update=":resourceTableForm:resourceTable"
								oncomplete="resourceDialogTable.show();" title="设置资源权限"
								icon="ui-icon ui-icon-gear">
								<f:setPropertyActionListener value="#{row}"
									target="#{roleBean.currentRole}" />
								<f:setPropertyActionListener value="#{row.systemInfo.id}"
									target="#{roleBean.sysId}" />
							</p:commandButton>
							
							<p:commandButton actionListener="#{roleBean.clear}" update=":viewForm:roleView"
								oncomplete="roleDialogView.show();" title="查看"
								icon="ui-icon ui-icon-zoomin">
								<f:setPropertyActionListener value="#{row}"
									target="#{roleBean.instance}" />
								<f:setPropertyActionListener value="#{row.systemInfo.id}"
									target="#{roleBean.sysId}" />
							</p:commandButton>
							<p:commandButton actionListener="#{roleBean.clear}" update=":inputForm:roleInput"
								oncomplete="roleDialog.show();" title="修改"
								icon="ui-icon ui-icon-pencil">
								<f:setPropertyActionListener value="#{row}"
									target="#{roleBean.instance}" />
								<f:setPropertyActionListener value="#{row.systemInfo.id}"
									target="#{roleBean.sysId}" />
							</p:commandButton>
							<p:commandButton oncomplete="confirmation.show()" icon="ui-icon ui-icon-close"
									title="删除" >
									<f:setPropertyActionListener value="#{row}"
										target="#{roleBean.instance}" />
							</p:commandButton>
						</p:column>
    			</p:dataTable>
				<p:confirmDialog message="您确定要删除此角色吗？" header="删除警告" draggable="false"
					severity="alert" widgetVar="confirmation" modal="true" appendToBody="@(body)">
					<div align="center">
						<p:commandButton update=":tableForm:messages,:tableForm:roleDataTable" value="确定"
							oncomplete="confirmation.hide()"
							actionListener="#{roleBean.del}" />
						&#160;&#160;
						<p:commandButton value="取消" onclick="confirmation.hide()" type="button" />
					</div>
				</p:confirmDialog> 
			</p:panel>	
		</h:form>
		<h:form id="inputForm">
			<h:panelGroup id="roleInput">
				<p:dialog header="#{roleBean.instance.id==null?'添加角色':'修改角色'}" draggable="false"
					widgetVar="roleDialog" resizable="false" id="roleDlg"
					width="600" modal="true" appendToBody="@(body)">
					<h:panelGrid id="display" columns="4"
						columnClasses="column41,column42,column41,column42"
						footerClass="footer1">
						<ui:include src="inc-input-item.xhtml" />
						<f:facet name="footer">
							<p:commandButton id="btn_role_Save"
								actionListener="#{roleBean.addOrEdit}" value="保存"
								update=":tableForm:messages,:tableForm:roleDataTable,:tableForm:query_systemInfo_id"
								icon="ui-icon ui-icon-disk"
								oncomplete="handleComplete(roleDialog,args);" />&#160;&#160;
							<p:commandButton type="button" value="取消"
								onclick="roleDialog.hide()" icon="ui-icon ui-icon-cancel" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>
			</h:panelGroup>
		</h:form>
		<h:form id="viewForm">
			<h:panelGroup id="roleView">
				<p:dialog header="查看角色" widgetVar="roleDialogView" draggable="false"
					resizable="false" id="roleDlgView" width="600" modal="true" appendToBody="@(body)">
					<h:panelGrid id="displayView" columns="4"
						columnClasses="column41,column42,column41,column42"
						footerClass="footer1">

						<ui:include src="inc-view.xhtml" />

						<f:facet name="footer">
							<p:commandButton type="button" value="关闭"
								onclick="roleDialogView.hide()"
								icon="ui-icon ui-icon-cancel" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>
			</h:panelGroup>
		</h:form>
		<h:form id="resourceTableForm">
			<h:panelGroup id="resourceTable">
				<p:dialog header="角色【 #{roleBean.currentRole.roleName} 】拥有的资源如下：" widgetVar="resourceDialogTable"
					resizable="false" id="resourceDlgTable" width="600"  modal="true" appendToBody="@(body)" draggable="false">
					<h:panelGrid id="displayTable" columns="1"
						footerClass="footer1">

						<ui:include src="../resource/inc-select-table.xhtml" />

						<f:facet name="footer">
							<p:commandButton actionListener="#{roleBean.saveRoleRes}" update=":tableForm:messages"
								icon="ui-icon ui-icon-check"
								oncomplete="handleComplete(resourceDialogTable,args);" value="确定"/>&#160;&#160;
							<p:commandButton type="button" value="关闭"
								onclick="resourceDialogTable.hide()"
								icon="ui-icon ui-icon-cancel" />
						</f:facet>
					</h:panelGrid>
				</p:dialog>
			</h:panelGroup>
			
		</h:form>
	</ui:define>
</ui:composition>