投 票管理系统 一:投 票内容和选项内容的添加

摘要: 采用jsp+servlet实现投 票管理系统，这是第一部分，实现投票内容和选项内容的添加

#1.功能组成概述

一个voteRelease.jsp页面用来呈现页面的输入，包括投 票内容的输入，以及选项内容的动态添加

有一个top.jsp,一个menu.jsp。其中top.jsp用来组成后台管理的顶端部分，在voteRelease.jsp动态引入；
menu.jsp用来控制左侧的菜单，展示我们是要添加还是查询，同样在voteRelease.jsp动态引入。

一个VoteServlet,相当于我们的controller(业务逻辑部分)

还有dto,dao,dbutil等包文件，其中dto,用于将我们数据库中的表抽象成类，dao实现与数据库打交道，dbutil用于建立连接等操作。

#2.voteRelease.jsp页面组成

页面代码

<div id="out_box">
<div id="title"><jsp:include page="top.jsp" flush="true"></jsp:include></div>
<div id="menu"><jsp:include page="menu.jsp" flush="true"></jsp:include></div>
<div id="vote">
<div style="padding-left:35%;color:#0099ff;">
<h2>开始投票</h2>
</div>
<table class="table table-hover" style="margin-left:-30px;">
<tbody id="append">
<tr>
<td class="info" style="width:20%;font-size:20px;">投票内容</td>
<td class="warning" colspan="2"><input type="text" id="subject" placeholder="投   票内容" style="width:79%;height:40px;font-size:20px;"/></td>
</tr>
<tr>
<td class="info" style="width:20%;font-size:20px;">投 票选项A</td>
<td class="warning" style="width:70%"><input type="text" placeholder="选项内容" style="width:100%;height:40px;font-size:20px;" name="op"/></td>
<td class="warning"><button type="button" class="btn btn-warning" onclick="addMore()">添加选项</button></td>
</tr>
</tbody>
<tr>
<td colspan="3" class="danger"><button type="button" class="btn btn-success" style="width:25%;margin-left:38%;font-size:16px;">添 加</button></td>
</tr>
<tr>
</tr>
</table>
</div>
</div>

样式文件

*{
margin:0;
padding:0;
}
body{

}
#out_box{
width:800px;
height:550px;
border:1px solid #0088bb;
margin:0 auto;
margin-top:40px;
}
#title{
text-align:center;
margin-top:10px;
border-bottom:2px solid #0088bb;
height:45px;
margin-left:20px;
margin-right:20px;
}
#menu{
border-right:1px dotted #0088bb;
position:fixed;
left:15%;
height:470px;
margin-top:10px;
margin-bottom:10px;
width:200px;
}
#vote{
position:fixed;
left:20%;
margin-left:200px;
margin-top:10px;
width:600px;
}

js文件

//每次添加的时候选项号+1，例如选项A，B等
var array = new Array('A','B','C','D',
'E','F','G','H','I','J','K');
var index = 0;  //控制我们取数组的哪一位，
//找到tbody元素
var apppend = document.getElementById("append");
function addMore(){
//添加行
var tr = document.createElement("tr");
//创建3列
//第一列，放我们的选号
index ++;
var td1 = document.createElement("td");
//设置td1的样式与前面保持一致
td1.innerHTML = "投 票选项"+array[index];
td1.className = "info";
td1.style.fontSize = "20px";
td1.style.width = "20%";
//设置第二列,放置input
var td2 = document.createElement("td");
td2.className = "warning";
td2.style.width = "70%";
//创建input标签
var input = document.createElement("input");
input.type = "text";
input.placeholder = "选项内容";
input.style.height = "40px";
input.style.fontSize = "20px";
input.style.width = "100%";
input.name = "op";
//创建td3放置一个按钮(移除)
var td3 = document.createElement("td");
td3.className = "warning";

//创建一个button
var btn = document.createElement("button");
btn.className = "btn btn-danger";
btn.type="button";
btn.style.width = "100%";
btn.innerHTML = "移除";
//写button的移除事件
btn.onclick = function(){
//找到button的父节点的父节点，即tr删除
append.removeChild(this.parentNode.parentNode);
//选项删除的同时选项号-1
index--;
}

//将input添加到td2
td2.appendChild(input);
//将button添加到td3
td3.appendChild(btn);
//将td1,td2,td3添加到tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
//向tbody中添加tr
append.appendChild(tr);
}

//点击添加的时候我们把所有的内容保存到数据库
options = new Array();  //定义一个数组保存所有的选项内容
var index = 0;
$(function(){
$(".btn-success").click(function(){
var title = $("#subject").val();
//循环取出所有name为op的标签input
$("input[name='op']").each(function(index){
options[index] = $(this).val();

});
$.ajax({
method:"post",
url:"VoteServlet",
data:"flag=add"+"&subject="+title+"&options="+options+"&r="+new Date(),
//dataType:"json",
success:function(data){
//添加成功后，清除input中的内容
$("input").each(function(){
$(this).val("");
});
},
error:function(){
alert("数据提交错误,请稍后再试!");
}
});
});
});

3.dao代码

subjectdao

/**
* 这里参数有一个connection是因为内容和选项必须同时成功,即在一个事务中完成
*/
public boolean add(Subject sub,Connection conn) {
String sql = "insert into tb_subject(subid,subContent) values(?,?)";
return DAOHelper.executeUpdate(conn, sql, new Object[]{sub.getSubId(),sub.getSubContent()});
}

optionsdao

public boolean add(Options op,Connection conn) {
String sql = "insert into tb_options(opitem,subid) values(?,?)";

return DAOHelper.executeUpdate(conn, sql, new Object[]{op.getOpItem(),op.getSubId()});
}

daohelper

public static boolean executeUpdate(Connection conn,String sql,Object[] args){
PreparedStatement ps = null;
try {
ps = conn.prepareStatement(sql);
for(int i=0;i<args.length;i++){
ps.setObject(i+1, args[i]);
}
if(ps.executeUpdate() > 0){
return true;
}
} catch (SQLException e) {
e.printStackTrace();
}
return false;
}

dbconnection

public static Connection getConn(){
Connection conn = null;
try {
conn = DriverManager.getConnection(DB_URL,USER,PASSWORD);
} catch (SQLException e) {
e.printStackTrace();
}
return conn;
}

#4.Servlet实现

接收标记位，定义函数

//接收前面传过来的标记位
String flag = request.getParameter("flag");
if("add".equals(flag)){
addVote(request,response);
}

实现函数

//定义一个连接,进行投 票内容和选项内容的插入。
Connection conn = DBConnection.getConn();
//为了保持两者同时插入，我们将两者的插入放置在同一个事务中进行
try {
conn.setAutoCommit(false);
} catch (SQLException e) {
e.printStackTrace();
}
//获得传过来的投 票内容
String subject = request.getParameter("subject");
//获得传过来的选项内容
String options = request.getParameter("options");
//将传过来的内容,利用','进行分割，成数组
String[] optionsArr = options.split(",");
//利用当前时间的后8位作为投 票的id
Calendar c = Calendar.getInstance();
long time = c.getTimeInMillis();
//将一个long类型的数据转换成String
String s = String.valueOf(time);
//截取
s = s.substring(5,s.length());
//将String转换成int
int subId = Integer.parseInt(s);
//定义一个Subject对象
Subject sub = new Subject();
sub.setSubContent(subject);
sub.setSubId(subId);
//添加
SubjectDAO subDAO = new SubjectDAO();
subDAO.add(sub, conn);
//循环数组，依次将每个选项内容插入到数据库
Options o = null;
OptionsDAO opDAO = null;
for(String op:optionsArr){
o = new Options();
o.setOpItem(op);
//System.out.println(subId);
o.setSubId(subId);

opDAO = new OptionsDAO();
opDAO.add(o, conn);
}
try {
conn.commit();
} catch (SQLException e) {
e.printStackTrace();
}
}

具体的内容，可以详细探讨，欢迎好评！