ミニマリストノードチュートリアル - 7 日間で初心者からマスターになる (3: 知らないテンプレートフォーム)_html/css

ミニマリストノードチュートリアル - 7 日間で初心者からマスターになる (3: 知らないテンプレートフォーム)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:50:22

オリジナル

1271 人が閲覧しました

テンプレートエンジン

テンプレートエンジンを理解する前に、まず HTML コードを生成するための通常の動的挿入を見てみましょう:

コードは次のとおりです:

         //  movie 对象 是一个json对象我们动态插入文档中  var movie = [  {       "name" : "The Mirror",       "year" :  2012   },   {        "name": "last night",        "year":   2016   } ]; $.each(movie,function (data) { if(data.length === 0) return; var partial =  "<dt>"+data.name+"</dt>" +"<dd>"+data.year+"</dd>" ;  document.body.appendChild(partial); })

ログイン後にコピー

事実上記の部分的なスプライス文字列は長さが十分ではありません。あるいは、動的に生成される Web ページを実際に作成すると、その苦労がわかるでしょう。

テンプレートエンジンを簡単に理解します

テンプレート:

<div class="entry"> <h1>{{title}}</h1> <div class="body">   {{{body}}} </div></div>

ログイン後にコピー

コンテキストを指定:

{ title: "All about <p> Tags", body: "<p>This is a post about tags</p>"}

ログイン後にコピー

{{{body}}} は 3 つの括弧であり、2 つの括弧とは異なることに注意してくださいその理由は、2 つの括弧はコンテキストのコンテンツを HTML エスケープするためです。つまり、p タグは HTML タグとして扱われず、テキストとしてユーザーに表示されます。

テンプレートエンジンを選択します

実際には、約 12 個のテンプレートから選択できます:

まあ、選択しませんExpress のデフォルトの Jade は、インデントと抽象化のため、初心者にとっては非常に腹立たしく感じるでしょう。これは、HTML を最初から勉強するのと同じではないでしょうか。 ? Jade と Express が同じ人によって発明されたことは言及する価値があります。

よりシンプルなハンドルバー

ハンドルバーエンジンがテンプレートと組み合わせたコンテキストを使用して HTML をレンダリングする方法を見てみましょう。

 //  res.render('admin/home',{         name:'Buttercup'})/************* admin /  home.hbs **************/   <h1>the home </h1> <p>Welcome , {{name}}</p> /*************** entry   HTML ********************/   <h1> the home </h1>  <p>Welcome , Buttercup</p>

ログイン後にコピー

テンプレートの再利用と包含

多くのパブリック静的リソース参照を含むヘッダーファイルをテンプレート A と呼びます。すべてのページでテンプレート A を書き直すのは非常に面倒なので、次のようにテンプレート内で参照します。

ヒント: ファイルに「-」記号が含まれている場合は、次のように引用されます:

        // 引用以>开头        {{>A.hbs}}

ログイン後にコピー

hbs 構文の詳細については、

   // xx-header.hbs     {{>xx_header.hbs}}

ログイン後にコピー

フォーム処理

を参照してください。 >

HTTP フォームリクエストは通常 4 つの部分で構成されます: リソースの操作を識別するために使用され、前述の POST に対応する HTTP メソッド (メソッド)。リソースの場所を識別するために使用されるパス (path) は、上記の /some/thing に対応します。 URL パラメーター (クエリ) は、上記のリクエスト本文 (body) に対応します。 request は、上記の title= test&subtitle=somefinetitle に対応します。

多くの場合、リクエスト本文はフォームの本文です。これには、複数のキーと値のペア、JSON データ、またはバイナリファイルが含まれる場合があります。さまざまなコンテンツについては、本文のエンコードをリクエストする必要があります。そうしないと、サーバーが送信内容を知ることが困難になります。 HTTP プロトコルは、MIME フレームワークを使用してリクエスト本文をエンコードし、リクエストヘッダーの Content-Type フィールドでエンコードタイプを指定します。次の 3 つのコンテンツエンコーディング (MIME タイプ) がフォームでよく使用されます: urlencoded: title=test&subtitle=somefinetitle など、GET リクエストの URL と同じようにエンコードされます。 multipart: デリミタで区切られたフォーム。通常はバイナリファイルを含めるために使用されます。 json: 名前が示すように、この時点で json オブジェクトをサーバーに送信できます。 HTTP プロトコルを使用して HTML ファイルをクライアントに送信できることがわかりました。では、サーバーはユーザーの操作をどのように受け付けるのでしょうか?これには、HTTP POST メソッドと Web フォームの助けが必要です。開発を続ける前に、まず HTTP フォームの基本を理解しましょう。

HTTP プロトコルには 6 つのメソッドが用意されており、メソッド名は操作の種類を識別するための HTTP リクエストヘッダーフィールドとして使用されます。

GET: URI で指定された情報を取得します。 HEAD: GET と同じですが、サーバーはメッセージ本文を返しません。 POST: リクエストサーバーは、URI で識別されるリソースへの補助情報としてリクエストにパッケージ化されたエンティティを受け入れます。 PUT: サーバーに、リクエストにラップされたエンティティを場所を識別する URI として保存させます。 DELETE: サーバーに URI で識別されるリソースを削除させます。 TRACE: リモートアプリケーション層のループバックを呼び出します。最後に、サーバーは受信したメッセージをエンティティにラップし、ステータスコード 200 の応答を返す必要があります。覚えて？サーバーは、HTTP GET メソッドを使用して HTML ファイルをクライアントに送信します。クライアントは、多くの場合 POST メソッドを使用して、サーバーに情報を送信します。 Web フォーム (フォーム) は、サーバーへの POST リクエストを生成し、結果をブラウザーに返す役割を担う特別な HTML タグです。

ユーザー登録

  /*****************************以上来自互联网********************/

ログイン後にコピー

上記のコードが何をするのかを段階的に分析してみましょう。

まず Router オブジェクトをインスタンス化して、ルートをすばやく簡単に操作できるようにします。次に、誰かまたは猫が /register ルートへの get リクエストを開始した場合、アカウント/登録テンプレートをスローしてレンダリングします。タイトルを登録します。誰かまたは猫がこのフォームを通じて投稿リクエストを開始すると、つまりフォームの送信が行われ、ユーザーのアカウントのパスワードが取得され、関連情報がコマンドラインに出力されます。

/********************register.js ********************/var router = require('express').Router();、router.route('/register') // 返回注册页面  .get(function (req, res) {  res.render('account/register', {title: '注册'}) // 接受用户表单 .post(function (req, res, next) { var username = req.body.username, password = req.body.password; console.log('Register post received!'); console.log('username:', username, 'password::', password);                  res.end('成功收到POST请求'); });module.exports = router;

ログイン後にコピー

小さな問題: body-parser サードパーティモジュールがインストールされていない場合、xxx.body.yyy 形式は使用できません。すべては xxx.query.yyy から取得され、クエリは次の目的で使用されます。パラメータを表します。この req.body.username のように、属性名の値が username であり、それを処理のためにサーバーに送信することを意味します。