Web编程学习二: 使用JPA结合JSF来创建Web应用
昨天做了一个使用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的页面模板来展示数据,思路非常简单清晰。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。