java web mvc-05-JSF JavaServer Faces 入门例子

拓展阅读

Spring Web MVC-00-重学 mvc

mvc-01-Model-View-Controller 概览

web mvc-03-JFinal

web mvc-04-Apache Wicket

web mvc-05-JSF JavaServer Faces

web mvc-06-play framework intro

web mvc-07-Vaadin

web mvc-08-Grails

开源

The jdbc pool for java.(java 手写 jdbc 数据库连接池实现)
The simple mybatis.(手写简易版 mybatis)

JSF 的入门例子

以下是一个简单的JavaServer Faces(JSF)入门例子,演示如何创建一个简单的Web应用程序。在这个例子中,我们将创建一个简单的登录页面,用户输入用户名和密码,点击登录按钮后显示欢迎消息。

  1. 创建一个新的Web应用项目:

    在你的IDE(例如Eclipse、IntelliJ等)中创建一个新的Web应用项目。

  2. 添加JSF支持:

    确保项目中添加了JSF的支持库。你可以在WEB-INF/lib目录下添加javax.faces.jar等JSF相关的JAR文件。

  3. 创建JSF页面:

    WebContent目录下创建一个名为login.xhtml的JSF页面。

    xml 复制代码
    <!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>
  4. 创建Managed Bean:

    创建一个名为UserBean的Managed Bean,用于处理用户输入和登录逻辑。

    java 复制代码
    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
            }
        }
    }
  5. 创建欢迎和错误页面:

    创建welcome.xhtmlerror.xhtml页面,用于显示登录成功和失败的消息。

    xml 复制代码
    <!-- 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>
    xml 复制代码
    <!-- 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>
  6. 配置导航规则:

    faces-config.xml中配置导航规则,以便在登录成功或失败时导航到相应的页面。

    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>
  7. 运行应用程序:

    部署你的应用程序到Web服务器(如Tomcat)并访问http://localhost:8080/yourapp/login.xhtml

这是一个简单的JSF入门例子,演示了如何创建一个基本的用户登录页面和相应的逻辑。

请注意,这只是一个简单的示例,实际应用程序中可能需要更复杂的安全和验证机制。

相关推荐
Json_181790144803 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
大数据编程之光8 分钟前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
爪哇学长22 分钟前
双指针算法详解:原理、应用场景及代码示例
java·数据结构·算法
风尚云网26 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
ExiFengs26 分钟前
实际项目Java1.8流处理, Optional常见用法
java·开发语言·spring
paj12345678927 分钟前
JDK1.8新增特性
java·开发语言
木子020428 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing30 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月33 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
繁依Fanyi38 分钟前
简易安卓句分器实现
java·服务器·开发语言·算法·eclipse