Java Web应用程序集成的jQuery UI选项卡(水平和垂直)示例
时间：2020-02-23 14:46:16 来源:igfitidea点击:
jQuery UI建立在jQuery JavaScript库的基础上，可帮助Web开发人员创建具有不同效果类型的出色网页。
今天，我们将研究jQuery UI Tabs功能，该功能可用于轻松在视图页面中创建选项卡。
我们将在一个简单的Java Web应用程序中使用它，用户可以其中注册然后登录。
注册和登录表单都将是主页的一部分，位于两个不同的选项卡中。
只是为了获得一个想法，下图显示了将所有点滴整合后的Web应用程序主页。
Java Web应用程序设置
下图显示了我们的Web应用程序的最终结构。
在继续进行代码之前，我们需要使用必需的JS和CSS库设置应用程序。
在Eclipse中创建"动态Web项目"，您可以选择任何名称，但是如果要使用与我的项目相同的名称，请使用jQueryUITabsLoginExample。
创建项目后，将其转换为Maven项目，以便我们可以添加所需的依赖项。我正在使用MySQL DB存储用户信息，下面的脚本可用于创建Users表。
由于我使用的是MySQL数据库，因此我们需要将MySQL Java驱动程序添加到项目中。
下面是我们最终的pom.xml，它简单明了。pom.xml从https://jquery.com/download/下载jQuery JavaScript库，并将其放入js目录，如项目图像所示。
从https://jqueryui.com/download/下载jQuery UI库，您将获得很多JS和CSS文件。
您只需要为项目包括jquery-ui.js和jquery-ui.css文件。
jQuery UI提供了许多主题，我们可以将其用作基础主题，然后根据我们的要求对其进行自定义。
项目主页中的布局是Cupertino主题，您可以从"下载"页面中选择主题之一。
我们的项目设置现已准备就绪，现在可以移至业务逻辑部分。
模型类
我们有User类来映射数据库表，下面是User模型类的代码。
User.java
CREATE TABLE `Users` ( `email` varchar(30) NOT NULL DEFAULT '', `name` varchar(30) NOT NULL DEFAULT '', `password` varchar(30) NOT NULL DEFAULT '', `address` varchar(50) NOT NULL DEFAULT '', PRIMARY KEY (`email`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
数据库连接实用程序类
我们有一个简单的实用程序类用于数据库连接，它没有经过优化，仅出于示例目的。
JDBCUtil.java
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>jQueryUITabsLoginExample</groupId>
<artifactId>jQueryUITabsLoginExample</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.0.5</version>
</dependency>
</dependencies>
<build>
<sourceDirectory>src</sourceDirectory>
<plugins>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<warSourceDirectory>WebContent</warSourceDirectory>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.7</source>
<target>1.7</target>
</configuration>
</plugin>
</plugins>
<finalName>${project.artifactId}</finalName>
</build>
</project>
DAO实施类
UseDAO接口定义了针对用户表操作公开的服务合同。
UserDAO.java
package com.theitroad.servlet.model;
public class User {
private String name;
private String email;
private String password;
private String address;
public User(){}
public User(String name, String email, String password, String address){
this.name=name;
this.email=email;
this.password=password;
this.address=address;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
下面是实现类，我们也可以使用Hibernate或者任何其他ORM工具进行实现。
UserDAOImpl.java
package com.theitroad.servlet.jdbc;
import java.sql.Connection;
import java.sql.DriverManager;
public class JDBCUtil {
private static Connection connection = null;
public static Connection getConnection() {
if (connection != null)
return connection;
else {
//database URL
String dbUrl = "jdbc:mysql://localhost/TestDB";
try
{
Class.forName("com.mysql.jdbc.Driver");
//set the url, username and password for the database
connection = DriverManager.getConnection(dbUrl, "hyman", "hyman123");
} catch (Exception e) {
e.printStackTrace();
}
return connection;
}
}
}
Servlet类和配置
我们有两个用于注册和登录过程的servlet控制器类。
存在一些简单的验证以避免常见错误。
RegistrationController.java
package com.theitroad.servlet.dao;
import com.theitroad.servlet.model.User;
public interface UserDAO {
public int createUser(User user);
public User loginUser(User user);
}
LoginController.java
package com.theitroad.servlet.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import com.theitroad.servlet.jdbc.JDBCUtil;
import com.theitroad.servlet.model.User;
public class UserDAOImpl implements UserDAO {
private Connection dbConnection;
private PreparedStatement pStmt;
private String SQL_SELECT = "SELECT name, address FROM users WHERE email = ? AND password = ?";
private String SQL_INSERT = "INSERT INTO users (name,email,password,address) VALUES (?,?,?,?)";
public UserDAOImpl() {
dbConnection = JDBCUtil.getConnection();
}
public User loginUser(User user) {
try {
pStmt = dbConnection.prepareStatement(SQL_SELECT);
pStmt.setString(1, user.getEmail());
pStmt.setString(2, user.getPassword());
ResultSet rs = pStmt.executeQuery();
while (rs.next()) {
user.setName(rs.getString("name"));
user.setAddress(rs.getString("address"));
}
} catch (Exception e) {
System.err.println(e.getMessage());
}
return user;
}
public int createUser(User user) {
int result = 0;
try {
pStmt = dbConnection.prepareStatement(SQL_INSERT);
pStmt.setString(1, user.getName());
pStmt.setString(2, user.getEmail());
pStmt.setString(3, user.getPassword());
pStmt.setString(4, user.getAddress());
result = pStmt.executeUpdate();
} catch (Exception e) {
System.err.println(e.getMessage());
}
return result;
}
}
现在该在web.xml文件中配置这些servlet了，下面是最终的web.xml文件。
web.xml
package com.theitroad.servlet.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.theitroad.servlet.dao.UserDAO;
import com.theitroad.servlet.dao.UserDAOImpl;
import com.theitroad.servlet.model.User;
public class RegistrationController extends HttpServlet {
private static final long serialVersionUID = -4006561145676424435L;
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
String email = request.getParameter("email");
String password = request.getParameter("password");
String address = request.getParameter("address");
if ((name == null || "".equals(name))
|| (email == null || "".equals(email))
|| (password == null || "".equals(password))
|| (address == null || "".equals(address))) {
String error = "Mandatory Parameters Missing";
request.getSession().setAttribute("errorReg", error);
response.sendRedirect("index.jsp#register");
} else {
User user = new User(name, email, password, address);
UserDAO userDAO = new UserDAOImpl();
int result = userDAO.createUser(user);
if (result == 1) {
request.getSession().removeAttribute("errorReg");
response.sendRedirect("success.jsp");
}else{
request.getSession().setAttribute("errorReg", "Internal Server Error, Please try again later.");
response.sendRedirect("index.jsp#register");
}
}
}
}
项目CSS文件
以下是我们用于查看页面的自定义CSS文件。
style.css
package com.theitroad.servlet.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.theitroad.servlet.dao.UserDAO;
import com.theitroad.servlet.dao.UserDAOImpl;
import com.theitroad.servlet.model.User;
public class LoginController extends HttpServlet {
private static final long serialVersionUID = -4602272917509602701L;
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String error;
String email = request.getParameter("email");
String password = request.getParameter("password");
User user = new User();
user.setEmail(email); user.setPassword(password);
HttpSession session = request.getSession();
UserDAO userDAO = new UserDAOImpl();
User userDB = userDAO.loginUser(user);
if (userDB.getName() == null) {
error = "Invalid Email or password";
session.setAttribute("error", error);
response.sendRedirect("index.jsp");
} else {
session.setAttribute("user", userDB.getName());
session.removeAttribute("error");
response.sendRedirect("welcome.jsp");
}
}
@Override
protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
if ("logout".equalsIgnoreCase(request.getParameter("param"))) {
HttpSession session = request.getSession();
if(session != null){
session.invalidate();
}
response.sendRedirect("index.jsp");
}
}
}
jQuery UI选项卡查看页面
以下是主页JSP代码，我们其中使用jQuery UI标签。
index.jsp
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xmlns="https://java.sun.com/xml/ns/javaee" xmlns:web="https://java.sun.com/xml/ns/javaee" xsi:schemaLocation="https://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"> <display-name>jQueryTabsWebAppExample</display-name> <servlet> <servlet-name>LoginController</servlet-name> <servlet-class>com.theitroad.servlet.controller.LoginController </servlet-class> </servlet> <servlet> <servlet-name>RegistrationController</servlet-name> <servlet-class>com.theitroad.servlet.controller.RegistrationController </servlet-class> </servlet> <servlet-mapping> <servlet-name>LoginController</servlet-name> <url-pattern>/LoginController</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>RegistrationController</servlet-name> <url-pattern>/RegistrationController</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
用于创建标签的jQuery JS代码是：
body {
background-color: #e7e7e7;
font-family: Helvetica;
font-size: 14px;
color: #666;
margin: 0px;
padding: 0px;
}
.wrapper {
width: 900px;
height: 500px;
margin: 0 auto;
background: white;
margin: 0 auto;
}
.container {
min-height: 400px;
border-top: 1px solid gray;
padding: 50px;
}
上面的代码会将选项卡div转换为不同的选项卡。
对于不同的标签，此div应该具有无序的元素列表，对我们来说
<!DOCTYPE html>
<html>
<head>
<title>Login and Registration Page</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div id="tabs">
<ul>
<li><a href="#login">Login</a></li>
<li><a href="#register">Register</a></li>
</ul>
<div id="login">
<%
if((String)session.getAttribute("error") != null){ %>
<h4>Invalid Email or Password. Please try again.</h4>
<%} %>
<form method="post" action="LoginController">
<label for="email">Email:</label> <br <input type="text"
name="email" id="email" <br <label for="password">Password:</label>
<br <input type="password" name="password" id="password" <br
<br <input type="submit" value="Login">
</form>
</div>
<div id="register">
<%
if((String)session.getAttribute("errorReg") != null){ %>
<h4><%=session.getAttribute("errorReg") %></h4>
<%} %>
<form method="post" action="RegistrationController">
<label for="name">Name:</label><br <input type="text"
name="name" id="name" <br <label for="email">Email:</label><br
<input type="text" name="email" id="email" <br <label
for="password">Password:</label><br <input type="password"
name="password" id="password" <br <label for="address">Address:</label><br
<input type="text" name="address" id="address" <br <br <input
type="submit" value="Register">
</form>
</div>
</div>
</div>
</div>
</body>
</html>
请注意，每个列表项都包含锚定URL，它们应该是将构成选项卡视图的其他div元素。
这就是为什么我们还有两个div的原因-登录和注册。
就是这样，JSP页面的其他部分是简单HTML和JSP scriptlet。
我知道我们不应该使用scriptlet，但这只是一个例子，我也不想其中添加其他技术，如果您到目前为止还没有猜到，我是在谈论JSTL。
我们有几个简单的JSP页面，用于注册成功和登录成功。
success.jsp
$(function() {
$( "#tabs" ).tabs();
});
welcome.jsp
<ul> <li><a href="#login">Login</a></li> <li><a href="#register">Register</a></li> </ul>
jQuery UI Tabs项目测试
我们的Web应用程序已准备就绪，只需构建和部署项目即可。
以下是不同页面的一些图像。
jQuery UI垂直选项卡示例
默认情况下，jQuery UI创建水平选项卡。
但是我们也可以添加一些另外的jQuery代码来创建垂直标签。
下面是带有垂直选项卡的JSP页面的另一种形式。
index-vertical.jsp
<!DOCTYPE html> <html> <head> <title>Registration Success Page</title> <link rel="stylesheet" href="css/jquery-ui.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <div class="container"> <h4> You have been successfully registered. [ <a href="index.jsp">Back to login page</a> ] </h4> </div> </div> </body> </html>
