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())
}

我的目标是在PEOPLE.json 中写入（如有必要替换）newPerson 属性（或整个文件）。当然，当前的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 documentation（或其他几个 API 实现）。但是，如果您打算在浏览器之外出于某种目的使用该文件，这将是一项非常重要的任务。

如果要将文件保存在服务器上，则需要将其交给后端。