Backend Verbindung mittels AXIOS (noch fehlerhaft - CORS policy)

package-lock.json

@@ -25,6 +25,7 @@
         "@vueuse/core": "10.9.0",
         "@vueuse/math": "10.9.0",
         "apexcharts": "3.46.0",
+        "axios": "^1.7.7",
         "chart.js": "4.4.2",
         "cookie-es": "1.0.0",
         "eslint-plugin-regexp": "2.2.0",
@@ -44,7 +45,6 @@
         "vue-i18n": "9.10.1",
         "vue-prism-component": "2.0.0",
         "vue-router": "4.3.0",
-        "vue-the-mask": "^0.11.1",
         "vue3-apexcharts": "1.5.2",
         "vue3-perfect-scrollbar": "1.6.1",
         "vuetify": "3.5.2",
@@ -4167,8 +4167,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-      "dev": true
     },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
@@ -4186,10 +4185,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.7.2",
+      "version": "1.7.7",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
-      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
-      "dev": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -4689,7 +4687,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5159,7 +5156,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -6868,7 +6864,6 @@
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
       "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -6897,7 +6892,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
       "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -8398,7 +8392,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -8407,7 +8400,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -10146,8 +10138,7 @@
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
-      "dev": true
     },
     "node_modules/pump": {
       "version": "3.0.0",
@@ -12750,11 +12741,6 @@
         "vue": ">=3.0.0"
       }
     },
-    "node_modules/vue-the-mask": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/vue-the-mask/-/vue-the-mask-0.11.1.tgz",
-      "integrity": "sha512-UquSfnSWejD0zAfcD+3jJ1chUAkOAyoxya9Lxh9acCRtrlmGcAIvd0cQYraWqKenbuZJUdum+S174atv2AuEHQ=="
-    },
     "node_modules/vue/node_modules/@vue/compiler-core": {
       "version": "3.4.21",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",

package.json

@@ -29,6 +29,7 @@
     "@vueuse/core": "10.9.0",
     "@vueuse/math": "10.9.0",
     "apexcharts": "3.46.0",
+    "axios": "^1.7.7",
     "chart.js": "4.4.2",
     "cookie-es": "1.0.0",
     "eslint-plugin-regexp": "2.2.0",

src/pages/BookService.js

@@ -0,0 +1,42 @@
+import axios from 'axios'
+
+const baseUrl = 'http://localhost:8001/api/v1/book/registration/search/isbn/' // Passe die URL an
+
+export default {
+  getBookByIsbn(isbn) {
+    return axios.get(`${baseUrl}${isbn}`, {
+      headers: {
+        'accept': 'application/json',
+      },
+    })
+      .catch(error => {
+        // Detailliertere Fehlerbehandlung
+        console.error('Fehler beim Abrufen des Buches:', error)
+
+        // Zeige dem Benutzer eine informative Fehlermeldung an
+      })
+  },
+}
+
+/*const axios = require('axios')
+
+export default {
+  getBookByIsbn(isbn) {
+    // Make a request for a user with a given ID
+      console.log(isbn)
+    axios.get('http://localhost:8001/api/v1/book/registration/search/isbn/9783898798822')
+      .then(function (response) {
+        // handle success
+        console.log("hi", response)
+      })
+      .catch(function (error) {
+        // handle error
+        console.log(error)
+        console.log("hi")
+      })
+      .finally(function () {
+        // always executed
+        console.log("hi")
+      })
+  },
+}*/

src/pages/buechersuche.vue

@@ -114,6 +114,14 @@
         class="mb-6"
         title="Gefundene Bücher:"
       >
+
+        Hallo Hier ist die API:
+        {{book}}
+        <div v-if="book">
+          <p>Titel: {{ book.title }}</p>
+<!--          <p>Autor: {{ book.author }}</p>-->
+        </div>
+
         <!-- 👉 Hier werden die Bücher aufgelistet. -->
 
         <VCol
@@ -178,6 +186,7 @@ import { themeConfig } from '@themeConfig'
 import { ref, onMounted, watch } from 'vue'
 import Fieberkurve from "@/components/Fieberkurve.vue"
 import harry_potter from "@/assets/images/harry_potter_stein_weisen_rowling.jpg"
+import BookService from './BookService'
 import { useTheme } from "vuetify"
 
 const message = ref('')
@@ -277,6 +286,27 @@ const checkboxContent = [
 
 const selectedCheckbox = ref([])
 
+
+
+// Hier ist der Abschnitt für die API (BACKEND)
+let book = null
+
+onMounted(() => {
+  const isbn = '9783898798822' // Ersetze durch die gewünschte ISBN
+
+  BookService.getBookByIsbn(isbn)
+    .then(response => {
+      // book = response.data
+      book = response
+    })
+    .catch(error => {
+      console.error(error)
+    })
+})
+
+
+
+
 // const toggleCheckboxOne = ref(true)
 // const genreBool = ref(false)