今回は、Node.jsでjadeテンプレートエンジンを使用する手順について詳しく説明します。Node.jsでjadeテンプレートエンジンを使用する場(chǎng)合の注意事項(xiàng)は何ですか?実際のケースを見(jiàn)てみましょう。 。

「Node.js 開(kāi)発の概要 - Express のインストールと使用」では、Express ジェネレーターを使用して HelloExpress Web サイトを作成しました。Express ツールは、基本的な

ディレクトリ構(gòu)造、テンプレート、スタイルシート、ルーターなどを生成しました。これは単純な HelloWorld ですが、それでも多くのコンテンツが含まれています。Express がサポートする Jade テンプレート エンジンの使用法をよりよく理解するために、今回は訪問(wèn)者の IP とカウントを表示できる手動(dòng)で作成された小さな Web サイトを提供します。訪問(wèn)。

jadeのインストール

npm?install?-g?jade

上記のコマンドを?qū)g行してグローバルにインストールします。

訪問(wèn)者 Web サイト

ステップ 1、myprojects ディレクトリの下に訪問(wèn)者ディレクトリを作成します。

ステップ 2、次のコードを package.json ファイルに保存します:

{
?"name":?"Visitor",
?"version":?"0.0.0",
?"private":?true,
?"dependencies":?{
?"express":?"~4.13.1",
?"jade":?"~1.11.0",
?}
}

この json ファイルには、訪問(wèn)者 Web サイトに関するいくつかの情報(bào)が記述されています。最も重要な部分は依存関係です。エクスプレスとジェイドを使用する予定です。

var?express?=?require('express');
var?app?=?express();
var?counter?=?0;
//?view?engine?setup
app.set('views',?'./views');
app.set('view?engine',?'jade');
app.engine('jade',?require('jade').express);
app.get('/',?function(req,?res)?{
?counter++;
?app.locals.counter?=?counter.toString();
?res.render('index',?{ip:?req.ip});
});
app.listen(3000);
app.locals.title?=?"Welcome?to?Visitor";
app.locals.counter?=?"0";

app.js ファイルは私たちの Web サイトへの入り口です。

ステップ 4、views ディレクトリを作成し、その中に次の內(nèi)容のテンプレート ファイルindex.jade を作成します:

doctype?html
html
?head
?title=?title
?body
?h1=?title
?p?Hello,?#{ip}
?p?You're?the?#{counter}?visitor.

ステップ 5、Visitor ディレクトリで「npm install」を?qū)g行して依存関係をインストールします。

ステップ 6、訪問(wèn)者ディレクトリで「node app.js」を?qū)g行して、Web サイトを開(kāi)始します。

最後に、アドレスバーに「http://localhost:3000」と入力するだけで、次のインターフェイスが表示されます:

これは簡(jiǎn)単です。訪問(wèn)者 Web サイトは、以前の HelloWorld や HelloExpress とは異なり、いくつかの動(dòng)的なコンテンツが含まれています。次に、これがどのように起こるかを見(jiàn)てみましょう。

expressとテンプレートエンジン

私はVisitorでjadeテンプレートエンジンを使用しています。これはejsなどと同様で、詳細(xì)についてはここにアクセスしてください: https://github.com/joyent/node/wiki/モジュール。

テンプレート エンジンは、テンプレート ファイルを使用して HTML ファイルを動(dòng)的に生成します。生成中に、特定のルールに従ってアプリケーションのデータを HTML ファイルに統(tǒng)合できます。このようにして、(テンプレートを使用する場(chǎng)合と比較して) HTML を手動(dòng)で記述する煩わしさを回避するだけでなく、動(dòng)的なコンテンツを含む Web ページを生成することもできます。

Express と Jade を組み合わせるとより効果的です。設(shè)定方法を見(jiàn)てみましょう。

Express 構(gòu)成 jade

Express サーバーの動(dòng)作は、Express オブジェクトの set(setting, value)、enable(setting)、および disable(setting) を通じて設(shè)定できるいくつかの設(shè)定オプションを通じて制御できます。サポートされている具體的な設(shè)定については、http://expressjs.com/4x/api.html を參照してください。私たちの訪問(wèn)者は「ビューエンジン」と「ビュー」のみを使用します。

「ビューエンジン」オプションは、使用するエンジンを設(shè)定するために使用されます。ビジターコードは次のとおりです:

app.set('view?engine',?'jade');

「ビュー」オプションは、テンプレートファイルが配置されるディレクトリを設(shè)定するために使用されます。以下のように:

app.set('views',?'./views');

ここでは単にそれを使用します。相対パスの場(chǎng)合、より良いアプローチは、path モジュールを使用し、グローバル変數(shù) dirname に基づいて結(jié)合することです。 dirname は、現(xiàn)在実行されているスクリプトが配置されているディレクトリを指します。訪問(wèn)者の例では、app.js が配置されているディレクトリです。コードは次のようになります:

var?path?=?require('path');
path.join(dirname,?'views');

Express は、デフォルトでテンプレート ファイルの拡張子に従って対応するエンジンを使用します。 *.jade ファイルの場(chǎng)合、Express は內(nèi)部で次のステートメントを呼び出します:

app.engine('jade',?require('jade').express);

したがって、app.js は実際にこのコード行を削除でき、結(jié)果は同じになります。

ローカルオブジェクト

アプリケーションから取得した動(dòng)的データをテンプレートファイルに含めることができます。 Express オブジェクトの locals オブジェクトを使用して、ローカル変數(shù)を保存できます。次のコードは、タイトルとアクセス數(shù)を保存します:

app.locals.title?=?"Welcome?to?Visitor";
app.locals.counter?=?"0";

jade模板文件里可以直接訪問(wèn)express對(duì)象的locals對(duì)象的屬性。我在app.js里設(shè)置的title和counter，在index.jade模板文件引用了它們。

現(xiàn)在我們來(lái)看這行代碼：

res.render('index',?{ip:?req.ip});

它調(diào)用express的Response對(duì)象的render方法來(lái)渲染模板文件，并且傳遞了一個(gè)本地對(duì)象。render方法原型：

res.render(view?[,?locals]?[,?callback])

res.render方法渲染一個(gè)view并且把渲染生成的HTML字符串發(fā)送給客戶端。res的API參考在這里http://expressjs.com/4x/api.html。

Response對(duì)象也有一個(gè)locals對(duì)象，它和app.locals的區(qū)別是，res的locals只在當(dāng)前渲染的view內(nèi)有效，而app.locals是全局的。

另外render方法的可選參數(shù)locals，也可以定義本地變量對(duì)象，傳遞給view。我在代碼里把ip傳了過(guò)去。

在jade文件里，常見(jiàn)的有兩種方式可以調(diào)用由應(yīng)用程序傳入的本地變量：

1. #{表達(dá)式}

2. 標(biāo)簽=表達(dá)式

前面的index.jade模板文件里，對(duì)于頁(yè)面標(biāo)題，我們這么用的：

title= title

title是jade用來(lái)定義HTML文檔title的標(biāo)簽。

對(duì)于body里的一級(jí)標(biāo)題，我們這么用的（h1是jade用來(lái)定義HTML一級(jí)標(biāo)題的標(biāo)簽）：

h1= title

這都是屬于“標(biāo)簽=表達(dá)式”這種調(diào)用方式，這種方式通常用在一行jade代碼的開(kāi)始，也就是標(biāo)簽開(kāi)始的地方。而“#{表達(dá)式}”這種方式的好處是可以插入到j(luò)ade模板文件的任意地方。比如：

p?Hello,?#{ip}
p?You're?the?#{counter}?visitor.

我們也可以將“h1= title”修改為“h1 #{title}”，效果一樣。

jade引擎簡(jiǎn)介

jade使用一些標(biāo)簽來(lái)標(biāo)記如何生成HTML，jade模板文件看起來(lái)很不像HTML文件，但它的模板文件小而整潔。使用jade，需要了解它都支持哪些標(biāo)簽，這個(gè)可以直接去看jade-lang，那里最詳細(xì)也最權(quán)威，我們這里只介紹index.jade文件用到的那些標(biāo)簽。

關(guān)于jade，有兩篇文章不錯(cuò)，可以看看，https://cnodejs.org/topic/5368adc5cf738dd6090060f2和http://www.jb51.net/article/139936.htm，后面這篇文章是網(wǎng)友根號(hào)三寫(xiě)的一個(gè)關(guān)于jade的系列文章的開(kāi)篇，整個(gè)系列里的文章都值得一看。

HTML文檔的開(kāi)始通常是文檔聲明，對(duì)應(yīng)到j(luò)ade模板文件里，就是doctype html。還有其它的文檔類(lèi)型，比如xml，可以寫(xiě)作doctype xml。更多請(qǐng)參考http://jade-lang.com/reference/doctype/。

jade有很多標(biāo)簽，用于生成HTML對(duì)應(yīng)的標(biāo)簽。比如html對(duì)應(yīng)，head對(duì)應(yīng)，body對(duì)應(yīng)，p對(duì)應(yīng)，title對(duì)應(yīng)，這也是我們的index.jade用到的所有標(biāo)簽了。通常我們?cè)贖TML里使用的標(biāo)簽寫(xiě)法，去掉尖括號(hào)就成了jade里可用的標(biāo)簽，比如對(duì)應(yīng)jade里的p。

HTML標(biāo)簽往往可以設(shè)置name、id、class等屬性，在jade里，是通過(guò)tag(attr=value)這種形式表示的。比如p(class=”view-container”)，又比如input(type=”checkbox”)。

關(guān)于jade標(biāo)簽，這篇文章http://www.jb51.net/article/139942.htm說(shuō)得很好，請(qǐng)參考。

測(cè)試jade模板文件

一開(kāi)始用jade模板，記不全它的標(biāo)簽，也經(jīng)常不知道自己的寫(xiě)的模板文件生成的html文檔是否正確。還好安裝jade后，有一個(gè)命令行工具jade，可以用來(lái)驗(yàn)證模板文件。

jade的用法如下：jade [options] [dir|file …]

jade命令有很多選項(xiàng)，可以執(zhí)行“jade -h”查看。要驗(yàn)證模板文件，最簡(jiǎn)單的辦法就是使用jade工具生成為html文檔。命令如下：

jade?xxx.jade

執(zhí)行上面的命令，就會(huì)在當(dāng)前目錄下生成一個(gè)與模板文件同名的html文檔。不過(guò)格式很難讀，完全是一坨屎擠在一起。加上 -P(–pretty) 就好了。這樣：

jade?-P?xxx.jade

比如我們有這么一個(gè)使用了AngularJS的模板文件scope_template.jade，內(nèi)容如下：

doctype?html
html(ng-app="myApp")
?head
?title=?title
?link(rel='stylesheet',?href='/stylesheets/style.css')
?body
?p(ng-controller="SimpleTemplate")
?|?ValueA:?
?input(type="number"?ng-model="valueA")
?br
?|?ValueB:?
?input(type="number"?ng-model="valueB")
?br
?br
?|?Expression?Value:?{{valueA?+?valueB}}
?br
?br
?input(type="button"?ng-click="addValues(valueA,?valueB)"?value="Click?to?Add?Values?{{valueA}}?&?{{valueB}}")
?br
?|?Clicked?Value:?{{valueC}}
?br
?script(src="/javascripts/angular-1.4.3.min.js")
?script(src="/javascripts/scope_template.js")

運(yùn)行“jade -P scope_template.jade”命令會(huì)生成scope_template.html文件，內(nèi)容如下：

<!DOCTYPE html>
<html ng-app="myApp">
?<head>
?<title></title>
?<link rel="stylesheet" href="/stylesheets/style.css" rel="external nofollow" >
?</head>
?<body>
?<p ng-controller="SimpleTemplate">ValueA:?
?<input type="number" ng-model="valueA"><br>ValueB:?
?<input type="number" ng-model="valueB"><br><br>Expression?Value:?{{valueA?+?valueB}}<br><br>
?<input type="button" ng-click="addValues(valueA, valueB)" value="Click to Add Values {{valueA}} & {{valueB}}"><br>Clicked?Value:?{{valueC}}<br>
?</p>
?<script src="/javascripts/angular-1.4.3.min.js"></script>
?<script src="/javascripts/scope_template.js"></script>
?</body>
</html>

需要提一下，我們既可以用jade編寫(xiě)完整的HTML文檔，也可以編寫(xiě)符合HTML語(yǔ)法的局部模板。比如下面的jade文件：

p(class="admin-user")
?p?添加用戶
?table
?tr
?td
?label?用戶名：
?td
?input(type="text"?name="add_username")
?tr
?td
?label?密碼：
?td
?input(type="text"?name="add_password")?
?tr
?td(colspan='2'?align="right")
?input(type="submit"?value="增加")

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

node前端模板引擎Jade標(biāo)簽使用詳解

nodeJS服務(wù)器創(chuàng)建與重啟操作代碼分享

以上がNode.jsでjadeテンプレートエンジンを使用する手順の詳細(xì)な説明の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。