Я работаю над приложением Svelte - Java Spring - MongoDB CRUD, где мне нужно обрабатывать 4 HTTP-запроса: GET, POST, DELETE, UPDATE.
У меня следующая проблема. Когда я пытаюсь получить доступ к следующему URL-адресу: http://localhost:5173/get, он дает мне все мои объекты (список картин), потому что мой src/lib/api.js получает JSON картин с http://localhost: 5173/апи/получить. Проблема заключается в том, что я пытаюсь получить доступ к одной картине по идентификатору, и если я попытаюсь перейти по URL-адресу: http://localhost:5173/get/66465b054183ec71756ed694, это выдает мне ошибку 404: не найдено. Но когда я попытался получить доступ к http://localhost:5173/api/get/66465b054183ec71756ed694, он вернул правильный объект.
Итак, я сузил проблему до связи между API и src/route/get/[id].svelte. Поэтому в поисках помощи я предоставлю структуру папок src и файлы src/lib/api.js, svelte.config.js, src/routes/get/+page.svelte и src/routes/get/[id]. стройный.
Я пытался обратиться за помощью к форумам и искусственному интеллекту, но обнаружил, что хожу по кругу. Пожалуйста помоги!
Структура приложения:
src
├── app.html
├── lib
│ ├── api.js
│ └── index.js
└── routes
├── +layout.svelte
├── +page.svelte
├── delete
│ └── +page.svelte
├── get
│ ├── +page.svelte
│ └── [id].svelte
├── post
│ └── +page.svelte
└── update
└── +page.svelte
API.js:
export async function getAllPaintings() {
const response = await fetch('/api/get');
if (!response.ok) {
throw new Error('Failed to fetch paintings');
}
return await response.json();
}
export async function getPaintingById(id) {
const response = await fetch(`/api/get/${id}`);
if (!response.ok) {
throw new Error('Failed to fetch painting');
}
return await response.json();
}
получить/+page.svelte:
<script>
import { onMount } from 'svelte';
import { getAllPaintings } from '$lib/api.js';
let paintings = [];
onMount(async () => {
try {
const response = await getAllPaintings();
console.info(response); // Log the response to inspect its structure
paintings = response; // Assuming response is an array of paintings
} catch (error) {
console.error('Error fetching paintings:', error);
}
});
</script>
<h1>Paintings</h1>
<ul>
{#each paintings as painting}
<li>{painting.name}</li>
{/each}
</ul>
и получите/[id].svelte:
<!-- [id].svelte -->
<script>
import { onMount } from 'svelte';
import { getPaintingById } from '$lib/api';
import { page } from '$app/stores';
let painting = null;
let error = null;
onMount(async () => {
try {
const id = $page.params['*'];
painting = await getPaintingById(id);
} catch (err) {
console.error('Error fetching painting:', err);
error = err.message;
}
});
</script>
{#if error}
<p>{error}</p>
{:else if !painting}
<p>Loading...</p>
{:else}
<h1>{painting.name}</h1>
<p>{painting.description}</p>
<!-- Add more painting details as needed -->
{/if}
svelte.config.js:
import adapter from '@sveltejs/adapter-auto';
/** @type {import('@sveltejs/kit').Config} */
const config = {
debug: true,
kit: {
adapter: adapter()
}
};
export default config;
Если вам нужна дополнительная информация, я буду рад предоставить!
Я пробовал $paga.params.id и $page.params Я также пытался добавить множество файлов console.info как в функцию API, так и в [id].svelte, но ни один из них не ответил. Попробовал изменить svelte.config, добавив пути, но он просто не позволяет серверу работать, поэтому я оставил его пустым.
Параметры маршрута работают не так, вам нужен каталог с именем [id]
, содержащий +page.svelte
.
См. документацию по маршрутизации.
Чтобы решить эту проблему, я предлагаю изменить структуру вашего проекта, как показано ниже.
src
├── app.html
├── lib
│ ├── api.js
│ └── index.js
└── routes
├── +layout.svelte
├── +page.svelte
├── delete
│ └── +page.svelte
├── get
│ ├── +page.svelte
│ └── [id]
| |__+page.server.js
| |__+page.svelte
├── post
│ └── +page.svelte
└── update
└── +page.svelte
добавьте папку с пулами для конкретной картины и получите доступ к этому конкретному идентификатору картины в функции загрузки page.server.js и, используя этот идентификатор, вы можете выполнить остальную часть своего кода
пример кода
export function load({params}){
let painting_id= params.id;
return {painting_id};
}