ノードを使用したREST APIの設定JSエクスプレス.js

おい、
ノードとExpressでREST APIを設定する方法を示します.私はこのチュートリアルから何かを学ぶことができると私はあなたのフィードバックで何かを学ぶことができます願っています.

要件

インストールされる

ノード(Documentation).

糸(Documentation).

不眠症(Download).

Visual Studioコード(Download).

レッツゴー!

どのような休憩ですか？

REST, or REpresentational State Transfer, is an architectural style for providing standards between computer systems on the web, making it easier for systems to communicate with each other. REST-compliant systems, often called RESTful systems, are characterized by how they are stateless and separate the concerns of client and server. We will go into what these terms mean and why they are beneficial characteristics for services on the Web.
Reference.

APIとは

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message or check the weather on your phone, you’re using an API.
Reference.

プロジェクトの起動:

最初のステップは、プロジェクトを保存するフォルダを作成することです.

$ mkdir nodejs-express-setup
$ cd node-express-setup

次の手順でパッケージを作成します.

$ yarn init -y

あなたが質問に答えたくないならば、私は旗- yを使うことを勧めます.このフラグは、デフォルトオプションを使用することを受け入れることを意味します.
あなたはYarn cliにヤーンinitについての詳細情報を見つけるか、またはコンソールでコマンドライン$ yarn --help initを使用することができます.
「nodejs express setup」フォルダをチェックすると、パッケージという名前のファイルが見つかります.JSON、おそらくこの質問をしている.

パッケージとはJSON ?

The package.json file is kind of a manifest for your project. It can do a lot of things, completely unrelated. It's a central repository of configuration for tools, for example. It's also where npm and yarn store the names and versions for all the installed packages.
Reference.

また、いくつかの情報とヒントYarn package-jsonで見つけることができます
私はこの情報をどのように作品パッケージを理解するのに役立ちます願っています.JSON

急行の設定ScraseによるJSとNodemon。

なぜこのフレームワークをインストールする必要があるのですか？

さて、モバイルアプリケーションやWebアプリケーションを想像し始めると、これらのアプリは、バックエンドと通信する必要があるたびに、APIに接続されます、このフレームワークは、APIが簡単に多くのHTTPユーティリティメソッドを提供して作成する当社の作業を行います.
それを聞いてうれしい.正しい?

このフレームワークをインストールする理由を知ったので、以下のコマンドラインを実行してインストールを続行できます.

$ yarn add express

私たちはエクスプレスで進む前にSucraseとNodemonライブラリをインストールします.JS説明.

$ yarn add sucrase nodemon -D

flag - dは、このライブラリをdev依存関係としてインストールします.パッケージはローカルの開発とテストに必要なだけである.あなたは、より多くのhere.を読むことができます
nodemonという名前のファイルを作成する必要があります.JSON :

$ touch nodemon.json

そして次の行をnodemonに追加します.JSON :

  "execMap":{
      "js": "sucrase-node"
    }

この設定では、execmapを使ってデフォルトの実行可能ファイルを定義します.私たちは、コードを実行するためにSucraseを使用してコンパイルするNodemonに通知しています、そして、それはJSファイルが実行されるたびに起こります.

何がSucraseとnodemonですか？

Sucrase is an alternative to Babel that allows super-fast development builds. Instead of compiling a large range of JS features to be able to work in Internet Explorer, Sucrase assumes that you're developing with a recent browser or recent Node.js version, so it focuses on compiling non-standard language extensions: JSX, TypeScript, and Flow. Because of this smaller scope, Sucrase can get away with an architecture that is much more performant but less extensible and maintainable.
Reference.

Nodemon is a utility that will monitor for any changes in your source and automatically restart your server. Perfect for development.
Reference.

NodeMonは、コードが保存されるたびに自動的にサーバーを再起動しますので、通常よりも我々の開発を高速化します.
両方のライブラリをインストールすると、我々はもう一つの変更を行う必要があります.
パッケージを編集します.次の行を追加する

  ...
  "license": "MIT",
  "scripts": {
    "dev": "nodemon src/server.js",
    "build": "sucrase ./src -d ./dist --transforms imports",
    "start": "node dist/server.js"
  },
  "dependencies": {
    ...
  },
  ...

このような状況では、スクリプトはいくつかのlongsコマンドを実行しやすくなります.
例えば、コマンド$ nodemon src/server.jsでコマンド$ yarn devを容易に実行することができる.
このコマンドラインを実行する前に、サーバーを作成する必要があります.js

サーバの設定js

このトピックでは、HTTPリクエストの使用方法を学びます.作成されたすべてのルートはサーバーになります.js
srcとファイルサーバーというフォルダを作成する必要があります.js

$ mkdir src && cd src && touch server.js

次に、次の行をサーバーに追加します.js

import express from 'express';

class Server{
    constructor(){
        this.app = express();
        this.server();     
    }

    server(){
        this.app.listen(3333);
    }  

}


export default new Server();

上記のコードでは、ポート3333からの要求を聞くために、全てのExpressメソッドとサーバメソッドを受信する属性“this . app”を有している.
サーバを起動するには、以下のコマンドラインを実行するためにコンソールに行ってください.

$ yarn dev

ルートでは、HTTP GET、POST、PUT、DELETEリクエストのルートを作成します.また、リクエストをテストするために配列を追加する必要があります.

import express from 'express';

const users = ['User01', 'User02'];

class Server{
    constructor(){
        this.app = express();
        this.server();
        this.routes();  
    }

    routes() {
    }

    server(){
        this.app.listen(3333);
    }  

}


export default new Server();

最初の行はroute ()で指定します.JSON () :

...
routes() {
   this.app.use(express.json());
}
...

急行.JSONはHTTP POSTを受け取り、リクエストをJSONオブジェクトに入れる必要があります.HTTP POSTとPUTリクエストの例を見始めると、よりよく理解できます.あなたは、hereを読むことができます.
続ける前に、CORSライブラリをインストールする必要があります.
我々はこのプロジェクトを使用して、将来のチュートリアルのためにこのライブラリを使用します.
次の行を追加します.

import express from 'express';
import cors from 'cors';

....
class Server{
    constructor(){
     ...
    }

    routes() {
       this.app.use(express.json());
       this.app.use(cors());
    }
...   
}

export default new Server();

Corsとは

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, and port) than its own origin.
Reference

このライブラリは、他のアプリケーションがAPIを要求できるようにするために必要です.

HTTP GET , POST , PUT , DELETEリクエストを指定します。

ゲット

HTTP GETリクエストを行います.この例では、paramsまたはqueryのないルートを使用します.

...
routes() {
   this.app.use(express.json());

   this.app.get('/users', (req, res) => {
            return res.json(users)
          })
}
...

ブラウザを開き、「user 01」「user 02」で配列を受け取るためにURL(http://localhost:3333/users)にアクセスしようとします.ルートはユーザ/パスにアクセスするために誰かに期待しています.

簡単、右?

リクエストとレスポンスオブジェクトはどのように動作しますか？

リクエスト

The req object represents the HTTP request and has properties for the request query string, parameters, body, HTTP headers, and so on.
Reference.

リクエストでオブジェクトを送信する場合、reqを使用できます.ボディといくつかのパラメータを渡す場合はreqを使用することができます.paramsまたはreqクエリ.この2つのパラメータについては後で説明します.

レスポンス

The res object represents the HTTP response that an Express app sends when it gets an HTTP request.
Reference.

応答オブジェクトは基本的に、アプリケーションがHTTPリクエストを受け取るたびにデータや情報を提供する責任があります.このデータは、info ()あるいはjje ()を使用して提供できます.
この関数の違いを簡単に説明します.

is send () :

このメソッドは、パラメーターに基づいてContent - Typeレスポンスヘッダーを設定します.たとえば、オブジェクトが送信されている場合、ヘッダーはアプリケーション/JSONにコンテンツタイプを設定しますが、文字列を送信している場合、content typeはtext/htmlになります.
あなたは、より多くの情報hereを見つけることができます

jjind () :

このメソッドは、パラメーターが非オブジェクトの場合、Content/JSONにContent - Typeレスポンスヘッダーを設定します.
あなたは、より多くの情報hereを見つけることができます
オブジェクトや配列をパラメータに渡す場合は、ほとんどの場合、これらのメソッドに渡します.
二つの方法の違いを理解してください.次の説明に進むことができます.

最後の例では、paramsやqueryのないルートを行いました.この例ではREQでいくつかのルートを行います.PARAMとREQクエリ.

reqParams :

このプロパティは、配列内の特定のデータを取得するときに非常に便利です.
以下に、REQを使用します.インデックスを使用してユーザーを検索します.

...
routes() {
   this.app.use(express.json());

   this.app.get('/users/:index', (req, res) => {
        const { index } = req.params;

        return res.json(users[index])
      })
}
...

ブラウザを開き、URLをアクセスしてください.基本的にreq.Paramsはインデックスパラメータを通じて値を受け取り、配列インデックスに基づいて文字列を返します.
http://localhost:3333/users/1
詳細については、を読むことができます

ドキュメント reqクエリ

このプロパティはREQによく似ています.Paramsは両方の方法を比較しますが、大きな違いは、オブジェクトにより多くのパラメータを渡すことができます.

...
routes() {
  this.app.get('/searchforusers', (req, res) => {
       const { index, name } = req.query;

       const getUser = users[index];

       return res.json(getUser.match(name))
   })
}
...

最初に変更されたのはパスでしたが、もはやパラメータを渡さないのですが、両方のプロパティを一緒に使うことはできません.
このプロパティは、値を2つのパラメーターで渡し、これらのパラメーターを使用して配列内の特定の文字列を検索します.
ブラウザを開き、URLをアクセスしてください.この場合、配列インデックスに基づいてユーザーを検索しようとしているため、両方のパラメーターをtrueにする必要があります.名前と文字列GetUserが一致している場合はNULLを返します.

詳細については、http://localhost:3333/searchforusers?index=0&name=User01を読むことができます

投稿:

HTTP POSTリクエストを使用して、新しい文字列を配列に追加する方法を学びます.
起動する前に、次の行をルートに追加します.

...
routes() {
   this.app.post('/users', (req, res) => {
            const { user } = req.body;

            users.push(user)

            return res.json(users)
   })
}
...

URLをテストするためにあなたの不眠症を開けてください、そして、あなたは以下の線{ "user": "User03" }をJSON体に加える必要があります.HTTPリクエストではREQを通して送信します.body配列に追加する文字列.
documentation
パスは最初のHTTP GETリクエスト例のようですが、異なるメソッドを使用しています.
詳細については、 を読むことができます

http://localhost:3333/users reqボディ

このプロパティは、HTTPリクエストでオブジェクトの中に多くのパラメータを渡すことができるので、非常に有用です.
詳細については、を読むことができます

ドキュメント プット

配列内の文字列を更新するには、HTTP PUTリクエストを使いやすくなります.
起動する前に、次の行をルートに追加します.

...
routes() {
   this.app.put('/users/:index', (req, res) => {
     const { index } = req.params;
     const { user } = req.body;

     users[index] = user;

     return res.json(users)
 })
}
...

URLをペーストするためにあなたの不眠症を開けてください、そして、あなたは以下の線{ "user": "NewUser01" }をJSON体に加える必要があります.私たちはREQを通してストリングを送ります.配列のインデックスに基づいて配列を更新します.

HTTP PUTリクエストは、配列内の特定の文字列を更新したい場合に非常に便利です.パラメータインデックスは、配列のどのインデックスをreqで受信した文字列で更新するかを識別するために重要です.ボディ.
詳細については、documentationを読むことができます

削除

配列から文字列を削除したい場合は、HTTP DELETEリクエストを使用できます.
起動する前に、次の行をルートに追加します.

...
routes() {
   this.app.delete('/users/:index', (req, res) => {
      const { index } = req.params;

      users.splice(index, 1);

       return res.json(users)
  }) 
}
...

URL(http://localhost:3333/users/0)をペーストして、ストリングなしで配列を受けるために不眠症を開けてください.基本的に* REQ.Paramsは、インデックスインデックスを使用して値を受け取り、配列インデックスに基づいて配列から文字列を削除します

HTTP PUTリクエストとの類似性は注目すべきことですが、我々の要求で使用しているどのアクションを決定することが重要です.
詳細については、documentationを読むことができます

まとめ

このチュートリアルでは、新しいノードプロジェクトを作成し、Scraseaseを使用してExpressとNodeMonを設定する方法、およびExpressメソッドとプロパティの使用方法を学びました.
そして
オフィスと残りのAPIからのDunder Mafflin紙会社の間の類似点をすること.
HTTP GETリクエストは、クライアントがすべての注文についての情報を求めるか、または1つだけの特定の順序です.
HTTP POSTリクエストは新しいクライアントの登録を行う販売です.
HTTP PUTリクエストは、用紙の量を順番に更新するためのクライアントです.
HTTP DELETEリクエストは、注文をキャンセルすることを要求する不満足なクライアントです.

http://localhost:3333/users/0 はい、我々はそれをやった！

ドキュメント 私たちは、チュートリアルを終えた、私は知識のあなたの長い軌道に貢献している願っています。

プロジェクトにアクセスできます

次のチュートリアルでお会いしましょう！