高度にエントリからkoa2道路（V）

前の記事で、我々はビットKOAは、我々はデータを見て、KOAポストKOA-bodyparserミドルウェアを提出この記事をEJSテンプレートとページのレンダリングを使用紹介します。

フロントページでは、必然的に、フォームのPOSTリクエストフォームを使用し、バックエンドにデータを送信する、のはKOAは、データ上でリクエストパスでフロントのポストを取得する方法を見てみましょう。

我々は、我々は最初のフォームでindex.ejsでいくつかのフォームを書いてみましょう、ポストが要求されたデータを取得する方法をネイティブNodeJsを見て、私たちのプロジェクトの一つの内容を書き込むようになりました。

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル> </ タイトル> 
</ ヘッド> 
< 身体> 
< フォームアクション= "追加/" メソッド= "ポスト" > 
    用户名：< 入力タイプ="テキスト」名前= "ユーザ名" /> 
    < BR /> 
    <タイプ= "パスワード" 名前= "パスワード" /> 
    < BR /> 
    < BR /> 
    < ボタンタイプ= "提出" >提交</ ボタン> 
</ 形成> 
</ ボディ> 
</ HTML >

我々はポスト要求は、次のページの効果を二つのデータの後端にユーザ名とパスワードを形成する形成します：

次はapp.jsを見て

1  // 導入KOAモジュール
2 CONST =興亜（ 'KOA'が必要）
 。3 CONSTルータ（ 'KOA-ルータ'要する= ;）
 。4 constが必要=（ 'KOA-ビューを見解）;
 5  
6。 // インスタンス
7アプリは=定数新しい新しい興亜（）;
 8。 CONST =ルータ新しい新しいルーター（）;
 9。 
10  // 構成テンプレートエンジンミドルウェア
11。 app.use（ビュー（ 'ビュー' 、{
 12は      拡張'EJS'
 13である }））;
 14  
15 router.get（ '/'、非同期（CTX）=> {
 16     ctx.render待つ（ 'インデックス'を、{}）。
17  }）;
18  
19 router.post（ '/追加'、非同期（CTX）=> {
 20      のgetData = 関数（）{
 21          リターン 新しいプロミス（関数（決意、リジェクト）{
 22              のtry {
 23                  LET列str = '' ;
 24                  CTX。 req.on（ 'データ'、関数（チャンク）{
 25                      STR + = チャンク;
 26                  }）;
 27                  ctx.req.on（ '末端'、関数（チャンク）{
28                      決意（STR）
 29                  }）
 30              } キャッチ（ERR）{
 31                  リジェクト（ERR）
 32              }
 33          }）
 34      }。
図35は、     聞かせて、データ=でのgetData（）を待ちます。
36      ctx.body = データ。
37  }）;
38  
39  // 启动路由
40  app.use（router.routes（））。
41  app.use（router.allowedMethods（））。
42  
43 app.listen（3000）。

元のコンテンツでは、我々はアクション一貫した形の形で「追加/」router.post（「追加/」）経路、およびindex.ejsを追加した、我々は、STR +に非同期データを介して取得しますモザイクのデータは、エラーメッセージが取得されたデータエラーの場合に返され、最終的にはページに情報を返すされています。

次のように今、私たちはプロジェクトを開始、ページindex.ejsは、それぞれadminと123456を入力し、[ボタン]ボタンをクリックして入力して、結果は以下のとおりです。

我々は成功し、フロントページに戻り、ポストデータやスプライシングを受けるために完了した上記の結果表示ページから。

上記ノードは、ネイティブまだのは、KOA-bodyparserポストデータ取得モジュールを見てみましょう、非常に面倒になります。

あなたは、最初のパッケージをダウンロードする必要があります。

NPM KOA-bodyparser --saveをインストール

次のようにその後、我々は読んapp.jsます。

1  // 導入KOAモジュール
2 CONST =興亜（ 'KOA'必要に）
 。3 CONSTルータ（ 'KOA-ルータ'要する= ;）
 。4 CONSTは（ 'KOA-ビュー' =必要閲覧）
 。5（CONST = bodyParser必要」 bodyparser-KOA ' ）;
 6  
7。 // インスタンス化
8。 CONSTアプリ= 新しい新しい興亜（）;
 9 CONST =ルータ新しい新しいルーター（）;
 10  
11  // 構成テンプレートエンジンミドルウェア
12は app.use（ビュー（'ビュー、 {
 13は、      拡張'EJS'
 14  }））;
 15  
16  //配置KOA-bodyparser中间件
17  app.use（bodyParser（））。
18  
19 router.get（ '/'、非同期（CTX）=> {
 20が      待つctx.render（ 'インデックス' 、{}）;
 21  }）。
22  
23 router.post（ '/追加'、非同期（CTX）=> {
 24件の      LETデータ= ctx.request.body;
 25      ctx.body = データ;
 26  }）。
27  
28  // 启动路由
29  app.use（router.routes（））;
30  app.use（router.allowedMethods（））。
31  
32 app.listen（3000）。

私たちは、第1ヘッドKOA-bodyparserモジュールで導入され、その後、ctx.request.bodyを通じて我々のデータを取得するには、その後のことができますapp.use（bodyParser（））ミドルウェアを追加します。

次のように今、私たちはプロジェクトを開始、ページindex.ejsは、それぞれadminと654321を入力し、[ボタン]ボタンをクリックして入力して、結果は以下のとおりです。

以上の結果からページ出力は、我々は我々が要求されたデータのポストを取得し、データも自動的にJSON形式のデータに変換されるだけでなく見ることができます。

高度にエントリからkoa2道路（V）

おすすめ