Vue-서버와 통신

vue

<template>
   <div>
    <h1> Memo</h1>
    <p>
    <button class="btn btn-primary" @click="getlist">목록</button></p>
    <ul class="list-group">
        <li v-if="memoList.length == 0" class="list-group-item">게시물이 존재하지 않음</li>
        <li v-for="memo in memoList" :key="memo.memono" class="list-group-item"> {{ memo.subject }} <span class="badge"> {{ memo.readcnt }}</span> </li>
    </ul>
   </div>
</template>

<script>
export default {
/* eslint-disable */
  data() {
    return {
      memoList: []
    }
  },
  methods: {
    getlist() {
        //alert("getlist 호출")
        //fetch ajax통신 역할
        //promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그결과 값을 반환해 준다
        fetch('http://localhost:9095/memolist').then((response) => { if (response.ok) {
            //alert(response) [object response]
            //alert(response.json()) [object Promise]
            return response.json()
        }}).then((json) => {
            alert(json)
        this.memoList = json })
    }
  }
}
</script>

<style>
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css';
</style>

spring boot

controller

package kr.co.itwill.memo;

import org.json.simple.JSONObject;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

//@controller +responsebody
@RestController 
public class MemoCont {

	public MemoCont() {
		System.out.println(" MemoCont() 객체 생성 확인");
	}
	@RequestMapping("/memolist")
	public JSONObject[] memolist() {
		JSONObject dto1=new JSONObject();
		dto1.put("memnono", 1);
		dto1.put("subject", "무궁화 꽃이 피었습니다");
		dto1.put("writer", "오필승");
		dto1.put("readcnt", 5);
		
		JSONObject dto2=new JSONObject();
		dto2.put("memnono", 2);
		dto2.put("subject", "바람과 함께 사라지다");
		dto2.put("writer", "코리아");
		dto2.put("readcnt", 7);
		
		JSONObject[] jsons = {dto1,dto2};
		return jsons;
	}//
}

package kr.co.itwill;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

//클라이언트에서 접속할수 있도록 보안설정
//8080포트에서 온 HOST는 허용해 준다
@Configuration
public class WebConfig implements WebMvcConfigurer {
	
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		
		registry.addMapping("/**").allowedOrigins("http://localhost:8080");
		//8080에서 요청한 것에 대해서 답을 주겠다
	}

}