[FrontEnd] vue 백엔드 통신을 통한 리스트 구현

백엔드 통신을 통한 리스트 구현

1. 리스트 출력

: 백엔드와 통신하여 데이터베이스에 저장된 값을 받아 리스트로 저장한 뒤, 값을 화면에 출력

• 백엔드 통신 : axios를 이용하여 백엔드와 통신한다. 백엔드의 경로에 접근하여 원하는 데이터를 받아서 저장한다. 이때, 화면에 항상 출력해주기 위해서 값을 받아야하므로 해당 함수를 mounted에서 호출해준다.

<script>
  import axios from 'axios' // 통신을 위한 import
  import ClassHeader from './common/ClassHeader.vue' //헤더 추가
  export default {
    name: 'ClassMain',
    data : function(){
      return {
        classList : [] // 값을 저장할 변수
      };
    },
    methods: {
      //수업 리스트 출력
        getClassList() {
          // Http get 메서드로 요청
            let path = "";
          // path + query로 백엔드와 통신
            axios.get(path + this.$route.query.user_id
           ).then((res)=>{
            this.classList = res.data // 데이터를 받아서 저장, vue data에는 this로 접근
            console.log(this.classList)
          }).catch((err) => {
            console.log(err);
          });
        },mounted() { // 인스턴스가 마운트된 직후 호출
      this.getClassList(); // 항상 값을 보여주기 위해서 mounted에 호출
    }
      
</script>

classList : [{ classIdx : 1,
className : '이름',
status : 'active'}, { ... }, {.....}]

• 화면 출력 : v-for문을 사용하여 리스트에 저장된 값을 테이블 형태로 출력, v-if문을 사용하여 원하는 값만 출력

<template>
<div id="all">
  <ClassHeader />
  <div class ="list_name">
    <!--리스트의 item에 접근-->
  	<tr v-for="classItem in classList" v-bind:key="classItem.classIdx" >
      <!-- 리스트의 item 중 원하는 item만 출력 -->
  		<div v-if="classItem.status == 'active'" class = "class_list">
          <td style="cursor:pointer" id ="class_name">{{classItem.className}}</td>
     	</div>
    </tr>
  </div>
</div>

2. 리스트 수정

: 리스트에 저장된 값을 버튼 클릭시 해당 값을 수정하고 화면에 반영

2-1. patch를 이용한 수정

• 백엔드 통신: patch를 사용하여 수정할 값의 index를 백엔드에 넘겨주어 해당 값을 DB에서 수정한다.

<script>
  ....

	methods:{
    	....
    	}, ClassDelete(classItem) {
          let path = ""
          // patch를 이용한 통신
          axios.patch(path + classItem.classIdx).then((res)=>{
            console.log(res);
            this.$router.go(); //현재 페이지 새로고침
          }).catch((err) => {
            console.log(err);
          })
        }
....  
</script>

this.$router.go() : router 객체에서 제공하는 네비게이션 메소드, 인자로 넘겨주는 숫자만큼 히스토리 스택에서 앞으로 또는 뒤로 이동 가능, 아무것도 안 넘겨줄 경우 원래 페이지로 이동(새로고침)

• 버튼 클릭 이벤트 : 버튼 클릭시 함수 호출하도록 구현
  @click="함수이름(인자)" -> 해당 요소를 클릭할 시 함수가 호출됨

<template>
<div id="all">
  <ClassHeader />
  <div class ="list_name">
    <!--리스트의 item에 접근-->
  	<tr v-for="classItem in classList" v-bind:key="classItem.classIdx" >
      <!-- 리스트의 item 중 원하는 item만 출력 -->
  		<div v-if="classItem.status == 'active'" class = "class_list">
          <td style="cursor:pointer" id ="class_name">{{classItem.className}}</td>
          <!-- 버튼 클릭시 함수 호출-->
          <button style="cursor:pointer" type = "button" @click="ClassDelete(classItem)" id="edit_btn">삭제</button>
     	</div>
    </tr>
  </div>
</div>

2-2. put을 이용한 수정

• 백엔드 통신: put을 사용하여 수정할 값을 query 또는 params로 넘겨줌

<script>
  ....

	methods:{
    	....
    	}, ClassDelete(classItem) {
          let path = ""
          // patch를 이용한 통신
          axios.put(path + classItem.classIdx).then((res)=>{
            console.log(res);
            this.$router.go(); //현재 페이지 새로고침
          }).catch((err) => {
            console.log(err);
          })
        }
....  
</script>

• patch vs put 차이점
  : patch의 경우 부분 수정이 가능하여 수정할 필드의 값만 필요하나 put은 전체 수정을 해야하므로 수정할 모든 필드의 값이 필요함

3. 리스트 등록

: 원하는 값을 백엔드에 넘겨주어 DB에 저장

• 값 입력 : 값을 입력하여 vue 데이터에 저장하고, button 클릭시 값을 넘겨줄 함수 호출

...

<!-- vue 데이터인 class_name에 입력 값을 저장-->
<input v-model = 'class_name' type ="text" name = "class_name" id="class_name" placeholder="이름">
<!-- 버튼 클릭 이벤트 구현 -->
<button style="cursor:pointer" @click="registerClassName()" id = "name_btn">입력</button>
...

v-model: 값을 입력할 시 자동으로 vue 데이터에 연결하여 양방향 데이터 바인딩을 생성

• 백엔드 통신 : post를 사용하여 데이터를 백엔드에 넘겨줌

<script>
  ....

	data : function(){
      return {
       	class_name : '',
        ...
      };
    },
	methods:{
    	....
    	},registerClassName() {
          // 넘겨줄 데이터를 json 형태로 저장
          const classData = {"className": this.class_name, "userIdx" : this.$route.query.user_id}
          // post를 사용하여 백엔드 통신, 데이터를 넘겨줌
          axios.post(path, classData)
            .then((res) => {
            //통신 성공시
              console.log(res.data)
          }).catch((err) => {
            console.log(err);
          });
        },
          ....