5탄) 전자정부프레임워크 + spring legacy MVC + Oracle 프로젝트

지난 시간에 이어 CURD 연동 소스를 마저 구현해보도록 하겠습니다.

 

서비스 소스가 정상적으로 잘 작동이 된다면,

Controller 소스를 작성하면 되겠습니다.

 

앞서 몇가지 필요한 라이브러리를 메이븐에 추가하도록 하겠습니다.

 

pom.xml

        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.8</version>
        </dependency>
        
        <!-- 오브젝트매퍼: https://mvnrepository.com/artifact/net.sf.dozer/dozer -->
        <dependency>
            <groupId>net.sf.dozer</groupId>
            <artifactId>dozer</artifactId>
            <version>5.4.0</version>
            <exclusions>
                <exclusion>
                    <artifactId>slf4j-log4j12</artifactId>
                    <groupId>org.slf4j</groupId>
                </exclusion>
            </exclusions>
        </dependency>

 

컨트롤러에서

ObjectMapper를 사용하기 위해 databind, 

DozerMapper를 사용하기 위해 dozer 를 추가 하였습니다.

 

ObjectMapper는 객체를 JSON String으로 변환할때,

DozerMapper는 Map객체를 DTO객체에 bind 할 목적으로 사용할 것입니다. 

 

EgovSampleController.java

package egovframework.example.sample.web;
 
import java.util.List;
import java.util.Map;
 
import javax.annotation.PostConstruct;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
 
import org.dozer.DozerBeanMapper;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
 
import com.fasterxml.jackson.databind.ObjectMapper;
 
import egovframework.example.sample.service.EgovSampleService;
import egovframework.example.sample.service.SampleDefaultVO;
import egovframework.example.sample.service.SampleVO;
 
@Controller
@RequestMapping("/sample")
public class EgovSampleController {
    
    private static final Logger LOGGER = LoggerFactory.getLogger(EgovSampleController.class);
    
    @Resource(name = "sampleService")
    EgovSampleService egovSampleService;
    
    SampleDefaultVO sampleDefaultVO;
    SampleVO sampleVo;
    ObjectMapper oMapper;
    DozerBeanMapper dMapper;
    
    @PostConstruct
    public void initController(){
        sampleDefaultVO = new SampleDefaultVO();
        sampleVo = new SampleVO();
        oMapper = new ObjectMapper();
        dMapper = new DozerBeanMapper();
    }
 
    /**
     * 글 목록을 조회한다. (paging)
     * @param searchVO - 조회할 정보가 담긴 SampleDefaultVO
     * @param model
     * @return "egovSampleList"
     * @exception Exception
     */
    @RequestMapping(value = "/main.do")
    public String listMain(ModelMap modelMap) throws Exception {
        LOGGER.debug("listMain() called");
//        sampleDefaultVO = new SampleDefaultVO();
//        List<?> dbData = egovSampleService.selectSampleList(sampleDefaultVO);
//        
//        String jsonString = oMapper.writerWithDefaultPrettyPrinter().writeValueAsString(dbData);
//        modelMap.addAttribute("dbData", jsonString);
 
        return "sample/curd.tiles";
    }
    
    public List<?> getList(SampleDefaultVO sampleDefaultVO) throws Exception {
        sampleDefaultVO = new SampleDefaultVO();
        
        return egovSampleService.selectSampleList(sampleDefaultVO);
    }
    
    @RequestMapping(value = "/list.do")
    public ResponseEntity<?> getlist(@RequestParam Map<String, Object> paramMap
                                   ) throws Exception {
        LOGGER.debug("getlist() called");
        paramMap.put("api", "alist");
 
        paramMap.put("dbData", getList(sampleDefaultVO));
        
        String jsonString = oMapper.writerWithDefaultPrettyPrinter().writeValueAsString(paramMap);
        return new ResponseEntity<String>(jsonString, HttpStatus.OK);
    }
    
    @RequestMapping(value = "/c.do", method={RequestMethod.POST})
    public ResponseEntity<?> create(@RequestParam Map<String, Object> paramMap,
                                    HttpServletRequest request
                                    ) throws Throwable {
        paramMap.put("api", "create");
        sampleVo = dMapper.map(paramMap, SampleVO.class);
        LOGGER.debug("create() sampleVo: "+sampleVo);
        
        String result=egovSampleService.insertSample(sampleVo);
        LOGGER.debug("create() result: "+result);
        paramMap.put("result", result);
        
        String jsonString = oMapper.writerWithDefaultPrettyPrinter().writeValueAsString(paramMap);
        return new ResponseEntity<String>(jsonString, HttpStatus.OK);
    }
    
    @RequestMapping(value = "/u.do", method={RequestMethod.POST})
    public ResponseEntity<?> update(@RequestParam Map<String, Object> paramMap, 
                                    HttpServletRequest request
                                    ) throws Throwable {
        paramMap.put("api", "update");
        sampleVo = dMapper.map(paramMap, SampleVO.class);
        LOGGER.debug("update() sampleVo: "+sampleVo);
 
        boolean result=egovSampleService.updateSample(sampleVo);
        LOGGER.debug("update() result: "+result);
        paramMap.put("result", result);
        
        String jsonString = oMapper.writerWithDefaultPrettyPrinter().writeValueAsString(paramMap);
        return new ResponseEntity<String>(jsonString, HttpStatus.OK);
    }
    
    @RequestMapping(value = "/d.do", method={RequestMethod.POST})
    public ResponseEntity<?> delete(@RequestParam Map<String, Object> paramMap, 
                                    HttpServletRequest request
                                    ) throws Throwable {
        paramMap.put("api", "delete");
        sampleVo = dMapper.map(paramMap, SampleVO.class);
        LOGGER.debug("delete() sampleVo: "+sampleVo);
        
        boolean result=egovSampleService.deleteSample(sampleVo);
        LOGGER.debug("delete() result: "+result);
        paramMap.put("result", result);
        
        String jsonString = oMapper.writerWithDefaultPrettyPrinter().writeValueAsString(paramMap);
        return new ResponseEntity<String>(jsonString, HttpStatus.OK);
    }
}

 

컨트롤러의 Mapping url값을 변경하였으므로,

첫화면으로 포워딩해주는 index.jsp도 같이 수정해줍니다.

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<jsp:forward page="sample/main.do"/>

 

List를 출력할때 JSTL을 활용할까 고심끝에

List를 새로고침이 필요없는 비동기 처리 하는게 좋을거 같아

앞서 보신 소스와 같이 Java의 Object Mapper와 HTML의 template tag 를 이용해

List를 출력해보겠습니다.

 

view에도 필요한 소스를 추가하겠습니다.

 

curd.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
 
<%@ taglib prefix="c"      uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 
<div style="display:inline-block;text-align:right;border-radius:5px 5px 0 0;padding:3px 5px 0px 0;width:100%;background-color:black;">
    <span>hi</span>
    <ul class="hlist">
        <li><a href="javascript:void(0);" onclick="doAjax('c.do')">C</a></li>
        <li><a href="javascript:void(0);" onclick="doAjax('u.do')">U</a></li>
        <li><a href="javascript:void(0);" onclick="r()">R</a></li>
        <li><a href="javascript:void(0);" onclick="doAjax('d.do')">D</a></li>
    </ul>
</div>
 
<script>
    $(document).ready(function() {
        ajaxList();
    });
    
    function ajaxList() {
        $.ajax({ 
            url: "${pageContext.request.contextPath}/sample/list.do", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소 
            type: "GET", // HTTP 요청 메소드(GET, POST 등)  
            dataType: "json", // 서버에서 보내줄 데이터의 타입  
            
            success:function(returnMap){
                console.log(returnMap.api);
                console.log(returnMap.dbData);
                listItems(returnMap.dbData);
            },
            
            error:function(jqXHR, status, errorThrown){
                console.log(jqXHR.responseText);
            }
        });
    }
    
    function listItems(listData) {
      $("table > tr").remove();
      var temp, clon;
      var dbData = listData;
      for(var i=0; i<dbData.length; i++) {
          temp = document.getElementsByTagName("template")[0];
          clone = temp.content.cloneNode(true);
          
          td = clone.querySelectorAll("td");
          td[0].textContent = dbData[i].id;
          td[1].textContent = dbData[i].name;
          td[2].textContent = dbData[i].description;
 
          $("table").append(clone);
      }
    }
    
    function doAjax(url){
        //location.href=url;
        var params = $("#form").serialize();
        $.ajax({ 
            url: "${pageContext.request.contextPath}/sample/"+url, // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소 
            data: params, // HTTP 요청과 함께 서버로 보낼 데이터 
            type: "POST", // HTTP 요청 메소드(GET, POST 등)  
            dataType: "json", // 서버에서 보내줄 데이터의 타입  
            
            success:function(returnMap){
                console.log(returnMap.api);
                ajaxList();
            },
            
            error:function(jqXHR, status, errorThrown){
                console.log(jqXHR.responseText);
                ajaxList();
            }
        });
    }
</script>
 
<form name="form" id="form" style="margin:0px;">
 
<div style="display:inline-block;height:100%;width:100%;">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>description</th>
            <th>ref</th>
 
        </tr>
        
<%--     <c:if test="${!empty dbData}">
    <c:forEach var="items" varStatus="status" items="${dbData}">
        <tr>
            <td class="default">${items.id}</td>
            <td class="default">${items.name}</td>
            <td class="default">${items.description}</td>
            <td class="default"></td>
 
        </tr>
    </c:forEach>
    </c:if> --%>
    
    </table>
 
    <div style="float:right;height:50%;width:46%;margin:1.8%;">
        <ul>
            <li>
                <label>id</label><input type="" name="id" placeholder="Id는 자동생성 됩니다" readonly>
            </li>
            <li>
                <label>name</label><input type="" name="name">
            </li>
            <li>
                <label>description</label><input type="" name="description">
            </li>
            <li>
                <label>ref</label><input type="" name="">
            </li>
        </ul>
    </div>
 
</div>
 
</form>
 
<template id="list">
    <tr>
        <td class="default"></td>
        <td class="default"></td>
        <td class="default"></td>
        <td class="default"></td>
    </tr>
</template>
 
<style>
    .default {
        background-color: white
    }
    .hover {
        background-color: lightblue
    }
    .clicked {
        background-color: blue;
        color:white;
    }
</style>
 
<script>
    function r() {
        $('input[name=id]').val($('.clicked:eq(0)').html());
        $('input[name=name]').val($('.clicked:eq(1)').html());
        $('input[name=description]').val($('.clicked:eq(2)').html());
    }
    
    $("#main td").mouseover(function(e){
        $(e.target).parent().children('td').removeClass('default');
        $(e.target).parent().children('td').addClass('hover');
    });
    $("#main td").mouseout(function(e){
        $(e.target).parent().children('td').removeClass('hover');
        $(e.target).parent().children('td').addClass('default');
    });
 
    $(document).click(function(e) {
        if($(e.target).is("#main td")) {
            
            if($(e.target).hasClass('clicked')) {
                $('td').removeClass();
                $('td').addClass('default');
                
            } else {
                $('td').removeClass();
                $('td').addClass('default');
                
                $(e.target).parent().children('td').removeClass();
                $(e.target).parent().children('td').addClass('clicked');
                
                //$('input[name=id]').val($(e.target).siblings(':nth-child(1)').html());
                //$('input[name=name]').val($(e.target).siblings(':nth-child(2)').html());
                //$('input[name=description]').val($(e.target).siblings(':nth-child(3)').html());
            }
        } else {
 
        }
    });
</script>

 

그리고 내비 부분에 링크를 하나 걸어두겠습니다.

 

nav.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
 
<ul class="hlist">
    <li><a href="javascript:void(0);" onclick="location.href='main.do'">list</a></li>
    <li><a href="">메뉴2</a></li>
    <li><a href="">메뉴3</a></li>
    <li><a href="">메뉴4</a></li>
    <li><a href="">메뉴5</a></li>
</ul>

 

그리고 서버를 실행하면 다음과 같은 화면이 출력되게 됩니다.

 

C(reate) U(pdate) R(ead) D(elete)

각 기능들을 테스트 해보면서 감을 익혀가시기 바랍니다.

 

그럼 이만.