Vue.jsとDjangoで２つのローカルサーバーを立ち上げ、接続を行う方法

前提・実現したいこと

現在アプリ開発を行なっているのですが、バックエンド側は既に「Django」を使用し開発をしています。フロントエンド側の開発は「Vue.js,JavaScript」を使用し開発を行なっていきたいと考えていますが、Django側をAPIサーバーとして、json形式のレスポンスを返す形にした場合、VueCliにてプロジェクトを立ち上げ「npm run serve」としてローカルサーバーを立ち上げた状態で、更に、Django側で「python manage.py runserver」としてこちらもローカルサーバーとして起動させた状態になるかと思います。
ここでVue.jsの方で、django側にajax通信でリクエストを投げ、django側がそれを検知し処理を行いjsonデータを返すことを実現するには、どのように２つのローカルサーバーで連携を行えば良いでしょうか。

試したこと

こちらのサイトを拝見させて頂いたのですが、実際の連携させる部分については分からず、つまずいてしまっている状況です。

補足情報（FW/ツールのバージョンなど）

エディターはVScode、OSはMacOSを使用しています。

どなたか、ご助言頂けましたら幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

Terminalウィンドウ二つを用意してください。

一つには

python manage.py runserver 8001

を実行してください。これで Django 開発用サーバーがポート 8001 で実行し始めます。

もう一つには

npm run serve -- --port 8000

を実行してください。これで Vue 開発用サーバがポート 8000 で実行し始めます。

Vue.js の方で axios を用いて Django に請求を発信するのはこのようです。

ルータを設定して、ページ Main を表示するようにします。

javascript
1// proj/src/router.js
2import Vue from 'vue'
3import Router from 'vue-router'
4
5import Main from '@/components/pages/Main'
6
7Vue.use(Router)
8
9export default new Router({
10  routes: [
11    {
12      path: '/',
13      name: 'Main',
14      component: Main
15    }
16  ]
17})

vue
1// proj/src/App.vue
2<template>
3  <v-app>
4   <router-view/>
5  </v-app>
6</template>
7
8<script>
9export default {
10  name: 'App'
11}
12</script>

ページ Main の script の中に、methods オブジェクトに fetchData のような関数を入れて、その中で axios を用いて Django へ発信します。取得した結果を this.data とかに詰め込んだら、template に {{ data }} のように表示できます。

fetchData 関数は自動的に実行したいなら、下記のように mounted() 関数や created() 関数に実行してください。他にボタンの @click に入れたらボタンを押す時や、イベントで実行するようにも設定できます。

vue
1// proj/src/components/pages/Main.vue
2<template>
3<p>{{ data }}<p>
4</template>
5
6<script>
7import axios from 'axios';
8import router from "../../router";
9export default {
10  name: "Main",
11  data() {
12    return {
13      pending: true,
14      data: "Loading"
15    }
16  },
17  mounted() {
18    this.fetchData();
19  },
20  methods: {
21    fetchData() {
22      axios.get("https://localhost:8001/api/hello/")
23        .then(res => this.data = res.data)
24        .catch(e => console.log(e));
25    }
26  }
27};
28</script>

そのブログシリーズの次には、ユーザー認証の例について詳しく書いてありますが、上記のようにまとめました。お役に立てれば幸いです。

投稿2020/07/15 03:57

YufanLou

総合スコア463

study_111

2020/07/15 06:15 編集

ご丁寧にご説明頂きまして、ありがとうございます。 Vue.jsを学習しておりましたら、VueCliを立ち上げて開発を行なっていくことが分かったのですが、サーバー側とVue側で両方サーバーを立ち上げた場合にどうなるかと疑問がありまして、どのようにajaxで通信を行うのかと少々混乱してしまっていました。YufanLouさんに貼って頂きました「ブログシリーズの次」のリンクより探してみましたら、確かにaxiosを使用した部分に、Django側で立ち上げたアドレスとポート番号を記載した箇所がございました。vueについては分からない箇所が多く詳細に読んでいなかった為、見過ごしてしまっていました... axiosの箇所以外でも、YufanLouさんに分かりやすく、ご回答頂けましたおかげで、全体の流れを掴むことが出来ました。 Vueの構文については分からない箇所がまだある為、頑張って勉強をし、YufanLouさんに頂いたご回答を参考に、何としてもSPAアプリケーションを作りあげたいと思います。誠に、いつもご回答頂きありがとうございます。

行動規範の内容に同意します