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

时间 2019-11-26

标签管理系统内容选项添加繁體版

原文原文链接

#1.功能组成概述ajax

一个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页面组成sql

页面代码

<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;">添&nbsp;加</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();
		}
	}

具体的内容，能够详细探讨，欢迎好评！json

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

3.dao代码

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