ExpressJSとTypescriptによるNODEJSその2


この2番目の部分では、NodeMonで開発時間を増やす方法を見ていきます.そのため、サーバーの変更を行うたびにコンパイルする必要がないので、コードの変更をした場合には、サーバーの実行を中断して起動してください.次に、これを高速化するために、私たちは、自動的にサーバーをコンパイルすることなくコードの変更を検出するたびにサーバーを再起動するツールですnodemonを使用します.
nodemosをインストールするには、次のコマンドを実行しなければなりません.
npm i -D nodemon
NodeMonは開発をスピードアップするために開発依存関係としてのみインストールします.
NODEMANを実行します.
nodemon npx ./src/index.ts
これは、プロダクションコードを生成せずにサーバーを起動します.
サーバーが起動するとコンソールメッセージを変更します
app.listen(8000, () => {
  console.log('Server on port 8000!');
});
次のコンソール出力が表示されます.
❯ npx nodemon ./src/index.ts
[nodemon] 2.0.15
[nodemon] to restart at any time, enter `rs`
[nodemon] viewing path(s): *.*
[nodemon] seeing extensions: ts,json
[nodemon] starting `ts-node ./src/index.ts`
The application is listening on port 8000!
[nodemon] rebooting due to changes...
[nodemon] starting `ts-node ./src/index.ts`
Server on port 8000!
我々が我々の発展でずっと速く動くことができるならば、今完了してください.
最後に、スクリプトにスクリプトを作成します.JSON :
"hyphens": {
    "build": "npx tsc --project ./",
    "start": "node ./build/index.js",
    "dev": "nodemon ./src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
ご覧のように、私はNodeMonを持っているdevコマンドを作成しました.
NPX :このコマンドはNPMパッケージから任意のコマンドを実行することができます(ローカルにインストールされているか、リモートで取得されたものであっても)、NPMランを経由して実行した場合と同様のコンテキストで実行できます.JSONはもはやNPXを追加する必要はありません.

queryパラメータ


クエリパラメータは、オプションのキー値ペアです.URLで.たとえば、次のURLには2つのクエリパラメータ、格付けとページがあります​​​​ASCと2の
http://example.com/articles?sort=ASC&page=2
このURLでは、「ソート」と「ページ」の名前をとる2つのクエリ・パースがあり、多くのクエリ・パースを送ることができますが、"&
クエリパラメータによって、追加のアプリケーション状態がURLパスに適合しないURLにシリアル化されることができます.クエリパラメータの共用ユースケースには、ページ化されたコレクション内の現在のページ番号、フィルター条件、またはソート条件を描画できます.
Web開発では、クエリパラメータは上記のようにURL内で使用されますが、データを取得するAPIリクエストでも使用できます.ミンズは2つの異なる概念として扱う.

クエリパラメータによる動的応答


今、我々は我々が作成したタイプGETの終点で我々の要求のParamsによって送られるストリングを返す方法を見るつもりです.
以前は、hello worldを返しただけですが、現在の例では、クエリの例によってユーザが提供する名前を返します.
http://localhost:8000?name=jordan
私たちの答えは以下の通りです.
hello jordan
どうやってできるか見てみましょう.
エンドポイントでは、リクエストでREQ(request)とres(response)を受け取るコールバックを持ちます.リクエストでは、ユーザによって作られたリクエストに関する情報を持っています.
REQ (要求)をコンソールに出力しましょう.
app.get('/', (req: Request, res: Response) => {
  console.log(req);
  res.send('Hello World');
});
では、次のクエリparamでサーバーページをリロードしましょう.
http://localhost:8000?name=jordan
コンソールを見ましょう
baseUrl: '',
  originalUrl: '/?name=jordan',
  _parsedUrl: Url {
    protocol: null,
    slashes: null,
    auth: null,
    host: null,
    port: null,
    hostname: null,
    hash: null,
    search: '?name=jordan',
    query: 'name=jordan',
    pathname: '/',
    path: '/?name=jordan',
    href: '/?name=jordan',
    _raw: '/?name=jordan'
  },
  params: {},
  query: { name: 'jordan' },
  res: <ref *3> ServerResponse {
    _events: [Object: null prototype] { finish: [Function: bound resOnFinish] },
    _eventsCount: 1,
    _maxListeners: undefined,
    outputData: [],
    outputSize: 0,
これはその巨大なオブジェクトの小さな部分ですが、貴重な情報を持っているので、私たちに多くの問題部分を見てみましょう.
あなたが見ることができるように、私たちはベースURLを持っています/それが私たちに何も示さないように、我々はHREF、元のURLを持っています、そして、私たちには質問paramsがあります:
query: { name: 'jordan' },
したがって、以下のようにアクセスできます.
res.query.name
それから、すでに我々の運動に対する答えがあります、私たちは、クエリparamsがオプションであるので、正当化するだけであるので、我々は終点でifをします、そして、それは以下の通りです
app.get('/', (req: Request, res: Response) => {
  if (req.query.name) {
    res.send(`Hello ${req.query.name}`);
  } else {
    res.send('Hello guest');
  }
});
JSONでRERE . JSONと同じことをすることができました.
私たちの運動でそれを実装するには、
app.get('/', (req: Request, res: Response) => {
  if (req.query.name) {
    // res.send(`Hello ${req.query.name}`); send response type text
    res.json({ message: `Hello ${req.query.name}` }); //send response type json
  } else {
    // res.send('Hello guest'); send response type text
    res.json({ message: 'Hello guest' }); //send response type json
  }
});
これが何をするかは、名前を送信しない場合は、“こんにちはゲスト”に返信されます
それがどうなったか見てみましょう
クエリparam :

クエリパラメータなしで:

私がJSONに答えるとき、なぜ私のブラウザがこのように見えるかについて疑問に思っているならば、それはこの拡大のためです

ビューソン チャレンジ


課題として、私はあなたにより多くの特性を送って、JSONとしてレスポンスにそれらをすべて送って欲しいです.コメントにあなたの解決策を残す私はそれよりもはるかに簡単です.
あなたはどのようなプロパティは、ユーザーが提出することができます知っていないことを覚えて、私はあなたの答えを参照して興奮している.
次のブログでは、ユーザーによって指定された金額の配列にどのように対応するかを確認し、投稿動詞も表示します.
あなたが質問や勧告のコメントがある場合.挑戦を満たすために、自分自身を示すことを忘れないでください.
からコードにアクセスできます.