Spring 13일차 - Mybatis연동, JSON

2020.11.13(금)

SpringMybatisProject

pom.xml, WEB-INF/lib폴더에 ojdbc14.jar복붙

 

web.xml (4버전 xml사용 방식설정)

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 5버전 -->
        <!--<init-param>
            <param-name>contextClass</param-name>
            <param-value>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value>
        </init-param>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>com.sist.config.AppConfig</param-value>
        </init-param>-->
        
        <!-- WebApplicationContext(4버전) -->
        <!-- application-*.xml 사용할 때 -->
        <init-param>
        <param-name>ContextConfigLocation</param-name>
        <param-value>/WEB-INF/config/application-*.xml</param-value>
        </init-param>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
    <!-- 한글 변환 -->
    <filter>
        <filter-name>encodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
            <init-param>
                <param-name>encoding</param-name>
                <param-value>UTF-8</param-value>
            </init-param>
            <init-param>
                <param-name>forceEncoding</param-name>
                <param-value>true</param-value>
            </init-param>
    </filter>
    <!-- /의 형식으로 시작하는 url에 대하여 UTF-8로 인코딩 -->
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>
 

 

web.xml(5버전 java com.sist.config/AppConfig.java 이용)

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 5버전 -->
        <init-param>
            <param-name>contextClass</param-name>
            <param-value>org.springframework.web.context.support.AnnotationConfigWebApplicationContext</param-value>
        </init-param>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>com.sist.config.AppConfig</param-value>
        </init-param>
        
        <!-- WebApplicationContext(4버전) -->
        <!-- application-*.xml 사용할 때 -->
        <!--  <init-param>
        <param-name>ContextConfigLocation</param-name>
        <param-value>/WEB-INF/config/application-*.xml</param-value>
        </init-param>-->
    </servlet>
    
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
    <!-- 한글 변환 -->
    <filter>
        <filter-name>encodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
            <init-param>
                <param-name>encoding</param-name>
                <param-value>UTF-8</param-value>
            </init-param>
            <init-param>
                <param-name>forceEncoding</param-name>
                <param-value>true</param-value>
            </init-param>
    </filter>
    <!-- /의 형식으로 시작하는 url에 대하여 UTF-8로 인코딩 -->
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>
 

 

com.sist.config

AppConfig (스프링5)

package com.sist.config;
 
import javax.sql.DataSource;
 
import org.apache.commons.dbcp.BasicDataSource;
import org.apache.ibatis.session.SqlSessionFactory;
import org.mybatis.spring.SqlSessionFactoryBean;
import org.mybatis.spring.mapper.MapperFactoryBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
 
@Configuration
@ComponentScan(basePackages={"com.sist.*"})
@EnableWebMvc
/*
 * Front: Jquery
 * Back: Spring => Oracle (Java 상용화) => 다른 언어가 필요 (Java, Kotlin)
 * => Spring-Boot
 */
// HandlerMapping, HandlerAdapter, HttpRequestHandler => 셋팅
public class AppConfig implements WebMvcConfigurer {
    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }
    /*
     <bean id="ds"
        class="org.apache.commons.dbcp.BasicDataSource"
        p:driverClassName="oracle.jdbc.driver.OracleDriver"
        p:url="jdbc:oracle:thin:@localhost:1521:XE"
        p:username="hr"
        p:password="happy"
    />
     */
    @Bean
    public DataSource dataSource(){
        BasicDataSource ds=new BasicDataSource();
        ds.setDriverClassName("oracle.jdbc.driver.OracleDriver");
        ds.setUrl("jdbc:oracle:thin:@localhost:1521:XE");
        ds.setUsername("hr");
        ds.setPassword("happy");
        return ds;
    }
    /*
     <bean id="ssf"
        class="org.mybatis.spring.SqlSessionFactoryBean"
        p:dataSource-ref="ds"
     />
     */
    @Bean
    public SqlSessionFactory sqlSessionFactory() throws Exception{
        SqlSessionFactoryBean ssf=new SqlSessionFactoryBean();
        ssf.setDataSource(dataSource());
        return ssf.getObject();
    }
    /*
     <bean id="mapper" class="org.mybatis.spring.mapper.MapperFactoryBean"
        p:sqlSessionFactory-ref="ssf"
        p:mapperInterface="com.sist.dao.MusicMapper"
     />
     */
    @Bean
    public MapperFactoryBean mapperFactoryBean() throws Exception{
        // class="org.mybatis.spring.SqlSessionFactoryBean"
        // 동일 MapperFactoryBean 메모리할당
        MapperFactoryBean m=new MapperFactoryBean();
        m.setSqlSessionFactory(sqlSessionFactory());
        m.setMapperInterface(com.sist.dao.MusicMapper.class);
        return m;
    }
    /*
     <bean id="viewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver"
        p:prefix="/"
        p:suffix=".jsp"
    />
     */
    @Bean
    public ViewResolver viewResolver(){
        InternalResourceViewResolver r=new InternalResourceViewResolver();
        /*
         * Class clsName=Class.forName("org.springframework.web.servlet.view.InternalResourceViewResolver")
         * Object obj=clsName.newInstqance()
         */
        r.setPrefix("/");
        r.setSuffix(".jsp");
        return r;
    }
    
}
 

 

WEB-INF/config폴더 생성해서 New Spring Bean Definition file

application-context.xml (aop, beans, c, context, mvc, mybatis-spring, p, tx(Transaction))

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:c="http://www.springframework.org/schema/c"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
    xmlns:p="http://www.springframework.org/schema/p"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
        http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring-1.2.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd">
    <context:component-scan base-package="com.sist.*"/>
    <bean id="ds"
        class="org.apache.commons.dbcp.BasicDataSource"
        p:driverClassName="oracle.jdbc.driver.OracleDriver"
        p:url="jdbc:oracle:thin:@localhost:1521:XE"
        p:username="hr"
        p:password="happy"
    />
    <!-- 마이바티스 설정 -->
    <bean id="ssf"
        class="org.mybatis.spring.SqlSessionFactoryBean"
        p:dataSource-ref="ds"
    />
    <bean id="mapper" class="org.mybatis.spring.mapper.MapperFactoryBean"
        p:sqlSessionFactory-ref="ssf"
        p:mapperInterface="com.sist.dao.MusicMapper"
    />
    <!-- ViewResolver -->
    <bean id="viewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver"
        p:prefix="/"
        p:suffix=".jsp"
    />
</beans>
 

 

DispatcherServlet => HandlerMapping ~RequestMapping("list.do")~

=> MusicController(List, VO) ~Model, List, VO, JSON(ajax,react,vue)~

=> ViewResolver (Model을 reqeust로 변환) => JSP

 

SQL

-- 댓글 => 댓글 추가시마다 => hit증가 (자동) => Trigger

ALTER TABLE genie_music ADD hit NUMBER DEFAULT 0;

 

src/main/java

com.sist.dao

MusicVO

package com.sist.dao;
/*
 이름        널? 유형             
--------- -- -------------- 
MNO          NUMBER(3)      
TITLE        VARCHAR2(300)  
SINGER       VARCHAR2(100)  
ALBUM        VARCHAR2(200)  
POSTER       VARCHAR2(1000) 
STATE        CHAR(6)        
IDCREMENT    NUMBER(3)      
KEY          VARCHAR2(50)  
 */
public class MusicVO {
    private int mno;
    private String title;
    private String singer;
    private String album;
    private String poster;
    private String state;
    private int idcrement;
    private String key;
    private int hit;
    public int getHit() {
        return hit;
    }
    public void setHit(int hit) {
        this.hit = hit;
    }
    public int getMno() {
        return mno;
    }
    public void setMno(int mno) {
        this.mno = mno;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getSinger() {
        return singer;
    }
    public void setSinger(String singer) {
        this.singer = singer;
    }
    public String getAlbum() {
        return album;
    }
    public void setAlbum(String album) {
        this.album = album;
    }
    public String getPoster() {
        return poster;
    }
    public void setPoster(String poster) {
        this.poster = poster;
    }
    public String getState() {
        return state;
    }
    public void setState(String state) {
        this.state = state;
    }
    public int getIdcrement() {
        return idcrement;
    }
    public void setIdcrement(int idcrement) {
        this.idcrement = idcrement;
    }
    public String getKey() {
        return key;
    }
    public void setKey(String key) {
        this.key = key;
    }
    
}
 

 

MusicMapper (interface)

package com.sist.dao;
import java.util.*;
 
import org.apache.ibatis.annotations.Select;
public interface MusicMapper {
    @Select("SELECT mno,title,singer,poster,album,state,idcrement,key,num "
            +"FROM (SELECT mno,title,singer,poster,album,state,idcrement,key,rownum as num "
            +"FROM (SELECT mno,title,singer,poster,album,state,idcrement,key "
            +"FROM genie_music ORDER BY mno ASC)) "
            +"WHERE num BETWEEN #{start} AND #{end}")
    public List<MusicVO> musicListData(Map map);
    
    @Select("SELECT * FROM genie_music "
            +"WHERE mno=#{mno}")
    public MusicVO musicDetailData(int mno);
    
    @Select("SELECT CEIL(COUNT(*)/10.0) FROM genie_music")
    public int musicTotalPage();
}
 

 

MusicDAO

package com.sist.dao;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import java.util.*;
 
// MusicDAO dao=new MusicDAO();
@Repository
public class MusicDAO {
    @Autowired
    private MusicMapper mapper;
    public List<MusicVO> musicListData(Map map){
        return mapper.musicListData(map);
    }
    public MusicVO musicDetailData(int mno){
        return mapper.musicDetailData(mno);
    }
    public int musicTotalPage(){
        return mapper.musicTotalPage();
    }
}
 

 

com.sist.web

MusicController

package com.sist.web;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
 
import java.util.*;
import com.sist.dao.*;
/*
 * public class ViewResolver{
 *     p
 */
@Controller
public class MusicController {
    @Autowired
    private MusicDAO dao;
    // GET, POST:url에 감춰서 (form,ajax)
    //a태그, sendredirect, ?는 다 get방식 -> default는 get
    @GetMapping("music/list.do")
    public String music_list(String page, Model model){
        if(page==null)
            page="1";
        int curpage=Integer.parseInt(page);
        Map map=new HashMap();
        int rowSize=10;
        int start=(rowSize*curpage)-(rowSize-1);
        int end=rowSize*curpage;
        map.put("start", start);
        map.put("end", end);
        List<MusicVO> list=dao.musicListData(map);
        int totalpage=dao.musicTotalPage();
        // 전송
        model.addAttribute("list",list);
        model.addAttribute("curpage", curpage);
        model.addAttribute("totalpage", totalpage);
        return "music/list"; //ViewResolver prefix="/"리턴값suffix=".jsp"
    }
}
 

 

jqueryui.com/dialog/

jqueryui.com/tabs/

 

src/main/webapp/music

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row{
    margin: 0px auto;
    width:900px;
}
</style>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
    //$( "#dialog" ).dialog();
    $('.btns').click(function(){
        let title=$(this).attr("value");
        let key=$(this).attr("key");
        let site="https://youtube.com/embed/"+key
        //$('#dialog').attr("title",title);
        $('#movie').attr("src",site);
        $("#dialog").dialog({ 
             autoOpen: true, 
             width: 430, 
             height:350,
             modal: true,
             title:title
        });
    
      });
  });
  </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <h3 class="text-center">뮤직 Top200</h3>
            <table class="table table-striped">
                <tr class="info">
                    <th class="text-center">순위</th>
                    <th class="text-center"></th>
                    <th class="text-center"></th>
                    <th class="text-center">곡명</th>
                    <th class="text-center">가수명</th>
                    <th class="text-center"></th>
                </tr>
                <c:forEach var="vo" items="${list }">
                    <tr>
                        <td class="text-center">${vo.mno }</td>
                        <td class="text-center">
                            <c:if test="${vo.state=='상승' }">
                                <font color="blue">▲</font>&nbsp;${vo.idcrement }
                            </c:if>
                            <c:if test="${vo.state=='하강' }">
                                <font color="red">▼</font>&nbsp;${vo.idcrement }
                            </c:if>
                            <c:if test="${vo.state=='유지' }">
                                <font color="gray">-</font>
                            </c:if>
                        </td>
                        <td class="text-center"><img src="${vo.poster }" width=35 height=35></td>
                        <td class="text-center">${vo.title }</td>
                        <td class="text-center">${vo.singer }</td>
                        <td class="text-center">
                            <span class="btn btn-sm btn-primary btns" value="${vo.title }" key="${vo.key }">실행</span>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
        <div class="row">
            <div class="text-center">
                <a href="list.do?page=${curpage>1?curpage-1:curpage }" class="btn btn-sm btn-success">이전</a>
                    ${curpage } page / ${totalpage } pages
                <a href="list.do?page=${curpage<totalpage?curpage+1:curpage }" class="btn btn-sm btn-warning">다음</a>
            </div>
        </div>
         <div id="dialog" title="" style="display:none">
         <iframe id="movie" src="" width="370" height="280"></iframe>
        </div>
    </div>
</body>
</html>

---

JSON

 

JSON을 이용해서 jsp로 뿌리기

 

src/main/webapp/movie

 

movie.json

{"datas":[{"actor":"가엘 가르시아 베르날 , 앤서니 곤잘레스 , 벤자민 브랫","director":"리 언크리치","grade":"전체","title":"코코","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80397\/80397_185.jpg","mno":1,"story":"영원히 기억하고 싶은 황홀한 모험이 시작된다! 뮤지션을 꿈꾸는 소년 미구엘은 전설적인 가수 에르네스토의 기타에 손을 댔다 \u2018죽은 자들의 세상\u2019에 들어가게 된다. 그리고 그곳에서 만난 의문의 사나이 헥터와 함께 상상조차 못했던 모험을 시작하게 되는데\u2026 과연 \u2018죽은 자들의 세상\u2019에 숨겨진 비밀은? 그리고 미구엘은 무사히 현실로 돌아올 수 있을까?"},{"actor":"김윤석 , 하정우 , 유해진 , 김태리 , 박희순 , 이희준","director":"장준환","grade":"15세 이상","title":"1987","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80320\/80320_185.jpg","mno":2,"story":"\u201C책상을 탁! 치니 억! 하고 죽었습니다\u201D 1987년 1월, 경찰 조사를 받던 스물두 살 대학생이 사망한다. 증거인멸을 위해 박처장(김윤석)의 주도 하에 경찰은 시신 화장을 요청하지만, 사망 당일 당직이었던 최검사(하정우)는 이를 거부하고 부검을 밀어붙인다. 단순 쇼크사인 것처럼 거짓 발표를 이어가는 경찰. 그러나 현장에 남은 흔적들과 부검 소견은 고문에 의한 사망을 가리키고, 사건을 취재하던 윤기자(이희준)는 \u2018물고문 도중 질식사\u2019를 보도한다. 이에 박처장은 조반장(박희순)등 형사 둘만 구속시키며 사건을 축소하려 한다. 한편, 교도소에 수감된 조반장을 통해 사건의 진상을 알게 된 교도관 한병용(유해진)은 이 사실을 수배 중인 재야인사에게 전달하기 위해 조카인 연희(김태리)에게 위험한 부탁을 하게 되는데\u2026 한 사람이 죽고, 모든 것이 변화하기 시작했다. 모두가 뜨거웠던 1987년의 이야기."},{"actor":"하정우 , 차태현 , 주지훈 , 김향기 , 이정재","director":"김용화","grade":"12세 이상","title":"신과함께-죄와 벌","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80090\/80090_185.jpg","mno":3,"story":"저승 법에 의하면, 모든 인간은 사후 49일 동안 7번의 재판을 거쳐야만 한다. 살인, 나태, 거짓, 불의, 배신, 폭력, 천륜 7개의 지옥에서 7번의 재판을 무사히 통과한 망자만이 환생하여 새로운 삶을 시작할 수 있다. \u201C김자홍 씨께선, 오늘 예정 대로 무사히 사망하셨습니다\u201D 화재 사고 현장에서 여자아이를 구하고 죽음을 맞이한 소방관 자홍, 그의 앞에 저승차사 해원맥과 덕춘이 나타난다. 자신의 죽음이 아직 믿기지도 않는데 덕춘은 정의로운 망자이자 귀인이라며 그를 치켜세운다. 저승으로 가는 입구, 초군문에서 그를 기다리는 또 한 명의 차사 강림, 그는 차사들의 리더이자 앞으로 자홍이 겪어야 할 7개의 재판에서 변호를 맡아줄 변호사이기도 하다. 염라대왕에게 천년 동안 49명의 망자를 환생시키면 자신들 역시 인간으로 환생시켜 주겠다는 약속을 받은 삼차사들, 그들은 자신들이 변호하고 호위해야 하는 48번째 망자이자 19년 만에 나타난 의로운 귀인 자홍의 환생을 확신하지만, 각 지옥에서 자홍의 과거가 하나 둘씩 드러나면서 예상치 못한 고난과 맞닥뜨리는데\u2026 누구나 가지만 아무도 본 적 없는 곳, 2017년 새로운 세계의 문이 열린다!"},{"actor":"드웨인 존슨 , 잭 블랙 , 케빈 하트 , 카렌 길런","director":"제이크 캐스단","grade":"12세 이상","title":"쥬만지: 새로운 세계","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000079\/79927\/79927_185.jpg","mno":4,"story":"학교 창고를 청소하다가 낡은 \u2018쥬만지\u2019 비디오 게임을 발견한 네 명의 아이들. 게임 버튼을 누르는 순간 화면 속으로 빨려 들어가버렸다! 거대한 몸집의 고고학자 닥터 브레이브스톤(드웨인 존슨)으로 변한 공부벌레 스펜서, 슈퍼 여전사 루비 라운드하우스(카렌 길런)가 된 운동신경 제로 마사, 저질체력의 동물학 전문가 무스 핀바(케빈 하트)가 된 예비 풋볼선수 프리지, 중년의 지도 연구학 교수 셸리 오베론(잭 블랙)으로 변해버린 SNS 중독 퀸카 베서니까지. 이들은 자신의 아바타가 가진 능력으로 게임 속 세계를 구하는 미션을 수행하고 현실로 돌아가야만 하는데\u2026. 전설의 게임이 다시 시작된다!"},{"actor":"휴 잭맨 , 잭 에프론 , 레베카 퍼거슨 , 미셸 윌리엄스","director":"마이클 그레이시","grade":"12세 이상","title":"위대한 쇼맨","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80066\/80066_185.jpg","mno":5,"story":"불가능한 꿈, 그 이상의 쇼! 쇼 비즈니스의 창시자이자, 꿈의 무대로 전세계를 매료시킨 남자 \u2018바넘\u2019의 이야기에서 영감을 받아 탄생한 오리지널 뮤지컬 영화 <위대한 쇼맨>. <레미제라블> 이후 다시 뮤지컬 영화로 돌아온 휴 잭맨부터 잭 에프론, 미셸 윌리엄스, 레베카 퍼거슨, 젠다야까지 할리우드 최고의 배우들이 합류해 환상적인 앙상블을 선보인다. 여기에 <미녀와 야수> 제작진과 <라라랜드> 작사팀의 합류로 더욱 풍성해진 비주얼과 스토리, 음악까지 선보일 <위대한 쇼맨>은 \u2018우리는 누구나 특별하다\u2019는 메시지로 관객들에게 재미는 물론, 감동까지 선사할 것이다. THIS IS ME! 우리는 누구나 특별하다!"},{"actor":"맷 데이먼 , 크리스토프 왈츠 , 크리스틴 위그","director":"알렉산더 페인","grade":"15세 이상","title":"다운사이징","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80067\/80067_185.jpg","mno":6,"story":"\u201C1억이 120억이 되는 세상! 돈 걱정, 집 걱정은 이제 끝났다!\u201D 평생을 같은 집에 살면서 10년째 같은 식당에서 저녁을 때우며 평범한 삶을 살아가는 폴. 아내의 유일한 소원인 더 넓은 집을 갖는 것도 대출 조건이 되지 않아 포기할 수 밖에 없다. 한편, 인구과잉에 대한 해결책으로 인간축소프로젝트인 다운사이징 기술이 개발된다. 이 기술은 단순히 부피를 0.0364%로 축소시키고 무게도 2744분의 1로 줄이는 것이 아니라 1억원의 재산이 120억원의 가치가 되어 왕처럼 살 수 있는 기회의 시작이기도 하다. 화려한 삶을 그리며 폴과 아내는 다운사이징을 선택하지만, 시술을 마친 폴은 아내가 가족의 곁을 떠나기 싫어 다운사이징 된 자신을 두고 도망갔다는 청천벽력 같은 소식을 듣게 된다. 커다란 저택, 경제적인 여유, 꿈꾸던 럭셔리 라이프를 살아가지만 이혼 후 모든 것이 무의미해져 버린 폴. 그리고 모든 꿈이 실현되리라 믿은 다운사이징 세상에서도 또 다른 위기가 그를 기다리는데\u2026 과연 폴은 자신이 꿈꾸던 행복한 삶을 찾아갈 수 있을까?"},{"actor":"존 시나 , 케이트 맥키넌 , 지나 로드리게즈 , 안소니 앤더슨 , 데이빗 테넌트 , 미구엘 앙겔 실베스트레 , 후아네스","director":"카를로스 살다나","grade":"전체","title":"페르디난드","poster":"http:\/\/img.cgv.co.kr\/Movie\/Thumbnail\/Poster\/000080\/80412\/80412_185.jpg","mno":7,"story":"덩치만큼 러블리한 녀석이 온다 꽃을 사랑하는 소블리의 컴백홈 어드벤처 몸집은 거대하지만, 마음은 따뜻한 소블리 페르디난드. 세상에서 가장 좋아하는 것은 아름다운 꽃향기와 사랑스러운 친구 니나. 어느 날 꽃 축제를 구경 간 페르디난드는 벌에 엉덩이를 쏘이고 만다. 너무 아파서 날뛰는 모습을 오해한 사람들은 페르디난드를 싸움소 훈련장에 끌고 간다. 하지만 싸움은 해본 적도, 관심도 없는 페르디난드는 수다쟁이 염소, 시끌벅적 황소들, 깨방정 고슴도치 삼남매 친구들과 함께 집으로 돌아가기 위한 좌충우돌 모험을 시작한다."}]}

 

rank.json

{"datas":[{"rank":1,"title":"1987"},{"rank":2,"title":"신과함께-죄와 벌"},{"rank":3,"title":"쥬만지: 새로운 세계"},{"rank":4,"title":"코코"},{"rank":5,"title":"강철비"},{"rank":6,"title":"위대한 쇼맨"},{"rank":7,"title":"다운사이징"},{"rank":8,"title":"페르디난드"},{"rank":9,"title":"원더"},{"rank":10,"title":"쏘아올린 불꽃, 밑에서 볼까? 옆에서 볼까?"}]}

 

box.json

{"datas":[{"rank":1,"title":"신과함께-죄와 벌"},{"rank":2,"title":"1987"},{"rank":3,"title":"쥬만지: 새로운 세계"},{"rank":4,"title":"페르디난드"},{"rank":5,"title":"강철비"},{"rank":6,"title":"위대한 쇼맨"},{"rank":7,"title":"원더"},{"rank":8,"title":"극장판 포켓몬스터 너로 정했다!"},{"rank":9,"title":"너의 이름은."},{"rank":10,"title":"뽀로로 극장판 공룡섬 대모험"}]}

 

reserve.json

{"datas":[{"rank":1,"title":"1987"},{"rank":2,"title":"코코"},{"rank":3,"title":"신과함께-죄와 벌"},{"rank":4,"title":"쥬만지: 새로운 세계"},{"rank":5,"title":"페르디난드"},{"rank":6,"title":"위대한 쇼맨"},{"rank":7,"title":"쏘아올린 불꽃，밑에서 볼까? 옆에서 볼까?"},{"rank":8,"title":"다운사이징"},{"rank":9,"title":"원더"},{"rank":10,"title":"강철비"}]}

 

 

movie.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style type="text/css">
.row{
    margin: 0px auto;
    width:900px;
}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
    //$("#dialog" ).dialog();
    $("#tabs" ).tabs();
    /*
        datas[{},{},{},{},{},{},{}]
        let value={"actor:"}
    */
    $.getJSON("movie.json",function(data){
        $.each(data["datas"],function(index,value){
            $('#mp').append(
                "<td><img src="+value.poster+" width=100 height=150 onclick=detail("+value.mno+")></td>"
            );
        })
    });
    $.getJSON("rank.json",function(data){
        $.each(data["datas"],function(index,value){
            $('#table1').append(
                "<tr><td>"+value.rank+"</td><td>"+value.title+"</td></tr>"
            );
        })
    });
    $.getJSON("box.json",function(data){
        $.each(data["datas"],function(index,value){
            $('#table2').append(
                "<tr><td>"+value.rank+"</td><td>"+value.title+"</td></tr>"
            );
        })
    });
    $.getJSON("reserve.json",function(data){
        $.each(data["datas"],function(index,value){
            $('#table3').append(
                "<tr><td>"+value.rank+"</td><td>"+value.title+"</td></tr>"
            );
        })
    });
  });
  
  function detail(mno){
      $.getJSON("movie.json",function(data){
            $.each(data["datas"],function(index,value){
                if(value.mno==mno){
                    $('#poster').attr("src",value.poster);
                    $('#title').text(value.title);
                    $('#director').text(value.director);
                    $('#actor').text(value.actor);
                    $('#genre').text(value.genre);
                    $('#grade').text(value.grade);
                    $('#story').text(value.story);
                    $("#dialog").dialog({ 
                         autoOpen: true, 
                         width: 450, 
                         height:550,
                         modal: true,
                    });
                    return true;
                }
            })
        });
  }
  </script>
</head>
<body>
<div class="container">
    <div class="row">
        <h3 class="text-center">영화</h3>
        <table class="table">
            <tr id="mp"></tr>
        </table>
    </div>
    <div class="col-sm-6">
        <div id="tabs">
          <ul>
            <li><a href="#tabs-1">영화순위</a></li>
            <li><a href="#tabs-2">박스오피스</a></li>
            <li><a href="#tabs-3">예매율</a></li>
          </ul>
          <div id="tabs-1">
              <table class="table" id="table1">
              
              </table>
          </div>
          <div id="tabs-2">
              <table class="table" id="table2">
              
              </table>
          </div>
          <div id="tabs-3">
              <table class="table" id="table3">
              
              </table>
          </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div id="dialog" title="영화 상세" style="display:none">
            <table class="table">
                <tr>
                    <td width="30%" class="text-center" rowspan="5">
                        <img src="" width=100% id="poster">
                    </td>
                    <td colspan="2" id="title"></td>
                </tr>
                <tr>
                    <td width=20% class="text-right">감독</td>
                    <td width=50% class="text-left" id="director"></td>
                </tr>
                <tr>
                    <td width=20% class="text-right">출연</td>
                    <td width=50% class="text-left" id="actor"></td>
                </tr>
                <tr>
                    <td width=20% class="text-right">장르</td>
                    <td width=50% class="text-left" id="genre"></td>
                </tr>
                <tr>
                    <td width=20% class="text-right">등급</td>
                    <td width=50% class="text-left" id="grade"></td>
                </tr>
                <tr>
                    <td colspan="3" valign="top" id="story"></td>
                </tr>
            </table>
        </div>
    </div>
</div>
 
</body>
</html>

---

@responsebody 한글깨짐

application-context.xml mvc

<mvc:annotation-driven>
    <mvc:message-converters>
        <bean class="org.springframework.http.converter.StringHttpMessageConverter">
            <property name="supportedMediaTypes">
                <list>
                    <value>text/html;charset=UTF-8</value>
                </list>
            </property>
        </bean>
    </mvc:message-converters>
</mvc:annotation-driven>

 

Controller - 화면전송

RestController - 데이터, json 전송