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

2022-04-14 19:18:43

昨天做了一个使用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的页面模板来展示数据，思路非常简单清晰。

Web编程学习二: 使用JPA结合JSF来创建Web应用,布布扣,bubuko.com

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

码农公寓

相关文章