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文件代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>猜数游戏首页面</title>
<script>
var user = document.getElementById("d1");
</script>
<style type="text/css">
#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;
}
</style>
</head>
<body>
<%
int number = (int) (Math.random() * 100) + 1;
session.setAttribute("count", new Integer(0));
session.setAttribute("num", new Integer(number));
%>
<div id="div1" style="width: 1300px; height: 700px;">
<div id="div2" style="width: 300px; height: 400px;">
<div class="div" style="width: 300px; top: 0;">
<h1>猜数字游戏</h1>
</div>
<div class="div" style="width: 300px; top: 150px;">
<div style="width: 40px;"></div>
<div style="width: 220px;">
<a style="color: grey; font-color: blue;">
游戏规则：系统随机生成1到100之间的一个数，请你猜这个数。
如果猜中系统将会提示你猜测成功，如果不幸猜错，系统将会提示你猜大或猜小， 直到你猜出正确答案为止，祝你玩得开心！</a>
</div>
<div style="width: 40px;"></div>
</div>
<div class="div" style="width: 300px; top: 420px;">
<h4>请输入你的数字：</h4>
</div>
<form name="inputGuess" method="post" action="GuessServlet">
<div id="input">
<input type="text" id="d1" name="inputGuess" required />
</div>
<div id="button">
<input class="button" type="submit" value="进行游戏" />
</div>
</form>
</div>
</div>
</body>
</html>
代码详解
利用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代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>猜数游戏重试界面</title>
<style type="text/css">
#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;
}
</style>
<script>
var user = document.getElementById("di");
</script>
</head>
<body>
<div id="div1" style="width: 1300px; height: 700px;">
<div id="div2" style="width: 300px; height: 400px;">
<div class="div" style="width: 300px; top: 0;">
<h1>猜错啦~</h1>
</div>
<div class="div" style="width: 300px; top: 250px;">
<div style="width: 40px;"></div>
<div style="width: 220px;">
<a style="color: grey; font-color: blue;"> 您输入的数字${num1}太大了！<br />
您已输入${num3}次~ <br /> 请重新输入~
</a>
</div>
<div style="width: 40px;"></div>
</div>
<div class="div" style="width: 300px; top: 420px;">
<h4>
请输入你的数字：
</h4>
</div>
<form action="GuessServlet" method="post" name="large">
<div id="input">
<input type="text" id="d1" name="inputGuess" required />
</div>
<div id="button">
<input class="button" type="submit" value="再次尝试" />
</div>
</form>
</div>
</div>
</body>
</html>
small.jsp代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>猜数游戏重试界面</title>
<style type="text/css">
#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;
}
</style>
<script>
var user = document.getElementById("di");
</script>
</head>
<body>
<div id="div1" style="width: 1300px; height: 700px;">
<div id="div2" style="width: 300px; height: 400px;">
<div class="div" style="width: 300px; top: 0;">
<h1>猜错啦~</h1>
</div>
<div class="div" style="width: 300px; top: 250px;">
<div style="width: 40px;"></div>
<div style="width: 220px;">
<a style="color: grey; font-color: blue;"> 您输入的数字${num1}太小了！<br />
您已输入${num3}次~ <br /> 请重新输入~
</a>
</div>
<div style="width: 40px;"></div>
</div>
<div class="div" style="width: 300px; top: 420px;">
<h4>
请输入你的数字：
</h4>
</div>
<form action="GuessServlet" method="post" name="large">
<div id="input">
<input type="text" id="d1" name="inputGuess" required />
</div>
<div id="button">
<input class="button" type="submit" value="再次尝试" />
</div>
</form>
</div>
</div>
</body>
</html>
代码详解：
form表单提交再次输入的数据至GuessServlet
为防止提交空数据，添加input 的
document.getElementById方法，提示“这是必填字段”
用EL表达式获取session域的数据，前提是添加依赖
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
-
在WebContent中新建jsp文件并命名为success.jsp
success.jsp代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>猜数游戏成功界面</title>
</head>
<style type="text/css">
#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;
}
</style>
</head>
<body>
<div id="div1" style="width: 1300px; height: 700px;">
<div id="div2" style="width: 300px; height: 400px;">
<div class="div" style="width: 300px; top: 0;">
<h1>恭喜您！</h1>
</div>
<div class="div" style="width: 300px; top: 250px;">
<div style="width: 40px;"></div>
<div style="width: 220px;">
<a style="color: grey; font-color: blue;"> 您猜测完全正确！<br />
您用了${num3}次猜测正确~<br /> 真棒呢~
</div>
<div style="width: 40px;"></div>
</div>
<div id="button">
<a href="inputGuess.jsp">
<input class="button" type="submit" value="再玩一次" />
</a>
</div>
</div>
</div>
</body>
</html>
代码详解:
用href定向按钮“再玩一次”至首页
用EL表达式获取session域的数据，前提是添加依赖
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
项目总结
改进方式
用css文件将样式归总，减少代码冗余量
项目难点
-
数据没有存入session域中，导致跨页面无法请求
解决方案：在servlet文件中通过
request.getSession(false)方法获取当前的session对象，通过session.setAttribute方法将所需要数据存入session域中。 -
用户输入空值时报500错误
解决方案：用
document.getElementById方法检验input输入框中的数据是否合格并加以提示，在input标签中添加required属性。 -
用EL表达式时需要提前添加依赖
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
