django, python, web系

Django Rest Framework+VuejsでWebアプリを作るための試し

Djangoプロジェクト作成

mkdir ml_web && cd ml_web
django-admin startproject ml_web .

プロジェクト配下は以下のようになる。

ml_web
├── manage.py
└── ml_web
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

サーバー立ち上げ

プロジェクト直下(manage.pyがあるディレクトリ)で、

# 開発サーバー立ち上げ
python manage.py runserver

で、http://127.0.0.1:8000/ などコンソールに表示されているURLへアクセスすればdjangoのデフォルトページが表示される。

ユーザーモデルのカスタマイズ

https://qiita.com/okoppe8/items/10ae61808dc3056f9c8eの通りに。

  1. ユーザーモデル用のアプリを作成
  2. 中でAbstractUserをコピペし、AbstractBaseUserを継承したUserモデルを作成

プロジェクト直下で、

python manage.py startapp users

オリジナルのUserからの変更点は、idをuuidに変更しただけ。これができたら、

python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver

で、http://localhost:8000/admin へアクセスしてログインできることを確認。そしてグループやユーザーを作ってみる。

ログイン機能

会員登録は後回しにして、まずはログイン機能をつける。
ログイン・ログアウト機能の作成(前編)
Djangoで「会員登録機能 + ログイン機能」を実装する
あたりを参考に。

  1. accountsというアプリを作成
  2. AuthenticationFormを拡張してログインフォームを作る
python manage.py startapp accounts

REST API

django-rest-frameworkを使ってREST APIを簡単に実装できる。

python manage.py startapp blog

このブログアプリの中にAPIを作る。
主にREST APIをざっくり実装を参考に。

Vueプロジェクト作成

今回はtypescriptを使うので、vue.js + typescript = vue.ts ことはじめの通りに。
シンプルブログ、Vueプロジェクト作成・初期設定も一応。

node: v12.6
npm: 6.9
vue/cli:

Django側でCORS設定

Django REST Framework (DRF)のインストール・設定とCORS対策をする/python・djangoを参考に。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です