4

クライアント側にフォームとボタンがあり、ユーザーがフォームに入力したデータをサーバーに送信したいと思います。サーバーには、データをデータベースに保存するリクエストハンドラーがあり、データベースからクライアントに送信されます。

これを行うにはどうすればよいですか？ロジックについて混乱しています。ボディパーサーの使用、ヘッダーの役割、その場合のリクエストオプションがあると思います。その解決策を見つけましたが、やみくもに実装していません。理解した上で自分のやり方でやりたい

クライアント側で:

let headers: Headers = new Headers();
headers.append('Content-Type', 'application/json');
let opts: RequestOptions = new RequestOptions();
opts.headers = headers;
this.http.post(
    'http://localhost:3000/addStudent',
    JSON.stringify(obj),
    opts
).subscribe((res: Response) => {
    console.log(res.json())
    setTimeout(() => {
        this.students = res.json();
    }, 3000)
})

サーバー側:

app.post('/addStudent',function(req,res) {
var newStudent = new StudentModel(req.body);
console.log(req.body);
newStudent.save();
StudentModel.find(function(err,data) {
   if(err) res.send(err) 
   else res.json(data)
})
4

1 に答える 1

3

あなたの質問はHTTP、クライアント側とサーバー側の両方からのデータ交換に関連しています。したがって、最初に同じことを行うには、次のようhttpにファイルにファイルを追加する必要があります。index.html

<script src="node_modules/angular2/bundles/http.dev.js"></script>

HTTP_PROVIDERSそして、ブートストラップのタイまたはプロバイダーリストに追加する必要があります。

だから今来てRequestOptions, Headers etcください。まず、ここから必要に応じてこれらをインポートします...

import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';

ヘッダーの役割:

基本的に、ヘッダーは、サーバーに送信したい のContent-Typeような機密データを追加するために使用されます。username,Passwordサーバーにデータを送信するためにも使用される本体部分もあります。例えば：

this.headers = new Headers();
    this.headers.append("Content-Type", 'application/json');
    this.headers.append("Authorization", 'confidential data or   
    something like that')

リクエストオプション:

基本的には、 (GET、POST、PUT....) などのRequestOptionsプロパティのコレクションです。必要に応じてさまざまなオプションを追加できます。たとえば、これは を使用した例です。methodurl or path to json file etcHeaders body partRequestOptions

this.requestoptions = new RequestOptions({
                method: RequestMethod.Post,
                url: "url path....",
                headers: this.headers,
                body: JSON.stringify(data)
            });

これは、私が見つけた最高のチュートリアルです。これがあなたに役立つことを願っています。

@パーディープ。

http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http

https://auth0.com/blog/2015/10/15/angular-2-series-part-3-using-http/

https://angular.io/docs/js/latest/api/http/Request-class.html

于 2016-02-12T05:00:19.990 に答える