匿名投票系统----MVC设计模式
这一学期学习了JavaWeb开发,中间做了一个小的投票系统,分享出来给大家。
这个小项目是用JavaWeb和jsp实现的,直接上项目运行截图。
运行截图
用户登录
用户注册
用户投票
实现的功能是,用户可以注册一个账号,进行匿名投票,已经注册的身份证号不能够再次进行注册,本项目是采用简洁版MVC设计模式(暂无控制层),分为显示层(jsp),DAO层。
JSP主要代码(可以不看,为了凑字数)
登录界面
<%@ page language="java" import="java.util.*,com.entity.*,com.dao.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Login Page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> -->
<link rel="shortcut icon" href="images/favicon_strawberry.ico" type="images/x-ico" /> <!-- 使服务器地址栏加载自己的图标, 不使用tomcat默认的图标 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- 引入设置登录界面样式的css代码 -->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
session.removeAttribute("user"); //每次返回到登录界面, 都移除session中的所有内容, 初始化投票系统的用户登录
%>
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-img.jpg');"> <!-- 导入登录界面的背景图片 -->
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<form class="login100-form validate-form" action="loginPage.jsp" method="post" name="form"> <!-- 表单, 目标为本页处理登录结果, 以post隐式方式传值 -->
<span class="login100-form-title p-b-49">投 票 系 统</span> <!-- 定义标题 -->
<div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户身份证号">
<span class="label-input100">用户身份</span> <!-- 输入框的信息提示 -->
<input class="input100" type="text" name="username" placeholder="请输入用户身份证号" autocomplete="off"> <!-- text文本输入框,包含默认提示信息 -->
<span class="focus-input100" data-symbol=""></span> <!-- 若用户未输入,显示提示信息 -->
</div>
<div class="wrap-input100 validate-input" data-validate="请输入用户密码">
<span class="label-input100">用户密码</span> <!-- 输入框的信息提示, 为输入用户的密码 -->
<input class="input100" type="password" name="pass" placeholder="请输入用户密码"> <!-- password密码文本输入框,包含默认提示信息 -->
<span class="focus-input100" data-symbol=""></span> <!-- 若用户未输入,显示提示信息 -->
</div>
<div class="text-right p-t-8 p-b-31">
<p></p> <!-- 可用于继续开发后, 显示寻找密码或忘记密码的功能 -->
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" onclick="checkData()">登 录</button> <!-- 炫彩登录按钮, 为此按钮加上javascript事件处理,验证输入 -->
</div>
</div>
<div class="flex-col-c p-t-25">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div> <!-- 炫彩注册按钮, 为此按钮加上javascript事件处理,跳转注册页面 -->
<button class="login100-form-btn" onclick="window.location.href='regPage.jsp'">注册</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script> <!-- 导入登录界面的js脚本,处理登录信息 -->
<script src="js/main.js"></script>
<%
Users user = new Users(); //实例化Users类对象user, 用来存储一个用户的信息
UserDAO user_dao = new UserDAO(); //实例化UserDAO类对象user_dao, 用来对用户的信息进行操作
request.setCharacterEncoding("utf-8"); //设置request接收参数的编码格式为utf-8
String userid = request.getParameter("username"); //接收输入的身份证号,此处存在瑕疵,表单的username实质代表userid
String password = request.getParameter("pass"); //接收输入的密码,此处也存在瑕疵,提交表单的pass实质代表password
if(userid != null && password != null){ //若userid和password不为null,说明用户提交有数据,进入登录验证
if(user_dao.userIsExist(userid, password)){ //调用UserDAO类对象的userIsExist()对数据库表查询,参数为userid和password,若存在返回true,否则返回false
String success_message = "输入正确, 登录成功!"; //若判断登录状态为true,说明存在此用户,编写成功登录提示信息
user = user_dao.getUserByUserId(userid); //通过UserDAO类对象的getUserByUserId(),参数为userid,返回此用户对象
session.setAttribute("user", user); //将登录成功的用户对象存放到session对象中,供投票页面调用
%>
<script>
alert("<%=success_message%>"); // 调用javascript的alert()向客户端输出登录成功的信息
window.location.href = 'vote.jsp'; // 显示过提示信息后进行页面跳转,跳转至投票页面
</script>
<%
}else{ //若数据库表中不存在此用户的信息,则登录失败,执行以下操作
String error_message = "身份证号或密码输入错误, 登录失败!"; //定义错误信息,用于提示用户
%>
<script>
alert("<%=error_message%>"); //通过javascript的alert()向客户端输出登录失败的信息
</script>
<%
}
}
%>
</body>
</html>
注册界面
<%@ page language="java" import="java.util.*,com.entity.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>User Registration</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> -->
<link rel="shortcut icon" href="images/favicon_strawberry.ico" type="images/x-ico" />
<link rel="stylesheet" type="text/css" href="css/regPage.css">
</head>
<body>
<button onclick="window.location.href='loginPage.jsp'" class="return">返 回</button> <!-- 注册页面左上角的返回按钮,点击时返回登录页面 -->
<div class="box">
<div class="box-head">用 户 注 册</div> <!-- 用户注册的标题 -->
<br>
<div class="box-body">
<form action="regPage.jsp" method="post" name="form">
<table>
<tr>
<th>用户名称:</th> <!-- 输入用户名称 -->
<td><input type="text" name="username" placeholder="长度4~12,英文大小写字母" autocomplete="off"></td><td><div></div></td>
</tr>
<tr>
<th>真实姓名:</th> <!-- 输入用户真实姓名 -->
<td><input type="text" name="realname" placeholder="长度4~12,英文大小写字母" autocomplete="off"></td><td><div></div></td>
</tr>
<tr>
<th>密 码:</th> <!-- 输入密码 -->
<td><input type="password" name="pwd" placeholder="长度6~20,大小写字母、数字或下划线" autocomplete="off"></td><td><div></div></td>
</tr>
<tr>
<th>确认密码:</th> <!-- 重复密码 -->
<td><input type="password" name="repwd" placeholder="请再次输入密码进行确认" autocomplete="off"></td><td><div></div></td>
</tr>
<tr>
<th>手机号码:</th> <!-- 输入手机号码 -->
<td><input type="text" name="phone" placeholder="13、14、15、17、18开头的11位手机号" autocomplete="off"></td><td><div></div></td>
</tr>
<tr>
<th>电子邮箱:</th> <!-- 输入电子邮箱 -->
<td><input type="text" name="email" placeholder="用户名@域名(域名后缀至少2个字符)" autocomplete="off"></td><td><div></div></td>
</tr>
<tr>
<th>身份证号:</th> <!-- 输入身份证号 -->
<td><input type="text" name="userid" placeholder="长度为15位或18位的身份证号,且未注册过" autocomplete="off"></td><td><div></div></td>
</tr>
</table>
<br>
<input type="button" value="注册" onclick="checkData()" style="margin-right:30px;"> <!-- 注册按钮 -->
</form>
</div>
</div>
<script src="js/regPage.js"></script> <!-- 引用js脚本, 对注册信息进行校验验证 -->
<jsp:useBean id="user_dao" class="com.dao.UserDAO" scope="page"></jsp:useBean> <!-- 调用javabean对象,访问数据库,判断身份证号是否注册过 -->
<%
String username = request.getParameter("username"); //获取用户输入提交的信息
String realname = request.getParameter("realname");
String password = request.getParameter("pwd");
String phone = request.getParameter("phone");
String email = request.getParameter("email");
String userid = request.getParameter("userid"); //若得到的数据均不为null,则说明用户提交数据成功,执行以下操作
if(username != null && realname != null && password != null && phone != null && email != null && userid != null){
if(user_dao.useridIsExist(userid)){ //调用user_dao对象判断此身份证号是否存在,若存在,则提示注册失败
String error = "注册失败, 此身份证已经注册, 请重新输入!";
%>
<script>alert("<%=error%>");</script> <!-- 输出注册失败信息 -->
<%
}else{ //若注册成功
Users user = new Users(); //实例化Users类对象
user.setUsername(username); //添加实体的信息
user.setRealname(realname);
user.setPassword(password);
user.setPhone(phone);
user.setEmail(email);
user.setUserid(userid);
//用户已投票数默认为0,所以此处省略设置
user_dao.addUser(user); //将新的注册的用户实体添加到数据库表中
/* session.setAttribute("user", user); */
String success = "注册成功, 即将跳转到登录页面!";
%>
<script>
alert("<%=success%>"); //输出注册成功的信息,并跳转到登录界面
window.location.href = "loginPage.jsp";
</script>
<%
}
}
%>
</body>
</html>
投票页面
<%@ page language="java" import="java.util.*,com.entity.*,com.dao.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Vote Page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> -->
<link rel="shortcut icon" href="images/favicon_strawberry.ico" type="images/x-ico" />
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style>
body{
background-image:url(images/bg-imgx.jpg);
background-size:cover;
font-family:"楷体";
font-size:24px;
}
td{
width:150px;
text-align:center;
font-size:20px;
}
a{
text-decoration: none;
color:blue;
}
.message{
width: 40%;
margin: 0 auto;
text-align:center;
background-color: #fff;
border-radius: 30px;
padding:50px;
padding-top:10px;
}
button{
border:1px solid #FFF;
border-radius:5px;
padding:5px;
background: #3399FF;
color: #fff;
}
</style>
</head>
<body>
<div class="bcg">
<br>
<button onclick="window.location.href='loginPage.jsp';">切换账号/退出</button> <!-- 注册页面左上角的返回按钮,点击时返回登录页面 -->
<br><br><br>
<%
UserDAO user_dao = new UserDAO(); //实例化UserDAO类对象user_dao,用于对数据库用户表进行操作
TeacherDAO t_dao = new TeacherDAO(); //实例化TeacherDAO类对象t_dao,用于对数据库教师表进行操作
Users user = (Users)session.getAttribute("user"); //取得登录界面传送的Users类用户对象,进行操作
ArrayList<Teacher> teachers = new ArrayList<Teacher>(); //实例化存放教师对象的集合
Teacher teacher = new Teacher(); //实例化教师对象
if(user != null){ //若user != null, 说明用户成功登录
teachers = t_dao.getAllTeacher(); //调用t_dao对象的getAllTeachers()方法获取教师集合
%>
<div class="message">
<h2>Weicome, <%=user.getUsername() %></h2> <!-- 打印欢迎用户的信息 -->
<p>欢迎登录投票系统, 您还可以投<%=5-user.getVotes() %>票</p> <!-- 用户还可以投票的票数, 其中votes为已投的票数,5-votes为剩余投票数 -->
<table> <!-- 打印表格 -->
<tr><td>教师序号</td><td>教师姓名</td><td>教师得票</td><td>进行投票</td></tr>
<%
for(Teacher t:teachers){ //遍历教师集合,将所有教师的信息全部打印
%>
<tr><td><%=t.getT_id() %></td> <!-- 打印教师id -->
<td><%=t.getT_name() %></td> <!-- 打印教师姓名 -->
<td><%=t.getT_count() %></td> <!-- 打印教师票数 -->
<td><a href="vote.jsp?t_id=<%=t.getT_id()%>">投票</a></td></tr> <!-- 通过a标签传值的方式获取教师id并投票 -->
<%
}
%>
</table>
</div>
<%
}else{ //若user == null, 说明用户未经登录直接访问此页面,返回到登录界面。
response.sendRedirect("loginPage.jsp");
}
%>
<%
request.setCharacterEncoding("utf-8"); //设置接收参数的编码格式为utf-8
String t_id = request.getParameter("t_id"); //获取用户投票教师的id号
if(t_id != null && user != null){ //若 id 不为null,说明用户已进行投票操作
//调用user_dao对象的增加票数的方法,若已投未超过5票,则数据库表用户votes累加,返回true, 否则返回fasle
if(user_dao.addUserVotes(user)){
user = user_dao.getUserByUserId(user.getUserid()); //若添加成功,则再次获取数据库表中的该用户,实现信息更新
session.setAttribute("user", user); //再次覆盖session对象中的user对象,实现更新
teacher = t_dao.getTeacherById(t_id); //通过t_id获取teacher对象
if(t_dao.addTeacherVotes(teacher)){ //调用t_dao的addTeacherVotes()方法教师添加票数,添加成功返回true,否则false
response.sendRedirect("vote.jsp"); //添加成功后重新加载此页面,更新数据
}else{
}
}else{ //若为用户表添加已投票数出现错误,则弹出对话框提醒用户,并重新加载页面
%>
<script>
alert("投票失败, 您的账户投票已达上限!");
window.location.href = 'vote.jsp';
</script>
<%
}
}
%>
</div>
</body>
</html>
总结
哈哈哈,由于我博客是刚刚升到的三级,有了第一张推荐卡,字数不够2000不让推荐,其实本篇博客并没有讲什么实质上的技术,只是做了个展示,小伙伴们可以去我的github下载详细设计报告和源码,在个项目中并没有严格使用MVC模式,那个图书馆系统更加强大,愿小伙伴们捧捧场,一起加油,哈哈!