我试图在向服务器提交表单然后将客户端重定向到这个新页面后创建一个新页面。重定向后,我收到错误 404,刷新后它可以工作(至少在开发中,我没有在生产中尝试过)。所以我在重定向中添加了延迟,这......它在一半的时间内有效。
这是我的+page.svelte 的内容
<form method="POST" action="?/create">
<label>
Title
<input name="title" type="text">
</label>
<label>
URL
<input name="URL" type="text">
</label>
<button>Submit</button>
</form>
还有+page.server.js
import { redirect } from '@sveltejs/kit';
import * as fs from 'node:fs';
/** @type {import('./$types').Actions} */
export const actions = {
create: async ({ request }) => {
const data = await request.formData()
//const gameTitle = data.get('title')
const gameURL = data.get('URL')
const fileTemplate = '<script>\n import Template from "../template.svelte";\n</script>\n\n<p>I am the page file</p>\n<Template />'
fs.mkdir(`./src/routes/(games)/${gameURL}/`, (error) => { console.error(error) })
fs.writeFile(`./src/routes/(games)/${gameURL}/+page.svelte`, fileTemplate, (error) => { console.error(error) })
setTimeout(redirect(303, `/${gameURL}`), 3000)
return { success: true }
},
delete: async (event) => { // TODO: delete selected page },
update: async (event) => { // TODO: change options on a file already created }
};
这应该添加一个具有所选名称的文件夹,然后是一个包含已包含内容的精简文件。 它在路由文件夹中应该如下所示:
routes
| - (games)
| - [This should be gameURL]
| - +page.svelte
atm这里是+page.svelte的内容
<script>
import Template from "../template.svelte";
</script>
<p>I am the page file</p>
<Template />
理论上 template.svelte 应该只给出页面的形状,文件夹内的所有其他 +page.svelte 应该有颜色和图像,但这只是为了上下文。
感谢您的帮助^^。
SvelteKit 不应该这样使用,而且我相当确定当你构建它用于生产时这永远不会起作用。
在开发模式下使用它我想可以工作(我不明白为什么开发服务器应该区分手动创建新的
+page.svelte
文件和应用程序中的代码),但它仍然不是打算这样使用,所以我会避免它。
我不确定您想要实现什么目标,但请阅读
docs中的
[slug]
,这可能是您需要使用的东西才能实现您想要的目标。
您似乎还希望用户能够使用表单创建新游戏?为此,您需要能够以某种方式将这些游戏存储在服务器端,例如数据库中。