一、开发工具及实现方法
选择Myeclipse2017进行开发，配置：jdk1.8、tomcat8.5。
实现方法：前端：html+css+js；后台：java。
基于JavaWeb开发，采用B/S结构。
二、项目进展
2.1前端
1、建立了响应式登录界面，适配chrome浏览器及手机界面。
2、游戏界面适配框架，使系统风格保持一致。
2.2后端
1、连接数据库，实现邮箱注册、找回密码功能，对无效输入进行检错并提示。
2.3游戏内容
1、添加选项：修改游戏规则，每人每轮可以输入两个数字。
2.4后续添加
1、添加管理员用户的用户管理模块
2、实现联机功能
3、实现更多可视化图表
三、前端登录页面
下面展示 登录界面
<!-- 登录 below -->
<form class="login-form" action="../../Login" method="post">
<input type="hidden" id="open_id" name="open_id" value="<%=openId%>" />
<h3 class="form-title">登录</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span class="help-block"></span>
<span>请输入邮箱和密码登陆</span>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9"> 用户邮箱：</label>
<input class="form-control form-control-solid placeholder-no-fix"
type="text" autocomplete="off" placeholder="请输入邮箱" id="user_id"
name="user_id" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9"> 登陆密码：</label>
<input class="form-control form-control-solid placeholder-no-fix"
type="password" autocomplete="off" placeholder="请输入密码"
id="user_password" name="user_password" />
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase" id="login_btn">登陆</button>
<label class="rememberme check"> <input type="checkbox"
id="remember" name="remember" value="1" /> 记住我
</label> <a href="javascript:;" id="forget-password" class="forget-password">忘记密码？</a>
</div>
<div class="login-options">
<h4 style="color:red;">本系统仅支持Chrome浏览器，请用Chrome浏览器访问平台。</h4>
</div>
<div class="create-account-left" style="width:125%;">
<p>
<a href="javascript:;" id="register-btn" class="uppercase">注册新账户</a>
</p>
</div>
</form>
<!-- 登录 above -->
下面展示 找回密码
<!-- 忘记密码 below -->
<form class="forget-form">
<h3>忘记密码？</h3>
<p>请输入您的邮箱</p>
<div class="form-group">
<input class="form-control placeholder-no-fix" type="text"
autocomplete="off" placeholder="请输入邮箱" id="forget_email"
name="forget_email" />
</div>
<div class="form-group">
<button type="button" id="forget-verify-btn"
class="btn btn-success uppercase pull-right">发送验证码</button>
<br>
<br> <label class="control-label visible-ie8 visible-ie9">
验证码 </label> <input class="form-control placeholder-no-fix" type="text"
placeholder="输入验证码" name="forget-verify" id="forget-verify" />
</div>
<span id="forget_code" style="display:none"></span>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9"> 新密码 </label> <input
class="form-control placeholder-no-fix" type="password"
autocomplete="off" id="forget_password" placeholder="新密码"
name="forget_password" id="forget_password" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9"> 再次输入新密码
</label> <input class="form-control placeholder-no-fix" type="password"
autocomplete="off" placeholder="再次输入新密码" id="forget_password_again"
name="forget_password_again" />
</div>
<div class="form-actions">
<button type="button" id="back-btn" class="btn btn-default">返回</button>
<button type="button" id="forget-submit-btn"
class="btn btn-success uppercase pull-right">提交</button>
</div>
</form>
<!-- 忘记密码 above -->
下面展示 注册界面
<!-- 注册 below -->
<form class="register-form" id="register-form">
<h3>注册</h3>
<p class="hint">请输入您的账户信息（必填）</p>
<div class="container" style="font-color:#F00"></div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9"> 用户名 </label> <input
class="form-control placeholder-no-fix" type="text"
placeholder="用户账号，建议中文、字母、数字及下划线" id="register_user_id"
name="register_user_id" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9"> 密码 </label> <input
class="form-control placeholder-no-fix" type="password"
autocomplete="off" id="register_password" placeholder="密码"
name="register_password" id="register_password" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9"> 再次输入密码
</label> <input class="form-control placeholder-no-fix" type="password"
autocomplete="off" placeholder="再次输入密码"
id="register_password_again" name="register_password_again" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9"> 邮箱 </label> <input
class="form-control placeholder-no-fix" type="text"
placeholder="输入邮箱，忘记密码时系统可凭邮箱恢复密码" name="register-email"
id="register-email" />
</div>
<div class="form-group">
<button type="button" id="register-verify-btn"
class="btn btn-success uppercase pull-right">发送验证码</button>
<br>
<br> <label class="control-label visible-ie8 visible-ie9">
验证码 </label> <input class="form-control placeholder-no-fix" type="text"
placeholder="输入验证码" name="register-verify" id="register-verify" />
</div>
<span id="verify_code" style="display:none"></span>
<div class="form-actions">
<button type="button" id="register-back-btn" class="btn btn-default">返回</button>
<button type="button" id="register_submit_btn"
class="btn btn-success uppercase pull-right">提交</button>
</div>
</form>
<!-- 注册 above -->
下面展示用户登录后主界面
四、后端代码
下面展示登录相关代码
public class Login extends HttpServlet{
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("start LoginServlet");
String user_email = req.getParameter("user_id");
String user_pwd = req.getParameter("user_password");
System.out.println("user_email="+user_email+",user_pwd="+user_pwd);
HttpSession hs = req.getSession(true);
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html; charset=utf-8");
resp.setCharacterEncoding("utf-8");
PrintWriter out = resp.getWriter();
try{
Class.forName("com.mysql.jdbc.Driver");
}catch (ClassNotFoundException clssNotFoundException){
clssNotFoundException.printStackTrace();
}
try{
String url="jdbc:mysql://localhost:3306/xm19";
Connection con=DriverManager.getConnection(url,"XM19","123456");
Statement stmt=con.createStatement();
System.out.println("数据库连接成功!");
String sql="select * from users where user_email='"+user_email+"';";
// 检查邮箱是否被注册过
System.out.println("构造出来的sql语句是："+sql);
ResultSet rs = stmt.executeQuery(sql);
if(rs.next()){
sql= "select * from users where user_email='"+user_email+"' and user_pwd='"+user_pwd+"';";
System.out.println("构造的sql语句是:"+sql);
rs=stmt.executeQuery(sql);
if(rs.next()){
String user_role = rs.getString("user_role");
String user_margin = rs.getString("user_margin");
String user_balance = rs.getString("user_margin");
String user_city = rs.getString("user_city");
String user_name = rs.getString("user_name");
hs.setAttribute("user_email", user_email);
hs.setAttribute("user_name", user_name);
hs.setAttribute("user_role", user_role);
hs.setAttribute("user_margin", user_margin);
hs.setAttribute("user_balance", user_balance);
hs.setAttribute("user_city", user_city);
System.out.println("Login.java 里的session="+hs);
req.getRequestDispatcher("home/main/index.html").forward(req, resp);
}else{
out.print("<script>alert(\"密码错误\");window.location=\"home/main/login.jsp\";</script>");
}
}else{
out.print("<script>alert(\"邮箱输入错误\");window.location=\"home/main/login.jsp\";</script>");
}
stmt.close();
con.close();
System.out.println("数据库关闭!");
}catch (SQLException sqlexception){
sqlexception.printStackTrace();
}
}
}
下面展示注册相关代码
public class RegisterServlet extends HttpServlet{
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("start registerServlet");
String user_name = req.getParameter("register_user_id");
String user_email = req.getParameter("register_email");
String user_pwd = req.getParameter("register_password");
System.out.println("user_name="+user_name+",user_email="+user_email+",user_pwd="+user_pwd);
String user_role = "normal";
SimpleDateFormat formatter= new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date date = new Date(System.currentTimeMillis());
String create_time = formatter.format(date).toString();
String message="注册成功";
try{
Class.forName("com.mysql.jdbc.Driver");
}catch (ClassNotFoundException clssNotFoundException){
clssNotFoundException.printStackTrace();
}
try{
String url="jdbc:mysql://localhost:3306/xm09";
Connection con=DriverManager.getConnection(url,"XM09","123456");
String url2 = "jdbc:mysql://localhost:3366/xm09";
if(con == null){
con=DriverManager.getConnection(url2, "XM09","123456");
}
Statement stmt=con.createStatement();
System.out.println("数据库连接成功!");
String sql= "select * from users where user_email='"+user_email+"';";
// 检查邮箱是否被注册过
System.out.println("构造出来的sql语句是："+sql);
ResultSet rs = stmt.executeQuery(sql);
if(rs.next()){
message="邮箱已注册，注册失败";
}else{
sql= "insert into users(user_name,user_email,user_pwd,";
sql = sql+"user_role,user_balance,user_margin,create_time) values('"+user_name;
sql = sql+"','"+user_email+"','"+user_pwd+"','" + user_role;
sql = sql+"',0,0,'"+create_time+"');";
System.out.println("构造的sql语句是:"+sql);
stmt.executeUpdate(sql);
}
stmt.close();
con.close();
System.out.println("数据库关闭!");
}catch (SQLException sqlexception){
sqlexception.printStackTrace();
}
}
下面展示随机验证码代码
public class RandomUtil {
public static void main(String[] args) {
// 控制台打印
System.out.println(RandomUtil.getRandom());
}
// 生成6位数随机验证码
public static String getRandom() {
String[] letters = new String[] {
"0","1","2","3","4","5","6","7","8","9"};
String code ="";
for (int i = 0; i < 6; i++) {
code = code + letters[(int)Math.floor(Math.random()*letters.length)];
}
return code;
}
}
下面展示邮箱发送代码
public class SendEmailServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("邮箱发送功能");
try {
String email = req.getParameter("email");
System.out.println("后台收到的email="+email);
JavaMailUtil.receiveMailAccount = email; // 给用户输入的邮箱发送邮件
// 1、创建参数配置，用于连接邮箱服务器的参数配置
Properties props = new Properties();
// 开启debug调试
props.setProperty("mail.debug", "true");
// 发送服务器需要身份验证
props.setProperty("mail.smtp.auth", "true");
// 设置右键服务器的主机名
props.setProperty("mail.host", JavaMailUtil.emailSMTPHost);
props.setProperty("mail.smtp.port", "465");
props.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");
props.put("mail.smtp.ssl.enable", true);
props.put("mail.smtp.socketFactory.fallback", "false"); // 只处理SSL的连接,对于非SSL的连接不做处理
props.put("mail.smtp.socketFactory.port", "465");
// 发送邮件协议名称
props.setProperty("mail.transport.protocol", "smtp");
// 2、根据配置创建会话对象，用于和邮件服务器交互
Session session = Session.getInstance(props);
// 设置debug，可以查看详细的发送log
session.setDebug(true);
// 3、创建一封邮件
String code = RandomUtil.getRandom();
System.out.println("邮箱验证码：" + code);
String html = htmlText.html(code);
MimeMessage message = JavaMailUtil.creatMimeMessage(session, JavaMailUtil.emailAccount,
JavaMailUtil.receiveMailAccount, html);
// 4、根据session获取邮件传输对象
Transport transport = session.getTransport();
// 5、使用邮箱账号和密码连接邮箱服务器emailAccount必须与message中的发件人邮箱一致，否则报错
transport.connect(JavaMailUtil.emailAccount, JavaMailUtil.emailPassword);
// 6、发送邮件,发送所有收件人地址
transport.sendMessage(message, message.getAllRecipients());
System.out.println("邮件已发送" );
// 7、关闭连接
transport.close();
System.out.println("链接关闭" );
// 写入session
HttpSession hs = req.getSession(true);
hs.setAttribute("code", code);
JSONObject jsonObj=new JSONObject();
jsonObj.put("code", code);
jsonObj.put("result_msg","ok"); //如果发生错误就设置成"error"等
jsonObj.put("result_code",0); //返回0表示正常，不等于0就表示有错误产生，错误代码
System.out.println("最后构造得到的json是："+jsonObj.toString());
resp.setContentType("text/html; charset=UTF-8");
try {
resp.getWriter().print(jsonObj);
resp.getWriter().flush();
resp.getWriter().close();
} catch (IOException e) {
e.printStackTrace();
}
} catch (Exception e) {
e.printStackTrace();
req.getSession().setAttribute("error", "邮件发送失败");
}
}
```
1238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
