サーバ側(Django)とクライエント側(Vue.js)側を Fetch APIを用いた連携方法に関してメモします。見通しをよくするため、なるべくシンプルかつ必要最小限なコードにするつもりです。
前提
- python=3.10
- Django=4.0
- Vue3 (CDN: https://unpkg.com/vue@3/dist/vue.global.js )
CDNを利用することで、htmlのダウンロードリンクを追加するだけでVue.jsが利用できます。
また、Djangoを用いてブラウザ上に”Hello, World” のような文字を出力できている状態を前提として話を進めていきます。
Djangoを用いて文字を出力する方法に関しては、私の過去の記事でも紹介しています。ご興味があればご覧ください。
Fetch APIの基本書式
fetch(URL,{
method: 'get',
headers:{
'Content-Type': 'application/json',
},
})
.then((response) =>{
return response.json();
})
.then((response) =>{
//なんらかの処理
})
.catch(error =>{
//エラーの時の処理
});Fetch APIのデモンストレーション
このgifのような単純な機能の実装を通じてFetch APIの使い方を見ていきます。
views.pyにあるデータをFetchAPIを介してブラウザに表示する方法をデモンストレーションしてみます。views.pyは以下の用に簡単な辞書型データを用意します。
def index(request):
if request.headers.get("Content-Type") == 'application/json':
message = "message from Django"
#return render(request, "index.html", dict)
return JsonResponse(message, safe=False, status=200)
return render(request, "index.html")初期画面はindex.htmlを返し、vueからのアクセスを受けたらmessageを返すコードです。
このデータをFetch APIで取得します。
1. index.htmlにVue.jsのコードを書き込む
index.htmlの全文
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!--Vueのデータを表示-->
<div id="app">
<p>[[ messageDefault ]]</p>
<p>[[ messageFromDjango ]]</p>
<form @submit.prevent="sendRequest">
<button type="submit">データを受け取る</button>
</form>
</div>
<!--Vue.jsのコードを以下に記述-->
<script>
const URL = '{% url "index" %}';
const App = {
data() {
return {
messageDefault:"データを受け取る前",
messageFromDjango: "",
}
},
//ムスタッシュ記法を変更
compilerOptions: {
delimiters: ['[[', ']]'],
},
methods:{
sendRequest(){
fetch(URL,{
method: 'get',
headers:{
'Content-Type': 'application/json',
},
})
.then((response) =>{
return response.json();
})
.then((message)=>{
console.log(message);
this.messageFromDjango = message;
})
.catch(error =>{
console.error('Error:', error);
});
}
},
}
Vue.createApp(App).mount('#app')
</script>
</body>index.htmlの各部分の解説
まず、header タグ内に、CDN版のVueのリンクを記述します。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><!--CDN版のVue--><body> タグ内には大きく2種類のコードを記述します。
まず最初がブラウザに表示するブロックです。[[ tasks ]] はVueのムスタッシュ記法(下のページで述べます)で、Vueが持つdataの値を表示させることができます。
ムスタッシュ記法は、DjangoもVue.jsも {{ }} がデフォルトで同一記法なために必要になります。
<div id="app">
<p>[[ messageDefault ]]</p><!-- データを受け取る前の文字列-->
<p>[[ messageFromDjango ]]</p><!-- Djangoから受け取ったデータ-->
<form @submit.prevent="getMessage">
<button type="submit">データを受け取る</button>
</form>
</div>次が<script> のブロックで、JavaScript(特に、今回はVue.js)のコードを書いていきます。
まず、Fetch APIでアクセスするurlを設定します。
const URL = '{% url "index" %}';url "index" はurls.pyのurlpatternsに記載されいる name=”index” を指しています。
#urls.py
urlpatterns = [
path("", views.index, name="index"),
]前半部分は表示する文字列を管理する dataの設定とムスタッシュ記法の変更設定が記述されています。
const App = {
data() {
return {
messageDefault:"データを受け取る前",
messageFromDjango: "",
}
},
//ムスタッシュ記法を変更
compilerOptions: {
delimiters: ['[[', ']]'],
},
}
後半は Fetch API を用いてDjangoとのやり取りを行う部分となります。この関数はボタンを押されることで実行されます。
methods:{
getMessage(){
fetch(URL,{
method: 'get',
headers:{
'Content-Type': 'application/json',
},
})
.then((response) =>{
return response.json();
})
.then((message)=>{
this.messageFromDjango = message;
})
.catch(error =>{
console.error('Error:', error);
});
}
},
}
Vue.createApp(App).mount('#app')以下の部分ではHTTPメソッドとヘッダー情報を定義しています。
fetch(URL,{
method: 'get',
headers:{
'Content-Type': 'application/json',
},
})以下は、Djangoからのレスポンスを受けた後の処理を定義しています。処理は以下の流れで進みます。
- 受け取ったレスポンスをjson形式に整形
- jsonにある変数 message をVueが持つ messageFromDjango に代入
また、エラー発生した場合はコンソールにエラー内容を表示するようになっています。
.then((response) =>{
return response.json();
})
.then((message)=>{
this.messageFromDjango = message;
})
.catch(error =>{
console.error('Error:', error);
});まとめ
Fetch APIを用いてDjangoとVueの間でデータのやり取りを行う方法について整理しました。内容は初歩的ですが、このコードをベースにしてより発展的なこともできるようになるはずです。
Fetch APIのより詳細な内容は公式ドキュメントなどを参考にしてください。
コメント