Merge pull request #15 from HE-Arc/5-database

5 database

Author: sebastienmendes

api/Pipfile

@@ -6,5 +6,7 @@ name = "pypi"
 [packages]
 django = "*"
 djangorestframework = "*"
+django-cors-headers = "*"
+psycopg2-binary = "*"
 
-[dev-packages]
+[dev-packages]

api/Pipfile.lock

@@ -11,6 +11,7 @@
 """
 
 from pathlib import Path
+import os
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
@@ -25,7 +26,10 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = [
+    "127.0.0.1",
+    "https://fantasy-forge.k8s.ing.he-arc.ch",
+    ]
 
 
 # Application definition
@@ -39,9 +43,10 @@
     'django.contrib.staticfiles',
     'fantasyforgeapp',
     'rest_framework',
+    'corsheaders',
 ]
-
 MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware',
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
@@ -77,12 +82,15 @@
 
 DATABASES = {
     'default': {
-        'ENGINE': 'django.db.backends.sqlite3',
-        'NAME': BASE_DIR / 'db.sqlite3',
+        'ENGINE': 'django.db.backends.postgresql',
+        'NAME': os.getenv('DB_NAME'),
+        'USER': os.getenv('DB_USER'),
+        'PASSWORD': os.getenv('DB_PASSWORD'),
+        'HOST': os.getenv('DB_HOST', 'localhost'),  # Default to localhost
+        'PORT': os.getenv('DB_PORT', '5432'),  # Default to 5432
     }
 }
 
-
 # Password validation
 # https://docs.djangoproject.com/en/5.1/ref/settings/#auth-password-validators
 
@@ -117,9 +125,17 @@
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/5.1/howto/static-files/
 
-STATIC_URL = 'static/'
+STATIC_URL = '/static/'
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+# CORS settings
+CORS_ALLOWED_ORIGINS = [
+    'http://localhost:5173',
+    'https://fantasy-forge.k8s.ing.he-arc.ch',
+]
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

api/fantasyforge/settings.py

@@ -25,5 +25,5 @@
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path("", include(router.urls)),
+    path("api/", include("fantasyforgeapp.urls")),
 ]

api/fantasyforge/urls.py

@@ -1,3 +1,6 @@
 from django.contrib import admin
 
 # Register your models here.
+from .models import *
+
+admin.site.register(Character)

api/fantasyforgeapp/admin.py

@@ -0,0 +1,3 @@
+[
+    {"model": "fantasyforgeapp.character", "pk": 1, "fields": {"name": "Place Holder"}}
+]

api/fantasyforgeapp/fixtures/characters.json

@@ -0,0 +1,21 @@
+# Generated by Django 5.1.6 on 2025-02-28 13:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Character',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100)),
+            ],
+        ),
+    ]

api/fantasyforgeapp/migrations/0001_initial.py

@@ -0,0 +1,18 @@
+from rest_framework import serializers
+from .models import Character
+
+class CharacterSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Character
+        fields = [
+            "id",
+            "name",
+        ]
+    
+    def create(self, validated_data):
+        return Character.objects.create(**validated_data)
+
+    def update(self, instance, validated_data):
+        instance.name = validated_data.get("name", instance.name)
+        instance.save()
+        return instance

api/fantasyforgeapp/serializers.py

@@ -0,0 +1,11 @@
+from . import views
+from django.urls import path
+from rest_framework.routers import DefaultRouter
+from django.urls import include
+
+router = DefaultRouter()
+router.register(r"characters", views.CharacterViewSet, basename="characters")
+
+urlpatterns = [
+    path("", include(router.urls)),
+]

api/fantasyforgeapp/urls.py

@@ -1,3 +1,8 @@
-from django.shortcuts import render
+    
+from .models import Character
+from .serializers import CharacterSerializer
+from rest_framework import viewsets
 
-# Create your views here.
+class CharacterViewSet(viewsets.ModelViewSet):
+    queryset = Character.objects.all()
+    serializer_class = CharacterSerializer

api/fantasyforgeapp/views.py

@@ -15,7 +15,7 @@ import { ref } from 'vue'
             </router-link>
           </li>
           <li>
-            <router-link :to="{ name: 'home' }" class="text-gray-900 dark:text-gray-100 inline-block py-2 px-4 text-sm font-medium">
+            <router-link :to="{ name: 'characters' }" class="text-gray-900 dark:text-gray-100 inline-block py-2 px-4 text-sm font-medium">
               Characters
             </router-link>
           </li>

api/requirements.txt

@@ -3,6 +3,8 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import axios from "axios";
+axios.defaults.baseURL = import.meta.env.VITE_API_URL
 
 const app = createApp(App)
 

frontend/package-lock.json

@@ -17,6 +17,12 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue'),
     },
+
+    {
+      path: '/characters',
+      name: 'characters',
+      component: () => import('../views/CharachtersView.vue'),
+    }
   ],
 })
 

frontend/src/components/NavBar.vue

@@ -0,0 +1,27 @@
+<script setup>
+import axios from "axios";
+import { ref, onMounted } from "vue";
+const characters = ref([]);
+
+const fetchCharacters = async () => {
+  try {
+    const res = await axios.get("/api/characters/");
+    characters.value = res.data;
+  } catch (error) {
+    console.error("Error fetching characters:", error);
+  }
+};
+
+onMounted(() => {
+  fetchCharacters();
+});
+</script>
+<template>
+  <div>
+    <ul>
+      <li v-for="character in characters" :key="character.id">
+        {{ character.name }}
+      </li>
+    </ul>
+  </div>
+</template>

frontend/src/main.js

@@ -0,0 +1,28 @@
+<script setup>
+import axios from "axios";
+import { ref, onMounted } from "vue";
+const characters = ref([]);
+
+const fetchCharacters = async () => {
+  try {
+    const res = await axios.get("http://127.0.0.1:8000/api/characters/");
+    characters.value = res.data;
+  } catch (error) {
+    console.error("Error fetching characters:", error);
+  }
+};
+
+onMounted(() => {
+  fetchCharacters();
+});
+</script>
+<template>
+  <div>
+    <h1>Characters</h1>
+    <ul>
+      <li v-for="character in characters" :key="character.id">
+        {{ character.name }}
+      </li>
+    </ul>
+  </div>
+</template>