[Django Tutorial] Blog 만들기 (16)

Vue-Django Read API

axios-list vue coding

django table로 부터 가져온 실제 데이터를 devServer에서 보여줄 수 있게 한다.

 

<template>
  <v-container>
    <v-data-table
      :headers="headers"
      :items="posts"
      sort-by="name"
      class="elevation-1"
      :items-per-page="5"
    >
      <template v-slot:top>
# 템플릿 내용 생략
      </template>
      <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
        <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
      </template>
      <template v-slot:no-data>
        <v-btn color="primary" @click="initialize"> Reset </v-btn>
      </template>
    </v-data-table>
  </v-container>
</template>

 

PostList.vue 파일을 보면 화면을 구성하는게 v-data-table이 전부다. :headers 와 :items 만 잘해주면 됨.

 

1

headers부터 보자

headers의 value에 넣을 값은 장고로부터 받은 데이터중에서 해당 커럼에 대응되는 변수명을 넣어주면 된다.

headers: [
      {
        text: "ID",
        align: "start",
        sortable: false,
        value: "name",
      },
      { text: "제 목", value: "title" },
      { text: "요 약", value: "description" },
      { text: "수정일", value: "modify_dt" },
      { text: "작성자", value: "owner" },
      { text: "Actions", value: "actions", sortable: false },
    ],

장고의 post쪽의 컬럼명과 동일함.

django의 models.py 변수부분

class Post(models.Model):

    title= models.CharField(verbose_name='TITLE',max_length=50) #제목
    description= models.CharField('DESCRIPTION', max_length=100, blank=True, help_text='simple description text.' )#요약
    content= models.TextField('CONTENT') #글내용
    create_dt= models.DateTimeField('CREATE DATE', auto_now_add=True) #생성날짜와 시간
    modify_dt= models.DateTimeField('MODIFY DATE', auto_now=True )#수정날짜와 시간
    tags= TaggableManager(blank=True)
    owner= models.ForeignKey(get_user_model(), on_delete=models.CASCADE, verbose_name='OWNER', blank=True, null=True)

물론 django에서 client로 데이터를 보낼때 json format의 key로 다른 이름을 사용할 수도 있지만 보통은 변경하지 않고 위의 컬럼명을 그대로 사용하는 경우가 많다.

 

2

posts를 보자.

data에는 posts: [] 로 비어있고

created() {
    this.initialize();
  },

  methods: {
    initialize() {
      this.posts = [
        {
          name: 1,
          calories: "Django 3.0 Released",
          fat: "2019년 12월 장고 3.0 버전 발표함.",
          carbs: "2020-07-13",
          protein: "Aiden",
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
        },

created()에서 initialize() 메서드를 호출해서 initialize()메서드에서 posts 변수에 내용이 채워진다.

이 부분을 장고로부터 데이터를 가져와서 posts 변수를 채워넣는 방식으로 코딩한다.

 

3

axios 라이브러리 설치:  npm install axios

보안취약점 문제로 인해 npm audit fix 명령 실행

script에 axios 임포트

 methods: {
    fetchPostList() {
      console.log("fetchPostList()...");

      axios.get('/api/post/list/')
      .then(res => {
        console.log("POST GET RES", res);
        this.posts = res.data;
      })
      .catch(err => {
        console.log("POST GET ERR.RESPONSE", err.response);
        alert(err.response.status + ' ' + err.response.statusText);
      });

    },

initialize() 날리고 fetchPostList()라는 새로운 메서드를 정의했다.

 

get에는 장고로 보낼 url을 넣고 then과 catch에는 화살표 함수 사용한다. 화살표함수 써야 this가 에러안남.

then의 콜백함수에는 장고로부터의 응답이 성공했을 경우의 로직을 넣는다. (res.data에 장고가 보내준 데이터가 들어있다. 이 데이터를 posts 변수에 대입한다.)

이를 통해 장고의 데이터가 posts로 들어가고 posts 내용은 v-data-table에 나타나게 된다.

catch의 콜백함수에는 장고로부터의 응답이 실패했을 경우의 로직을 넣는다. 실패일 경우 alert 띄우기

404같은 status code와 status text를 띄운다.

 

*axios에 사용되는 url들은 나중에 변경이 되더라도 유연하게 바꿀 수 있도록 별도의 파일(모듈)을 만들고 한 곳에 모아두는 것도 좋은 방법이다. 프로그램이 커질수록 url들이 점점 늘어날텐데 코딩들어가기전에 미리 정리해두자.

 

VueDjangoBlog URL 설계

URL 패턴	뷰 이름	템플릿 파일명
/admin/	(장고 기본 제공)
/	HomeView(TemplateView)	home.html
/blog/post/list/	PostLV(ListView)	post_list.html
/blog/post/99/	PostDV(DetailView)	post_detail.html
/api/post/list/	ApiPostLV(BaseListView)	(불필요)
/api/post/99/	ApiPostDV(BaseDetailView)	(불필요)
/api/tag/cloud/	ApiTagCloudLV(BaseListView)	(불필요)

아래 3줄이 axios 처리를 위해 새로 추가된 URL