Django

DjangoとVuejs開発環境作成(Total :1day4h)

DjangoとVuejsで未来を作る

結構な大きな表題にしてみました(笑)

ごろう
システムは未来を創造するんだ!
友人

<!-- wp:paragraph -->
すごい気持ちだね!
>応援するわー

こんな感じで答えてくれる人がいたらいいのですが(笑)

開発環境の作成

まぁ、一番苦手な開発環境の作成です…
正直、一番すきじゃないところです💦

ただ、開発環境作らないと始まらないので、がんばってやっていきます。

バックエンド側Django

まずは、未来を作るためのシステムなので、miraiという名前のフォルダを作成し、そのなかにbackという名前のフォルダを作成しました。

  1. backのフォルダに入る
  2. python -V でバージョン確認(開発時3.9.9)
  3. python -m venv .venv 仮想環境作成
  4. .venv/scripts/activate 仮想環境の実行(powershellで実行)
  5. pip install --upgrade pip pipのアップデート
  6. pip install django 開発時4.0
  7. pip install djangorestframework 開発時 3.12.4
  8. django-admin startproject config . Djangoのプロジェクト作成
  9. python manage.py runserver Django起動確認
  10. ctrl + c 押下でサーバーを止める
  11. pip install django-environ 環境変数を公開しないためのライブラリをインストール
  12. backの直下に.env ファイルを作成
  13. .envファイルに、公開したくない情報を記載するここら辺が公開しない方がいいと思う
    SECRET_KEY
    DEBUG
    ALLOWED_HOSTS
    DATABASES
    ですかね。ここら辺はプロジェクトで複数人でやる場合等で条件がかわります。
  14. settings.py ファイルの編集import osimport environを追加
  15. env = environ.Env()env.read_env('.env')追記インスタンスの作成 
  16. settings.py でもenv設定ファイルの指定SECRET_KEY = env('SECRET_KEY')他に設定が必要なものを行う
  17. python manage.py runserver 設定が正しく行えているか確認するため
  18. settings.py の設定変更
    ①BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    ②TEMPLATESにあるDIRSを'DIRS': [os.path.join(BASE_DIR, 'templates')], に変更
    ③LANGUAGE_CODE ='ja'
    ④TIME_ZONE = 'Asia/Tokyo'
    ⑤DATABASESをSQLliteで開発する場合は修正'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),フロントエンド側環境作成
  19. vue create front  vuecliでプロジェクトを作成
    ①manually select features
    ②すべてにチェックを入れる
    ③2.x (3系はvuetifyがサポートしていないため)
    ④y
    ⑤y
    ⑥y
    ⑦Saas/SCSS(with dart-sass)
    ⑧ESLint + Prettier
    ⑨Lint on save
    ⑩Mocha + Chai
    ⑪Cypress (Chrome only)
    ⑫In package.json
    ⑬n
  20. vue add vuetify
  21. npm run serve
  22. Djangoに戻って
    python manage.py startapp users ユーザー管理用のアプリを作成
  23. user.models に下記に編集(下に記載)
  24. python manage.py makemigrations
  25. python manage.py migrate
from django.contrib.auth.base_user import AbstractBaseUser, BaseUserManager
from django.core.mail import send_mail
from django.db import models
from django.utils import timezone
from django.utils.translation import gettext_lazy as _

from django.contrib.auth.models import PermissionsMixin, UserManager

from django.contrib.auth.validators import UnicodeUsernameValidator


class User(AbstractBaseUser, PermissionsMixin):
    username_validator = UnicodeUsernameValidator()
    username = models.CharField(
        _('username'),
        max_length=7,
        unique=True,
        help_text=_('社員番号7桁'),
        validators=[username_validator],
        error_messages={
            'unique': _("すでに登録されている社員番号です"),
        },
    )
    first_name = models.CharField(_('姓'), max_length=30, blank=True)
    last_name = models.CharField(_('名'), max_length=150, blank=True)
    email = models.EmailField(_('Eメール'), blank=True)
    is_staff = models.BooleanField(
        _('管理者'),
        default=False,
        help_text=_('管理サイトにログインできるかどうか'),
    )
    is_active = models.BooleanField(
        _('退社済'),
        default=True,
        help_text=_(
            '無効フラグ'
        ),
    )
    date_joined = models.DateTimeField(_('date joined'), default=timezone.now)

    objects = UserManager()

    EMAIL_FIELD = 'email'
    USERNAME_FIELD = 'username'
    REQUIRED_FIELDS = ['email']

    class Meta:
        verbose_name = _('user')
        verbose_name_plural = _('users')
        # abstract = True

    def clean(self):
        super().clean()
        self.email = self.__class__.objects.normalize_email(self.email)

    def get_full_name(self):
        full_name = '%s %s' % (self.first_name, self.last_name)
        return full_name.strip()

    def get_short_name(self):
        return self.first_name

    def email_user(self, subject, message, from_email=None, **kwargs):
        """Send an email to this user."""
        send_mail(subject, message, from_email, [self.email], **kwargs)

スーパーユーザー作成

python manage.py createsuperuser
Username: ユーザー名
Eメール:
Password:*****

環境構築はできたけどこれから大変💦

まずはログイン機能を作成しながら、DjangoとVuejsが疎通できるようにしていこうと思う…
ここからもう、Vuexや色んな事が入ってくるので一気に難易度があがります…

ここまでで、5時間かかりました💦
mariadb やmodels を分けるのをやっぱりやめたりしてたらエラー出まくって、結局最初から作り直ししたらあっさりクリア…

誰か、インフラ教えてー!

-Django

© 2022 ごろう@縁紡ぐ