目录
2024-5-12天林望海再次更新,微信公众号同步链接:(编程设计)Ecplise中进行Web设计使用Servlet-JSP建立连接登录答题源码分享
本文主要讲解如何使用Servlet-JSP-实现简单的登录功能,并能答题测试web设计。我们在进行Servlet和JSP实现简单登录功能的过程中,首先通过Eclipse创建了一个Dynamic Web project项目,开始为我们的Web应用提供了良好的项目管理。接下来,然后在Java Resources中建立Servelt项目,为后续的配置做好了准备。然后,我们配置了Tomcat,使得我们的Servelt项目能够在Tomcat容器中运行。
1 创建 Dynamic Web project项目
首先,我们需要通过Eclipse创建了一个 Dynamic Web project项目。
1)打开Eclipse,新建一个 Dynamic Web project 项目,如图;
这样就建立了一个web项目,然后开始建立 Tomca连接,建立Servers,
2 创建Servers项目
1)建立Servers与 Tomcat配置,点击Windows->Preferences->Server->Runtime Environments,如图;
2) Tomcat配置,点击Add,选择Apache Tomcat v7.0(根据自己的版本去选),如图;
3)点击Windows->Show View->Sever,点击Open,start启动Servers如图;
3.Java Resources中建立Servelt项目
1)建立Servelt,点击Src->new->Servlet,java package:login,Class:LoginServlet.java,如图;
1)LoginServlet.java(代码)
package login;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class LoginServlet
*/
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private static String name=null;
/**
* @see HttpServlet#HttpServlet()
*/
public LoginServlet() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置文档类型 字符集
response.setContentType("text/html;charset=utf-8");
//获取输出流
PrintWriter out=response.getWriter();
request.setCharacterEncoding("utf-8");
//获得客户端参数
String uname=request.getParameter("username");
name=uname;
String upwd=request.getParameter("password");
//response.sendRedirect("DoWelcome");
if (uname.equals("天林")&&upwd.equals("123456")){
response.sendRedirect("DoWelcome");
} else {
response.sendRedirect("login.jsp");
out.println("信息登录失败<br/>");
}
out.close();
}
public String Getname() {
return name;
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
2)建立DoWelcome.java,点击Src->new->Servlet,java package:login,
Class:DoWelcome.java,如图;
2)DoWelcome.java(代码)
package login;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class DoWelcome
*/
@WebServlet("/DoWelcome")
public class DoWelcome extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DoWelcome() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String uname = d.Getname();
out.println("<html>");
out.println("<head>");
out.println("<meta charset='UTF-8'>");
out.println("<style>");
out.println("body {");
out.println(" display: flex;");
out.println(" justify-content: center;");
out.println(" align-items: center;");
out.println(" height: 100vh;");
out.println(" font-size: 20px;");
out.println(" text-align: center;");
out.println("}");
out.println(".welcome-message {");
out.println(" margin-bottom: 20px;");
out.println("}");
out.println("</style>");
out.println("<script>");
out.println("function jumpToExam() {");
out.println(" window.location.href = 'exam.html';");
out.println("}");
out.println("</script>");
out.println("</head>");
out.println("<body>");
out.println("<div class='welcome-message'>");
out.println("Welcome " + uname + "<br/>");
out.println("欢迎进入测试<br/>");
out.println("<button onclick='jumpToExam()' style='font-size: inherit;'>开始测试</button>"); // 按钮触发JavaScript函数跳转,并继承字体大小
out.println("</div>");
out.println("</body>");
out.println("</html>");
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
3)建立ExamServelt,点击Src->new->Servlet,java package:com.exam,
Class:ExamServlet.java,如图;
3)ExamServlet.java(代码)
package com.exam;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.*;
/**
* Servlet implementation class EclipseServlet
*/
@WebServlet("/ExamServlet")
public class ExamServlet extends HttpServlet{
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ExamServlet() {
super();
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException,ServletException {
response.setCharacterEncoding("gb2312");
PrintWriter out = response.getWriter();
String quest1 = request.getParameter("quest1");
String[] quest2 = request.getParameterValues("quest2");
String[] quest3 = request.getParameterValues("quest3");
String[] quest4 = request.getParameterValues("quest4");
String quest5 = request.getParameter("quest5").trim();
int score = 0;
if(quest1!=null && quest1.equals("1")){
score = score+20;
out.println("第1题回答正确,");
}else {out.println("第1题回答错误,");}
if(quest2!=null&& quest2[0].equals("4")){
score = score+20;
out.println("第2题回答正确,");
}else {out.println("第2题回答错误,");}
if(quest3!=null&&quest3.length==2&&quest3[0].equals("2")&& quest3[1].equals("4")){
score = score+20;
out.println("第3题回答正确,");
}else {out.println("第3题回答错误,");}
if(quest4!=null&&quest4.length==2&&quest4[0].equals("1")&& quest4[1].equals("3")){
score = score+20;
out.println("第4题回答正确,");
}else {out.println("第4题回答错误,");}
if(quest5!=null&& (quest5.equals("HttpServlet")||quest5.equals("javax.servlet.http.HttpServlet"))){
score = score+20;
out.println("第5题回答正确,");
}else {out.println("第5题回答错误,");}
out.println("<!DOCTYPE html>");
out.println("<html lang='zh'>");
out.println("<head>");
out.println("<meta charset='UTF-8'>");
out.println("<title>考试结果</title>");
out.println("<style>");
out.println("body {");
out.println(" display: flex;");
out.println(" justify-content: center;");
out.println(" align-items: center;");
out.println(" flex-direction: column;");
out.println(" height: 100vh;");
out.println(" font-size: 18px;");
out.println(" text-align: center;");
out.println("}");
out.println(".answer-block {");
out.println(" margin-bottom: 10px;");
out.println("}");
out.println("</style>");
out.println("</head>");
out.println("<body>");
out.println("<h2>本次你的成绩是:" + score + "分</h2>");
// 假设 correctAnswers 已经按照统一格式调整,且辅助方法已正确实现
out.println("第1题正确答案:A <br>");
out.println("你的选择:" + (quest1 != null ? quest1 : "未选择") + "<br>");
out.println("</div>");
out.println("<div class='answer-block'>");
out.println("第2题正确答案:D<br>");
out.println("你的选择:" + (quest2 != null ? arrayToString(quest2) : "未选择") + "<br>");
out.println("</div>");
out.println("<div class='answer-block'>");
out.println("第3题正确答案:B,D<br>");
out.println("你的选择:" + (quest3 != null ? arrayToString(quest3) : "未选择") + "<br>");
out.println("</div>");
out.println("<div class='answer-block'>");
out.println("第4题正确答案:A,C<br>");
out.println("你的选择:" + (quest4 != null ? arrayToString(quest4) : "未选择") + "<br>");
out.println("</div>");
out.println("<div class='answer-block'>");
out.println("第5题正确答案:HttpServlet或javax.servlet.http.HttpServlet<br>");
out.println("</div>");
}
public static String arrayToString(String[] arr) {
return arr != null ? String.join(",", arr) : "未选择";
}
// 辅助方法,用于判断多选题答案是否正确
public static boolean checkArrayAnswer(String[] userAnswers, String[] correctAnswers) {
if (userAnswers == null || correctAnswers == null) return false;
return Arrays.equals(Arrays.stream(userAnswers).sorted().toArray(), Arrays.stream(correctAnswers).sorted().toArray());
}
// 辅助方法,用于单选题答案判断
public static boolean checkAnswer(String userAnswer, String[] correctAnswers) {
return userAnswer != null && userAnswer.equals(correctAnswers);
}
}
4)login.jsp(代码)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正在登录</title>
</head>
<body>
<form action="./login" method="post">
<table width="298" border="0" align="center"
cellpading="2" cellspacing="1">
<tr>
<td align="right">用户名:</td>
<td align="left"><input type="text" name="username" ></td>
</tr>
<tr>
<td align="right">密 码:</td>
<td><input type="password" name="password" ></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="登录">
<input type="reset" value="取消"></td>
</tr>
</form>
</body>
</html>
5)exam.html(代码)
<!DOCTYPE html>
<html>
<head>
<title> Exam</title>
<style>
/* 添加样式使按钮水平居中 */
.centered-button-container {
text-align: center;
}
</style>
<style type="text/css">
h3, p {text-indent:2em;font-size:85%}
</style>
</head>
<body>
<h3>请回答下面的问题:</h3>
<form action="com.exam" method="post">
<p>1. 在北京召开的奥运会是第29届奥运会。
<input type="radio" name="quest1" value="1"> A.正确
<input type="radio" name="quest1" value="2"> B.错误
</p>
<p>2. Windows操作系统是哪个公司的产品?
<input type="radio" name="quest2" value="1"> A.Sun公司
<input type="radio" name="quest2" value="2"> B.IBM公司
<input type="radio" name="quest2" value="3"> C.Intel公司
<input type="radio" name="quest2" value="4"> D.Microsoft公司
</p>
<p>3.下面的程序设计语言,哪些是面向对象的?
<input type="checkbox" name="quest3" value="1"> A.Visual Basic
<input type="checkbox" name="quest3" value="2"> BJava语言
<input type="checkbox" name="quest3" value="3"> C.C语言
<input type="checkbox" name="quest3" value="4"> D.C++语言
</p>
<p>4.微机的中央处理器至少应包括( )部分?
<input type="checkbox" name="quest4" value="1"> A.运算器
<input type="checkbox" name="quest4" value="2"> B.RAM
<input type="checkbox" name="quest4" value="3"> C.控制器
<input type="checkbox" name="quest4" value="4"> D.ROMB
</p>
<p>5.编写Servlet程序应继承什么类?
<input type="text" name="quest5" size="30"></p>
<div class="centered-button-container">
<p><b>交卷请点击:</b>
<input type="submit" value="交卷">
<input type="reset" value="重答">
</p>
</div>
</form>
</body>
</html>
6)error.html(代码)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录失败</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
}
h1 {
color: #dc3545; /* Bootstrap的危险颜色 */
}
a {
color: #007bff; /* Bootstrap的主色 */
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>登录失败</h1>
<p>对不起,您输入的用户名或密码不正确。请<a href="login.jsp">点击这里</a>重新登录。</p>
</body>
</html>
7)web.xml(代码)
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>Exam</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>ExamServlet</servlet-name>
<servlet-class>com.exam.ExamServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ExamServlet</servlet-name>
<url-pattern>/com.exam</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>login.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
</web-app>
4 运行结果
5 小结
在Eclipse中使用Servlet和JSP进行Web应用程序的设计,尤其是构建一个登录系统和答题模块,可以分为以下几个主要步骤:
-
环境配置:
- 首先确保你的Eclipse中已经安装了Java EE开发插件,比如WTP(Web Tools Platform),它可以方便地创建和管理Web项目。
- 配置Tomcat或其他适合的Servlet容器,将其与Eclipse关联,以便在Eclipse中启动和调试Web应用。
-
创建Web项目:
- 在Eclipse中新建一个Dynamic Web Project,它会自动生成Web项目的标准目录结构,包括
WEB-INF
和web.xml
等文件。
- 在Eclipse中新建一个Dynamic Web Project,它会自动生成Web项目的标准目录结构,包括
-
编写Servlet:
- 编写处理登录请求的Servlet,例如
LoginServlet.java
。在Servlet中,通过HttpServletRequest
对象获取用户输入的用户名和密码,然后进行数据库查询或者其他形式的身份验证。 - 如果验证成功,可以将登录状态信息保存到session中,并重定向到答题页面;如果验证失败,则显示错误提示信息。
- 编写处理登录请求的Servlet,例如