BoF
178
2020-07-31 23:38:53
13
2992

Vue.us에서 json 데이터 받는것에 대해서 질문드립니다.


안녕하세요 vue.js를 사용해서 웹 페이지를 만드는데 막히는 부분이 있어서 질문드립니다.

vue.js를 처음 사용하면서 json 으로 데이터를 받아 적용하려고 합니다. 예를들어 example.com/test라는 링크로 json object를 보내면 vue.js에서 그 json object를 받아 그 안의 값을 추출하여 변수에 할당하고 싶은데 구글링해서 찾아보면 json의 값을 고정된  값을 사용하거나 아니면 json파일을 불러오는 식으로 하는 글만 찾아볼수 있습니다.

혹시 이런 방법에 대해서 아시는분 있으면 도움을 부탁드리고자 글을 쓰게 되었습니다.

7월 마지막날인데 좋은 하루 마무리 하시길 바라겠습니다.


0
  • 답변 13

  • seacont
    82
    2020-08-01 00:03:55

    이런걸 말씀하시는건가요?

    mounted() {
      axios
        .get('http://example.com/test')
        .then((res) => console.log(res.data));
    }
    mounted() {
      fetch('http://example.com/test')
        .then((res) => res.json())
        .then((res) => console.log(res));
    }
  • BoF
    178
    2020-08-01 00:05:56

    @seacont 아직 vue.js를 잘 몰라서 어떤의미인지는 잘 모르지만 한번 해보겠습니다 감사합니다!


  • BoF
    178
    2020-08-01 00:19:34

    @seacont 혹시 이렇게 추가하는게 맞나요?

    export default {
    data() {
    return {
    id: "",
    pw: "",
    };
    },
    mounted() {
    fetch('http://example.com/test')
    .then((res) => res.json())
    .then((res) => console.log(res));
    },
    -1
  • seacont
    82
    2020-08-01 00:38:02

    네, 아래처럼 해보세요.

    export default {
        data() {
            return {
                id: "",
                pw: "",
            };
        },
        mounted() {
            fetch('http://example.com/test')
                .then((res) => res.json())
                .then((res) => {
                  this.id = res.id;
                  this.pw = res.pw;
                });
        },


  • BoF
    178
    2020-08-01 01:00:02

    @seacont

    안되네요 ㅠㅠ

    export default {
            data() {
                return {
                    id: "",
                    pw: "",
                };
            },
            mounted() {
                fetch('https://example.com/test')
                .then((res) => res.json())
                .then((res) => {
                    this.id = res.id;
                    this.pw = res.pw;
                })
                console.log(res)
            },

    우선 알려주신대로 이렇게 코드를 짜고(Login.vue)안에

    postman으로 https://example.com/test로 post랑 get요청을 보냈는데도 계속 똑같은 오류가 뜹니다..ㅠㅠ

    사진이 좀 꼬였는데 json을 보낼때 data()안의 id, pw로 해도 계속 오류가 뜹니다..ㅠㅠ


  • BoF
    178
    2020-08-01 01:10:26

    @seacont 아니면 자바에서 class 파일을 만들고 그 클래스 파일에서 vue.js로 json값을 가져오는 방법은 있을까요? 지금 자바 클래스로 json 데이터를 받아오는건 성공했는데 이것을 vue로 옮기는 방법도 몇시간째 찾아봤는데 도저히 안나오더라구요 ㅠㅠ

  • seacont
    82
    2020-08-01 01:16:11

    example.com 서버가 /test 단에 대한 GET, POST 요청을 받아줘야 하는데 그렇지 않기 때문에 404 에러가 뜨는 것입니다. 아래 서버처럼 GET 요청을 받아주는 서버에 요청을 하셔야 합니다. (링크)

    export default {
            data() {
                return {
                    id: "",
                    pw: "",
                };
            },
            mounted() {
                fetch('https://cat-fact.herokuapp.com/facts/random')
                .then((res) => res.json())
                .then((res) => {
                    this.id = res.type;
                    this.pw = res.text;
                    console.log(res);
                })
    
            },
  • BoF
    178
    2020-08-01 02:25:05

    @seacont GET 요청을 받아주는 서버에 요청을 해야한다고 하셨는데 서버에서


    @RestController // 데이터를 전송하기 위한 컨트롤러
    public class GetJson {
        @PostMapping("/login")
        public Jsonp login(@RequestBody Jsonp jsonobject) {
            Jsonp object = new Jsonp();
            String id = object.getId();
            String pw = object.getPw();
            return jsonobject;
        }
    }
    

    이렇게 하고 postman으로 https://example.com/login으로 보냈을때 json 형식으로 값 반환은 잘 됩니다.

    하지만 인터넷 페이지에서 https://example.com/login?jsonobject={"id":"1123","pw":"1sdfas"}이렇게 보내도 404에러가 뜨고 https://example.com/?jsonobject={"id":"1123","pw":"1sdfas"}이렇게 해도 404에러가 뜹니다.

    원래 계획했던건 https://example.com/login으로 json데이터함께 보낼시에 json데이터를 뽑아서 특정 변수에 저장 시키고, 그 변수를 이용해서 회원가입을 구현하려고 했는데 도저히 답이 안나와서 계속 헤매이고 질문을 드리는거 같습니다 ㅠㅠ 위 코드에서 GetMapping이나 PostMapping으로 해도 url로 접속시에는 계속 값이 안들어간다고 뜨네요 ㅠㅠ

  • seacont
    82
    2020-08-01 10:06:38

    example.com은 전세계 도메인을 관리하는 최상위 기관에서 독점적으로 보유하고 있는 도메인으로서 해당 도메인에 연결된 서버는 /login단 /test단 등에 대한 요청을 받지 않습니다.

    위 자바코드는 서버의 자바코드로서 저 코드가 실행되는 서버가 있을 것입니다. 그 서버에 대한 주소가 IP주소이든 도메인네임 주소이든 해당 주소로 fetch(‘자바코드가 있는 서버주소’ + ‘/login’)를 요청해야 저 서버에서 리턴값을 Vue에 돌려주게 됩니다.

    따라서 저 코드를 실행해놓은 후 포스트맨으로 (저 서버의 주소가 아닌 별도의 서버주소인) example.com으로 요청을 보냈을 때 json 형식으로 값반환이 잘되었다는 것이 의아하네요. 혹시 포스트맨으로 요청 후 json값이 잘 받아졌다는 화면을 캡처해서 보여주시겠어요?

  • BoF
    178
    2020-08-01 12:21:35 작성 2020-08-01 12:26:43 수정됨

    우선 이게 postman 으로 값을 보낼때 수신되는 화면입니다.

    그리고 제가 원하는건 localhost/login으로 json데이터를 보내고, 지문인증 버튼을 누를때 json으로 보낸 값이 자동으로 변수에 할당되서 바로 회원가입이 되도록 진행하는 것입니다.


  • BoF
    178
    2020-08-01 12:26:57


  • 도리도리s
    222
    2020-08-02 13:58:32 작성 2020-08-02 14:04:21 수정됨

    Vue에서든 postman에서는 아래 컨트롤러로 데이터가 잘 받아지나요??

    일단 첫번째로 수신받은 데이터가 @RequestBody Jsonp jsonobject 담기게 될텐데

    jsonobject 값이 잘 들어오는지 확인해보셔야 할 것 같습니다.


    @RestController // 데이터를 전송하기 위한 컨트롤러
    public class GetJson {
        @PostMapping("/login")
        public Jsonp login(@RequestBody Jsonp jsonobject) {
            Jsonp object = new Jsonp();
            String id = object.getId();
            String pw = object.getPw();
            return jsonobject;
        }
    }


    그리고 아래 코드를 적으신 이유가 있는 건가요?? 받아온 Json객체를 콘솔에 출력값을 보고 싶다면

    바로 jsonobject에서 사용하시면 되는데 아래와 같이 Jsonp object는 new 생성자로 인스턴스를 새로 만드신 것이기 때문에 id와 pw를 get해도 아무 데이터가 없습니다.

    Jsonp object = new Jsonp();
            String id = object.getId();
            String pw = object.getPw();


    두번째로 vue에서

    mounted() {
      axios
        .get('http://example.com/test')
        .then((res) => console.log(res.data));
    }

    axios get요청을 하셨는데 같이 넘기는 parameter나 데이터형태가 없네요...


    세번째로 인터넷 브라우저에서  https://example.com/login?jsonobject={"id":"1123","pw":"1sdfas"} 이런식으로 바로 입력하게 되면 데이터를 전달하지 못합니다.

    일단 login 컨트롤러에서 jsonobject라는 parameter로 데이터를 받는게 아니기도 할 뿐더러, url에 괄호와 따옴표등 특수문자를 입력한 상태로 전달할 경우 잘못된 url로 인식될 확률이 매우 높습니다.

    해당 컨트롤러에서 @RequestBody로 선언한 Jsonp 객체는 수신데이터를 jsonp 객체로 변환해서 jsonobject라는 이름으로 메모리에 할당한다는 것뿐이지 데이터를 요청할 때 jsonobject라는 parameter로 사용할 수 있다는 것을 뜻하지 않습니다. 따라서 브라우저에 위와 같은 형식으로 직접 입력한다면

    데이터가 없기 때문에 404 code를 반환하는게 맞습니다.


    그러나 postman에서 postman으로 https://example.com/login으로  보냈을때 json 형식으로 값 반환은 잘 됩니다.

    라고 말씀하신건 postman에서 json타입의 객체를 잘 넘겼고 그걸 당연히 jsonobject라는 객체에 잘 받았기 때문입니다. 고로 데이터가 존재하는 것이구요

    즉 사진과 같이 postman에서 요청하신 형태랑  https://example.com/login?jsonobject={"id":"1123","pw":"1sdfas"}  이형태가 동일한게 절대 아닙니다!


    위와 같은 형태로 브라우저에 입력하셨을 때 IDE 콘솔에서 Jsonp jsonobject 라고 선언하신 객체에 데이터가 찍히는지 sysout이든 log등으로 찍어보시면 안나올 것입니다.



  • seacont
    82
    2020-08-03 12:27:45

    올려주신 캡처화면을 보면 https://localhost:8080/login으로 POST 요청을 보냈을 때 정상적으로 json 응답이 수신되는 것을 확인할 수 있는데, Vue에서도 위 주소로 POST 요청으로 보내면 정상적으로 json 응답을 수신할 수 있을 것입니다.

    export default {
            data() {
                return {
                    id: "",
                    pw: "",
                };
            },
            mounted() {
                fetch('https://localhost:8080/login', {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json'
                  },
                  body: JSON.stringify({
                    id: '1123',
                    pw: '1sdfas'
                  })
                })
                .then((res) => res.json())
                .then((res) => {
                    this.id = res.id;
                    this.pw = res.pw;
                    console.log(res);
                })
    
            },

    예를들어 example.com/test라는 링크로 json object를 보내면 vue.js에서 그 json object를 받아 그 안의 값을 추출하여 변수에 할당하고 싶은데 구글링해서 찾아보면 json의 값을 고정된  값을 사용하거나 아니면 json파일을 불러오는 식으로 하는 글만 찾아볼수 있습니다. ... (test라는 링크로 json object를 보내는 주체가 누구인가요?)

    원래 계획했던건 https://example.com/login으로  json데이터함께 보낼시에 json데이터를 뽑아서 특정 변수에 저장 시키고, 그 변수를 이용해서 회원가입을 구현하려고 했는데 도저히 답이 안나와서 계속 헤매이고 질문을 드리는거 같습니다 ㅠㅠ 위 코드에서 GetMapping이나 PostMapping으로 해도 url로 접속시에는 계속 값이 안들어간다고 뜨네요 ㅠㅠ ... (login으로 json데이터를 보내는 주체가 Vue라면 json 데이터를 뽑아서 특정 변수에 저장시키는 주체는 서버인가요? 아니면 그 주체 또한 Vue인가요?)

    그리고 제가 원하는건 localhost/login으로 json데이터를 보내고, 지문인증 버튼을 누를때 json으로 보낸 값이 자동으로 변수에 할당되서 바로 회원가입이 되도록 진행하는 것입니다. (지문인증 버튼을 누를 때 json으로 보낸 값이 자동으로 변수에 할당된다는 것의 의미는 서버의 /login단에 보냈던 json 데이터를 Vue가 그대로 저장하고 있다가 지문인증 버튼을 누를 때 한 번 더 활용하겠다는 뜻인가요? 아니면 지문인증 버튼을 누를 때 서버에서 아까 보냈던 json 데이터를 받아와서 활용하겠다는 뜻인가요?)

    저는 위의 말들이 이해가 되지 않습니다. 클라이언트와 서버로 주체를 명확히 기재해서 플로우를 기술해주시면 도움을 드릴 수 있을 것 같습니다. 예:

    1. 클라이언트에서 http://localhost:8080/login에 {id: '123', pw: '456'}으로 POST 요청

    2. 서버에서 해당 json을 어디에 저장, 응답으로는 {result: 'succeeded'} 등을 보냄

    3. 클라이언트에서 http://localhost:8080/fingerpring_auth에 {id: '123', pw: '456'}으로 POST 요청

    4. 서버에서 해당 json을 2에서 저장해놨던 json과 비교하여 같으면 응답으로 {result: 'authenticated'} 등을 보냄

  • 로그인을 하시면 답변을 등록할 수 있습니다.