From c8350b3c19493f0b64ab3e92a6ba1e65bac463a5 Mon Sep 17 00:00:00 2001 From: MCMichinator Date: Sun, 10 Nov 2024 13:40:54 +0100 Subject: [PATCH] Backend Verbindung mittels AXIOS (noch fehlerhaft - CORS policy) --- package-lock.json | 26 ++++++----------------- package.json | 1 + src/pages/BookService.js | 42 ++++++++++++++++++++++++++++++++++++++ src/pages/buechersuche.vue | 30 +++++++++++++++++++++++++++ 4 files changed, 79 insertions(+), 20 deletions(-) create mode 100644 src/pages/BookService.js diff --git a/package-lock.json b/package-lock.json index 4c4db1e..bebb1f6 100644 --- a/package-lock.json +++ b/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==", - "dev": true + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, "node_modules/available-typed-arrays": { "version": "1.0.7", @@ -4186,10 +4185,9 @@ } }, "node_modules/axios": { - "version": "1.7.2", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", - "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", - "dev": true, + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", + "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", "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==", - "dev": true + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" }, "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", diff --git a/package.json b/package.json index e39d2ce..0f62c0a 100644 --- a/package.json +++ b/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", diff --git a/src/pages/BookService.js b/src/pages/BookService.js new file mode 100644 index 0000000..82ca13b --- /dev/null +++ b/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") + }) + }, +}*/ diff --git a/src/pages/buechersuche.vue b/src/pages/buechersuche.vue index 5d56473..e00f636 100644 --- a/src/pages/buechersuche.vue +++ b/src/pages/buechersuche.vue @@ -114,6 +114,14 @@ class="mb-6" title="Gefundene Bücher:" > + + Hallo Hier ist die API: + {{book}} +
+

Titel: {{ book.title }}

+ +
+ { + 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)