Node.jsでjadeテンプレートエンジンを使用する手順の詳細な説明-jsチュートリアル-php.cn

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

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

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

jadeのインストール

npm install -g jade

ログイン後にコピー

上記のコマンドを実行してグローバルにインストールします。

訪問者 Web サイト

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

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

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

ログイン後にコピー

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

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 ディレクトリを作成し、その中に次の内容のテンプレートファイルindex.jade を作成します:

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

ログイン後にコピー

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

ステップ 6、訪問者ディレクトリで「node app.js」を実行して、Web サイトを開始します。

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

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

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

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

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

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

Express 構成 jade

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

ローカルオブジェクト

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

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

ログイン後にコピー

jade模板文件里可以直接访问express对象的locals对象的属性。我在app.js里设置的title和counter，在index.jade模板文件引用了它们。

现在我们来看这行代码：

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

ログイン後にコピー

它调用express的Response对象的render方法来渲染模板文件，并且传递了一个本地对象。render方法原型：

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

ログイン後にコピー

res.render方法渲染一个view并且把渲染生成的HTML字符串发送给客户端。res的API参考在这里http://expressjs.com/4x/api.html。

Response对象也有一个locals对象，它和app.locals的区别是，res的locals只在当前渲染的view内有效，而app.locals是全局的。

另外render方法的可选参数locals，也可以定义本地变量对象，传递给view。我在代码里把ip传了过去。

在jade文件里，常见的有两种方式可以调用由应用程序传入的本地变量：

#{表达式}
标签=表达式

前面的index.jade模板文件里，对于页面标题，我们这么用的：

title= title

title是jade用来定义HTML文档title的标签。

对于body里的一级标题，我们这么用的（h1是jade用来定义HTML一级标题的标签）：

h1= title

这都是属于“标签=表达式”这种调用方式，这种方式通常用在一行jade代码的开始，也就是标签开始的地方。而“#{表达式}”这种方式的好处是可以插入到jade模板文件的任意地方。比如：

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

ログイン後にコピー

我们也可以将“h1= title”修改为“h1 #{title}”，效果一样。

jade引擎简介

jade使用一些标签来标记如何生成HTML，jade模板文件看起来很不像HTML文件，但它的模板文件小而整洁。使用jade，需要了解它都支持哪些标签，这个可以直接去看jade-lang，那里最详细也最权威，我们这里只介绍index.jade文件用到的那些标签。

关于jade，有两篇文章不错，可以看看，https://cnodejs.org/topic/5368adc5cf738dd6090060f2和http://www.jb51.net/article/139936.htm，后面这篇文章是网友根号三写的一个关于jade的系列文章的开篇，整个系列里的文章都值得一看。

HTML文档的开始通常是文档声明，对应到jade模板文件里，就是doctype html。还有其它的文档类型，比如xml，可以写作doctype xml。更多请参考http://jade-lang.com/reference/doctype/。

jade有很多标签，用于生成HTML对应的标签。比如html对应，head对应，body对应，p对应，title对应，这也是我们的index.jade用到的所有标签了。通常我们在HTML里使用的标签写法，去掉尖括号就成了jade里可用的标签，比如对应jade里的p。

HTML标签往往可以设置name、id、class等属性，在jade里，是通过tag(attr=value)这种形式表示的。比如p(class=”view-container”)，又比如input(type=”checkbox”)。

关于jade标签，这篇文章http://www.jb51.net/article/139942.htm说得很好，请参考。

测试jade模板文件

一开始用jade模板，记不全它的标签，也经常不知道自己的写的模板文件生成的html文档是否正确。还好安装jade后，有一个命令行工具jade，可以用来验证模板文件。

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

jade命令有很多选项，可以执行“jade -h”查看。要验证模板文件，最简单的办法就是使用jade工具生成为html文档。命令如下：

jade xxx.jade

ログイン後にコピー

执行上面的命令，就会在当前目录下生成一个与模板文件同名的html文档。不过格式很难读，完全是一坨屎挤在一起。加上 -P(–pretty) 就好了。这样：

jade -P xxx.jade

ログイン後にコピー

比如我们有这么一个使用了AngularJS的模板文件scope_template.jade，内容如下：

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")

ログイン後にコピー

运行“jade -P scope_template.jade”命令会生成scope_template.html文件，内容如下：

<!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编写完整的HTML文档，也可以编写符合HTML语法的局部模板。比如下面的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="增加")

ログイン後にコピー

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！