Vuejs와 Django의 CRUD 중 C (todo list를 사용)

장고 서버와 뷰 서버를 둘 다 실행 시켜준다.

• 장고 프로젝트 폴더와, 뷰 프로젝트 폴더를 각자 vscode로 실행시켜 서버를 실행

 

장고 서버에서 api요청 해서 모델(DB)가져오기

• 자 이제 뷰로 실행시킨 서버에서 장고로 axios를 통해 필요한 데이터를 가져와야 한다.
• 하지만, 브라우저에서 다른 포트라고 판단하여 못가져오게 한다.
• 자세한 내용은 mdn cors 검색하여 문서를 읽어보도록..
• 일단, 막아놓은 것을 뚫어야 한다.

https://pypi.org/project/django-cors-headers/

django-cors-headers

• 문서 읽어보고 적용시킨다.

 

뷰 설치 항목

• 1. vuex
• vue add vuex
• 2. router
• vue add router

 

App.vue

• 데이터는 vuex로 관리 할 것이기 때문에 App에는 링크만 적어줌

 

src/views/TodoList.vue

• vuex 헬퍼 메서드를 사용하여 store/index.js에 접근한다.
• 일단, store/index.js의 state에는 todo에 있는 배열을 사용하기 위해 computed에 함수를 적어준다.
• store/index.js의 state에는 todo를 저장할 빈 배열이 있다.
• 이제, 장고 서버에 api요청을 보내 todo리스트를 가져와야한다.
• 이때 가져오는 코드는 created를 사용해 생성시 바로 가져오게 한다.
• 다음 이미지 참고

 

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import router from '@/router'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todos: [],
  },
  getters: {
  },
  mutations: {
    SET_TODOS(state, todos) {
      state.todos = todos
    },
    CREATE_TODO(state, todo) {
      state.todos.push(todo)
      // console.log(state.todos);

      // router.push('/')
      router.push({name: 'index'})
    },
  },
  actions: {
    createTodo(context, todoTitle) {
      axios({
        method: 'post',
        url: "http://127.0.0.1:8000/todos/",
        data: {
          title: todoTitle,
          is_completed: false,
        },
      })
      .then((res) => {
        // console.log(res)
        context.commit('CREATE_TODO', res.data)
      })
    },
    getTodos({commit}) {
      axios({
        url: "http://127.0.0.1:8000/todos/",
      })
      .then((res) => {
        // console.log(res);
        commit('SET_TODOS', res.data)
      })

    },
  },
  modules: {
  }
})

• 코드의 양이 많지만, 기능은 간단하다.
• 일단, actions의 getTodos함수는 장고 서버로 axios요청을 보낸다.
• 이때, .then(res)의 받아온 값의 data가 우리가 받아와야할 정보가 들어있다.
• state의 데이터 직접 접근하는건 mutations에서 한다.
• res.data를 mutations의 SET_TODOS로 넘겨주고, 거기서 state의 배열에 객체로 된 res.data(todo 리스트)를 push 한다.
• (현재 장고 서버엔 5개의 todo리스트가 있다.)
• 다른 함수도 기본적으로 비슷한 로직이다. 
• 할일을 생성할 때에는 장고 서버에 post요청을 보내면 된다.

 

CreateTodo.vue

• 여기선 할 일을 만든다. 
• 넘겨주는 함수와 작동 기능은 위의 index.js에서 확인해 보길..