Настройка CRUD-маршрутизации SvelteKit с параметром [id]

Я работаю над приложением 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, добавив пути, но он просто не позволяет серверу работать, поэтому я оставил его пустым.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
118
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Параметры маршрута работают не так, вам нужен каталог с именем [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};
}

Другие вопросы по теме