bis jetzt hatte ich immer `Flask` genutzt und da ich aktuell eine neue Web-Anwendung entwickle, dachte ich, das wäre ein guter Zeitpunkt `Django` zu verwenden. Allerdings habe ich zwei Probleme. Damit die Seite dynamisch ist, will ich wieder `Vue` verwenden.
Meine Index.html sieht so aus:
Code: Alles auswählen
<html lang="de">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" charset="utf-8">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<title>Betriebsstunden-Auswertung</title>
</head>
<body>
<div id="app">
<form method="post">
{% csrf_token %}
{{ date_range.as_p }}
{{ pressure_range.as_p }}
<button @click="get_operation_hours">Auswertung</button>
</form>
{{ operationHours }}blaaaaaa
</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
let operationHours = ref(99999999)
async function get_operation_hours() {
const response = await fetch('http://localhost:8000/evaluation');
operationHours.value = await response.json();
}
return { operationHours, get_operation_hours }
}
}).mount('#app')
</script>
</body>
</html>
Wie man sieht, will ich anhand der Eingaben, aus einer Datenbank Betriebsstunden aussuchen und diese zurück geben. Dafür habe ich folgende `views.py`:
Code: Alles auswählen
from django.http import JsonResponse
from django.shortcuts import render
from .forms import DateRange, PressureRange
def index(request):
if request.method == "POST":
date_range = DateRange(request.POST)
pressure_range = PressureRange(request.POST)
if date_range.is_valid() and pressure_range.is_valid():
date_range = (
date_range.cleaned_data["start"],
date_range.cleaned_data["end"],
)
pressure_range = {
"min": pressure_range.cleaned_data["min"],
"max": pressure_range.cleaned_data["max"],
}
# operation_hours = get_operation_hours(date_range, pressure_range)
operating_hours = 385
return JsonResponse({"operating_hours": operating_hours})
else:
date_range = DateRange()
pressure_range = PressureRange()
return render(
request,
"evaluation/index.html",
context={"date_range": date_range, "pressure_range": pressure_range},
)
Mit Flask hätte ich nur das Wörterbuch zurück geschickt und hätte dass dann im JavaScript-Teil erhalten. Hier läuft das irgendwie anders.
Im Django-Tutorial wird `HttpResponse` verwendet, ich will allerdings den Wert auf der aktuellen Seite anzeigen und keine andere Seite.
Und was ich grundsätzlich noch nicht verstanden habe. Ich kann den Button auch mit
Code: Alles auswählen
<input type="submit" value="Drück mich">Achja, `Flask` bringt alles mit, was es für die Anwendung benötigt. Allerdings, wenn die Zeit reicht, dann wird die Anwendung immer erweitert und es soll dann für bestimmte Bereiche, abhängig vom Benutzer, Zugänge verweigert werden. Daher will ich gleich mit `Django` starten.
Danke und Grüße
Dennis
