在Ecplise中进行Web设计使用Servlet-JSP建立连接登录答题源码分享

目录

1 创建 Dynamic Web project项目

2 创建Servers项目

3.Java Resources中建立Servelt项目

1)LoginServlet.java(代码)

2)DoWelcome.java(代码) 

3)ExamServlet.java(代码)

4)login​.jsp(代码)

5)exam.html(代码)

6)error.html(代码)

7)web.xml(代码)

4 运行结果

5 小结

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">密&nbsp;&nbsp;码:</td>
<td><input type="password" name="password" ></td>
            </tr>
            <tr>
               <td colspan="2" align="center"><input type="submit" value="登录">
&nbsp; <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应用程序的设计,尤其是构建一个登录系统和答题模块,可以分为以下几个主要步骤:

  1. 环境配置

    • 首先确保你的Eclipse中已经安装了Java EE开发插件,比如WTP(Web Tools Platform),它可以方便地创建和管理Web项目。
    • 配置Tomcat或其他适合的Servlet容器,将其与Eclipse关联,以便在Eclipse中启动和调试Web应用。
  2. 创建Web项目

    • 在Eclipse中新建一个Dynamic Web Project,它会自动生成Web项目的标准目录结构,包括WEB-INFweb.xml等文件。
  3. 编写Servlet

    • 编写处理登录请求的Servlet,例如LoginServlet.java。在Servlet中,通过HttpServletRequest对象获取用户输入的用户名和密码,然后进行数据库查询或者其他形式的身份验证。
    • 如果验证成功,可以将登录状态信息保存到session中,并重定向到答题页面;如果验证失败,则显示错误提示信息。
  • 12
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天林望海

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值