8. CRUD 연동 연습

SelectList: function () {
            const vm = this;
            axios({
                url: "/SelectList.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {},
            })
                .then(function (response) {
                    console.log("SelectList - response : ", response.data);
                    vm.cctvdataList = response.data;
                })
                .catch(function (error) {
                    console.log("dataList - error : ", error);
                    alert("유저 목록 조회에 오류가 발생했습니다.");
                });
        },

 

이코드는 cctv 목록 조회 코드인데 이건 vue컴포넌트의 SelectList 메서드라고 부른다.

           

---

const vm = this;

const vm = this; 이코드는 인스턴스를 만들어주는건데 

내가 지금 하고있는 일(인스턴스)을 vm이라고 만들어주는것이다. 

vm 코드를 바로 가져다가 then  안에서 처리하면 오류가 나기 때문에 이용 

---

data는 뭐하는거고 왜 새로운 객체 빈 객체에 저장 시켜야되는지 

 

요청을 보낼 때는 data에 적어준다. 
cctvnewData 같은 객체에 요청에 필요한 데이터(예: cctv_index, cctv_name 등)을 저장

결과적으로 이거줘 하면 이거 주는거

요청을 받았을 때
응답으로 받은 데이터는 cctvemptyData와 같은 다른 객체에 저장할 수 있습니다. 이를 통해 새로운 CCTV 데이터를 저장하고, 이 데이터를 화면에 반영

결과적으로 이거줘 하면 이거 주고 받은 데이터를 빈곳에 넣고 그 빈곳 데이터를 
새로운곳에 저장시켜서 다시 빈곳을 만들어준다.
한마디로   vm.cctvnewData = vm.cctvemptyData;


이렇게 데이터를 두 단계에 걸쳐 저장하는 이유는, 서버로부터 받은 데이터가 우리가 원하는 형태가 아닐 수 있기 때문

 

---

통신은 우째 하니?

이코드를 통신하기 위해선 백엔드 프론트엔드가 필요한데

간단 흐름을 말하면 프론트엔드에서 요청을 보내서 백엔드에서 그요청을 받아서 
데이터를 수정,삭제,등록하고 요청을 처리하는것은 데이터베이스에서 수행한다.
그런후 컨트롤 코드에서 프론트로 전달한다. 이때 전달은 보통 json형태로 전달해주고
이 데이터를 프론트엔드에서 받아서 SelectList에있는 .then이 실행되고
오류가 났을때는 잡아가지고 오류라고 띄어준다.

---

Mybatis 과 data 요청에 관한 사실

 

 data: { cctv_index : vm.cctvnewData}, 

 

 

 

 

<update id="equipmentdataUpdate" parameterType="HashMap">
    UPDATE cctv
    SET
        cctv_name = #{cctv_name},
        cctv_id = #{cctv_ID},
        cctv_pw = #{cctv_ws}
    WHERE
        cctv_index = #{cctv_index}
</update>

 

여기서 mybatis에서는 

 

내가 적을 요소 name 과 id ws 를 set에 적어주고 

여기와똑같이 요소가 있어야되는데 cctvnewData 값이 저기 cctv_name 과 cctv_ID cctv_ws 를 프론트엔드에서 요청을 해줘야된다. 

 

 

            // 입력 cctv
            cctvnewData : {
                cctv_index : null,
                cctv_name : null,
                cctv_ID : null,
                cctv_ws : null,
                cctv_date : null,
            },

---