在“——express的安装和使用”中，我们使用express生成器创建了一个Helloexpress网站，Express工具生成了基本的目录结构、模板、样式表、路由器等。虽然只是一个简单的HelloWorld类小工具，但还是包含了很多内容。为了更好的了解Express支持的玉石模板引擎的使用情况，我们这次提供了一个手工创建的小网站，可以显示访客的IP，并统计访问量。

安装玉石

Npm install -g jade执行上述命令进行全局安装。

访问者网站

步骤1，在我的项目目录下创建一个访问者目录。

步骤2，将以下代码保存在package.json文件中：

{'name' :' Visitor '，' version' :' 0.0.0 '，' private' : true，' dependencies ' : { ' express ' : ' ~ 4 . 13 . 1 '，' json' :我们要用快递和翡翠。

var express=require(' express ')；var app=express()；var计数器=0；//view engine setup app . set(' view '，')。/view’)；app.set('view engine '，' jade ')；app.engine('jade '，require('jade ')。_ _快递)；app.get('/')，function(req，RES){ counter；app . locals . counter=counter . tostring()；res.render('index '，{ IP : req . IP })；});app . listen(3000)；app.locals.title='欢迎访客'；app . locals . counter=' 0 '；app.js文件是我们网站的入口。

第四步，创建一个视图目录，并在其中创建一个模板文件index.jade，内容如下：

doctype html head title=title body h1=title p你好，# IP { p }你是# {counter}访客。步骤5，在访问者目录中执行“npm安装”来安装依赖项。

第六步，在Visitor目录中执行“node app.js”启动网站。

最后，您可以在浏览器中访问它。在地址栏中输入“http://localhost:3000”并刷新几次。您可能会看到以下界面：

这个简单的访问者网站不同于以前的HelloWorld和HelloExpress，它有一些动态的内容。接下来，让我们看看这一切是如何发生的。

快速和模板引擎

我在Visitor中使用了jade模板引擎，类似于ejs和很多其他的。你可以访问这里了解：https://github.com/joyent/node/wiki/Modules.

模板引擎使用模板文件动态生成HTML文件，可以按照一定的规则将应用程序中的数据集成到HTML文件中。这样不仅可以避免手工编写HTML的繁琐(相比使用模板)，还可以生成动态内容的网页。

Express和Jade结合的很好，看看怎么配置吧。

快速配置玉

express服务器的行为可以通过一些设置选项来控制，这些设置选项可以通过设置(设置，值)、启用(设置)和禁用(设置)Express对象来设置。具体支持哪些设置，可以在这里看到http://expressjs.com/4x/api.html.我们的访客只使用了“视图引擎”和“视图”。

查看引擎选项用于设置要使用的引擎。访问者的代码如下：

app.set('view engine '，' jade ')；“视图”选项用于设置模板文件所在的目录。访问者的代码如下：

app . set(' view '，')。/view’)；我这里简单使用相对路径，更好的方法是使用路径模块根据全局变量__dirname进行拼接。__dirname是指当前正在执行的脚本所在的目录。对于我们的Visitor示例，它是app.js所在的目录。代码可能如下所示：

var path=require(' path ')；path.join(__dirname，' view ')；默认情况下，express根据模板文件的扩展名使用相应的引擎。对于*。jade文件中，express内部调用了以下语句：

app.engine('jade '，require('jade ')。_ _快递)；因此，我们的app.js实际上可以删除这一行代码，结果是一样的。

本地对象

我们可以在模板文件中包含来自应用程序的动态数据。我们可以使用express对象的locales对象来存储局部变量。以下代码存储标题和访问计数：

app.locals.title='欢迎访客'；app . locals . counter=' 0 '；express对象的locals对象的属性可以在jade模板文件中直接访问。我在app.js中设置了标题和计数器，并在index.jade模板文件中引用了它们。

现在让我们看看这一行代码：

res.render('index '，{ IP : req . IP })；它调用express的Response对象的呈现方法来呈现模板文件，并传递一个本地对象。呈现方法原型：

Res.render (view [，locales] [，callback])RES . render方法呈现一个视图，并将呈现的HTML字符串发送给客户端。参考的原料药在http://expressjs.com/4x/api.html.这里

Response对象还有一个locales对象，它与app.locales的不同之处在于res的locales只在当前呈现的视图中有效，而app.locales是全局的。

此外，render方法的可选参数locales也可以定义局部变量对象，并将它们传递给view。我在代码中传递了ip。

在jade文件中，有两种常见的方法来调用应用程序传入的局部变量：

# {expression}标记=在index.jade模板文件的表达式前面，我们使用如下页面标题：

标题=标题

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

对于正文中的一级标题，我们是这样使用的(h1是jade用来定义HTML一级标题的标签):

h1=标题

这是一个“tag=expression”的调用方法，通常用在一行jade代码的开头，也就是tag开始的地方。“# {expression}”的优点是可以插入到jade模板文件的任何地方。例如：

p您好，# IP { p }您是# {counter}访客。我们也可以把“h1=title”改成“h1 #{title}”，效果一样。

翡翠发动机介绍

Jade使用一些标签来标记如何生成HTML。jade模板文件看起来和HTML文件很不一样，但是它的模板文件小而整齐。要使用翡翠，你需要知道它支持哪些标签。可以直接去玉郎，最详细最权威。我们这里只介绍index.jade文件中使用的那些标签。

有两篇关于玉的好文章，大家可以看看，分别是https://cnodejs.org/topic/5368adc5cf738dd6090060f2和//www . JB 51 . net/article/139936 . htm，后一篇是网友根浩三世写的一系列关于玉的文章的开头，整个系列的文章都值得一看。

HTML文档通常以文档声明开始，对应jade模板文件，即doctype html。还有其他文档类型，如xml，可以写成doctype xml。更多信息请参考http://jade-lang.com/reference/doctype/。

Jade有很多标签，用来生成HTML对应的标签。比如html对应、头部对应、身体对应、P对应、标题对应都是我们index.jade中使用的标签，通常我们在HTML中使用标签书写，去掉尖括号成为jade中可用的标签，比如jade对应的div。

HTML标签通常可以设置名称、id、类等属性。在玉石中，它们由标记(attr=value)表示。例如div (class="view-container ")和input (type="checkbox ")。

在玉石标签上，这篇文章//www . JB 51 . net/article/139942 . htm很不错，请参考。

测试玉石模板文件

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

玉的用法如下：玉[选项][目录|文件…]

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

如果jade xxx.jade执行上述命令，它将生成一个与当前目录中的模板文件同名的html文档。然而，格式很难阅读，它只是一坨屎。add-p(漂亮)。所以：

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

doctype html html(ng-app=' myApp ')head title=title link(rel='样式表，href='/样式表/style。CSS ')正文div(ng-controller='简单模板')| valueA :输入(类型=' number ' ng-model=' ValueA ')br | ValueB :输入(类型=' number ' ng-model=' valueB ')br |表达式值： { { valueA valueB } } br输入(类型=“按钮”ng-click运行"翡翠-P范围_模板。翡翠"命令会生成scope_template.html文件，内容如下：

！DOCTYPE html html ng-app=' myApp ' head title/title link rel='样式表href='/样式表/style . CSS“rel=”外部无跟随/头体div控制器='简单模板'值A :输入类型=' number ' ng-model=' valueA ' brvalueb :输入类型=' number ' ng-model=' valueB ' brbr表达式值： { { valueA valueB } } brbr输入类型=' button ' ng-type需要提一下，我们既可以用翡翠编写完整的超文本标记语言文档，也可以编写符合超文本标记语言语法的局部模板。比如下面的翡翠文件：

div(class='admin-user') p添加用户表tr td标签用户名：td输入（类型=' text '名称=' add _ username ')tr TD标签密码：td输入（类型=' text ' name=' add _ password ')tr TD(colspan=' 2 ' align=' right ')输入（类型='submit '值='增加)以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。