Angular2: как отправлять данные с клиента на сервер при выполнении запроса

Есть форма и кнопка на стороне клиента, я хочу отправить данные, которые пользователь набрал в форме, на сервер, где есть обработчик запроса, который сохраняет данные в базу данных, а из базы данных в клиент.

Как я могу это сделать я запутался в логике, я думаю, что есть использование парсера тела, также какова роль заголовков, опция запроса в этом случае, я нашел это решение, но я не реализую вслепую, я просто хочу сделать это по-своему после понимания

В сторона клиента: 

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)
   }
})
1 4
angularjs angular2-http

1 ответ:

Ну ваш вопрос связан с HTTP то есть обмен данными как со стороны клиента, так и со стороны сервера. таким образом, Сначала вам нужно добавить http файл в index.html файл следующим образом: 

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

И вы должны добавить HTTP_PROVIDERS ли в завязке bootstrap или в списке поставщиков.

Так что теперь прийти к 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')

RequestOptions:

Bascially RequestOptions - это совокупность некоторых свойств,таких как method (GET,POST, PUT....), url or path to json file etc, Headers body part и многое другое. мы можем добавить различные optipon согласно потребности. например, вот пример использования RequestOptions.

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

Вот несколько лучших учебников, которые я нашел для того же самого. надеюсь, это может помочь ты.

@Pardeep.

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

3