问题标签 [sapper]

如何使用 Sapper JS lib 正确地将数据发布到服务器？

说：我有一个页面“板编辑器”，我可以在其中从用 SVG 编写的六边形网格中选择/取消选择图块，并在存储数组中添加/减去十六进制坐标。

然后用户填写一个表单，其中包含板：名称、作者和版本...单击保存按钮将 POST 表单数据以及存储中的数组。服务器的工作是将板定义存储在 'static/boards/repository/[name].json' 文件中。

今天，网上几乎没有关于正确使用 Sapper/Svelte 和 POSTing 数据问题的详细信息。

如何进行 ？感谢您的回复！

编辑：

为了避免重新发布整个页面，这意味着丢失应用程序状态，我考虑使用内部带有表单的 IFRAME.... 但是如何在 IFRAME 中初始化 sapper 的副本以确保我可以使用 this.fetch () 方法呢？

假设我有一条/foo路线。但有时人们会遇到/foo一个语言参数：/fr/foo. 而其他时候，他们可能会用一种语言和一个国家来击中它：/ca/fr/foo

所以我需要一个路由表

所有这些都直接指向同一页面。

我应该创建这样的树吗？

[language]/foo如果这是答案，那么我该如何指导[country]/[language]/foo？

我在文档中看不到任何可选参数

我需要检测用户设备（浏览器、操作系统等）并根据设备类型（移动设备或桌面设备）显示不同的导航。它应该在 Sapper/Svelte 的 SSR 期间工作。

非常感谢任何帮助！

我正在尝试通过 @now-node. 任务基本上是部署一个具有依赖关系的 Polka 服务器，并静态地提供 static/ 和 client/ 文件。我已设法通过 includeFiles 包含 Lambda 所需的文件，但现在我在日志中看到构建器忽略了 package.json 中描述的依赖项。确切的信息是

但是我在构建日志中看到没有收集依赖项。两者package.json和package-lock.json都存在于源文件中。

我将不胜感激有关如何解决此问题的任何建议。

我到达的 now.json 配置如下所示：

src/server.js 看起来像这样（在汇总捆绑之前）：

然后 package.json 也很标准：

提前致谢！

无论我多么努力地试图在不和谐服务器或官方文档上找到任何帮助，我都无法理解它。

例如，这是我的反应 webpack 配置：

我自己配置​​它绝对没有问题。任何帮助如何为打字稿和 scss 支持设置 svelte sapper webpack 配置？

或者也许有人有汇总配置？

我正在探索标准的 svelte-sapper 模板，我想在Nav组件中添加一个按钮来执行一些登录逻辑。我还想分离按钮的表示和逻辑，所以我尝试为此使用插槽。在Nav.svelte：

在Login.svelte：

我显然不知道我在做什么，因为代码在水合之前在服务器端执行（在服务器路由执行中简要显示 500 错误证明），然后当我单击按钮时（在浏览器控制台中）：

我阅读了有关仅在客户端上执行代码的信息，尽管我不喜欢所有样板文件，但我尝试这样做，并且显然插槽没有传递给子组件，因此据我了解是行不通的。

对于如何为这项任务得出正确的语法和结构的任何建议，我将不胜感激。

我是 Svelte 的新手，我正在尝试将一些信息设置到 sessionStorage 中，但它正在抛出“未定义 sessionStorage”。我意识到我收到了这个错误，因为它在服务器端运行。

我在/src/components/nav.svelte创建了一个使用/src/domain/auth/service.js的组件，错误发生在最后一个。

在网上搜索我发现在这种情况下我必须在onMount函数中使用sessionStorage 。那是正确的方法吗？

我怎样才能避免我的代码变得有点混乱？

我来自 React 背景，但我正在为我的下一个应用程序切换到 Svelte 和 Sapper，以对抗 React 带来的巨大包大小。但是，我在使用从 localStorage 检索到的数据初始化 Svelte 存储时遇到了问题。

根据 Sapper 文档 ( https://sapper.svelte.dev/docs#Getting_started )，我通过npx degit "sveltejs/sapper-template#rollup" my-app从命令行运行创建了我的项目。然后我安装了依赖项并删除了src文件夹中的演示代码。

然后我创建了两个文件：src/routes/index.svelte和src/store/index.js.

两者的代码：

src/store/index.js

src/routes/index.svelte

当我运行应用程序并点击index路线时，我看到了：

您的首选语言：空

然后几乎立即更新并更改为

您的首选语言：en

当 localStorage 中没有lang项目时，更改为

您的首选语言：fr

localStorage.setItem("lang", "fr")从开发者控制台显式设置并刷新后。

我知道商店首先在服务器上初始化window，undefined然后在客户端上重新水化。所以这种行为是意料之中的。

所以我的问题是：我怎样才能完全跳过服务器初始化？是否可以只在客户端设置商店（在哪里localStorage定义），以便用户选择的语言立即可用？

在用户选择更改他们的首选语言后，我不能默认使用英语或任何其他语言。我也无法通过navigator.language初始页面加载从浏览器获取用户语言，因为navigator它undefined也在服务器上。

并且在商店重新水化之前出现一闪而过的空文本会搞砸我的应用程序的用户体验，特别是当userLang翻译的值将在整个地方使用时。

因此，对此的任何策略或技巧都绝对值得赞赏。

****更深层次的问题****

实际上，我更希望这个应用程序根本没有服务器端渲染，但我确实需要 Sapper 提供的所有其他出色功能，例如路由、预取和静态站点构建。

因此，我尝试npx sapper export按照文档运行以生成一个完全静态的站点，以便从等式中删除服务器，但仍然会出现完全相同的问题，即使根本没有使用服务器。

有人对如何配置 Sapper 和关闭 SSR 但保留其他功能有任何建议吗？

谢谢！

****更新****

根据 Rich Harris 的回答，将标记包装起来{#if process.browser}就可以了。所以我src/routes/index.svelte像这样更新了文件：

并且该userLang变量立即设置为值 fromlocalStorage或默认值，en正如我在这个简单演示中所打算的那样。没有更多的闪光null，所以它基本上表现得像它只是在这一点上的客户端。

我将努力充实我的项目，看看是否还有其他问题。到那时，我认为这解决了我的问题。

我正在使用带有波尔卡的苗条/工兵。在加载任何页面之前，我有一些初始值要从 Web 服务中获取并存储在会话中。最好的推荐方法是什么。

我尝试在根目录中的 _layout 中执行此操作。但是由于获取是异步的，因此在第一页加载时值不可用。

我的工兵应用程序围绕一个表格组件。此表组件具有我想在 URL 的查询字符串中表示的状态（偏移量、限制、排序、过滤器等）。

该表目前通过直接更新其状态可以正常工作：

我看到有页面只读存储可以让我访问查询字符串的当前值。我想我可以使用类似的东西URLSearchParams来生成更新相关值的链接。

有没有更好的方法来处理这个问题（某种直接将变量绑定到查询字符串的方法）？如果没有，用更新的查询字符串生成链接的最佳方法是什么？

编辑：

我目前的解决方案是以下功能：

我在一个a标签中引用了将上面的按钮替换为：

它有效，但我觉得应该有更好的方法