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

时间:2017-02-03 21:35:00

标签: javascript json angular post typescript

一点帮助?

我正在尝试将纯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属性来自DOM使用angular2魔法;这是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文件的数据格式/类型不是错误。

2 个答案:

答案 0 :(得分:2)

不幸的是,您无法使用客户端(浏览器)JavaScript直接将PUT或POST直接发送到本地文件系统上的文件。

考虑构建一个简单的服务器来处理POST请求。如果您对JavaScript最熟悉,请尝试使用Node.js快捷

// 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');
});

答案 1 :(得分:1)

您无法从浏览器中写入文件。期。即使可以执行此类操作,也会将其存储在用户端,而不是服务器上。如果您的任务确实是在用户端编写内容,请参阅localStorage documentation(或其他API实现)。但是,如果您要在浏览器之外出于某种目的使用该文件,那将是非常重要的任务。

如果你想在服务器上保存文件,那么你需要在后端进行处理。