This time I will bring you a detailed explanation of the steps for using jade with Node.jstemplate engine, what are the precautions for using jade template engine with Node.js, the following is a practical case, one Get up and take a look.

In "Introduction to Node.js Development - Express Installation and Use", we once used express generator to create a HelloExpress website. The express tool generated the basic directory structure for us. Templates, stylesheets, routers, etc. Although it is just a simple HelloWorld thing, it still contains a lot of content. In order to better understand the usage of the jade template engine supported by Express, this time we provide a manually created small website that can display Visitor's IP and count visits.

Install jade

npm?install?-g?jade

Execute the above command to install globally.

Visitor website

Step 1, create a Visitor directory in the myprojects directory.

Step 2, save the following code in the package.json file:

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

This json file describes some information about our Visitor website, the most important part is the dependencies. We are going to use express and jade.

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

The app.js file is the entrance to our website.

Step 4, create a views directory, create a template file index.jade in it, the content is as follows:

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

Step 5, execute "npm install" in the Visitor directory to install rely.

Step 6, execute "node app.js" in the Visitor directory to start the website.

Finally, you can access it in the browser. Just enter "http://localhost:3000" in the address bar. Refresh a few times and you may see the following interface:

This simple Visitor website is different from the previous HelloWorld and HelloExpress. It has some dynamic content. Next let's take a look at how this happens.

express and template engine

#I use the jade template engine in Visitor, similar to ejs and many others, you can visit here Learn about: https://github.com/joyent/node/wiki/Modules.

The template engine uses template files to dynamically generate HTML files. During generation, it can integrate data from the application into HTML files according to certain rules. In this way, we not only avoid the tediousness of manually writing HTML (compared to using templates), but also generate web pages with dynamic content.

Express and Jade are better combined. Let’s take a look at how to configure it.

Express configuration jade

The behavior of the Express server can be controlled through some setting options, which can be controlled through the set(setting, value), enable(setting) and disable(setting) to set. For specific supported settings, you can see here http://expressjs.com/4x/api.html. Our Visitor only uses "view engine" and "views".

The "view engine" option is used to set the engine to be used. The Visitor code is as follows:

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

The "views" option is used to set the directory where the template file is located. The Visitor code is as follows:

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

I simply used relative paths here. A better approach is to use the path module and splice them based on the global variable dirname. dirname refers to the directory where the script currently being executed is located. For our Visitor example, it is the directory where app.js is located. The code may look like this:

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

express will use the corresponding engine according to the extension of the template file by default. For *.jade files, express will internally call the following statement:

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

So, our app.js can actually remove this line of code, and the result will be the same.

Local objects

We can include dynamic data in the template file, which comes from the application. We can use the express object's locals object to store local variables. The following code stores the title and access count:

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。還有其它的文檔類型，比如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)建與重啟操作代碼分享

The above is the detailed content of Detailed explanation of the steps to use jade template engine in Node.js. For more information, please follow other related articles on the PHP Chinese website!