Add SQLite database to backend, interacting with the frontend

software/src/App.vue

@@ -3,14 +3,25 @@ import { ref } from 'vue';
 import axios from 'axios';
 
 const showDrawer = ref(true)
-const testResponse = ref("")
+const apiCategories = ref([])
+const newCategory = ref("")
 
+function requestAllCategories() {
+  axios.get('http://127.0.0.1:3000/categories')
+    .then(function (response) {
+      console.log(response)
+      apiCategories.value = response.data
+    })
+}
 
-axios.get('http://127.0.0.1:3000/api')
-  .then(function (response) {
-    console.log(response)
-    testResponse.value = response.data
+function addCategory() {
+  axios.post("http://127.0.0.1:3000/categories", {
+    name: newCategory.value
   })
+  .then(requestAllCategories)
+}
+
+requestAllCategories()
 </script>
 
 <template>
@@ -26,7 +37,24 @@ axios.get('http://127.0.0.1:3000/api')
     </v-navigation-drawer>
 
     <v-main>
-      {{ testResponse }}
+      <v-container>
+        <v-row>
+          <v-col>
+            <v-text-field label="Category name" v-model="newCategory" />
+          </v-col>
+          <v-col>
+            <v-btn @click="addCategory" >Hinzufügen</v-btn>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-list>
+            <v-list-item v-for="category in apiCategories">
+              {{ category.name }}
+            </v-list-item>
+          </v-list>
+        </v-row>
+      </v-container>
       <!-- todo -->
     </v-main>
   </v-app>