Javascript 使用vue和node js将JSON文件上载到我的服务器

Javascript 使用vue和node js将JSON文件上载到我的服务器,javascript,node.js,vue.js,Javascript,Node.js,Vue.js,我是node js和vue开发的新手,我想创建一个流程,当用户将数据保存在表单中时,我可以在其中创建JSON文件并将其上载到服务器。这个过程应该在后台完成。稍后,当用户更改某些内容时,我想从服务器读取并更新该文件 所以我的第一个想法是使用fs.writeFile,这不是很好,我认为这只适用于本地的东西,对吗 var fs = require('fs') export default { methods:{ send(){ fs.writeFile("/test.json

我是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,因为它会引发以下错误:

TypeError:fs.writeFile不是VueComponent上的函数

所以我的第二个想法是在app.post'/api/apps'中使用expressjs,。。。和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文件夹,我可以将它上传到我的服务器上,它工作正常。但我不能给我的后端打电话?我怎么称呼错误的链接?或者如何访问我的后端?项目结构是否正确,或者我是否需要将后端添加到特定文件夹?

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!')  
})

此设置仅用于测试目的,因为客户端和服务器必须位于同一台计算机上,localhost对两者的意义相同。如果你希望这个项目是公开的,那么你需要为你的站点获得你自己的域,并在那里托管ExpressJS应用程序。Google compute让这项工作变得非常简单,如果我是你的话,我会调查的。

你应该开始仔细看一下显示客户端和服务器的图片,然后阅读文章的每一部分。感谢你的帮助exloser:我编辑了我的问题,也许你可以看一下,因为我有点麻烦。@Funkberater项目结构对于客户端/服务器来说并不重要表达您应该开始将它们视为两个完全不同的实体,它们只能通过HTTP相互通信。我编辑了我的帖子来回答你们的新问题。经过一些尝试后,它就可以工作了:我可以调用我的api,然后得到回复。所以我使用heroku进行测试,并在那里托管我的api。我的最后一个问题是如何将文件上载到服务器?我将fs.writeFile写入app.post函数,但什么也没发生。heroku是上传文件的正确服务吗?那么我可以上传文件到api服务器吗?如果这是个好主意的话?或者我需要另一台类似亚马逊aws的服务器来保存文件?我从来没有使用过heroku,但它看起来像是一个短暂的文件系统,所以每次重置dyno时,所有文件都会被删除。我做了一些研究,看起来你可以通过使用。如果问题出在heroku身上,我不会有多大用处,但是如果是与NodeJS服务器相关的东西,请发布代码和错误消息,我可以帮助您运行它。