우선 내가 인턴을 하면서 단순하게 프로젝트를 진행하다가
Table -> Grid를 시작으로 개인적인 퍼포먼싱을 위해서 Ajax에 도전했다..
사실 Ajax를 가끔 사용하구 이론적으로는 알았지만 내가 만든 프로젝트에 넣는건 정말 어려웠다 ㅠㅠ
Ajax를 이용하면서 가장 크게 느낀점은?!?
기존에 Object로 데이터를 넘겼던 상황에서 Json 형태로 넘기는 것이 Best!
그래서 기존에 Controller에서 Object 형태로 넘기던 데이터를 Json으로 변환했다.
무튼 과정을 천천히 풀어보도록 하자
우선 설명드리면 저는 Spring Mvc Model 2로 진행했어요!
즉! Jsp -> Java(Controller -> Service -> Store) -> Jsp 구조!
Service와 Store 코드는 생략할께요!
이유는 DB에 연결하는 과정과 해당 부분의 코드에서는 Service에서 하는 역할이 크게 없기 때문!
JSP
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author"
content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<%@ include file="/views/bootstrap/header.jsp"%>
</head>
<div class="dashboard-wrapper">
<div class="dashboard-ecommerce">
<div class="container-fluid dashboard-content "> <c:choose>
<c:when test="${empty userName}">
<script>
alert("로그인이 안되어 있습니다. 로그인 페이지로 넘어갑니다.");
document.location.href="${pageContext.request.contextPath}/customer/login.do";
</script>
</c:when>
<c:otherwise>
<div class="card mb-4 shadow-sm">
<table class="table" align="center">
<tr>
<th><h4 class="my-0 font-weight-normal">사원번호 확인</h4></th>
<td><input class="form-control" type="text" id="useCode"
name="useCode" value="" placeholder="ex)hstree305"></td>
<td><input id="checkBtn" class="btn btn-lg btn-primary btn-block"
value="Select"></input>
</tr>
</table>
</div>
<br>
<br>
<div class="card-header">
<i class="fas fa-table mr-1"></i> 사원별 재물 리스트
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover" style="width:100%">
<thead class="be-light">
<tr class="text-center" style = "font-weight:bold;" >
<td class="border-0" id=title>일련번호</td>
<td class="border-0" id=title>구매관리부서</td>
<td class="border-0" id=title>재물위치</td>
<td class="border-0" id=title>물품관리구분</td>
<td class="border-0" id=title>물품취득재원</td>
<td class="border-0" id=title>물품명</td>
<td class="border-0" id=title>구입일</td>
<td class="border-0" id=title>취득금액</td>
<td class="border-0" id=title>내용연수</td>
<td class="border-0" id=title>제조사</td>
<td class="border-0" id=title>물품모델명</td>
<td class="border-0" id=title>물품시리얼번호</td>
<td class="border-0" id=title>크기(가로)</td>
<td class="border-0" id=title>크기(세로)</td>
<td class="border-0" id=title>크기(높이)</td>
<td class="border-0" id=title>물품등록자_부서</td>
<td class="border-0" id=title>물품등록자</td>
<td class="border-0" id=title>현관리자_직급</td>
<td class="border-0" id=title>현관리자_성명</td>
<td class="border-0" id=title>재물상태</td>
<td class="border-0" id=title>등록일</td>
</tr>
</thead>
<tbody id="test1"></tbody>
</table>
</div>
</div>
</c:otherwise>
</c:choose>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#checkBtn').click(function() {
var check = document.getElementById('useCode').value;
console.log(check);
$.ajax({
url:'employee.do',
type:'POST',
dataType: 'text',
data : {
useCode : check
},
error : function(error) {
console.log("error" + " code : " + useCode);
},
success : function(data) {
var results = JSON.parse(data);
var str = '<tr>';
$.each(JSON.parse(data) , function(i, v){
str += '<TD>' + v.WealthDno +
'</TD><TD>' + v.PurchaseMangeDepartMent +
'</TD><TD>' + v.WealthLocation +
'</TD><TD>' + v.ItemManageType +
'</TD><TD>' + v.ItemAcquisition +
'</TD><TD>' + v.ItemName +
'</TD><TD>' + v.PurcahseDate +
'</TD><TD>' + v.AcquisitionAmount +
'</TD><TD>' + v.ContentYear +
'</TD><TD>' + v.ManuFacture +
'</TD><TD>' + v.ItemModel +
'</TD><TD>' + v.ItemSerialNumber +
'</TD><TD>' + v.HorizontalSize +
'</TD><TD>' + v.VerticalSize +
'</TD><TD>' + v.HeightSize +
'</TD><TD>' + v.ItemRegisterDepartment +
'</TD><TD>' + v.ItemRegisterName +
'</TD><TD>' + v.CurrentManagerRank +
'</TD><TD>' + v.CurrentManagerName +
'</TD><TD>' + v.WealthState +
'</TD><TD>' + v.ItemRegisterDate +
'</TD>';
str += '</TR>';
});
$("#test1").append(str);
// console.log(st);
// data.wealthList;
// alert(data.getElementById('wealthDno'));
console.log(data);
}
});
});
});
</script>
<%@ include file="/views/bootstrap/adminFooter.jsp"%>
<%@ include file="/views/bootstrap/dataFooter.jsp"%>
</body>
</html>JSP에서는 우선 c Tag를 이용해서 세션에 따라서 조건을 걸어줬습니다.
세션이 존재한다면 사용 가능하도록!
로그인이 유지되어 있다면 사용 가능하도록 제작했습니다.
추가적으로 Table에 Head 부분을 만든 이유는
Table에 대한 CSS를 이용하면서 JavaScript로는 디자인이 별로 안이쁘길레 이렇게 해봤어요!
AjaX를 이용했는데 Ajax에서는 크게 URL / Type / DataType / Data / Success 등
값을 입력해야하는 조건들이 존재합니다.
하나씩 제가 이해한 방향으로 설명해보자면?!
URL : 내가 Ajax를 이용하여 호출하려는 경로!
예를 들어서 버튼을 클릭했을 때! 컨트롤러에서 어떤 경로를 불러올지!
Type : 요청 유형을 적어주면 됩니다! (GET or POST)
DataType : 데이터 유형을 적어주면 되는데 다시 받을 떄 어떤 유형으로 받을것인지 작성하면 됩니당
Data : 내가 전송하려는 데이터를 작성하면 되는데 저는 Contoller에서 받아야 하는 값들을 적어줬습니다.
Success와 Error는 다들 아시는것과 같아요!
Erorr는 오류가 발생하면 어떤 행동을 취할 것인지!
Success는 호출이 성공했을 때 어떤 행동을 취할 것인지!
저는 Success에서 받아온 데이터로 Table에 들어갈 데이터를 뿌려줬습니다.
부가적으로 하단과 상단에 Footer를 호출해줬는데
Footer는 말 그대로 설정파일들을 Jsp로 따로 만들어서 호출하는 방식으로 구성했습니다.
안그러면 뭔가 한 코드에 300줄 이상 넘어가는걸 보게 되더라구요....
그리고 이렇게 사용하니깐 코드 수정부터 디자인까지 완전 편리하더라구요!
Controller
@RequestMapping("employee.do")
@ResponseBody
public ArrayList<WealthDevelop> employeeList(@RequestParam("useCode") String Code, Model model) {
System.out.println("Code : " + Code);
String userName = Cservice.selectUserName(Code);
ArrayList<WealthDevelop> Wlist = new ArrayList<WealthDevelop>();
Gson gson = new Gson();
Wlist = Wservice.selectUserList(userName);
if (userName == null) {
} else if (Wlist.isEmpty()) {
JDialog dialog = new JDialog();
dialog.setAlwaysOnTop(true);
JOptionPane.showMessageDialog(dialog, "값이 비어있습니다..");
} else {
model.addAttribute("wealthList", gson.toJson(Wlist));
}
return Wlist;
}위에 JSP에서 전송한 데이터를 기반으로 Controller를 제작합니다.
Service를 거쳐서 Store(DB)에서 해당 원하는 값들을 객체로 받아오구
객체를 Json형태로 변환해서 Ajax로 리턴해주면 끝!
위에 코드들을 돌리면 위와 같은 사진처럼 나오게 됩니다.
여기서 보안상 애매한 것들은 모자이크하거나 아니면 텍스트로 수정했습니다.
무튼 이렇게 Ajax을 이용해봤습니다.
사실 모든 코드를 포스팅 하기 어렵지만
인턴이 끝난다면 그동안 했던 프로젝트에서 필요하거나 중요하다고 생각되는 소스들을
다시 수정해서 포스팅 해보도록 할 예정입니다!
다음에는 더 좋은 포스팅으로 찾아오겠습니다!
'Programing > Java & Spring' 카테고리의 다른 글
| IT세무민의 코딩일기 : QR코드 제작하기 (2) | 2021.01.04 |
|---|---|
| IT세무민의 코딩일기 : JqGrid를 이용해서 테이블을 손쉽게 만들어봅시다 (2) | 2020.12.16 |
| 코딩 일기 : grid나 js파일이 정상 작동을 하지 않는다...(이론) (0) | 2020.12.03 |
| 자투리 시간에 만드는 개인 포토폴리오 프로젝트! vo1 : 무료 Boot 다운받아서 파일 로드와 파일 설정하기! (0) | 2020.11.20 |
| 공공데이터포털의 데이터를 이용하여 json 파일을 만들어보자! ver3 [DataFrame과 코드 변형하기] (0) | 2020.11.19 |