javascript - 使用vue和node js将JSON文件上传到我的服务器

Question

我是 Node js 和 vue 开发的新手，我想创建一个流程，当用户在表单中保存数据时，我可以创建 JSON 文件并将其上传到我的服务器。这个过程应该在后台完成。稍后，当用户更改某些内容时，我想从服务器读取并更新该文件。

所以我的第一个想法是使用 fs.writeFile() 这不太好用，我认为这只适用于本地内容，这是正确的吗？

var fs = require('fs')

export default {
  methods:{
    send(){
      fs.writeFile("/test.json","Hello World!",function(err){
        if(err){
          throw err;
          } 
      });
    }
  }
}

此外，fs.writeFile 似乎不适用于 vue，因为它会抛出此错误:

类型错误:fs.writeFile 不是 VueComponent 的函数

所以我的第二个想法是使用 Express js 和 app.post('/api/apps',...) 和 app.get() 方法。在这里我不知道如何将其实现到 vue 框架中，因为我必须调用像 mydomain.com/api/apps 这样的 api，但这也不起作用。

那么，在我的服务器上的特定文件夹中创建、读取、上传、删除文件的最佳方法是什么？它如何与 vue 配合使用？我倾向于表达js。

我正在使用 vue cli :)

提前致谢:)

编辑

现在我要做的是:

我在 vue 项目根目录中创建了一个新文件夹并将其命名为“backend”。在此文件夹中，我创建了一个名为index.js 的文件并放置此代码

    app.post('/appjson',(req,res) => {
        fs.writeFile("/appjson/myJson.json",req.body,function(err){
           //handle error
        });
    }); 

在客户端我放置了这段代码

axios.post('myDomain.com/appjson', {
  JSONdata: myJSONdata,
})

我的项目如下所示:

因此，当我构建时，我会得到 dist 文件夹，我可以将其上传到我的服务器上，并且工作正常。但我无法调用我的后端？我调用了错误的链接怎么了？或者我如何访问我的后端？项目结构是否正确，或者我需要将后端添加到特定文件夹吗？

Answer 1

Vue 是客户端，您的代码正在尝试向使用您网站的用户的文件系统写入一些内容。您想要做的是将这些数据发送到您的 NodeJS 服务器，这需要使用像 Axios 这样的包来向服务器发送数据或从服务器发送数据，而无需刷新页面。 Axios 使用起来非常简单，您需要的功能类似于下面的功能。

  saveJSON (myJSONData) {
const url = myNodeJSURL/savescene
return axios.post(url, {
  JSONdata: myJSONdata,
})

阅读一些有关 ExpressJS 的教程，这是一个使用起来非常轻松的框架。您将获取存储在 HTTP 请求正文中的数据，然后可以使用 fs.writeFile 将数据保存到服务器的本地文件系统。如果您需要更多帮助，请告诉我。

编辑:您的前端需要访问与后端关联的域或 IP 地址才能与其通信。将下面的代码片段添加到您的 ExpressJS 应用程序中，然后当您运行服务器时，任何对 localhost:3000 的请求都将由您的应用程序处理。您还必须更新 Axios 调用中的 URL。

app.listen(3000, function () {
  console.log('my server is listening on port 3000!')  
})

此设置仅适用于测试目的，因为客户端和服务器必须位于同一台计算机上，本地主机才能对两者具有相同的含义。如果您希望该项目公开，那么您需要为您的站点获取自己的域并通过该域托管 ExpressJS 应用程序。 Google 计算使这变得非常容易，如果我是你，我会研究一下。