Web编程学习二: 使用JPA结合JSF来创建Web应用

来源：互联网发布：弘历指标源码八大天王编辑：程序博客网时间：2024/06/03 17:16

昨天做了一个使用JSF的一个helloworld的小练习，它并没有和后端数据交互。

今天我来加上JPA来持久化数据对象，前台依然使用JSF来展现，做一个完整的Web应用。

这个应用的功能是用户输入用户名和密码后，通过JPA来查询后台数据库进行校验，如果成功则进入欢迎页面。

开发环境：

Eclipse Juno，

JSF2.1,

JPA框架：EclipseLink 2.4，

数据库：MySql 5.5

Web应用服务器: Tomcat 7.0

1.首先安装MySQL数据库，数据库信息：

登录数据库，并创建一个table：

mysql> create table users (id integer primary key, name varchar(120), login varchar(75) not null, password varchar(75) not null);

然后输入几条测试用户信息：

2.创建一个叫做webusers的Dynamic Web项目，并添加JPA Facet。

3.编辑persistence.xml文件

Persistence Provider:
org.eclipse.persistence.jpa.PersistenceProvider

以及数据库相关信息，

完整的persistence.xml:

<?xml version="1.0" encoding="UTF-8"?><persistence version="2.0" xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd"><persistence-unit name="webusers" transaction-type="RESOURCE_LOCAL"><provider>org.eclipse.persistence.jpa.PersistenceProvider</provider><class>logon.User</class><properties><property name="javax.persistence.jdbc.url" value="jdbc:mysql://localhost:8889/test" /><property name="javax.persistence.jdbc.driver" value="com.mysql.jdbc.Driver" /><property name="javax.persistence.jdbc.user" value="root" /><property name="javax.persistence.jdbc.password" value="root" /></properties></persistence-unit></persistence>

4.创建Entity User

package logon;import javax.persistence.Entity;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;import javax.persistence.Table;@Entity@Table(name = "USERS")public class User {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private int id;String Name = null;String Login = null;String Password = null;public int get_Id() {return id;}public void set_Id(int id) {this.id = id;}public String getName() {return Name;}public void setName(String Name) {this.Name = Name;}public String getLogin() {return Login;}public void setLogin(String Login) {this.Login = Login;}public String getPassword() {return Password;}public void setPassword(String Password) {this.Password = Password;}}

5.为项目加上JSF的facet

6.打开faces-config.xml，在managedBean页面加入一个Session Bean: logonBean

7.创建SessionBean class

package logon;import javax.persistence.EntityManager;import javax.persistence.EntityManagerFactory;import javax.persistence.Persistence;import javax.persistence.Query;public class LogonBean {private static final String PERSISTENCE_UNIT_NAME = "webusers";private static EntityManagerFactory factory;private String userName;private String password;public LogonBean() {}public String getUserName() {return userName;}public void setUserName(String userName) {this.userName = userName;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String validate() {String flag = "failure";factory = Persistence.createEntityManagerFactory(PERSISTENCE_UNIT_NAME);EntityManager em = factory.createEntityManager();Query q = em.createQuery("SELECT u FROM User u WHERE u.Login = :login AND u.Password = :pass");q.setParameter("login", userName);q.setParameter("pass", password);try {User user = (User) q.getSingleResult();if (userName.equalsIgnoreCase(user.Login)&& password.equals(user.Password)) {flag = "success";}} catch (Exception e) {return null;}return flag;}}

8.创建页面模板，BasicTemplate.xhtml, footer.xhtml, header.xhtml.

BasicTemplate.xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"      xmlns:ui="http://java.sun.com/jsf/facelets"><head>  <title><ui:insert name="title">Facelets Tutorial</ui:insert></title></head><body><div id="header">    <ui:insert name="header">        <ui:include src="/WEB-INF/templates/header.xhtml"/>    </ui:insert></div><div id="content">    <ui:insert name="content">    </ui:insert></div><div id="footer">    <ui:insert name="footer">        <ui:include src="/WEB-INF/templates/footer.xhtml"/>    </ui:insert></div></body></html>

header.xhtml:

<?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body><div style="width:100%;font-size:36px;line-height:48px;background-color:navy;color:white">My Facelet Application</div></body></html>

footer.xhmtl:

<?xml version="1.0" encoding="ISO-8859-1" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>Insert title here</title></head><body><div style="background-color:navy;width:100%;color:white"></div></body></html>

9.最后创建logon页面和welcome.xhtml页面。

logon.xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"><ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml"><ui:define name="content">        <h:form>            <h:panelGrid columns="2">                <h:outputText value="Name"></h:outputText>                <h:inputText value="#{logonBean.userName}"></h:inputText>                <h:outputText value="Password"></h:outputText>                <h:inputSecret value="#{logonBean.password}"></h:inputSecret>            </h:panelGrid>            <h:commandButton value="Login" action="#{logonBean.validate}"></h:commandButton>        </h:form></ui:define></ui:composition></html>

welcome.xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"><ui:composition template="/WEB-INF/templates/BasicTemplate.xhtml"><ui:define name="content">   <h:outputLabel value="Welcome #{logonBean.userName}"></h:outputLabel></ui:define></ui:composition></html>

10.打开face-config.xml，创建页面导航。

11.终于搞定了！在Tomcat服务器上测试运行一下，输入后台数据库users表里的用户信息来登录。

小结：

这个小例子在上一个练习的基础上修改加工完成的。

通过JPA来实现数据对象的操作，然后通过JSF的页面模板来展示数据，思路非常简单清晰。

0 0