DjangoのサーバーからデータをJSON形式のテキストで受信しよう！

19766 ワード
受信 Django JSON Docker Django テキストリンク

目的

サーバーからデータをJSON形式で受信したい。

はじめに

この連載の最初のページ: 📖 DjangoをDockerコンテナへインストールしよう！

前提知識:

Key Value
WebページへJSON形式のテキストを渡す方法を知っておく 📖DjangoのWebページへJSON形式のテキストを渡そう！

この記事のアーキテクチャ:

Key Value
OS Windows10
Container Docker
Auth allauth
Frontend Vuetify
Data format JSON
Editor Visual Studio Code （以下 VSCode と表記）

前の記事から続いていて、ディレクトリ構成を抜粋すると 以下のようになっている。

📂host1
　├── 📂data
　│　　└── 📂db
　│　　　　└── <たくさんのもの>
　├── 📂webapp1
　│　　├── 📂static
　│　　│    └── 📄desserts.json
　│　　├── 📂templates
　│　　│    └── 📂vuetify2
　│　　│        ├── 📄data-table1.html
　│　　│        ├── 📄data-table2.html
　│　　│        ├── 📄hello1.html
　│　　│        └── 📄json-textarea1.html
　│　　├── 📄models.py
　│　　├── 📄settings.py
　│　　├── 📄urls.py
　│　　├── 📄views.py
　│　　└── <いろいろ>
　├── 📄.env
　├── 🐳docker-compose.yml
　├── 🐳Dockerfile
　├── 📄manage.py
　└── <いろいろ>

Step 1. JSONファイルの作成

（再掲）以下のファイルを作成してほしい。

📄host1/webapp1/static/desserts.json:

{
    "headers": [
        {
            "text": "Dessert (100g serving)",
            "align": "start",
            "sortable": false,
            "value": "name"
        },
        { "text": "Calories", "value": "calories" },
        { "text": "Fat (g)", "value": "fat" },
        { "text": "Carbs (g)", "value": "carbs" },
        { "text": "Protein (g)", "value": "protein" },
        { "text": "Iron (%)", "value": "iron" }
    ],
    "desserts": [
        {
            "name": "Frozen Yogurt",
            "calories": 159,
            "fat": 6.0,
            "carbs": 24,
            "protein": 4.0,
            "iron": "1%"
        },
        {
            "name": "Ice cream sandwich",
            "calories": 237,
            "fat": 9.0,
            "carbs": 37,
            "protein": 4.3,
            "iron": "1%"
        },
        {
            "name": "Eclair",
            "calories": 262,
            "fat": 16.0,
            "carbs": 23,
            "protein": 6.0,
            "iron": "7%"
        },
        {
            "name": "Cupcake",
            "calories": 305,
            "fat": 3.7,
            "carbs": 67,
            "protein": 4.3,
            "iron": "8%"
        },
        {
            "name": "Gingerbread",
            "calories": 356,
            "fat": 16.0,
            "carbs": 49,
            "protein": 3.9,
            "iron": "16%"
        },
        {
            "name": "Jelly bean",
            "calories": 375,
            "fat": 0.0,
            "carbs": 94,
            "protein": 0.0,
            "iron": "0%"
        },
        {
            "name": "Lollipop",
            "calories": 392,
            "fat": 0.2,
            "carbs": 98,
            "protein": 0,
            "iron": "2%"
        },
        {
            "name": "Honeycomb",
            "calories": 408,
            "fat": 3.2,
            "carbs": 87,
            "protein": 6.5,
            "iron": "45%"
        },
        {
            "name": "Donut",
            "calories": 452,
            "fat": 25.0,
            "carbs": 51,
            "protein": 4.9,
            "iron": "22%"
        },
        {
            "name": "KitKat",
            "calories": 518,
            "fat": 26.0,
            "carbs": 65,
            "protein": 7,
            "iron": "6%"
        }
    ]
}

👆 以上のデータは 📖Vuetify - Data tables - Usage のページにある。

Step 2. views.pyファイルの編集

📄views.py は既存だろうから、マージしてほしい。

📄host1/webapp1/views.py:

import json
from django.http import JsonResponse # 追加

# （追加）JSONでの応答練習
def readJsonResponse1(request):
    with open('webapp1/static/desserts.json', mode='r', encoding='utf-8') as f:
        doc = json.load(f)

    return JsonResponse(doc)

Step 3. urls.pyファイルの編集

📄urls.py は既存だろうから、マージしてほしい。

📄host1/webapp1/urls.py:

from django.urls import path
from . import views

urlpatterns = [
    # （追加）Vuetify練習
    path('practice1/json-response1', views.readJsonResponse1, name='readJsonResponse1'),
    #     ------------------------                                  -----------------
    #     1                                                         2
    # 1. `practice1/json-response1` というURLにマッチする
    # 2. HTMLテンプレートの中で {% url 'readJsonResponse1' %} のような形でURLを取得するのに使える
]

Step 4. Web画面へアクセス

（していなければ）Dockerコンテナの起動

cd host1

docker-compose up

📖 http://localhost:8000/practice1/json-response1

次の記事

📖 DjangoでデータをサーバーへJSON形式で渡して、記憶させよう！