spring(?)-뷰 맵핑시 한글 깨짐 현상, javascript 연결, 약간의 vue문법문제

스프링 부트 프로젝트시 필요한 뷰 연결 시 발생한 문제기도 하고,, 마땅히 적을 곳이 여기밖에 없다ㅎ

 

• 한글 깨짐 현상은 왜 일어났는지 모르겠다... 모든 인코딩을 utf-8로 설정해놨었는데 의문이다. 해결방법은 jsp파일에 이걸 추가해주면 된다. 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 

•  html에서 자바스크립트 파일 위치를 지정해줘야 하는데, js나 css를 resources/static 아래에 지정해둬야 하기에 조금 헷갈렸다. 다음과 같이 지정해주면 된다. 

resources/static/js/main.js   ->  <script src="/js/main.js"></script>

 

 

• 전에 vue를 이용해서 프로젝트를 하고 싶어서 vue공부를 조금 했었다. 전달받은 객체의 하이퍼링크가 맵핑이 잘 안 되었었다. 상기시키기 위한 정리를 하려고..

<div v-for="wish in wish_list">  wish_list로 여러 wishlist를 서버에 요청하여 받아온 상황이다. 
이제 각 wish마다 . 을 통해 속성을 받아올 수 있다. 
html태그의 속성을 지정해 주려면 :속성="value이름"으로 지정하면 된다. 
<a :href="wish.homePageLink">홈페이지</a>
</div>

 

 

부분 참고-출처:fastcampus

(function ($) {

    // 맛집 목록 vue object
    var wish_list = new Vue({
        el: '#wish-list',
        data: {
            wish_list : {}
        },
        methods: {
            addVisit: function (index) {
                $.ajax({
                    type: "POST" ,
                    async: true ,
                    url: `/api/restaurant/${index}`,
                    timeout: 3000
                });

                getWishList();
            },
            deleteWish: function (index) {
                $.ajax({
                    type: "DELETE" ,
                    async: true ,
                    url: `/api/restaurant/${index}`,
                    timeout: 3000
                });
                getWishList();
            }
        }
    });

    function getWishList(){
        $.get(`/api/restaurant/all`, function (response) {
            wish_list.wish_list = response;
        });
    }

})(jQuery);