[전자정부프레임워크] MariaDB 데이터를 JSP로 출력
[전자정부프레임워크] MariaDB 데이터를 JSP로 출력
이 게시물은 이전 게시물에서 이어집니다. [전자정부프레임워크] MariaDB 연동 설정 [전자정부프레임워크] MariaDB 연동 설정 이 게시물은 이전 게시물에서 이어집니다. [전자정부프레임워크] Controll
hansol94.tistory.com
[전자정부프레임워크] MariaDB 연동 설정
이 게시물은 이전 게시물에서 이어집니다. [전자정부프레임워크] Controller 생성해서 jsp 연결 [전자정부프레임워크] Controller 생성해서 jsp 연결 이 게시물은 이전 게시물에서 이어집니다. [전자정
hansol94.tistory.com
이전 게시물에서는 jsp의 EL 표기법과 JSTL 문법을 활용해서 브라우저에 DB에서 받아온 데이터를 출력했다. 하지만 EL 표기법과 JSTL로 데이터를 주고 받는 것은 범용성이 없다. 즉, JSP에만 한정되는 방식이라는 의미이다. 때문에 대부분 데이터의 전송 방식에는 JSON을 사용한다. 나도 JSON 에 익숙해지기 위해 JSON으로 데이터를 전송해보았다.
이전 게시물에서 사용해온 EgovController 와 view.jsp 만 수정하면 된다. 그리고 JSON을 사용하기 위해서는 라이브러리가 필요하다. 내가 사용할 라이브러리는 Jackson 라이브러리다. (Jackson보다는 Gson을 많이 사용한다는 말이 있다.)
pom.xml 과 dispatcher-servlet.xml 에 코드를 추가해야 한다.
pom.xml
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.11.3</version>
</dependency>
dispatcher-servlet.xml
id가 jsonView 인거를 기억하자
<bean class="org.springframework.web.servlet.view.BeanNameViewResolver">
<property name="order" value="0"/>
</bean>
<bean id="jsonView" class="org.springframework.web.servlet.view.json.MappingJackson2JsonView">
<property name="contentType" value="application/json;charset=UTF-8"> </property>
</bean>코드를 추가하고나서 프로젝트 클릭하고 Alt + f5를 눌러서 Maven을 업데이트한다.
이제 설정은 JSON을 사용하기 위한 설정은 끝났다. 다른 방법도 여러 가지 있는데, 이 방법이 나는 편했다. Controller에서 ModelAndView를 계속 사용할 것이다. VO나 Model 등의 다른 객체로도 가능은 하다. 22행에 문자열 jsonView를 jsonview 라고 해서 이것 때문에 한동안 헤맸다. 대소문자를 잘 봐야한다 ㅜ
@Controller
public class EgovController {
@Resource(name="egovService")
private EgovService egovService;
@RequestMapping("/view.do")
public ModelAndView dbPage() throws Exception {
ModelAndView mav = new ModelAndView("jsonView");
List<Map> semesterModel = egovService.getSemester();
mav.addObject("semester", semesterModel);
return mav;
}
}여기까지 하고 먼저 json으로 되는지 실행해본다.
그림과는 다르게 보기 불편하게 나올 수 있는데, 나는 크롬 확장 프로그램인 json viewer를 설치했기 때문에 이렇게 표시된다.
이제는 view.jsp에서 json 데이터를 전송 받아서 화면에 띄워보자. JQuery를 사용하기 때문에 라이브러리를 추가하고 ajax를 사용한다.
view.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json 테스트</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
</body>
<script>
$(function() {
$.ajax({
url : "/json.do",
type : 'GET',
dataType : 'json',
success : function(data) {
alert("ajax 성공");
console.log(data);
},
error : function(){
alert("ajax 실패");
}
});
});
</script>
</html>ModelAndView 생성자에 jsonView 는 아까 dispatcher-servlet.xml에서 설정한 id이다.
EgovController
@Controller
public class EgovController {
@Resource(name="egovService")
private EgovService egovService;
// view.jsp를 실행하기 위해 파일명에 해당하는 문자열만 반환
@RequestMapping("/view.do")
public String dbPage() throws Exception {
return "view"; // view.jsp 이기 때문에 view 문자열 반환
}
@RequestMapping(value="/json.do", method=RequestMethod.GET)
public ModelAndView jsonPage() throws Exception {
ModelAndView mav = new ModelAndView("jsonView");
List<Map> semesterModel = egovService.getSemester();
mav.addObject("semester", semesterModel);
return mav;
}
}이렇게해서 'ajax 성공' 이 뜨면 controller에서 jsp로 json이 전송이 된 것이다.
ctrl + shift + J 또는 f12를 눌러서 Console 탭에서 DB 값이 json으로 넘어왔다.
이걸 특정 열의 값만 출력하거나 길이만 출력하고 싶으면 배열에 담아서 그림과 같이 활용하면 된다.
semester[0].sem 같은 경우 0 대신 (for문 같은)반복문으로 index 변수 i 넣어서 출력하는 방법도 가능하다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>json 테스트</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
</body>
<script>
$(function() {
$.ajax({
url : "/json.do",
type : 'GET',
dataType : 'json',
success : function(data) {
alert("ajax 성공");
let semester = data.semester;
console.log(semester);
console.log(semester[0].sem);
console.log(semester.length);
},
error : function(){
alert("ajax 실패");
}
});
});
</script>
</html>
controller에서 jsp로 보내서 jsp를 통해 json 데이터들을 활용하는 방법에 대한 글들을 찾기가 어려웠다. 그래서 답답해서 내가 간단하게 활용하는 방법으로 정리했다. 다음에는 jsp에서 controller로 보내는 방법에 대해 정리할 것이다. 나는 항상 단순하고 효율적인 것이 좋다.
'개발 공부 > 전자정부프레임워크' 카테고리의 다른 글
| [전자정부프레임워크] MariaDB 데이터를 JSP로 출력 (0) | 2022.05.27 |
|---|---|
| [전자정부프레임워크] MariaDB 연동 설정 (0) | 2022.05.26 |
| [전자정부프레임워크] Controller 생성해서 jsp 연결 (0) | 2022.05.25 |
| [전자정부프레임워크] 프로젝트 생성 전후에 설정하기 (0) | 2022.05.25 |
| 전자정부프레임워크 - 프로젝트 생성 후 초기 설정 (0) | 2022.03.08 |