系统登录页面login.xhtml

1、登录页面：

        前面我们开发环境的准备工作基本上已经弄好，接下来，我们开始开发系统的登录页面，因为js和css已经在模板文件中定义了(看上一篇)，那么对于前台页面来讲，基本上就只是图片文件了，在项目中新建一个images文件加存放即可，对于登录页面来讲，主体上就是用户名、密码输入框，然后点击登录到后台，由login类来处做后台处理，前台页面上主体代码如下：

<h:form id="form1">
	<p:inputText id="userName" value="#{userName}">
		<!-- <f:validator validateorId="" /> -->
	</p:inputText></td>

	<p:password id="password" value="#{password}" required="true">
		<!-- <f:validator validateorId="" /> -->
	</p:password></td>

	<div align="right">
		<h:messages></h:messages>
		<h:commandButton image="/images/login/b_login.gif"
			id="userLoginID" action="#{loginBean.userLogin(userName,password)}" />
		<h:commandButton image="/images/login/b_clean.gif"
			id="userRestId"
			onclick="javascript:document.form1.reset();" />
	</div>
</h:form>

        这样我们就通过在页面上调用LoginBean的userLogin()方法，到后台去做判断，在数据库中是否存该用户，成功则登录到主页，否则返回登录页面。为了让登录页面不显得太过难看，我把我系统美化后登陆页面代码全部贴出来：

<?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">
	<f:view contentType="text/html">
		<h:head>
			<f:facet name="first">
				<title>PrimeFaces Layout</title>
			</f:facet>
			<style type="text/css"></style>
		</h:head>
		<h:body>
			<table width="651" align="center" class="login_table">
				<tr>
					<td height="50"></td>
				</tr>
				<tr>
					<td height='351'>
						<table width="100%" class="login_table">
							<tr>
								<td width="15" height="43"
									style="background-image: url(./images/login/ileft.gif);"></td>
								<td width="620"
									style="background-image: url(./images/login/i_topbg2.gif);">
									<img height="43" src="images/login/i_top1.gif" width="43" />
								</td>
								<td width="16"><img height="43"
									src="images/login/iright.gif" width="16" /></td>
							</tr>

							<tr>
								<td style="background-image: url(./images/login/ileftbg.gif);"></td>
								<td align="center"
									style="height: 280px; background-image: url(./images/login/bg.gif);">
									<table class="login_table" align="center"
										style="width: 369; height: 110px;">
										<tr>
											<td width="155"><img src="images/login/logo.jpg"
												style="width: 155px; height: 140px" /></td>
											<td align="left" style="width: 214px;">
												<table width="167" class="login_table">
													<tr>
														<td width="200" height="30"><img height="24"
															src="images/login/login.png" width="200" border="0" /></td>
													</tr>
													<tr>
														<td height="123">
															<table class="login_table" align="center"
																style="height: 110px;">
																<h:form id="form1">
																	<tr>
																		<td align="left" width="44" height="28">
																			<div align="right">
																				<img height="14" src="images/login/id.gif"
																					width="43" />
																			</div>
																		</td>
																		<td align="left" width="114" height="28"><p:inputText
																				id="userName" value="#{userName}">
																				<!-- <f:validator validateorId="" /> -->
																			</p:inputText></td>
																	</tr>
																	<tr>
																		<td align="left" width="44" height="28">
																			<div align="right">
																				<img height="14" src="images/login/pass.gif"
																					width="43" />
																			</div>
																		</td>
																		<td align="left" width="114" height="28">
																			<p:password
																				id="password" value="#{password}" required="true">
																				<!-- <f:validator validateorId="" /> -->
																			</p:password></td>
																	</tr>
																	<tr>
																		<td colspan="2" align="center" style="height: 25px;">
																			<div align="right">
																				<h:messages></h:messages>
																				<h:commandButton image="/images/login/b_login.gif"
																					id="userLoginID" action="#{loginBean.userLogin(userName,password)}" />
																				<h:commandButton image="/images/login/b_clean.gif"
																					id="userRestId"
																					onclick="javascript:document.form1.reset();" />
																			</div>
																		</td>
																	</tr>
																</h:form>
															</table>
														</td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
								<td style="background-image: url(./images/login/irightbg.gif);"></td>
							</tr>
							<tr>
								<td><img height="29" src="images/login/i_bottom_left.gif"
									width="15" /></td>
								<td
									style="background-image: url(./images/login/i_bottom_bg.gif);"></td>
								<td width="16"><img height="29"
									src="images/login/i_bottom_right.gif" width="16" /></td>
							</tr>
						</table>
					</td>
				</tr>
				
			</table>
		</h:body>
	</f:view>
</ui:composition>

页面涉及的图片全部存放在images目录下，如下：

 发布项目，在浏览器查看效果，如下：

 2、后台业务处理构想

         通过primefaces页面，到后台后，在后台业务处理分两层，一层是业务处理层，另外就是底层数据处理，数据处理这一层交给jpa来处理，后面来介绍，业务处理层，我们也分为两部分，一部分用来处理来自于页面的请求数据处理，另外一层用来做复杂业务处理，所以这一层中我们分为三个包来存放各种类型的类，分别是：view、service、entity，其中view就是有来存放与前台业务做业务交互的类，service用于与底层业务做交互的类，entity，是实体对象，可以是数据库实体类。结构如图所示（在common目录下的三个包）：

因为类还没完成，所以有错误提示，忽略就好。这样登陆页面需要打道的类就放在view中，我们在view中新建一个类，如下：

 在这个类中，初步定义了几个方法，做如下介绍，userLogin方法用来做判断数据库中是否存在前台传过来的是否为合法用户，如果是的话登录到主面，否则则返回到登陆页面：这个方法主要做的事，如下：

        /** 1、对从前台页面传回的userName,和password进行处理，密码进行md5加密
			2、从数据库中查找该用户是否存在
			3、如果从数据库中返回用户对象不为空，则将用户名保存在session中
			4、将当前用户的信息也保存在一个currentUser中，
			5、做一些用户登录成功的初始化操作，主要指获取用户的操作资源
			6、登录系统主页面，若数据库中不存在该用户，则提示登录失败，并返回登录页面
		*/

 在这个方法中，主要是如果是合法用户，则调用 下面的初始化方法initUserResource，在这个方法中，我们主要要做的事跟前页帖子介绍的模板页面（template.xhtml）上的导航条有关，我们想取得三级菜单来填充前面模板文件的导航条。所以在这个方法中，我们主要是从数据库取得菜单数据返回给前面的模板页，这样就可以根据不同用户显示不同的导航条菜单。所以这个方法主要完成以下功能

        /**
		 * 1、通过用户对象获取该对象拥有的角色
		 * 2、通过用户所拥有的角色获取访用户所拥有的资源
		 * 3、对模板文件中的导航菜单进行初始化，假设导航为三级菜单
		 * 4、获取用户一级导航菜单
		 * 5、获取用户二级菜单
		 * 6、获取用户第三级菜单
		 * */

 其实我们还定义了另外两个方法，用来响应模板页面中点击导航菜单的响应事件，方法大体上的实现代码如下：

/**
	 *  @Title:changeMenu
	 *  @Desc:当点击导航条上的按钮，将一级菜单的selectID传入，根据此id，找到其子菜单，做为导航条下面的二级菜单项
	 *  @Param:@param selectID
	 *  @Param:@return
	 *  @Return:String
	 *  @Throws:
	 */
	public String changeMenu(Long selectTopId) {
		
		return null;
	}
	/**
	 *  @Title:changeMenu
	 *  @Desc:当点击导航条上的按钮，将二级菜单的selectID传入，根据此id，找到其子菜单，做为导航条下面的三级菜单项
	 *  @Param:@param selectID
	 *  @Param:@return
	 *  @Return:String
	 *  @Throws:
	 */
	
	public String changeMenu2(Long selectSecondId) {
		
		return null;
	}

另外logout为用户正常退出系统需要释放session等操作，比如清空用户的菜单资源等：

	public void logout() {
			
		
	}
	

这样大体上就明白了，loginBean需要做的事情，特别提到一下，我们准备建立三个变量来存放初始化操作是分别保存的三级菜单，分别是以下三个List

    /** 一级菜单资源 */
	private List<Resource> topResource=new ArrayList<Resource>();
	/** 二级菜单资源 */
	private List<Resource> thirdResource=Lists.newArrayList();
	/** 三级菜单资源 */
	private List<Resource> secondResource=Lists.newArrayList();

在loginBean里有了这三个菜单项，我们就准备回到 模板文件中(template.xhtml)，在这里我们展示三个菜单 ，如果你能熟练应用其他的方法展示，就按你熟悉的来做，我是为了教新人，效果自然不好看。代码展示如下：template.xhtml文件中取一级菜单：

<div id="top_up_menu">
					<h:form prependId="false" id="up_menu">
						<ul>
							<ui:repeat var="topMenu" value="#{loginBean.topResource}">
			
								<ui:fragment rendered="#{loginBean.selectTopId == topMenu.id}">
									<li class="top_up_menu_ul_li_B">
										<p:commandLink value="#{topMenu.name}"
											action="#{loginBean.changeMenu(topMenu.id)}" ajax="false" />
									</li>
								</ui:fragment>
								<ui:fragment rendered="#{loginBean.selectTopId != topMenu.id}">
									<li class="top_up_menu_ul_li_A">
										<p:commandLink value="#{topMenu.name}"
											action="#{loginBean.changeMenu(topMenu.id)}" ajax="false" />
									</li>
								</ui:fragment>
							</ui:repeat>
						</ul>
					</h:form>
				</div>

 template.xhtml文件中取二级菜单：

<div id="top_down_center" style="z-index: 1">
						<h:form prependId="false" id="test">
							<ul id="nav">
								<ui:repeat var="midMenu" value="#{loginBean.secondResource}">
									<ui:fragment rendered="#{loginBean.selectSecondId == midMenu.id}">
										<li >
											<p:commandLink value="#{midMenu.name}"
												action="#{loginBean.changeMenu2(midMenu.id)}" ajax="false" />
										</li>
									</ui:fragment>
									<ui:fragment rendered="#{loginBean.selectSecondId != midMenu.id}">
										<li >
											<p:commandLink value="#{midMenu.name}" 
												action="#{loginBean.changeMenu2(midMenu.id)}" ajax="false" />
										</li>
									</ui:fragment>
								</ui:repeat>
							</ul>
						</h:form>
					</div>

 模板文件中取三级菜单：

<div id="top_down_center" style="z-index: 1">
						<ul id="nav">
							<ui:repeat var="menu12" value="#{loginBean.thirdResource}">
								<li id="#{menu12.code}">
									<a href="#{request.scheme}://#{request.serverName}:#{request.serverPort}#{menu12.url}">
										#{menu12.name}
									</a>
								</li>
							</ui:repeat>
						</ul>
					</div>

这样我们的模板文件就完成了，如果后台代码全部完成，想展示的效果如下：

看到前台页面的系统管理下的几个菜单就可以了解，系统采用的角色管理，分为五张表，用户表(User)、角色表(Role) 、用户角色关系表UserResource、资源表(Resource)、以及角色资源关系表，下面贴出几张表大体上的属性，供参考：

User类：

package com.dodow.common.entity;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Table;
import javax.persistence.Transient;

import com.dodow.base.entity.BaseEntity;


/**
 *  @Desc:TODO
 *  @Author:
 */
@Entity
@Table(name = "SYS_USER")
public class User extends BaseEntity implements Serializable {

	private static final long serialVersionUID = 1L;

	/** 用户账户 */
	private String userName;
	/** 密码 */
	private String password;
	/**
	 * 重复密码
	 */
	private String password2;
	/** 姓名 */
	private String name;
	/** 联系电话 */
	private String cellphoneNo;
	/** 手机 */
	private String contactTelephoneNo;
	/** 电子邮箱 */
	private String email;
	/** 联系地址 */
	private String contactAddress;
	/** 员工工号 */
	private String pernr;
	/** 员工全部信息组合 */
	private String search_phrase;
	
	private String isorbIdden;

	// 构造函数
	public User() {

	}

	/**
	 * @param userName
	 */
	public User(String userName) {
		this.userName = userName;
	}

	@Column(name = "F_USER_NAME", nullable = false, length = 18)
	public String getUserName() {
		return userName;
	}

	public void setUserName(String userName) {
		this.userName = userName;
	}

	@Column(name = "F_PASSWORD", length = 64)
	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	@Transient
	public String getPassword2() {
		return password2;
	}

	public void setPassword2(String password2) {
		this.password2 = password2;
	}

	@Column(name = "F_NAME", length = 30)
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	@Column(name = "F_CELLPHONE_NO", length = 30)
	public String getCellphoneNo() {
		return cellphoneNo;
	}

	public void setCellphoneNo(String cellphoneNo) {
		this.cellphoneNo = cellphoneNo;
	}

	 @Column(name = "F_CONTACT_TELEPHONE_NO", length = 30)
	public String getContactTelephoneNo() {
		return contactTelephoneNo;
	}

	public void setContactTelephoneNo(String contactTelephoneNo) {
		this.contactTelephoneNo = contactTelephoneNo;
	}

	@Column(name = "F_EMAIL", length = 60)
	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	@Column(name = "F_CONTACT_ADDRESS", length = 60)
	public String getContactAddress() {
		return contactAddress;
	}

	public void setContactAddress(String contactAddress) {
		this.contactAddress = contactAddress;
	}

	@Column(name = "F_PERNR", length = 120)
	public String getPernr() {
		return pernr;
	}

	public void setPernr(String pernr) {
		this.pernr = pernr;
	}

	@Column(name = "F_SEARCH_PHRASE", length = 150)
	public String getSearch_phrase() {
		return search_phrase;
	}

	public void setSearch_phrase(String search_phrase) {
		this.search_phrase = search_phrase;
	}

	@Column(name = "F_REMARK", length = 250)
	public String getRemark() {
		return remark;
	}

	public void setRemark(String remark) {
		this.remark = remark;
	}

	/** 备注信息 */
	private String remark;

	@Transient
	@Override
	public String getDisplayText() {
		// TODO Auto-generated method stub
		return null;
	}

	/**
	 * @return the isorbIdden
	 */
	@Column(name="ISFORBIDDEN",length=100)
	public String getIsorbIdden() {
		return isorbIdden;
	}

	/**
	 * @param isorbIdden the isorbIdden to set
	 */
	public void setIsorbIdden(String isorbIdden) {
		this.isorbIdden = isorbIdden;
	}

}

 Role类

/**
 * 
 */
package com.dodow.common.entity;

import java.util.HashSet;
import java.util.Set;

import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.Table;
import javax.persistence.Transient;

import com.dodow.base.entity.BaseEntity;
import com.dodow.base.entity.SystemInfo;

/**
 * 
 */
@Entity
@Table(name="SYS_ROLE")
public class Role extends BaseEntity {

	private static final long serialVersionUID = 1L;
	
	/** 所属系统*/
    private SystemInfo systemInfo;
    /** 角色名称*/
    private String roleName = "";
    /** 角色范围*/
    private String roleScope = "";
    /** 角色状态*/
    private int state;
    /** 是否管理员角色*/
    private boolean isAdmin = false;
    /** 角色描述*/
    private String description = "";
    /** 角色资源*/
    private Set<RoleResource> roleResources = new HashSet<RoleResource>(0);
    /** 用户角色*/
    private Set<UserRole> userRoles = new HashSet<UserRole>(0);

    public Role() {
    }

    @Column(name = "F_DESCRIPTION")
    public String getDescription() {
        return this.description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    @Column(name = "F_ROLE_NAME")
    public String getRoleName() {
        return this.roleName;
    }

    public void setRoleName(String roleName) {
        this.roleName = roleName;
    }

    @Column(name = "F_ROLE_SCOPE")
    public String getRoleScope() {
        return this.roleScope;
    }

    public void setRoleScope(String roleScope) {
        this.roleScope = roleScope;
    }

    @Column(name = "F_STATE", nullable = false)
    public int getState() {
        return this.state;
    }

    public void setState(int state) {
        this.state = state;
    }

    @OneToMany(fetch = FetchType.LAZY, cascade = CascadeType.ALL, mappedBy = "role")
    public Set<RoleResource> getRoleResources() {
        return this.roleResources;
    }

    public void setRoleResources(Set<RoleResource> roleResources) {
        this.roleResources = roleResources;
    }

    @OneToMany(fetch = FetchType.LAZY, cascade = CascadeType.ALL, mappedBy = "role")
    public Set<UserRole> getUserRoles() {
        return this.userRoles;
    }

    public void setUserRoles(Set<UserRole> userRoles) {
        this.userRoles = userRoles;
    }

    
    
    @Column(name="IS_ADMIN",columnDefinition="smallint")
	public Boolean isAdmin() {
		return isAdmin;
	}


    public void setAdmin(boolean isAdmin) {
        this.isAdmin = isAdmin;
    }
    
    @ManyToOne(fetch = FetchType.EAGER)
	@JoinColumn(name = "F_SYSTEM_ID")
	public SystemInfo getSystemInfo() {
		return systemInfo;
	}

	public void setSystemInfo(SystemInfo systemInfo) {
		this.systemInfo = systemInfo;
	}

	@Override
	@Transient
	public String getDisplayText() {
		// TODO Auto-generated method stub
		return null;
	}

}

 UserRole类：

package com.dodow.common.entity;

import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.Table;
import javax.persistence.Transient;

import com.dodow.base.entity.BaseEntity;


/**
 *  @Desc:TODO
 *  @Author:
 */
@Entity
@Table(name = "SYS_USER_ROLE")
public class UserRole extends BaseEntity {

	private static final long serialVersionUID = 1L;

	private User user;
	private Role role;

	// 构造函数
	public UserRole() {
		
	}

	/**
	 * @param user
	 * @param role
	 */
	public UserRole(User user, Role role) {
		this.user = user;
		this.role = role;
	}

	@ManyToOne(fetch=FetchType.LAZY)
	@JoinColumn(name="F_USER_ID")
	public User getUser() {
		return this.user;
	}

	public void setUser(User user) {
		this.user = user;
	}

	@ManyToOne(fetch=FetchType.LAZY)
	@JoinColumn(name="F_ROLE_ID")
	public Role getRole() {
		return role;
	}

	public void setRole(Role role) {
		this.role = role;
	}

	@Override
	@Transient
	public String getDisplayText() {
		// TODO Auto-generated method stub
		return null;
	}

}

 Resource类：

/**
 * 
 */
package com.dodow.common.entity;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.Table;
import javax.persistence.Transient;

import com.dodow.base.entity.BaseEntity;
import com.dodow.base.entity.SystemInfo;

/**
 * compareTo:返回参与比较的前后两个字符串的asc码的差值，进行了从小到大的排列
 * Comparable接口的使用举例： 自然排序
 */
@Entity
@Table(name="SYS_RESOURCE")
public class Resource extends BaseEntity implements Comparable<Resource> {

	private static final long serialVersionUID = 1L;
	
	/**所属系统*/
	private SystemInfo systemInfo;
	/** 父Id*/
	private String parentCode ;
	/** 资源名称*/
	private String name = "";
	/** 资源URL*/
	private String url = "";/**
	 * 图标路径
	 */
	private String iconPath = "";
	
	/** 资源类型*/
	private String type = "";
	/** 是否是菜单*/
	private Boolean ismenu = false;
	/** 资源等级*/
	private String level = "";
	/** 资源编号*/
	private String code = "";
	/** 菜单层次*/
	private String gradation;
	
	public Resource() {
	}

	public Resource(String level, String name, String url) {
		this.level = level;
		this.name = name;
		this.url = url;
	}
	
	@ManyToOne(fetch = FetchType.EAGER)
	@JoinColumn(name = "F_SYSTEM_ID")
	public SystemInfo getSystemInfo() {
		return systemInfo;
	}

	public void setSystemInfo(SystemInfo systemInfo) {
		this.systemInfo = systemInfo;
	}
	
	@Column(name = "F_PARENT_CODE", length = 30)
	public String getParentCode() {
		return parentCode;
	}

	public void setParentCode(String parentCode) {
		this.parentCode = parentCode;
	}

	@Column(name = "F_NAME")
	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	@Column(name = "F_URL")
	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}
	
	/**
	 * 获取图标路径
	 * @return
	 */
	@Column(name = "F_ICONPATH")
	public String getIconPath() {
		return iconPath;
	}

	public void setIconPath(String iconPath) {
		this.iconPath = iconPath;
	}

	@Column(name = "F_TYPE")
	public String getType() {
		return type;
	}

	public void setType(String type) {
		this.type = type;
	}

	@Column(name = "F_ISMENU",columnDefinition="smallint")
	public Boolean getIsmenu() {
		return ismenu;
	}

	public void setIsmenu(Boolean ismenu) {
		this.ismenu = ismenu;
	}

	@Column(name = "F_LEVEL")
	public String getLevel() {
		return level;
	}

	public void setLevel(String level) {
		this.level = level;
	}

	@Column(name = "F_CODE")
	public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}

	@Column(name = "F_GRADATION")
	public String getGradation() {
		return gradation;
	}

	public void setGradation(String gradation) {
		this.gradation = gradation;
	}

	@Transient
	public int compareTo(Resource resource) {
	    return this.code.compareTo(resource.getCode());
	}
	
	

	@Override
	@Transient
	public String getDisplayText() {
		// TODO Auto-generated method stub
		return null;
	}

}

 RoleResource类：

/**
 * 
 */
package com.dodow.common.entity;

import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.Table;
import javax.persistence.Transient;

import com.dodow.base.entity.BaseEntity;

/**
 * 
 */
@Entity
@Table(name="SYS_ROLE_RESOURCE")
public class RoleResource extends BaseEntity {
	
	private static final long serialVersionUID = 1L;

	private Role role;
	private Resource resource;
	
	//构造函数
	public RoleResource() {
	}

	public RoleResource(Role role, Resource resource) {
		this.role = role;
		this.resource = resource;
	}
	
	@ManyToOne(fetch=FetchType.LAZY)
	@JoinColumn(name="F_ROLE_ID")
	public Role getRole() {
		return role;
	}

	public void setRole(Role role) {
		this.role = role;
	}

	@ManyToOne(fetch=FetchType.LAZY)
	@JoinColumn(name="F_RESOURCE_ID")
	public Resource getResource() {
		return this.resource;
	}

	public void setResource(Resource resource) {
		this.resource = resource;
	}

	@Override
	@Transient
	public String getDisplayText() {
		// TODO Auto-generated method stub
		return null;
	}

}

累了，毁灭吧，下次再搞。