Node.js에서 Jade 템플릿 엔진을 사용하는 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

이번에는 Node.js에서 jade템플릿 엔진을 사용하는 단계에 대해 자세히 설명하겠습니다. Node.js에서 jade 템플릿 엔진을 사용할 때 주의사항은 무엇인가요?

"Node.js 개발 소개 - Express 설치 및 사용"에서는 Express Generator를 사용하여 HelloExpress 웹사이트를 만들었습니다. Express 도구는 기본 디렉터리 구조, 템플릿, 스타일시트, 라우터 등을 생성했습니다. 비록 단순한 HelloWorld이지만 여전히 많은 컨텐츠를 포함하고 있습니다. Express에서 지원하는 jade 템플릿 엔진의 사용법을 더 잘 이해하기 위해 이번에는 방문자의 IP를 표시하고 방문 횟수를 계산할 수 있는 수동으로 생성된 작은 웹사이트를 제공합니다. .

Install jade

npm install -g jade

로그인 후 복사

위 명령을 실행하여 전역적으로 설치합니다.

Visitor 웹사이트

1단계, myprojects 디렉터리 아래에 Visitor 디렉터리를 만듭니다.

2단계, package.json 파일에 다음 코드를 저장합니다.

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

로그인 후 복사

이 json 파일은 방문자 웹사이트의 일부 정보를 설명하며, 가장 중요한 부분은 종속성입니다. 우리는 Express와 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";

로그인 후 복사

app.js 파일은 우리 웹사이트의 입구입니다.

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단계, Visitor 디렉토리에서 "node app.js"를 실행하여 웹사이트를 시작하세요.

마지막으로 브라우저에서 액세스할 수 있습니다. 주소 표시줄에 "http://localhost:3000"을 입력하면 다음 인터페이스가 표시됩니다.

이것은 간단합니다. 방문자 웹사이트는 이전 HelloWorld 및 HelloExpress와 다릅니다. 일부 동적 콘텐츠가 있습니다. 다음으로 이것이 어떻게 발생하는지 살펴보겠습니다.

express 및 템플릿 엔진

저는 ejs 등과 유사한 Visitor의 jade 템플릿 엔진을 사용합니다. 여기를 방문하여 자세히 알아볼 수 있습니다: https://github.com/joyent/node/wiki/ 모듈.

템플릿 엔진은 템플릿 파일을 사용하여 HTML 파일을 생성하는 동안 특정 규칙에 따라 애플리케이션의 데이터를 HTML 파일에 통합할 수 있습니다. 이러한 방식으로 템플릿을 사용하는 것에 비해 HTML을 수동으로 작성하는 지루함을 피할 수 있을 뿐만 아니라 동적 콘텐츠가 포함된 웹 페이지를 생성할 수도 있습니다.

Express와 Jade가 더 잘 결합되는데, 구성 방법을 살펴보겠습니다.

Express 구성 jade

Express 서버의 동작은 Express 개체의 set(설정, 값), 활성화(설정) 및 비활성화(설정)를 통해 설정할 수 있는 일부 설정 옵션을 통해 제어할 수 있습니다. 지원되는 특정 설정에 대해서는 여기(http://expressjs.com/4x/api.html)를 참조하세요. 방문자는 "뷰 엔진"과 "뷰"만 사용합니다.

"view 엔진" 옵션은 사용할 엔진을 설정하는 데 사용됩니다.

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

로그인 후 복사

"views" 옵션은 템플릿 파일이 있는 디렉터리를 설정하는 데 사용됩니다.

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

로그인 후 복사

여기서 간단히 사용합니다. 상대 경로의 경우 더 나은 접근 방식은 경로 모듈을 사용하고 전역 변수 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中文网其它相关文章！