如何使用Sapper JS lib将数据正确发布到服务器？
说:我有一个页面“board-editor”，在其中可以从以SVG编写的六边形网格中选择/取消选择图块，并在存储数组中添加/减去十六进制坐标。
然后，用户填写一个表单，其中包含以下名称:名称，作者和版本...单击保存按钮将发布表单数据以及存储中的数组。服务器的工作是将电路板定义存储在“static/boards/repository/[name] .json”文件中。
如今，网上很少有细节可以正确使用Sapper/Svelte处理POSTing数据问题。
如何进行 ？感谢您的答复!
编辑:
为了避免重新发布整个页面(这意味着丢失应用程序状态)，我考虑使用内部带有窗体的IFRAME ....但是如何在IFRAME内初始化sapper的副本以确保我可以使用this.fetch ()方法在其中吗？
最佳答案
我在网站上使用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 }))
}
希望能帮助到你!