angular2 http.post() 到本地 json 文件

Question

幫助不大？

我想純JSON寫信給我的項目中的一個文件，我的項目樹是這個樣子：

src
->app
-->components
--->people.component.ts
--->(other irrelevant components)
-->services
--->people.service.ts
-->data
--->JSON.json
->(other irrelevant src files)

在我的代碼people.component.ts只是用來通話和訂閱我的內部功能people.service.ts ，傳遞newPerson屬性，它是使用魔法angular2從DOM數據綁定; 這是name.service.ts的函數：

public addPerson(newPerson) {
        let headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.post('app/data/PEOPLE.json', newPerson, { header: headers })
        .map(res => res.json())
}

我的目標是寫（必要時更換）的newPerson內的財產（或整個文件） PEOPLE.json 。 當然，當前的addPerson()函數返回錯誤。

我也試過put方法，它的錯誤略有不同，但我還沒有找到任何一種方法的解決方案。

我清楚地知道這不是我試圖放入PEOPLE.json文件的數據格式/類型的錯誤。

Answer 1

不幸的是，您不能使用客戶端（瀏覽器）JavaScript 直接 PUT 或 POST 到本地文件系統上的文件。

考慮構建一個簡單的服務器來處理 POST 請求。 如果您最熟悉 JavaScript，請嘗試使用 Node.js 進行 Express

// server.js
'use strict'

const bodyParser = require('body-parser');
const express = require('express');
const fs = require('fs');

const app = express()
app.use(bodyParser.json());

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8000');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  res.header('Access-Control-Allow-Methods', 'POST');
  next();
});

app.post('/', (req, res) => {
  console.log('Received request');
  fs.writeFile('json.json', JSON.stringify(req.body), (err) => {
    if (err) throw err;
    console.log('File written to JSON.json');
    res.send('File written to JSON.json')
  })
});

app.listen(3000, ()=>{
  console.log('Listening on port 3000. Post a file to http://localhost:3000 to save to /JSON.json');
});

Answer 2

您不能從瀏覽器寫入文件。 時期。 即使可能進行此類操作，它也會存儲在用戶端，而不是您的服務器。 如果您的任務確實是在用戶端寫一些東西，請參考localStorage 文檔（或其他 API 實現）。 但是，如果您要在瀏覽器之外出於某種目的使用該文件，這將是一項重要的任務。

如果要將文件保存在服務器上，則需要將其交給后端。