Webapplikationen mit Django, REST-API und Vue

Django über den Packetmanager installieren

sudo apt install python3-django

oder alternativ über pip

python3 -m pip install Django

Environment erzeugen

python3 -m venv .venv  // > Linux, macOS
python -m venv .venv    // > Windows 10, Windows 11

Aktivieren

source .venv/bin/activate    // > Linux, macOS
.\.venv\Scripts\activate.bat // > Windows 10, Windows 11

Django installieren

python3 -m pip install Django

Django Rest API hinzufügen Djangorestframework über pip installieren

python -m pip install djangorestframework 

oder nur im Notfall über den Packetmanager

sudo apt install python3-djangorestframework

und das CORS Header Special nicht vergessen, sonst kann de Browser später keine Asyncrononen REST requests von einem anderen Static File Server aus stellen, wenn der REST Server dies nicht explitit im Header erlaubt…

pip install django-cors-headers

als App registrieren

INSTALLED_APPS = [
    ...,
    'rest_framework'
]

na ja, und jetzt wirds doch länger, als ich dachte, darum hier die Geschichte als Link

Und damits nicht zu einfach wird, hier noch ein Bug: https://stackoverflow.com/a/70389991

Ein neues Projekt erzeugen

django-admin startproject logbook
cd logbook/

Ein erster Test

python3 manage.py runserver

Einzelne Funktionsgruppen (im Django Jagon „Apps“) erzeugen

python3 manage.py startapp parts
python3 manage.py startapp actions
python3 manage.py startapp roles
python3 manage.py startapp logs

Dann die ganzen Datenbankmodelle in models.py anlegen

in logbook/settings.py an INSTALLED_APPS anhängen

INSTALLED_APPS = [
    ...
    'parts.apps.PartsConfig',
    'actions.apps.ActionsConfig',
    'logs.apps.LogsConfig',
    'roles.apps.RolesConfig',
]

und mit

python3 manage.py makemigrations parts
python3 manage.py makemigrations actions
python3 manage.py makemigrations roles
python3 manage.py makemigrations logs

die DBs vorbereiten

Nun wird die erste Datenbank angelegt

python3 manage.py migrate

nun noch schnell den Admin anlegen

python3 manage.py createsuperuser

Grundlegende Daten im Admin- Backend editierbar machen

Daten wird im admin- Panel sichtbar, wenn sie in admin.py der jeweiligen Unter- App refenenziert werden, also z.B.:

admin.py

from django.contrib import admin
from parts.models import WorkZone, Part
# Register your models here.
admin.site.register(WorkZone)
admin.site.register(Part)

Es war unerwartet schwierig, ein existierendes Repository auf einem anderen Rechner wieder an den Start zu bekommen. Möglicherweise darf man die migrations folder nicht mit einchecken, und erst

python manage.py makemigrations
python manage.py migrate --run-syncdb
python manage.py createsuperuser

erzeugte dann letztlich wieder eine funktionierende Datenbank?!?

https://www.delftstack.com/de/howto/django/django-reset-database/#zur%25C3%25BCcksetzen-einer-app-datenbanktabellen-in-django war auch mit im Spiel, aber das braucht man wohl erst, wenn man vorher schon eine kaputte Datenbank erzeugt hat

Einrichten von Vue, Vue- router und Axios ¹⁾

Ein eigenes Verzeichnis (repository) für die UI anlegen, dort hineinwechseln und

nvm use 14
npm install vue2  
npm i -g @vue/cli
npm install vue-router@3
npm install axios

Wir nehmn erstmal noch das ältere ''vue2'', um evtl. dann noch vuetify benutzen zu können, was noch nicht auf Vue 3 umgeschrieben ist. **Darum installiert man auch ''vue-router@3''**, denn mit nur ''vue-router'' darf man erst wieder eine Stunde Fehler suchen...