Vue.jsとDjango-Rest-Frameworkで神経衰弱アプリを作ってみる【その1】~Djangoのセットアップ編~

6389 ワード
django-rest-framework Vuetify Python Vue.js Django Python テキストリンク

その2 >>

バージョン情報

OS：MacOS X
node：v12.14.1
npm：6.13.4
@vue/cli：4.1.2
python：3.9.0
Django：3.2.2
djangorestframework：3.12.4

Pythonの仮想環境作成

事前準備

ここ参照して、以下を行えるようにしておくこと。
・pyenvが使える
・pyenv-virtualenvでPythonの仮想環境を作成できること

仮想環境作成

python3.9.0の仮想環境を作成します。
神経衰弱を作るので、名称は「concentratio」とでもしておきます。

butterthon$ pyenv virtualenv 3.9.0 concentratio

仮想環境の作成は以上です。

Djangoプロジェクトを作成

事前準備

プロジェクトルートディレクトリを作成して、仮想環境を適用する。

butterthon$ mkdir workspace # ワークスペースを用意
butterthon$ cd workspace
workspace$ mkdir concentratio # ワークスペースの中にアプリケーションルートディレクトリ作成（名称は任意）
workspace$ cd concentratio
concentratio $ pyenv local concentratio
(concentratio)concentratio$ python -V
Python 3.9.0

プロジェクト作成

concentratio$ django-admin startproject config .

以下のような構成になります。

concentratio # プロジェクトルートディレクトリ
├── config # 設定ファイルがconfig配下にまとまる
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

Djangoの起動画面を確認する。

｀python3 manage.py runserver｀でDjangoサーバを起動してhttp://localhost:8000にアクセスする。

(concentratio)concentratio$ python3 manage.py runserver # Djangoサーバ起動


Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

January 08, 2020 - 15:35:47
Django version 2.2.6, using settings 'config.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

　
ロケットが発射している画面が表示されればOKです！！！

Django Rest Frameworkをインストールする

(concentratio)concentratio$ pip install django-rest-framework

インストールできたら設定ファイルに追記する。

config/settings.py
.
..
...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework', # 追加
]
...
..
.

APIのエンドポイントを記載

config/urls.py
.
..
...
from django.contrib import admin
from django.urls import path
from django.conf.urls import include, url # 追加
from rest_framework import routers # 追加

ROUTER = routers.DefaultRouter() # 追加

urlpatterns = [
    path('admin/', admin.site.urls),
    url('api/', include(ROUTER.urls)), # 追加
]

Django Rest Frameworkが正しく起動できるかhttp://localhost:8000/apiにアクセスして確認

その2 >>