Vue.js :: 비동기 통신으로 controller에서 view 단으로 데이터 넘겨주기(Spring, ajax, jqeury, MariaDB 연동)

 

 

 

vue.js 란?

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다. 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수 있다. Vue 앱은 단일 DOM 요소(#app)에 연결되어 DOM 요소를 완전히 제어하고, HTML은 엔트리 포인트일뿐 다른 모든 것은 새롭게 생성된 Vue 인스턴스 내에서 발생한다.

 

 

 

학원에서 진행하였던 스프링 프로젝트에 vue js를 적용해보았다.

가볍게 db에 있는 데이터를 이용하여 영화 리스트의 전체 수를 view단에서 보여주었다.

 

 

 

1. 프로젝트 세팅

기존에 있는 영화 대여점 프로젝트에 vue를 적용하였다.

밑의 블로그를 참고하였다.

 

https://memme.tistory.com/159

이클립스 Spring 프로젝트에서 Vue.js 사용하기

 

 

 

2.  Controller

package com.gd.sakila.controller;

// ...생략...

@Controller
@RequestMapping("/admin")
public class FilmController {
	@Autowired
	FilmService filmService;
	
    // 영화 전체 수
	@RequestMapping(value = "/getFilmTotalCount")
	public @ResponseBody int getFilmTotalCount() {
		System.out.println(filmService.getFilmTotalCount());
		return filmService.getFilmTotalCount();
	}

	// ... 생략 ...
}

먼저, 컨트롤러, 서비스, 쿼리를 작성하여 원하는 데이터를 가져온다.

 

* 주의할 점

@RequestMapping(value = "/getFilmTotalCount")에서  value 값에 오타가 발생하면 해당 메서드가 실행되지 않으니 주의한다.

 

 

 

3. Service

package com.gd.sakila.service;

// ...생략...

@Service
public class FilmService {
	@Autowired FilmMapper filmMapper;
	
    // ...생략...
    
	// 영화 전체 수
	public int getFilmTotalCount() {
		return filmMapper.getFilmTotalCount();
	}
}

 

 

 

4. Mapper.java

package com.gd.sakila.mapper;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;

import com.gd.sakila.vo.Film;

@Mapper
public interface FilmMapper {
	// ...생략...
    
	// 영화 전체 수
	public int getFilmTotalCount();
}

 

 

 

5. Mapper.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="com.gd.sakila.mapper.FilmMapper"> 
	<!-- 영화 전체 수 -->
	<select id="getFilmTotalCount" resultType="int">
		SELECT 
			count(*) totalCnt
		FROM film
	</select>
	
	<!--생략-->
</mapper>

 

 

 

6. Jsp

먼저, 원하는 위치에 <div> 태그를 작성한다. 

<div id="app">
  Film Count: {{ getFilmTotalCount() }} {{ totalCnt }}
</div>

 

new Vue()

<script>
$(document).ready(function(){
	new Vue({
		
        // ... 생략 ...
    })
});
</script>

새로운 vue를 선언해 주고 그 안에 el, data, mounted, methods등의 뷰 인스턴스를 작성한다.

* 뷰 인스턴스에 대해선 추후에 정리하도록 하겠다.

 

el: '태그이름'

<script>
$(document).ready(function(){
	new Vue({
		el: '#app',
		// ... 생략...
    })
});
</script>

<div>태그의 id 값을 넣어 매핑해준다.

 

data

<script>
$(document).ready(function(){
	new Vue({
		//...생략...
		data : function() {
			return {
				totalCnt : 0
			}
		},
		//...생략...
    })
});
</script>

data 리턴 값에 변수를 선언해주면 {{ 변수 }}를 이용하여 원하는 데이터 값을 화면에 보여줄 수 있다.

 

methods

<script>
$(document).ready(function(){
	new Vue({
		//...생략...
		methods : {
			getFilmTotalCount : function(){
				$.ajax({
					url : '${pageContext.request.contextPath}/admin/getFilmTotalCount',
					type : 'get',
					context: this,
					success: function(data) {
						this.totalCnt = data;
					}
				});
			}
		}
    })
});
</script>

함수를 정의하고 data 객체 등을 사용하여 계산된 값을 리턴해준다. 

 

url:해당하는 컨트롤러의 메서드 value 값을 넣어주는데, 이때 controller에서 @RequestMapping("경로")의 이 경로도 앞에 붙여줘야 매핑이 된다.

 

type:

단순 데이터 조회이기 때문에 type은 get방식으로 설정하였다.

 

success:

success 함수는 ajax가 잘 작동하면 실행되는데 이때 위에 data에서 선언한 변수의 값을 controller에서 리턴된 data값으로 변경해준다.ex) this.data에서 선언한 변수 = controller에서 리턴된 data

 

* this.변수 가 변경되지 않는 오류 해결 방법

윗 단계까지만 했더니 변수(totalCnt)가 화면에서 계속 0으로 변하지 않는 오류가 발생하였다.

ajax에서 context: this를 설정해주면 값이 잘 변경된다.

 

전체 코드:

 

 

웹 서비스 페이지:

영화 전체 수가 잘 나오고 있는 것을 확인할 수 있다.

 

 

 

 

 

github:

https://github.com/seoh2k/sakila/commit/05c5a2c3008ff73f42c1bfe47032c81e7c35b153

Vue.js로 controller와 view단의 비동기 통신 구현(영화 전체 수) · seoh2k/sakila@05c5a2c