投稿するとAngular2に投稿する

Question

私はこれについていくつかの助けが必要です。私はライブラリアプリケーションをビルドしています。サーバーから書籍、タイトル、作者のリストを取得し、新しいブックをサーバー上のデータベースに挿入して挿入する必要があります。 Getメソッドは正常に動作し、すべての情報のリストを取得しますが、このエラーのためにパストメソッドが機能しません。

POST http://localhost:3002/app/components/bookdata/dbooks.json 404 (Not 
Found) 



import {Injectable} from '@angular/core'; 
import {Http,Response} from '@angular/http'; 
import {Headers} from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import {RequestOptions} from '@angular/http'; 

@Injectable() 
export class BookService { 
public _url:string="app/components/bookdata/dbooks.json"; 

constructor(private _http:Http){} 
getBooks(){ 

    return this._http.get(this._url) 
    .map((res:Response)=>res.json()); 
} 

insertNewBook(book:Book){ 



      let body=JSON.stringify(book); 
      let headers=new Headers({'Content-Type':'application/json'}); 
      let options=new RequestOptions({headers:headers}); 
      this._http.post(this._url,body).subscribe(); 


     // .map((res:Response)=>res.json()); 


    } 
     } 




export interface Book{ 
id:number; 
Author:string; 
Date:string; 
Title:string; 
} 

、あなたは、あなたがAPIへの投稿ていないので、これはあなたのために働いていない理由は、私はそれを送信WAY

import{Component,OnInit} from '@angular/core'; 
import {Book} from '../services/book.service' 
import {Injectable} from '@angular/core'; 
import {Http,Response} from '@angular/http'; 
import {BookService} from '../services/book.service'; 
import 'rxjs/add/operator/map'; 

@Component({ 
selector:'newBook', 
template:` 
      <div> 

      <div> 
       <label for="Author">Author:</label> 
       <input type="text" id="au" #au> 
     </div> 

     <div> 
     </div> 
     <div> 

     <label for="Date">Date:</label> 
     <input type="text" id="da" #da> 
</div> 

<div> 
<label for="Titl">Title:</label> 
<input type="text" id="ti" #ti> 
</div> 
<button (click)="InsertData(au.value,da.value,ti.value)">Create</button> 
</div> 

`

}) 
export class NewBookComponent { 
book:Book; 
static num:number; 

constructor(private _bookService:BookService){ 
    NewBookComponent.num=10; 
} 

InsertData(au:string,da:string,ti:string){ 

    let book:Book={id:NewBookComponent.num++,Author:au,Date:da,Title:ti}; 


       this._bookService.insertNewBook(this.book); 
      //.subscribe(res=>console.log(res)); 


} 

} 

Answer 1

のthats明らかに静的なファイルであることに書いています。あなたのアプリで、リクエストを受け取ってURLを呼び出すと、ちょうどあなたにjsonを返すだけのスマートですが、それ以外の何かをするほどスマートではありません。

POSTリクエストによってファイルを変更する場合は、サーバー側のテクノロジを使用してAPIを作成し、そのサーバー上にファイルをホストし、そのサーバー上の従来のファイル操作を行う必要がありますリクエスト。ノード内では、modify a fileはここにあり、ノード内にAPIを構築する方法の例を示します。 （あなたが使い慣れていないなら、ノードはJavaScriptサーバサイドの言語です。あなたが角度に慣れているなら、すぐに受け取ることができます）