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

テンプレート エンジン

テンプレート エンジンを理解する前に、まず 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 であり、それを処理のためにサーバーに送信することを意味します。

フロントエンド コードのほとんどは静的コードと同じであるか、私の作品の JavaScript 戦略パターンに参加しているため、フォームの検証についてはここでは説明しません

概要

恥ずかしながら、テンプレート エンジンについて簡単にお話します。