My Capability)HTTPトランザクションを使用してログインウィンドウを作成する-サーバの概要を完了し、bodyを介してデータを転送および受信する

32239 ワード

以前はネットワーク上でHttp通信の実現方法を学びました.その上で、ノード.js上のHTTPトランザクションを用いて,簡単なログインウィンドウとサーバで会員の有無を判別し,会員が一時的にOpenAPIを開いて映画リストを印刷するホームページを作成する.

最終的に必要な能力。

Httpトランザクションを使用するサーバ通信

OpenAPIを介してデータを送受信

1.ログインウィンドウの実装

ページは上記のように表示されます.現在はJSファイルでサーバとの通信方法を実現している.
サーバ通信部

//서버로 보내주는 함수 
function post(Id,PW){
    let Identy = Id
    //fetch를 통해 서버와 통신을 실시 한다.
    fetch(`http://localhost:5000`,{
        method: 'POST', //post metod는 POST로 전달한다.
        body: JSON.stringify(Identy), //body(로그인 정보전달)을 JSON으로 전달한다.
        headers:{
            'Content-Type':'application/json'
        }
    })
        .then(res=> res.json())
        .then(res =>respon(res))
}

サーバから受信したデータを処理する領域

function respon(result){
    Id_text = ''
    PW_text = ''
    if(result === 'baek1008'){
    alert(`${result}님 로그인이 완료 되었습니다.`)
    }
    else alert('회원이 아니십니다.')
}

TIP)なぜファイルをJSONに転送するのかというと、実装技術によれば、どこでもJSONを解釈すればデータを使用でき、移動間のデータも軽くなるので、通信間の標準はJSONを使用することになる。

2.データ処理領域の実施

HTTPトランザクション実装の間にはいくつかのルールがあります.
これらのルールは、https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/(node.js HTTPトランザクション分解)を確認することによって詳細に知ることができる.

は、サーバを作成するためにWebサーバオブジェクトを最初に作成する必要があります.次にcreateServicerを使用します.

const http = require('http');
const server = http.createServer((request, response) => {
  // 여기서 작업이 진행됩니다!
});

の後、私たちが書くデータ値をrequestオブジェクトに持ち込む必要があります.方法は構造分解により以下のように割り当てられる.

 const { headers, method, url } = request;

体の持ち込み方を求められるのは面倒です.データを受信する場合は、それぞれ受信し、配列に入れて1つにマージします.
ストリーム内のdataイベントとendイベントにイベントリスナーを登録してデータを受信できます.
「data」イベントで発生するセグメントはBufferです.セグメントが文字列データであることを知っている場合は、データを配列に収集し、endイベントに貼り付け続け、文字列として作成することをお勧めします.

let body = [];
request.on('data', (chunk) => { //요청된 데이터를 사용할때 .on이라는 메소드를 사용한다.
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // 여기서 `body`에 전체 요청 바디가 문자열로 담겨있습니다.
});

TIP)なぜ?createServerを使用して作成されたオブジェクトをオブジェクトと呼びますか?

createServerが返すサーバオブジェクトはEventEmitterで、サーバオブジェクトを生成してリスナーを追加する略語構文が使用されます.略さないで、なるほど

のすべてのイベントを生成するオブジェクトはEventEmitterインスタンスです.つまりEventEmitterはインスタンスを生成するクラスである.これらのオブジェクトを使用すると、1つ以上の関数を特定のイベントにアタッチして実行できます.on()関数を持つ.これらのオブジェクトがイベントをトリガーすると、特定のイベント上の1つ以上の関数が非同期で呼び出されます.呼び出された関数によって生成された戻り値は無視され、破棄されます.
次の例では、EventEmitterクラスでインスタンスを作成し、これらのインスタンスでインスタンスを作成します.on()関数が実行されます.

const EventEmitter = require('events'); // EventEmitter를 쓰기 위해 먼저 설정하는 부분
class MyEmitter extends EventEmitter {} // EventEmitter 클래스를 상속받는 MyEmitter라는 자식 클래스를 생성
const myEmitter = new MyEmitter(); // MyEmitter 클래스를 통해 인스턴스 생성
myEmitter.on('event', () => { // 인스턴스에 on 함수를 적용.
            // event는 이벤트의 이름이고 뒤에 붙는 함수는 이 이벤트에 붙는 함수이다.
  console.log('an event occurred!');
});
myEmitter.emit('event'); // event라는 이벤트에 붙은 함수를 emit로 실행시켜준다.

したがって、createServerが返すサーバオブジェクトはserverです.かもしれません.

const server = http.createServer((request, response) => {
  // 여기서 작업이 진행됩니다!
});

上記の方法では、request、response変数を使用してcreateServer関数を実行し、requestおよびresponse変数で(.on)関数を使用すると見なすことができます.

要求データの応答ヘッダを設定する方法は以下の通りである.

response.setHeader('Content-Type', 'application/json');
response.setHeader('X-Powered-By', 'bacon');

TIP)応答ヘッダを設定する場合、複数回設定すると最後のヘッダが設定されます.

明示的なデータ転送は、タイトルを書き込むwriteHeadメソッドを有する.このメソッドは、ストリームにステータスコードとヘッダーを作成します.

//200OK와 그에따른 헤더를 설정해준다. 
response.writeHead(200, {
  'Content-Type': 'application/json',
  'X-Powered-By': 'bacon'
});

bodyを送信する場合はwriteとendを使用します.

response.write('<html>');
response.write('<body>');
response.write('<h1>Hello, World!</h1>');
response.write('</body>');
response.write('</html>');
response.end();
response.end('<html><body><h1>Hello, World!</h1></body></html>');

TIP)以上の2つのコードは同一本体を伝送する.

まず、上記の方法でサーバーがうまくできているかどうかを見てみましょう。

サーバーのテスト

const server = http.createServer((request, response) => {
  const { headers, method, url } = request;
    response.writeHead(200, {'Content-Type': 'application/json'})
  //만들어질 서버에 출력할 문구
    response.end('server complite')
});

出力結果

正常にサーバーが作成されました.次に、サーバ上でデータを処理します.
データしょりりょういき

//http로 서버를 만들고 사용할 PORT와 IP를 변수로 지정 
const http = require('http');
const PORT = 5000;
const ip = 'localhost';
//서버 객체를 만들어 server 변수에 할당한다.
const server = http.createServer((request, response) => {
  const { headers, method, url } = request;
    //response.writeHead(200, {'Content-Type': 'application/json'})
    //response.end('server complite')
//바디가 비어있지 않으면 밑의 조건문을 실행한다.
if(!(request.body)){
    //body에 요청된 데이터를 한곳으로 모읍니다.
    let body = [];
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString();   
    //모아진 데이터(body)가 보내집니다.
      response.writeHead(201,{'Content-Type': 'application/json'})
      response.end(body)
    })
}
//body가 비어있거나 서버가 문제일시 다음 404에러를 띄운다.
  else {
      response.writeHead(404, {'Content-Type': 'application/json'})
      response.end() 
  }
//서버 동작시마다 console로 확인한다.
  console.log(
    `http request method is ${request.method}, url is ${request.url}`);
});
//서버 객체를 listen으로 호출한다.
server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

結果

ただし、結果として「メンバーではありません」というウィンドウが表示されます.これは、サーバが正常に動作しているが、受信したデータを処理するresponse関数が正常に動作していないことを意味します.だから結果を確認するためにコンソールを使いました.

間違いが多い.これらのエラーから処理を開始...
分析:<実行前の要求の応答はアクセス制御チェックに合格できません:要求されたリソースには「アクセス-制御-すべての-origin」ヘッダーがありません.不透明な応答が要求を満たす場合は、要求モードを「CORSなし」に設定して、CORSを無効にするリソースを取得します.>

すなわち,データに応答するCORSがないため,上記のエラーが発生する.

CORSは以前のブログでも触れたことがある.これは、GETなどのすべての特定の条件を満たさない限り、ブラウザで自動的に実行される部分であり、まずpreflight要求を実行して、要求が可能かどうかをサーバに確認し、サーバからライセンスと使用可能な方法を取得し、これらの方法を使用してデータを送信します.
現在のデータを送信する場合、サーバ側はまずCORSを適用して、現在のデータを送信するURLにライセンスを付与するかどうかを確認します.そのため、現在のデータを送信するURLにライセンスを付与する必要があります.
タイトルを変更する必要があります.タイトルを変更する方法は、https://nodejs.org/api/http.html#http_response_writehead_statuscode_statusmessage_headersの例「response.writeHead(status code,statusMessage,headers)」セクションを使用します.

1.Access Control Allow-Originの使用

エラーコード要求のアクセス制御Allow-Originを使用すると、次のような状況が発生します.
TIP)アクセス制御-すべてのOriginは、応答が所与のソースからの要求コードと共有できるかどうかを示す.

EX)브라우저에 https://developer.mozilla.org으로부터의 요청을 허용한다고 알리는 응답은 다음을 포함할 것입니다
Access-Control-Allow-Origin: https://developer.mozilla.org

2.Access Control Allow Headersの使用

「アクセス制御」-「すべてのHeaders」は、「アクセス制御-要求-Headers」を含むpreflight要求に応答するためのタイトルであり、実際の要求で使用可能なHTTPタイトルのリストがリストされている.
したがって、「アクセス制御-すべてのHeaders」には、「コンテンツ-タイプ、受け入れ」が含まれます.
現在のリクエスト部では、bodyに含まれるデータがどのようなフォーマットの「Content-Type」:「アプリケーション/json」であるかをPOSTメソッドで伝えてJSONデータを送信する.
これにより、要求されたbodyデータをグループ化することができる.
最終応答のデータ型を表示するには、Content-Typeをヘッダとして送信する必要があります.

response.writeHead(201,{'Access-Control-Allow-Headers': 'Content-Type',
			'Access-Control-Allow-Origin': '*',})
그리고 다른 요청에 대한 헤더도 위와같은 방식으로 바꿉니다.

TIP)コンテンツタイプヘッダと受信ヘッダの違い

コンテンツタイプヘッダと受信ヘッダは、いずれもデータ型ヘッダです.

Content-Type:要求と応答に送信され、データ型のヘッダーが提供されます.
サーバはクライアントに「このタイプを返します」(GETメソッドはkey=value形式でデータを転送するので、「Contte-type」は必要ありません).

Accept:Webサーバの要求時にメッセージを要求するタイトル
クライアントはサーバに対して「これらのデータのみを許可します」という意味です.

結果

最終的に応答が完了しました。

に感銘を与える

サーバを処理するとき、私は多くのヘッダと方法を使用すべきであることに気づいた.

ヘッダの種類とその役割をさらに理解する必要がある.

HTTPトランザクションだけでなく、Expressを使用したサーバ通信も学習します.

は、HTTPトランザクションに関連する多くの必要なコードおよびコンテンツ、およびそれらがなぜ駆動され、必要とされるのかを詳細に理解しています.

注意

CORSは、ネットワーク転送を行うことを意識しています.

次の計画

サーバ内で会員の有無を確認した後、会員一時データを非会員ログに転送エラー転送

メンバーの場合は、OpenAPIを使用して応答ウィンドウにムービーリスト

を印刷します.
リファレンス

https://dololak.tistory.com/630

http://daplus.net/javascript-%EC%9A%94%EC%B2%AD-%ED%97%A4%EB%8D%94-%ED%95%84%EB%93%9C-access-control-allow-headers%EB%8A%94-access-control-allow-headers%EC%97%90%EC%84%9C-%ED%97%88%EC%9A%A9%EB%90%98%EC%A7%80/

https://www.daleseo.com/js-window-fetch/

https://nodejs.org/api/events.html#events_class_eventemitter

https://velog.io/@dlrbwls0302/TIL-HTTP-%ED%8A%B8%EB%9E%9C%EC%9E%AD%EC%85%98-%ED%95%B4%EB%B6%80-%EB%B0%8F-Mini-Node-Server-%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-%EC%BD%94%EB%93%9C-%EB%B6%84%EC%84%9D

Reference

この問題について(My Capability)HTTPトランザクションを使用してログインウィンドウを作成する-サーバの概要を完了し、bodyを介してデータを転送および受信する), 我々は、より多くの情報をここで見つけました https://velog.io/@baek1008/My-ability-HTTP-트랜잭션을-이용한-로그인-창-만들기-서버-개설완료body를-통한-데이터-전달-및-수신

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

複数のactivity間のデータ共有

複数のバージョンの自動管理