본문 바로가기
(멘토링 1)시각화 페이지 구축_강의/3주차: Spring: RestController, DataBinding

2. DataBinding을 위한 화면 구조 변경, 자원작성

by 디벨로펀 2019. 8. 23.

기존 Settingweb 프로젝트에서

home.jsp 파일은 jstl문법( <c:forEach items ... > ) 을 통해 DB조회 결과를 화면에 뿌렸다면,

restController를 이용한 방법에서는

restController로 데이터를 호출해서

해당 데이터를 html의 Dom 영역에 데이터를 바인딩해 줄 것입니다.

 

즉, 이번글에서는 home.jsp 파일을 데이터 처리를 위해 적절한 파일 구조로 만들고

몇가지 javascript 파일을 추가하여 home.jsp 파일에 로딩하도록 하겠습니다.

 

 

1) home.jsp

- <tbody> 태그 jstl 문법 제거 및 영역 id 매기기

- <head> 태그 안에 common_resource.jsp, home.js, home.css 호출

- 영화 목록 가져오기 버튼 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
 
<title>Home</title>
    <%@include file="./common_resource.jsp"%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/home.js"></script>
    <link href="${pageContext.request.contextPath}/resources/css/home.css" rel="stylesheet" />
 
</head>
<body>
    <h1>Hello world!</h1>
     <button id = "load_movieList" type = "button">영화 목록 가져오기</button>
    <table>
        <thead>
            <tr>
                <th>영화이름</th>
                <th>감독</th>
                <th>장르</th>
            </tr>
        </thead>
        <tbody id ="movieList" >
            <!--<c:forEach items="${movieList}" var="movie">
                <tr>
                    <td>${movie.movie_name}</td>
                    <td>${movie.director}</td>
                    <td>${movie.types}</td>
                </tr>
            </c:forEach>-->
        </tbody>
    </table>
 
 
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 기존 settingweb에서 만든 home.jsp파일에서 

tbody 태그의 id를 movieList로 하고 하위 태그인 jstl영역을 사용하지 않도록 주석 처리합니다.

 

그리고 home.jsp 파일에서 사용하기 위한 jsp파일, js파일, css파일을 가져올 수 있도록 <head>태그 안에 추가합니다.

 

또한, 버튼을 클릭(이벤트 발생)시 데이터를 가져올 수 있도록 load_movieList라는 id의 버튼을 추가하겠습니다.

 

 

 

2) common_resource.jsp, home.js, home.css, jquery-1.12.4.min.js 파일 추가

자원(resources) 추가

home.jsp에서 불러오는 common_resource.jsp, home.js, home.css 파일을 추가합니다.

common_resource.jsp 파일은 home.jsp와 같은 jsp파일임으로 home.jsp파일과 같은 위치인 View 아래에 작성할 것이며

이외 home.css, home.js, jquery-1.12.4.min.js 파일은 webapp아래의 resources 폴더 아래에

각각 css, js 폴더를 만들고 그 아래에 넣어 구분하겠습니다.

 

각 파일에 대해 설명을 하자면

- home.css는 웹페이지의 디자인을 위한 화면( 과제제출 멘티 분 중 잘하신 분 자원을 임의로 입힘 )

- home.js는 화면에서 동적으로 이용할 javascript 코드

- jquery-1.12.4.min.js 는 FrontEnd 개발을 쉽게 하기위한 library( 다운로드 받아 resource폴더 아래에 넣어주세요)

입니다.

 

***** 중요 *****

common_resource.jsp

1
2
3
4
5
6
7
8
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery-1.12.4.min.js"></script>
</head>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

common_resource.jsp 파일은 공통 자원이라는 뜻으로 jquery-1.12.4.min.js 를 불러오는 파일로 구성했으며

해당 프로젝트에 항상 사용하는 자원을 미리 만들어 놓는 파일입니다.

 

이를 구성하여 보여드리는 이유는

위와 같이 공통자원을 파일로 만들어 놓아

다른 화면을 만들 때 불러오도록 하면 개발을 좀 더 빠르게 진행 할 수 있음은 물론

유지보수시에도 빠르게 가독성이 올라감을 알려드리고자 함입니다.

 

 

3)servlet-context.xml 수정

servlet-context.xml 수정

자원을 웹에서 읽어오기 위해서 자원이 있는 곳을 맵핑 해주기 위해 Spring 관련 설정 영역인 servlet-context.xml에

아래 코드를 추가합니다.

 

js파일은 js폴더 아래에 css파일은 css폴더 아래에 있음을 명시하는 내용입니다.

1
2
3
4
    
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
    <resources mapping="/js/**" location="/resources/js/" />
    <resources mapping="/css/**" location="/resources/css/" />
    <resources mapping="/resources/**" location="/resources/" />
 
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
  

 

 

4) home.css : 화면 디자인 파일 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
body {
    color: #777777;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}
 
table {
    margin: auto;
    text-align: left;
    border-collapse: collapse;
    border-bottom: 1px solid #ddd;
}
 
thead {
    background-color: #333;
    color: #fff;
}
 
thead, tbody {
    display: block;
}
 
th, td {
    padding: 8px 10px;
    border: 1px solid #ddd;
    width: 130px;
}
 
tbody {
    height: 140px;
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

 

 

5) home.js 파일 작성

 - home.js에서는 버튼 클릭 시 movieList를 불러와 화면에 바인딩하는 코드를 작성할 것이며

    설명할 내용이 비교적 긴 관계로 다음 글에서 포스팅하겠습니다.

 

 

 

결과화면

 

 

'(멘토링 1)시각화 페이지 구축_강의 > 3주차: Spring: RestController, DataBinding' 카테고리의 다른 글

3. DataBinding을 위한 화면 구조 변경, 자원작성 (2)jquery  (2) 2019.08.23
1. Spring : RestController을 이용한 데이터 처리(jackson)  (0) 2019.08.23
RestController를 활용한 DataBinding, 요약  (0) 2019.08.23

관련글

댓글

티스토리툴바