Par*_*xum 3 forms endpoint web-component svelte sveltekit
我有一个 SvelteKit 组件，需要对应的+page.server.tscookie 验证表单操作。我的目标是拥有一个带有相应删除按钮的组件，该组件将从端点内的表单操作中向我的后端发送 API 请求+page.server.ts。
为了清楚起见，我的结构：
- src/
- components/
- Component/
- +page.svelte
- +page.server.ts
- routes/
- route/
- +page.svelte
组件+page.svelte：
<div class="card">
<form method="POST">
<input type="hidden" value="{uuid}" name="uuid" />
<button class="btn-icon variant-filled-primary">
<span><Icon icon="material-symbols:delete-outline"></Icon></span>
</button>
</form>
</div>
组件+page.server.ts：
import type { Actions } from './$types';
export const actions = {
default: async ({ cookies, request }) => {
// Doing some http-only Cookie authenticated fetching and data processing here
}
} satisfies Actions;
该组件的渲染效果与我仍在使用Component.svelte我的结构/命名法而没有专用文件夹和+page.svelte.
单击组件中的提交按钮后，我在浏览器中收到的错误如下：
405 不允许 POST 方法。该页面不存在任何操作
我认为可能会出现这种行为，因为我没有为我的路由指定任何表单操作+page.svelte，但为我的组件指定任何表单+page.svelte操作，无论出于何种原因，单击表单提交按钮时都不会执行该操作。
我解决这个问题的方法是否可能是一个解决方案，或者我是否被迫在这里回滚并仅在使用我的组件的每个路由中使用路由表单操作？对我来说这似乎不是一个可扩展的选项。
使用 Sveltekit 需要记住的一件事是，你会以保持事物易于使用和快乐的名义获得很多“魔力”。整个框架是围绕这个前提设计的，并利用约定来完成它。
您的src/routes目录是整个路由器围绕构建的约定，因此任何需要立即执行路由行为的内容都需要位于该目录内。但是，您在如何将所有内容组合在一起方面仍然具有很大的灵活性。在这种情况下，您有几个选择。
正如人们在评论中提到的，您可以使用该routes目录构建独立于任何.svelte将呈现的文件的 API 结构。常见的结构如下所示，它将创建标准端点路由：
- src/
- routes/
- api/
- delete/
- +server.js
在文件内部+server.js，您可以构建 GET、POST 等的标准处理程序。然后，您可以从根路径、应用程序中的任何位置以及使用任何组件将端点作为相对路径调用fetch，并且您还可以从其他+page.js和+*.server.js文件。在这种情况下，可以通过 path 到达路线/api/delete。
如果组件仅与一个路由相关，另一种选择是将组件放在routes目录中。如果它没有前缀，+它将被路由器忽略。这使得以下结构有效：
- src/
- routes/
- route/
- FormComponent.svelte
- +page.svelte
- +page.server.js
- utilities.js
在这种情况下，FormComponent和utilities文件都会被路由器忽略，但仍然可以从路由中的其他文件访问这两个文件。如果您需要分解页面的各个部分以便在该页面中重用，但这些部分仅适用于相关路由，那么这可以极大地简化文件之间的依赖关系映射。请注意，routes使用此模式放置的文件仍然可以在其他地方使用标准相对路径导入，但如果您需要在其他地方访问它们，它们可能最好放在目录中$lib。
我发现官方文档很完整，但也很简洁。代码示例并不多，足以让您继续前进。这是一个很好的参考资源，但发现它可能具有挑战性。此外，自始至终都假定您了解 vanilla Svelte，并了解 HTTP 约定和 Web 标准。
考虑到这一点，鼓励在这里提问，以及官方 Svelte Discord 社区，该社区也涵盖 Sveltekit。我还发现 Reddit 社区非常有帮助。