[JavaScript] Vue.js 프론트 개발 (feat. REST API 통신 with Django/Flask)

Vue.js 초기 설정은 아래를 참고했습니다:

https://ninano1109.tistory.com/54?category=939829 

JavaScript 기반 Vue.js 웹 개발 초기 설정(feat.Node.js)

 

main.js에는 Vue.js에서 개발 시 사용할 모듈들을 등록해 놓고 사용합니다.

Vuex를 사용하기 위해 store와 웹 UI CSS 프레임워크인 Vuetify를 추가했습니다.

# src/main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

 

Vuex를 사용하기 위해 store 폴더 내 index.js에 변수 선언과 함수들을 저장해놓고 사용합니다.

https://ninano1109.tistory.com/124

[JavaScript] Vue.js vuex 설치하기(feat. npm install 오류)

# src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import axios from 'axios'

import SERVER from '@/API/url'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      visitorList: {},
  },

  mutations: {
    SET_VISITORLIST(state, visitorList) {
      state.visitorList = visitorList 
    }
  },

  actions: {
    fetchVisitorList({ commit }) {
      axios.get(SERVER.URL + SERVER.ROUTES.register)
        .then(res => commit('SET_VISITORLIST', res.data))
        .catch(err => console.error(err.response.data))
    },
    
    addVisitor({ dispatch }, visitorInfo){
      console.log('addVisitor ok', visitorInfo)
      axios.post(SERVER.URL + SERVER.ROUTES.register, visitorInfo)
        .then(() => dispatch('fetchVisitorList'))
        .catch(err => console.error(err.response.data))
    }
  }
})

 

백엔드(Flask, Django)와 통신하기 위해 url.js라는 파일 생성 후 API를 등록해줍니다.

# src/API/url.js

export default {
    URL: 'http://localhost:8000',
    ROUTES: {
        register: '/',
    },
}

 

메인 기능 페이지인 뷰 컴포넌트 페이지를 생성 후 페이지 구성(입력창, 버튼 등)과 함께 작동 함수를 설정합니다.

# src/components/RegisterHome.vue

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="100"
        />
      </v-col>

      <v-col class="mb-4">
        <h4 class="display-2 font-weight-bold mb-3">
          Visitor Registration
        </h4>
        <!-- <p class="subheading font-weight-regular">
          <br>please type your name in
        </p> -->
      </v-col>
    </v-row>

  <v-form>
    <v-container>
      <v-row justify="center">
        <v-col md="3">
          <v-text-field
            solo
            label="Your Name Here"
            clearable
            v-model="visitor.visitor_name"
            @keypress.enter="addVisitor(visitor)"
          ></v-text-field>
        </v-col>
        
      </v-row>
    </v-container>
  </v-form>

  <v-row justify="center">
    <v-simple-table style="width:60%">
      <thead >
        <tr>
          <th class="text-center">
            Name
          </th>
          <th class="text-center">
            Time Stamp
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="visitor in visitorList"
          :key="visitor.visitor_name"
          class="text-center"
        >
          <td>{{ visitor.visitor_name }}</td>
          <td>{{ visitor.visit_datetime.slice(0,10)+' '+visitor.visit_datetime.slice(11,19) }}</td>
        </tr>
      </tbody>
    </v-simple-table>
  </v-row>

  </v-container>
</template>

<script>
import { mapState, mapActions } from 'vuex'

  export default {
    name: 'RegisterHome',

    data: () => ({
      visitor: {
        "visitor_name": ''
      },
    }),
    
    computed: {
      ...mapState(['visitorList']),
    },

    methods: {
      ...mapActions(['fetchVisitorList', 'addVisitor']),
    },

    created() {
      this.fetchVisitorList()
    }
  }
</script>

 

위에서 만든 컴포넌트(뷰 페이지)를 앱에서 사용할 수 있게  App.vue에 등록합니다.

# src/App.vue

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />
        <h1>The Visitors</h1>
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
      </v-btn>
    </v-app-bar>

    <v-main>
      <RegisterHome/>
    </v-main>
  </v-app>
</template>

<script>
import RegisterHome from './components/RegisterHome';

export default {
  name: 'App',

  components: {
    RegisterHome,
  },

  data: () => ({
    //
  }),
};
</script>

 

 

- 이상 오늘의 삽질일기 끝!

 

 

---

여기저기 삽질도 해보고

날려도 먹으면서

배우는 게

결국 남는거다

- Z.Sabziller