mvc-01-Model-View-Controller 概览
web mvc-05-JSF JavaServer Faces
web mvc-06-play framework intro
以下是一个简单的JavaServer Faces(JSF)入门例子,演示如何创建一个简单的Web应用程序。在这个例子中,我们将创建一个简单的登录页面,用户输入用户名和密码,点击登录按钮后显示欢迎消息。
创建一个新的Web应用项目:
在你的IDE(例如Eclipse、IntelliJ等)中创建一个新的Web应用项目。
添加JSF支持:
确保项目中添加了JSF的支持库。你可以在WEB-INF/lib
目录下添加javax.faces.jar
等JSF相关的JAR文件。
创建JSF页面:
在WebContent
目录下创建一个名为login.xhtml
的JSF页面。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>JSF Login Example</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel value="Username:"/>
<h:inputText value="#{userBean.username}" required="true"/>
<h:outputLabel value="Password:"/>
<h:inputSecret value="#{userBean.password}" required="true"/>
<h:commandButton value="Login" action="#{userBean.login}"/>
</h:form>
</h:body>
</html>
创建Managed Bean:
创建一个名为UserBean
的Managed Bean,用于处理用户输入和登录逻辑。
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class UserBean {
private String username;
private String password;
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 login() {
// Simple login logic (for demonstration purposes)
if ("admin".equals(username) && "password".equals(password)) {
return "welcome"; // Navigation case to welcome.xhtml
} else {
return "error"; // Navigation case to error.xhtml
}
}
}
创建欢迎和错误页面:
创建welcome.xhtml
和error.xhtml
页面,用于显示登录成功和失败的消息。
<!-- welcome.xhtml -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Welcome</title>
</h:head>
<h:body>
<h:outputText value="Welcome, #{userBean.username}!"/>
</h:body>
</html>
<!-- error.xhtml -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Error</title>
</h:head>
<h:body>
<h:outputText value="Login failed. Please check your credentials."/>
</h:body>
</html>
配置导航规则:
在faces-config.xml
中配置导航规则,以便在登录成功或失败时导航到相应的页面。
<navigation-rule>
<from-view-id>/login.xhtml</from-view-id>
<navigation-case>
<from-outcome>welcome</from-outcome>
<to-view-id>/welcome.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>error</from-outcome>
<to-view-id>/error.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
运行应用程序:
部署你的应用程序到Web服务器(如Tomcat)并访问http://localhost:8080/yourapp/login.xhtml
。
这是一个简单的JSF入门例子,演示了如何创建一个基本的用户登录页面和相应的逻辑。
请注意,这只是一个简单的示例,实际应用程序中可能需要更复杂的安全和验证机制。