2016-09-19 5 views
0

私はログイン用のページを作成していますが、投稿要求に問題があります。 私は角度の最終バージョン2角2投稿の返信サービスからの返信

login.htmlと

<label for="username">User</label> 
<input type="text" id="user" #user> 
<label for="password">Password</label> 
<input type="password" id="password" #password> 
<button type="submit" (click)="onLogin(user.value, password.value); user.value=''; password.value=''">Login</button> 

login.tsを使用しています

@Component({ 
selector: 'login', 
templateUrl: 'app/views/login.html', 
providers: [ LoginService ], 
styleUrls: [ 'css/login.css' ] 
}) 
export class Login extends Locale { 
users: User[]; 

constructor(public localization: LocalizationService, 
      private _loginService: LoginService) { 
    super(null, localization); 
} 

    onLogin(username: string, password: string) { 
    if (!username && !password){return;} 
    this._loginService.login(username, password) 
     .subscribe(
      user => this.users.push(user), 
      error => console.log(error), 
      () => console.log("Complete") 
     ); 
    } 
} 

user.ts

export class User { 
constructor(
    public username: string, 
    public password: string) {} 
} 

user.servece.ts

@Injectable() 
export class LoginService { 
// URL to web api 
private loginUrl = './authenticate'; 

constructor (private http: Http) {} 

login (username, password): Observable<User> { 
    var body = `username=${username}&password=${password}`; 
    var headers = new Headers(); 
    headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
    var options = new RequestOptions({ headers: headers }); 

    console.log("Url: "+this.loginUrl); 
    console.log("body: " + body); 
    console.log("headers: "+headers); 

    return this.http.post(this.loginUrl, body, options) 
     .map(this.extractData) 
     .catch(this.handleError); 
} 

private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || { }; 
} 

private handleError (error: any) { 
    // In a real world app, we might use a remote logging infrastructure 
    // We'd also dig deeper into the error to get a better message 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); // log to console instead 
    return Observable.throw(errMsg); 
} 
} 

私がエラーを持っている: POST http://localhost:3000/authenticate 404(見つかりません)

データをリンクするときだろうJSONファイルに登録して保存、送信する必要がありますlocalhost:3000/authenticate。

何が問題なのですか、助けてください!

+0

サーバーはこのURL +ポート –

答えて

0

あなたはhttp://localhost:3000/authenticateにデータを投稿しています。大丈夫です。あなたはそのポストデーを受け入れるコードを持っていませんでした。データを消費するhttp://localhost:3000/authenticateのRESTサービスが必要です。ご希望の言語のRESTサービスを開発する方法をご覧ください。

+0

で接続を受け付けません。私は作成/認証ページを作成していないので、Java Servlet APIで作成する必要がありますが、実装方法を理解できません。 –

+0

ポストマンクロムプラグインを使用してhttp:// localhost:3000/authenticateをテストできます。ポストマンプラグインを使用すると、httpリクエストをPOST、GET、PUT、DELETEできます。 httpメソッドを使用してapiを確認し、動作する場合はコードを試してください。 –

+0

ありがとう、非常に良いプラグイン。しかし、私はまだ404 –

関連する問題