TodoList 연습 3 , 서버실행하면 DB저장된 TodoList 바로출력

 

 

 

 

-- DB 저장된 목록들이 바로 보이게된다 .

 

 

 

-- 즉시실행함수를 만들어보자 .  ( window.onload )

-- todojs.js 파일에 함수 추가 .

 

--  Add 버튼 눌렀을때 createElement 한 Element들과 , 

       -- 즉시실행했을때 표시되는 Element들이 똑같다. 

          -- 복붙으로 가져왔지만.. 하나로 쓸수있는법을 찾아보자 .

function select(){
  $.ajax({
    url : "TodoSelectAll",
    type : "POST",
    dataType : "JSON",
    success : function (todoList){
      todoListId.innerHTML="";
      $(todoList).each(function(){
        if ( this!=null){
         
          const li = document.createElement("li");
          li.classList.add("liContainer");  // li 생성
      
          const checkBox = document.createElement("input");
          checkBox.classList.add("check1");
          checkBox.setAttribute("type","checkbox"); // 체크박스 생성
      
          const span = document.createElement("span");
          span.classList.add("liSpan");  // span 생성
      
          const button = document.createElement("button");
          button.classList.add("liButton"); // button 생성
          button.innerText="Delete";
      
          span.innerText = this.testAddTodo;     // span의 값을 서블릿으로 얻어온 Todo값으로.
          inputTodo.value="";
          inputTodo.focus();
      
          li.append(checkBox,span,button);
          document.querySelector(".todo-list").append(li);
      
          count++;
          updateCount();

          button.addEventListener("click",function(){    // Delete 눌렀을때 삭제  
            ///////////// DB 에서 삭제 추가 . ( delete )
            $.ajax({
              url : "deleteList",
              data : {"spanInput" : span.innerText},
              type : "POST",
              success : function(result){
                console.log("deleteList 성공");
              },
              error : function(){
                console.log("deleteList 실패")
              } 
            });
            this.parentElement.remove();
        
            if ( !checkBox.checked)
            count --;
            updateCount();
        
        });

        checkBox.addEventListener("click",function(){   // check 시 취소선
          if ( checkBox.checked ){
              span.style.textDecoration="line-through";
              span.style.color="gray";
              count--;
          }else{
              span.style.textDecoration= "none";
              span.style.color="black";
              count++;
          } 
          updateCount();
      });
        }
      });

    },
    error : function(){
      console.log(request.status);
    }
  })
}
window.onload = select();

 

 

 

--- " /TodoSelectAll" 서블릿 추가 

@WebServlet("/TodoSelectAll")
public class SelectAllServlet extends HttpServlet{
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		try {
			TodoService service = new TodoService();
			
			List<TodoList> todoList = service.selectAll();
			
			new Gson().toJson( todoList , resp.getWriter());
			
		}catch(Exception e) {
			e.printStackTrace();
		}
	}
}

 

 

--- TodoService 에 목록뽑아오는 selectAll() 함수 추가

	/**     전체목록 뽑아오기
	 * @return
	 */
	public List<TodoList> selectAll() throws Exception {
		Connection conn = getConnection();
		
		List<TodoList> todoList = dao.selectAll(conn);
		
		close(conn);
		
		return todoList;
	}
}

 

--- TodoDAO 에 목록뽑아오는 selectAll() 함수 추가

	/**       전체목록 뽑아오기
	 * @param conn
	 * @return
	 */
	public List<TodoList> selectAll(Connection conn) throws Exception{
		
		List <TodoList> todoList = new ArrayList<>();
		try {
			String sql = prop.getProperty("selectAll");
			
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql);
			
			while ( rs.next()) {
				int testNo = rs.getInt("TESTNO");
				String testAddTodo = rs.getString("TESTADDTODO");
				String testDate = rs.getString("TESTDATE");
			
				todoList.add( new TodoList ( testNo,testAddTodo,testDate)  );
			}
		}finally {
			close(rs);
			close(stmt);
		}
		return todoList;
	}