초기 목록 표시 및 페이지네이션 설정
<accounting/controller/AcctitleController.java>
package kr.happyjob.study.accounting.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import kr.happyjob.study.accounting.model.AcctitleModel;
import kr.happyjob.study.accounting.service.AcctitleService;
@Controller // 해당 메서드가 컨트롤러임을 알려주는 어노테이션이다.
@RequestMapping("/accounting/") // 1.외부 url주소
public class AcctitleController {
@Autowired
AcctitleService acctitleService;
// Set logger : logger를 세팅하는것 logger를 이용하면 print를 일일히 찍으며 확인하지않아도 된다. 화면과는 연관이 없고 디버깅을 쉽게하기위해 세팅해 놓은것이다.
private final Logger logger = LogManager.getLogger(this.getClass());
@RequestMapping("acctitle.do") // 2.내부 url주소 -> 외부url주소와 합쳐서 "localhost/accounting/acctitle.do "
public String init(Model model, @RequestParam Map<String, Object> paramMap, HttpServletRequest request,
HttpServletResponse response, HttpSession session) throws Exception {
return "accounting/acctitle"; // 3. 2번의 주소를 입력하면 view->accounting->acctitle.jsp 로 들어가 화면페이지가 열린다. (accounting/acctitle 에서 acctitle.jsp 에서 .jsp가 빠진 이유는 bean에서 그렇게해도 jsp파일을 찾을수 있게 설정해 놓았기 때문이다.
}<accounting/acctitle.jsp>
<%@ page language="java" 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"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>JobKorea</title>
<jsp:include page="/WEB-INF/view/common/common_include.jsp"></jsp:include>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script src="${CTX_PATH}/js/summernote/summernote-ko-KR.js"></script>
<script type="text/javascript">
var currentPage;
// 그룹코드 페이징 설정
var pageSize = 5;
var pageBlockSize = 5; // 한번에 보여주는 로우수
$(document).ready(function(){ // DOM(HTML관련코드)실행이 끝나면 가장먼저 바로 실행되는 함수
comcombo("ACCcd", "bigSelect", "all", "");
fAccList(); // 해당함수가 실행되면 아래에있는 함수 본체가 실행되게 된다.
});
function fAccList(currentPage) {
var bigSelect = $("#bigSelect").val(); // id가 bigSelect인 html태그의 값을 가져와 오른쪽에 선언한 var bigSelect 변수에 값을 집어넣는것이다. 값을 가져오는것이 .val()인데 <form>태그로 둘러쌓여져 있어야 이용할 수 있다.
var accsmall = $("#accSmall").val();
var payment = $("#payment").val();
var use = $("#use").val();
currentPage = currentPage || 1;
var param = {
bigSelect : bigSelect, // 위에서 초기화된 변수들은 오른쪽의 값이 된다. (bigSelect : bigSelect 에서 왼쪽은 키 : 오른쪽은 값)이 된다.
accsmall : accsmall,
payment : payment,
use : use,
pageSize : pageSize,
currentPage : currentPage
}
var resultCallback = function(data) { // resultCallback 변수는 callajax가 실행후 되돌아오는 콜백함수가 담긴 변수이다. 아래의 callAjax메서드에서 맨뒤 파라미터로 입력된것을 볼 수 있다. 그렇기때문에 이 메서드는 callAjax가 먼저실행되고 다음에 실행되게 된다.
fAccResult(data, currentPage);
};
callAjax("/accounting/acctitleList.do", "post", "text", true, param,resultCallback); // 위에서 넘겨줄 파라미터를 키:값 형태로 param 변수에 받았으니 이것을 가지고 "/accounting/acctitleList.do" 해당 주소로 넘어간다.
}ajax란?
전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.비동기 통신과 동기 통신
비동기식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이다.
동기식은 요청후 웹페이지가 리로드되어 데이터를 불러오는 방식이다.callAjax() 메서드의 형태
예시 : callAjax("/accounting/acctitleList.do", "post", "text", true, param,resultCallback);
callAjax(호출할 url주소, 전송방식, 리턴받는 값의 데이터타입, true면 비동기식인데 이것이 디폴트값이다, 넘겨줄 파라미터, 다시 돌아올 콜백함수)
<accounting/controller/AcctitleController.java>
@Controller
@RequestMapping("/accounting/")
public class AcctitleController {
@Autowired
AcctitleService acctitleService;
@RequestMapping("acctitleList.do")
public String AccTitleList(Model model, @RequestParam Map<String, Object> paramMap, HttpServletRequest request,
HttpServletResponse response, HttpSession session) throws Exception {
// 위에서 선언한 파라미터를 보면 "@RequestParam Map<String, Object> paramMap" 이것으로 키와 값을 받을수 있는 변수인 pramMap을 선언해주었기 때문에 전단계의 callAjax에서 넘긴 param(키:값으로 이루어진 데이터가 들어간 변수)이 paramMap에 들어가게 된다.
logger.info(" - paramMap : " + paramMap);
int currentPage = Integer.parseInt((String)paramMap.get("currentPage"));
// "@RequestParam Map<String, Object> paramMap" 에서 키는 String형식 값은 Object형식이다. 키인 "currentPage"의 값은 int형식인 1인데 Object로 받았기때문에 현재 Object형식이다.
// Object형식은 int로 바로 형변환이 불가능하기때문에 (String)으로 형변환을 하였고 이 String형태의 값을 Integer.parseInt(이것은 String값만 int형식으로 형변환 가능)를 이용하여 int형식으로 바꾸어 int currentPage 변수에 담은것이다.
int pageSize = Integer.parseInt((String)paramMap.get("pageSize"));
int pageIndex = (currentPage - 1) * pageSize;
paramMap.put("pageIndex", pageIndex); // @RequestParam은 파라미터를 이용해 값을 다른곳으로 넘겨줄때 사용, Model은 키를 이용하여 리턴되는 view에서 직접 이용할수 있게할때 사용
paramMap.put("pageSize", pageSize);
List<AcctitleModel> acctitle = acctitleService.acctitle(paramMap); // paramMap에 담긴 파라미터는 SQL에서 조건문에서 사용된다, ".acctitle(paramMap)에서 .acctitle은 SQL Mapper에서 사용할 쿼리의 id와 일치해야한다.
// 아래의 accountingMapper.xml 참고
int totalCntBmDv = acctitleService.acctitlecnt(paramMap); // SQL Mapper페이지에서 resultType이 int이기때문에 int값을 int totlaCntBmDV에 담는다
// 아래의 accountingMapper.xml 참고
model.addAttribute("acctitle", acctitle); // 키와 값 형태로 Model에 담은것은 따로 파라미터가 필요없이 리턴되는 view에서 사용할 곳에 키를 넣어 바로 값을 가져올수 있다.
model.addAttribute("pageSize", pageSize);
model.addAttribute("admCurrentPage",currentPage);
model.addAttribute("totalCntBmDv",totalCntBmDv);
return "accounting/acctitleAdm"; // acctitleAdm.jsp로 이동
}
<sql/accounting/accountingMapper.xml>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="kr.happyjob.study.accounting.dao.AcctitleDao">
<select id="acctitle" resultType="kr.happyjob.study.accounting.model.AcctitleModel">
select gc.group_code,
gc.group_name,
ac.detail_account_cd,
ac.detail_account_nm,
ac.use_yn,
ac.note,
(select dc.detail_name from tb_detail_code dc where dc.group_code = 'REVEXPcd' and dc.detail_code = ac.account_type) as account_type
from tb_account ac left join tb_group_code gc
on gc.group_code = ac.account_cd
<where>
<if test="(bigSelect != null) and (!bigSelect.equals(''))">
and gc.group_code = #{bigSelect}
</if>
<if test="(accsmall != null) and (!accsmall.equals(''))">
and ac.detail_account_cd = #{accsmall}
</if>
<if test="(payment != null) and (!payment.equals(''))">
and ac.account_type = #{payment}
</if>
<if test="(use != null) and (!use.equals(''))">
and ifnull(ac.use_yn,'N') = #{use}
</if>
</where>
LIMIT #{pageIndex}, #{pageSize}
</select>
<select id="acctitlecnt" resultType="int">
select count(*) from (
select gc.group_code,
gc.group_name,
ac.detail_account_cd,
ac.detail_account_nm,
ac.use_yn,
ac.note,
(select dc.detail_name from tb_detail_code dc where dc.group_code = 'REVEXPcd' and dc.detail_code = ac.account_type) as account_type
from tb_account ac left join tb_group_code gc
on gc.group_code = ac.account_cd
) aa
<where>
<if test="(bigSelect != null) and (!bigSelect.equals(''))">
and aa.group_code = #{bigSelect}
</if>
<if test="(accsmall != null) and (!accsmall.equals(''))">
and aa.detail_account_cd = #{accsmall}
</if>
<if test="(payment != null) and (!payment.equals(''))">
and aa.account_type = #{payment}
</if>
<if test="(use != null) and (!use.equals(''))">
and ifnull(aa.use_yn,'N') = #{use}
</if>
</where>
</select>
</mapper><accounting/acctitleAdm.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
// 이 페이지는 view의 acctitleAdm.jsp이기때문에 여기에서 사용되는 키들은 컨트롤러에서 model에 담은 (키:값)의 키를 이용해서 바로 사용할수 있다.
<c:set var="nRow" value="${pageSize*(admCurrentPage-1)}" />
<c:forEach var="list" items="${acctitle}"> // 이 키는 컨트롤러의 이부분에서 model에 담은것을 가져온것이다. "List<AcctitleModel> acctitle = acctitleService.acctitle(paramMap);"
<tr>
<td>${list.group_code}</td>
<td>${list.group_name}</td>
<td>${list.detail_account_cd}</td>
<td><a href="javascript:fPopModalDetail('${list.group_code}','${list.detail_account_cd}');"><strong>${list.detail_account_nm}</strong></a></td>
<td>${list.account_type}</td>
<td>${list.note}</td>
<td>${list.use_yn}</td>
</tr>
</c:forEach>
<input type="hidden" id="totalCntBmDv" name="totalCntBmDv" value="${totalCntBmDv}"/>
Software Developer