Python×Django+RestFramework×ReactでWebアプリケーション⑦ Djangoでお買い物アプリ（フロント+バックエンド）❷ Djangoで実装

ノンストップ飯田

2022年1月23日 12:54

1．今回のゴール

前回、venvで仮想環境を構築してDjangoをインストールするところまで記載しました。

今回は、ガリガリコードを書いていって、Djangoでお買い物アプリをフロントエンド・バックエンドまるっと実装するのがゴールです。

今までのJavaScriptバージョンと、Reactバージョンと何が違うかというと、データベースに情報を登録するので、一度サーバーを終了して、再度起動した時に引き続き前回の状態が表示されるという点です。

大体は無料公開するので、流れで作れてしまうと思いますが、最後のルーティングやテンプレートの部分は有料としました。

土曜日1日でDjangoを開発して、日曜日午前中を費やして記事を書いたので、「よく頑張ったね」と思ってくれた方、チャリーンとしていただけたら嬉しいです！笑

2．Djangoの仕組み

詳細は過去記事を見ていただければと思いますが、簡単にいうと定められたディレクトリの配下に存在する、複数の役割が異なるpythonファイルとHTML・CSSファイルで構成されています。

3．Djangoでお買い物アプリを実装する

以下のマガジンで先ほどの過去記事も含め、概念みたいなところは書いてますので今回はひたすら作成する過程を書きます。

(1) プロジェクト作成

前回作成した仮想環境を有効化します。

Windowsの場合

$ .\仮想環境名\Scripts\activate

macの場合

source 仮想環境名/bin/activate

※　Anacondaの場合は、conda activate 仮想環境名です。

次に以下のコマンドをターミナルやコマンドプロンプト等で、実行しDjangoのプロジェクトを実行します。

django-admin startproject プロジェクト名

今回、プロジェクト名はshopping_listとします。

(2) アプリを作成・登録

次にアプリケーションフォルダとその一味を用意します。今回はアプリ名はlistappとしますので、以下のようにターミナルかコマンドプロンプトで実行します。

python manage.py startapp listapp

プロジェクトフォルダ配下のmanage.pyファイルというpythonプログラムのstartappという処理でアプリケーションを作成してね、という指示です。

ここまで終わると、プロジェクトフォルダ配下の構成は以下のようになっているかと思います。

(3) setiings.pyファイルの修正・追記

以下３ヶ所です。

① Application definition

listappアプリケーションを追加


# Application definition

INSTALLED_APPS = [ 
　　'django.contrib.admin', 
　　'django.contrib.auth', 
　　'django.contrib.contenttypes', 
　　'django.contrib.sessions', 
　　'django.contrib.messages', 
　　'django.contrib.staticfiles', 
　　'listapp',
]

②Internationalization

LANGUAGE_CODEを日本語にして、時間帯も変更


LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
USE_I18N = True
USE_TZ = True

③Static files (CSS, JavaScript, Images)

CSSやJavaScript、画像ファイルなどをプロジェクト内のどこに置くかを教えてあげる。

# https://docs.djangoproject.com/en/4.0/howto/static-files/
STATIC_URL = 'static/'
STATICFILES_DIRS = [ BASE_DIR.joinpath('static'),]

(4) データベースを定義する(models.py)

今回お買物アプリで、データ管理するのは「未購入一覧」と「購入一覧」です。

また、必要なデータ項目はいずれのデータにおいても、商品のみです。それだけでは寂しいので使いませんが登録日も用意します。

Djangoはmodels.pyというファイルでデータ項目の定義をしますので、models.pyを以下のように定義します。

models.py

from django.db import models

# Create your models here.
class Needtobuy(models.Model):
    article = models.CharField(max_length=50)
    register_at = models.DateField()

    def __str__(self):
        return self.article

class Alreadybuy(models.Model):
    article = models.CharField(max_length=50)
    register_at = models.DateField()

    def __str__(self):
        return self.article

djangoのdbからmodelsをインポートし、Modelクラスを継承してそれぞれNeedtobuyとして未購入クラスを、Alreadybuyとして購入済クラスを定義しています。

それぞれ商品を50字以内の文字列と日付型の登録日という項目を持つとしています。また、それぞれ商品名を文字列として返すように定義しています。

(5) データ項目のマイグレーションを行う

定義したデータテーブル項目でやってくぞーという宣言みたいなものだと思ってください。

まずはターミナルまたはコマンドプロンプトで以下のコマンドを実行します。

python manage.py makemigrations

正常に実行できれば、以下のような記載が出てきます。

(shopping_list) higuchiyuusuke@higuchiyuusukenoMacBook-Air shopping_list % python manage.py makemigrations
System check identified some issues:

WARNINGS:
?: (staticfiles.W004) The directory '/Users/higuchiyuusuke/Documents/note/shopping_list/shopping_list/static' in the STATICFILES_DIRS setting does not exist.
Migrations for 'listapp':
  listapp/migrations/0001_initial.py
    - Create model Alreadybuy
    - Create model Needtobuy

AlreadybuyモデルとNeedtobuyモデル、作ったよ的な。
WANINGは、setiings.pyにstaticってフォルダ見てよって書いてあるけど、フォルダありませんけどね？と軽く怒られてます。

そして、今度は以下の指示を同じようにターミナルやコマンドプロンプトで行います。

python manage.py migrate

正常に処理できれば以下のような表示となります。

(shopping_list) higuchiyuusuke@higuchiyuusukenoMacBook-Air shopping_list % python manage.py migrate
System check identified some issues:

WARNINGS:
?: (staticfiles.W004) The directory '/Users/higuchiyuusuke/Documents/note/shopping_list/shopping_list/static' in the STATICFILES_DIRS setting does not exist.
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, listapp, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying listapp.0001_initial... OK
  Applying sessions.0001_initial... OK

これで一旦マイグレーションは完了です。
今回はしませんが、データ項目を追加したり、新たなデータモデルを追加したら、再度マイグレーションが必要です。

(6) 投稿フォームの作成 (forms.py)

では次に、入力欄から買うものを追加するための投稿フォームを作成します。
Djangoではforms.pyにフォームが定義できます。デフォルトでは存在しないファイルなので、アプリケーションフォルダに追加して記載します。

forms.py

from django import forms
from .models import Needtobuy

class AddNeedToBuyForm(forms.ModelForm):
   class Meta:
      model = Needtobuy
      fields = ('article',)
      labels = {'article' : ''}
      widgets = {
            'article'   : forms.TextInput(attrs={'placeholder': '買うものを入力'}),
         }

登録日は登録した日付を自動的に登録するため、商品だけ定義しています。

(7) 処理の定義 (views.py)

では、お買物リストにかかる処理をviews.pyに必要な処理を定義していきます。

①必要な処理

投稿したら、未購入データベースに追加する(A）
未購入一覧を未購入エリアに表示する(B)
購入一覧を購入エリアに表示する(C)
未購入一覧の購入済ボタンを押したら、未購入一覧から削除。購入済一覧に追加する(D)
未購入一覧の削除ボタンを押したら、未購入一覧から削除(E)
購入一覧の削除ボタンを押したら、購入一覧から削除(F)

②views.py

ここから先は

7,011字 / 6画像

¥ 300

ログイン

この記事が気に入ったらサポートをしてみませんか？