Svelte Kit GET by Id 给我 404 Not Found

Question

我正在开发一个 Svelte - Java Spring - MongoDB CRUD 应用程序，我需要处理 4 个 HTTP 请求：GET、POST、DELETE、UPDATE。

我有以下问题。当我尝试访问以下网址时：http://localhost:5173/get 它给了我所有的 objs（绘画列表），因为我的 src/lib/api.js 从 http://localhost 获取了绘画的 json： 5173/api/获取。问题在于，当我尝试通过 Id 访问一幅绘画时，如果我尝试访问 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.log(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 我还尝试在 api 函数和 [id].svelte 中添加大量 console.logs，但没有一个响应。 尝试通过添加路径来更改 svelte.config，但它只是不允许服务器运行，所以我将其留空。

Answer 1

这不是路由参数的工作方式，您需要一个名为 [id] 的

目录

，其中包含

+page.svelte

。 请参阅路由文档。