JS Sapper：将数据发布到服务器（正确的方式？）

Question

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

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

然后用户填写一个表格，其中有板：姓名、作者和版本...单击保存按钮将发布表单数据和存储中的数组。服务器的工作是将板定义存储在“static/boards/repository/[name].json”文件中。

今天，网络上很少有关于 POSTing 数据问题的正确使用 Sapper/Svelte 的细节。

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

编辑：

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

Answer 1

我用 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 }))
}

希望能帮助到你！

Answer 2

结合上面的解决方案，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);
    });