web系统之猜数游戏——项目总结
基于数据查找的二分查找法开发的小游戏。
开发环境JDK-Version:1.8
Tomcat-Version:8.0
开发工具Eclipse Java EE IDE for Web Developers.
Version: Mars.1 Release (4.5.1)
开发需求系统自动生成一个[1-100]的随机数。
从键盘获取用户输入的数字。
比较生成的随机数与用户输入的数字的大小。
分情况进行页面跳转：
随机数 = 用户输入数 --> 成功界面 随机数 > 用户输入数 --> 重试界面1 随机数 重试界面2成功界面 ：输出游戏成功提示，设置再玩一次的按钮并跳转至首页。
重试界面1：输出猜数结果偏小提示，设置输入框及再试一次的按钮。
重试界面2：输出猜数结果偏大提示，设置输入框及再试一次的按钮。
以web程序为开发目标。
项目开发 开发步骤创建工程：new project
导包：jstl-1.2.jar 和 standard-1.1.2.jar
在WebContent里面新建jsp文件并命名为inputGuess.jsp
inputGuess.jsp文件代码如下：
猜数游戏首页面
var user = document.getElementById("d1");
#div1 {
background-image: linear-gradient(#55aaff, #45ddff);
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: left top;
position: relative;
display: flex;
justify-content: center;
}
#div2 {
background-image: linear-gradient(#e1e1e1, #c3c3c3);
width: 100%;
height: 100%;
border-radius: 10px 40px 10px 40px;
box-shadow: 5px 5px 5px #868686;
position: absolute;
top: 10%;
left: 30%;
margin: auto;
height: 100%;
justify-content: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 40px;
}
.button:hover {
background-color: #45DDFF;
}
#input {
position: absolute;
top: 270px;
width: 300px;
display: flex;
justify-content: center;
}
#button {
position: absolute;
top: 300px;
width: 300px;
display: flex;
justify-content: center;
}
.div {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 100%;
display: flex;
justify-content: center;
text-align: center;
}
代码详解
利用jstl驱动包在jsp页面中用java语言生成[0-100]的随机数
用session.setAttribute方法将生成的随机数num和计数器count存入session域中
创建名为inputGuess的表单，用post传输方式发送到GuessServlet的java程序中
表单内容为用户输入name为inputGuess的数据，通过submit提交数据至GuessServlet
为防止提交空数据，添加input 的 document.getElementById方法，提示“这是必填字段”
在src里面新建servlet文件并命名为GuessServlet.java
GuessServlet.java代码如下：
package com.jy.HelloWorld;
import java.io.IOException;
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.http.HttpSession;
import org.apache.catalina.Session;
/**
* Servlet implementation class GuessServlet
*/
@WebServlet("/GuessServlet")
public class GuessServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public GuessServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @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);
HttpSession session = request.getSession(false);
String str = request.getParameter("inputGuess");
int num1 = Integer.parseInt(str);//获取用户输入的数字
session.setAttribute("num1", num1);
String num = (request.getSession()).getAttribute("num").toString();
int num2 = Integer.parseInt(num);//获取系统随机生成的数字
session.setAttribute("num2", num2);
String count = (request.getSession()).getAttribute("count").toString();
int num3 = Integer.parseInt(count);//获取输入次数
num3 ++;
session.setAttribute("num3", num3);
request.getSession().setAttribute("count",new Integer(num3));
if(num1 == num2){
response.sendRedirect("success.jsp");
}else if(num1 > num2){
response.sendRedirect("large.jsp");
}else if(num1 < num2){
response.sendRedirect("small.jsp");
}
}
}
代码详解：
用request.getSession(false) 获取当前的session对象
用request.getParameter方法获取用户输入的表单信息，声明int类型变量num1，赋值
用request.getSession()方法获取当前域对象，用.getAttribute("num") 方法获取当前域中名为num的值，用.toString()方法将获取到的num值转为字符串格式，声明int类型变量num2，赋值
同上原理获取计数器count，声明int类型变量num3，赋值
用request.getSession(false)获取到的session对象，使用session.setAttribute方法将num1、num2、num3存入session域中
比较num1和num2的值，如果相等则重定向至success.jsp，如果num1>num2则重定向至large.jsp，如果num1<num2则重定向至small.jsp
5.在WebContent中新建jsp文件并命名为large.jsp和small.jsp
large.jsp代码如下：
猜数游戏重试界面
#div1 {
background-image: linear-gradient(#55aaff, #45ddff);
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: left top;
position: relative;
display: flex;
justify-content: center;
}
#div2 {
background-image: linear-gradient(#e1e1e1, #c3c3c3);
width: 100%;
height: 100%;
border-radius: 10px 40px 10px 40px;
box-shadow: 5px 5px 5px #868686;
position: absolute;
top: 10%;
left: 30%;
margin: auto;
height: 100%;
justify-content: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 40px;
}
.button:hover {
background-color: #45DDFF;
}
#input {
position: absolute;
top: 270px;
width: 300px;
display: flex;
justify-content: center;
}
#button {
position: absolute;
top: 300px;
width: 300px;
display: flex;
justify-content: center;
}
.div {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 100%;
display: flex;
justify-content: center;
text-align: center;
}
var user = document.getElementById("di");
small.jsp代码如下：
猜数游戏重试界面
#div1 {
background-image: linear-gradient(#55aaff, #45ddff);
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: left top;
position: relative;
display: flex;
justify-content: center;
}
#div2 {
background-image: linear-gradient(#e1e1e1, #c3c3c3);
width: 100%;
height: 100%;
border-radius: 10px 40px 10px 40px;
box-shadow: 5px 5px 5px #868686;
position: absolute;
top: 10%;
left: 30%;
margin: auto;
height: 100%;
justify-content: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 40px;
}
.button:hover {
background-color: #45DDFF;
}
#input {
position: absolute;
top: 270px;
width: 300px;
display: flex;
justify-content: center;
}
#button {
position: absolute;
top: 300px;
width: 300px;
display: flex;
justify-content: center;
}
.div {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 100%;
display: flex;
justify-content: center;
text-align: center;
}
var user = document.getElementById("di");
代码详解：
form表单提交再次输入的数据至GuessServlet
为防止提交空数据，添加input 的 document.getElementById方法，提示“这是必填字段”
用EL表达式获取session域的数据，前提是添加依赖
在WebContent中新建jsp文件并命名为success.jsp
success.jsp代码如下：
猜数游戏成功界面
#div1 {
background-image: linear-gradient(#55aaff, #45ddff);
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: left top;
position: relative;
display: flex;
justify-content: center;
}
#div2 {
background-image: linear-gradient(#e1e1e1, #c3c3c3);
width: 100%;
height: 100%;
border-radius: 10px 40px 10px 40px;
box-shadow: 5px 5px 5px #868686;
position: absolute;
top: 10%;
left: 30%;
margin: auto;
height: 100%;
justify-content: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 40px;
}
.button:hover {
background-color: #45DDFF;
}
#input {
position: absolute;
top: 270px;
width: 300px;
display: flex;
justify-content: center;
}
#button {
position: absolute;
top: 300px;
width: 300px;
display: flex;
justify-content: center;
}
.div {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 100%;
display: flex;
justify-content: center;
text-align: center;
}
代码详解:
用href定向按钮“再玩一次”至首页
用EL表达式获取session域的数据，前提是添加依赖
用css文件将样式归总，减少代码冗余量
项目难点数据没有存入session域中，导致跨页面无法请求
解决方案：在servlet文件中通过request.getSession(false) 方法获取当前的session对象，通过session.setAttribute方法将所需要数据存入session域中。
用户输入空值时报500错误
解决方案：用document.getElementById方法检验input输入框中的数据是否合格并加以提示，在input标签中添加required属性。
用EL表达式时需要提前添加依赖
作者：希有xi
