投票管理系統一:投票內容和選項內容的添加

時間 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