9

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

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

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

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

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

编辑：

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

4

2 回答 2

16

我用 Sapper + Svelte 做网站，真是太棒了！在我的联系表单组件中，数据被发送到服务器。这就是没有 iframe 的情况。发送和接收的数据为 JSON 格式。

在客户端（组件）：

var data = { ...my contact JSON data... }
var url = '/process/contact' // associated script = /src/routes/process/contact.js

fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(r => {
  r.json()
    .then(function(result) {
      // The data is posted: do something with the result...
    })
})
.catch(err => {
  // POST error: do something...
  console.log('POST error', err.message)
})

在服务器端：

脚本 = /src/routes/process/contact.js

export async function post(req, res, next) {
  /* Initializes */
  res.setHeader('Content-Type', 'application/json')
  /* Retrieves the data */
  var data = req.body
  // Do something with the data...
  /* Returns the result */
  return res.end(JSON.stringify({ success: true }))
}

希望能帮助到你！

于 2019-06-03T09:11:33.760 回答
12

结合上面的解决方案，您可能会undefined在尝试读取服务器端发布的数据时遇到问题。

如果您使用 Sapper 的标准数字，则您使用的是 Polka。为了在 Polka 中启用 body-parse，您可以执行以下操作。

npm install body-parser

在server.js中，添加以下内容

const { json } = require('body-parser');

并在polka()添加导入

.use(json())

所以它最后说的是

...
const { json } = require('body-parser');

polka() // You can also use Express
    .use(json())
    .use(
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });
于 2019-12-27T12:04:59.853 回答