Express フレームワークを使用して Meadowlark Travel Agency の website_html/css_WEB-ITnose を作成します

Scaffolding

Scaffolding は新しいアイデアではありませんが、多くの人 (私を含む) が Ruby を通じてこの概念を知りました。考え方は単純です。ほとんどのプロジェクトには一定量の「ルーチン化された」コードが必要ですが、新しいプロジェクトを開始するたびにそのコードを書き直す人がいるでしょうか?これを行う簡単な方法は、共通のプロジェクト スケルトンを作成し、新しいプロジェクトを開始するたびにこのスケルトンまたはテンプレートをコピーするだけです。

RoR は、足場を自動的に生成できるプログラムを提供することで、この概念をさらに一歩進めます。このアプローチの利点は、多数のテンプレートから選択するのではなく、より複雑なフレームワークを生成できることです。

Express は RoR のこのアプローチを利用し、新しい Express プロジェクトを開始できるようにスキャフォールディングを生成するツールを提供します。

Express には利用可能なスキャフォールディング ツールがありますが、現時点では使用をお勧めするフレームワークを生成しません。特に、私が選択したテンプレート言語 (ハンドルバー) はサポートされておらず、私の好みの命名規則にも従っていません (ただし、これは簡単に修正できます)。

このスキャフォールディング ツールは使用しませんが、一度見てみることをお勧めします。その頃には、このスキャフォールディング ツールが生成するスキャフォールディングが役立つかどうかを十分に理解できるようになるでしょう。

ルーチン化は、最終的にクライアントに送信される実際の HTML にも役立ちます。優れた空白の HTML5 Web サイトを生成する優れた HTML5 ボイラープレート (http://html5boilerplate.com/) をお勧めします。最近、HTML5 ボイラープレートに新しいカスタマイズ可能な機能が追加されました。カスタマイズ オプションの 1 つに、私が強くお勧めするフロントエンド フレームワークである Twitter Bootstrap が含まれています。

Meadowlark Travel Agency の Web サイト

この記事では、実際に稼働している Web サイトを例として使用します。これは、オレゴン州への旅行者にサービスを提供する会社、Meadowlark Travel Agency の架空の Web サイトです。 REST アプリケーションの作成に興味がある場合でも、心配する必要はありません。Meadowlark Travel Agency の Web サイトは、機能的な Web サイトであるだけでなく、REST サービスも提供しているからです。

最初の手順

まず、プロジェクトのルート ディレクトリとして機能する、プロジェクト用の新しいディレクトリを作成します。この記事では、「プロジェクト ディレクトリ」、「プログラム ディレクトリ」、または「プロジェクト ルート パス」という記述はすべて、このディレクトリを指します。

ヒント: Web プログラム ファイルを、会議議事録やドキュメントなど、プロジェクトに関連する他のファイルとは別に保存することもあります。したがって、プロジェクトのルート パスをプロジェクト ディレクトリのサブディレクトリにすることをお勧めします。たとえば、Meadowlark Travel Agency Web サイトの場合、プロジェクトを ~/projects/meadowlark に置き、プロジェクトのルート パスを ~/projects/meadowlark/site に置きます。

npm は、プロジェクトの依存関係と package.json ファイル内のプロジェクトのメタデータを管理します。このファイルを作成する最も簡単な方法は、npm init を実行することです。npm init は一連の質問をし、開始するための package.json ファイルを生成します (「エントリ ポイント」の質問には、meadowlark.js またはプロジェクトの回答として名前を付けます)。

ヒント: package.json ファイルでリポジトリ URL と空ではない README.md ファイルが指定されていない場合、npm を実行するたびに警告メッセージが表示されます。 package.json ファイル内のメタデータは、npm リポジトリに公開する場合にのみ実際に必要ですが、npm 警告メッセージを排除する努力は価値があります。

最初のステップは、Express をインストールすることです。次の npm コマンドを実行します:

npm install --save express

npm install を実行すると、指定された名前のパッケージが node_modules ディレクトリにインストールされます。 --save オプションを使用すると、package.json ファイルも更新されます。 node_modules は npm でいつでも再生成できるため、コード ベースにはこのディレクトリを保持しません。コード ベースに追加されないようにするには、.gitignore ファイルを作成します。

# ignore packages installed by npmnode_modules# put any other files you don't want to check in here,# such as .DS_Store (OSX), *.bak, etc.

次に、プロジェクトのエントリ ポイントである meadowlark.js ファイルを作成します。この記事では、このファイルを単に「プログラム ファイル」と呼びます:

var express = require('express');var app = express();app.set('port', process.env.PORT || 3000);// 定制404页面app.use(function(req, res){ res.type('text/plain'); res.status(404); res.send('404 - Not Found');});//定制500页面app.use(function(err, req, res, next){ console.error(err.stack); res.type('text/plain'); res.status(500); res.send('500 - Server Error');});app.listen(app.get('port'), function(){ console.log( 'Express started on http://localhost:' + app.get('port') + '; press Ctrl-C to terminate.' );});

ヒント: 多くのチュートリアルや Express Scaffolding Generator でさえ、メイン ファイルに app.js (場合によっては、index.js または server.js) という名前を付けることを推奨しています。 ）。使用しているホスティング サービスや展開システムにプログラムのメイン ファイルの名前に特別な要件がない限り、プロジェクトに応じてメイン ファイルに名前を付けることは意味がないと思います。エディターで大量のindex.htmlタグを見たことがある人なら誰でも、この利点をすぐに理解できるでしょう。 npm init はデフォルトでindex.jsを使用します。別のメインファイル名を使用する場合は、package.json ファイルの main 属性を変更してください。

これで、非常に合理化された Express サーバーが完成しました。このサーバー (ノード meadowlark.js) を起動し、http://localhost:3000 にアクセスします。 Express にルーティング情報を何も与えていないため、結果はがっかりするかもしれません。そのため、訪問したページが存在しないことを示す 404 ページが返されます。

注释：注意我们指定程序端口的方式： app.set(port, process.env.PORT || 3000)。这样我们可以在启动服务器前通过设置环境变量覆盖端口。如果你在运行这个案例时发现它监听的不是3000端口，检查一下是否设置了环境变量 PORT。

提示：我高度推荐你安装一个能显示HTTP请求状态码和所有重定向的浏览器插件。这样在解决重定向问题或者不正确的状态码时会更加容易，它们经常被忽视。对于Chrome来说，Ayima的Redirect Path特别好用。在大多数浏览器中， 都能在开发者工具的网络部分看到状态码。

我们来给首页和关于页面加上路由。在404处理器之前加上两个新路由：

app.get('/', function(req, res){ res.type('text/plain'); res.send('Meadowlark Travel');});app.get('/about', function(req, res){ res.type('text/plain'); res.send('About Meadowlark Travel');});// 定制404页面app.use(function(req, res, next){ res.type('text/plain'); res.status(404); res.send('404 - Not Found');});

app.get是我们添加路由的方法。在Express文档中写的是 app.VERB。这并不意味着存在一个叫 VERB的方法，它是用来指代HTTP动词的（最常见的是“get” 和“post”）。这个方法有两个参数：一个路径和一个函数。

路由就是由这个路径定义的。 app.VERB帮我们做了很多工作：它默认忽略了大小写或反斜杠，并且在进行匹配时也不考虑查询字符串。所以针对关于页面的路由对于/about、/About、/about/、/about?foo=bar、/about/?foo=bar等路径都适用。

路由匹配上之后就会调用你提供的函数，并把请求和响应对象作为参数传给这个函数。现在我们只是返回了状态码为200的普通文本（Express默认的状态码是200，不用显式指定）。

我们这次使用的不是Node的 res.end，而是换成了Express的扩展 res.send。我们还用 res.set和 res.status替换了Node的 res.writeHead。Express还提供了一个 res.type方法，可以方便地设置响应头 Content-Type。尽管仍然可以使用 res.writeHead和 res.end，但没有必要也不作推荐。

注意，我们对定制的404和500页面的处理与对普通页面的处理应有所区别：用的不是 app.get，而是 app.use。 app.use是Express添加 中间件的一种方法。你可以把它看作处理所有没有路由匹配路径的处理器。这里涉及一个非常重要的知识点：在Express中，路由和中间件的添加顺序至关重要。如果我们把404处理器放在所有路由上面，那首页和关于页面就不能用了，访问这些URL得到的都是404。现在我们的路由相当简单，但其实它们还能支持通配符，这会导致顺序上的问题。比如说，如果要给关于页面添加子页面，比如/about/contact和/about/directions会怎么样呢？下面这段代码是达不到预期效果的：

app.get('/about*',function(req,res){            // 发送内容....})app.get('/about/contact',function(req,res){            // 发送内容....})app.get('/about/directions',function(req,res){            // 发送内容....})

本例中的 /about/contact和 /about/directions处理器永远无法匹配到这些路径，因为第一个处理器的路径中用了通配符： /about*。

Express能根据回调函数中参数的个数区分404和500处理器。

你可以再次启动服务器，现在首页和关于页面都可以运行了。

截至目前我们所做的事情，即使不用Express也很容易完成，但Express所提供的一些功能并非那么显而易见。还记得如何规范化 req.url来确定所请求的资源吗？我们必须手动剥离查询字符串和反斜杠，并转化为小写。而Express的路由器会自动帮我们处理好这些细节。尽管目前看起来这并非什么大不了的事情，但这只是Express路由器能力的冰山一角。

视图和布局

如果你熟知“模型-视图-控制器”模式，那你对视图这个概念应该不会感到陌生。视图本质上是要发送给用户的东西。对网站而言，视图通常就是HTML，尽管也会发送PNG或PDF，或者其他任何能被客户端渲染的东西。

视图与静态资源（比如图片或CSS文件）的区别是它不一定是静态的：HTML可以动态构建，为每个请求提供定制的页面。

Express支持多种不同的视图引擎，它们有不同层次的抽象。Express比较偏好的视图引擎是Jade（因为它也是TJ Holowaychuk开发的） 。Jade所采用的方式非常精简：你写的根本不像是HTML，因为没有尖括号和结束标签，这样可以少敲好多次键盘。然后，Jade引擎会将其转换成HTML。

Jade是非常吸引人的，但这种程度的抽象也是有代价的。如果你是一名前端开发人员，即便你实际上是用Jade编写视图，也必须理解HTML，并且有足够深入的认识。我认识的大多数前端开发人员都不喜欢他们主要的标记语言被抽象化处理。因此我推荐使用另外一个抽象程度较低的模板框架Handlebars。Handlebars（基于与语言无关的流行模板语言Mustache）不会试图对HTML进行抽象：你编写的是带特殊标签的HTML，Handlebars可以借此插入内容。

为了支持Handlebars，我们要用到Eric Ferraiuolo的 express3-handlebars包（尽管名字中是express3，但这个包在Express 4.0中也可以使用）。在你的项目目录下执行：

npm install --save express3-handlebars

然后在创建app之后，把下面的代码加到meadowlark.js中：

var app = express();// 设置handlebars视图引擎var handlebars = require('express3-handlebars')            .create({ defaultLayout:'main' });app.engine('handlebars', handlebars.engine);app.set('view engine', 'handlebars');

这段代码创建了一个视图引擎，并对Express进行了配置，将其作为默认的视图引擎。接下来创建views目录，在其中创建一个子目录layouts。如果你是一位经验丰富的Web开发人员，可能已经熟悉 布局的概念了（有时也被称为“母版页”）。在开发网站时，每个页面上肯定有一定数量的HTML是相同的，或者非常相近。在每个页面上重复写这些代码不仅非常繁琐，还会导致潜在的维护困境：如果你想在每个页面上做一些修改，那就要修改所有文件。布局可以解决这个问题，它为网站上的所有页面提供了一个通用的框架。

所以我们要给网站创建一个模板。接下来我们创建一个views/layouts/main.handlebars文件：

<!doctype html><html><head>      <title>Meadowlark Travel</title></head><body> {{{body}}}</body></html>

以上内容你未曾见过的可能只有 {{{body}}}。这个表达式会被每个视图自己的HTML取代。在创建Handlebars实例时，我们指明了默认布局（ defaultLayout:'main'）。这就意味着除非你特别指明，否则所有视图用的都是这个布局。

接下来我们给首页创建视图页面，views/home.handlebars：

<h1 id="Welcome-to-Meadowlark-Travel">Welcome to Meadowlark Travel</h1>

关于页面，views/about.handlebars：

<h1 id="About-Meadowlark-Travel">About Meadowlark Travel</h1>

未找到页面，views/404.handlebars：

<h1 id="Not-Found">404 - Not Found</h1>

最后是服务器错误页面，views/500.handlebars：

<h1 id="Server-Error">500 - Server Error</h1>

提示：你或许想在编辑器中把.handlebars和.hbs （另外一种常见的Handlebars文件扩展名）跟HTML相关联，以便启用语法高亮和其他编辑器特性。如果是vim，你可以在~/.vimrc文件中加上一行 au BufNewFile,BufRead *.handlebars set file type=html。其他编辑器请参考相关文档。

现在视图已经设置好了，接下来我们必须将使用这些视图的新路由替换旧路由：

app.get('/', function(req, res) { res.render('home');});app.get('/about', function(req, res) { res.render('about');});// 404 catch-all处理器（中间件）app.use(function(req, res, next){ res.status(404); res.render('404');});// 500错误处理器（中间件）app.use(function(err, req, res, next){ console.error(err.stack); res.status(500); res.render('500');});

需要注意，我们已经不再指定内容类型和状态码了：视图引擎默认会返回 text/html的内容类型和200的状态码。在catch-all处理器（提供定制的404页面）以及500处理器中，我们必须明确设定状态码。

如果你再次启动服务器检查首页和关于页面，将会看到那些视图已呈现出来。如果你检查源码，将会看到views/layouts/main.handlebars中的套路化HTML。

视图和静态文件

Express靠中间件处理静态文件和视图。只需了解中间件是一种模块化手段，它使得请求的处理更加容易。

static中间件可以将一个或多个目录指派为包含静态资源的目录，其中的资源不经过任何特殊处理直接发送到客户端。你可以在其中放图片、CSS文件、客户端JavaScript文件之类的资源。

在项目目录下创建名为public的子目录 （因为这个目录中的所有文件都会直接对外开放，所以我们称这个目录为public）。接下来，你应该把 static中间件加在所有路由之前：

app.use(express.static(__dirname + '/public'));

static中间件相当于给你想要发送的所有静态文件创建了一个路由，渲染文件并发送给客户端。接下来我们在public下面创建一个子目录img，并把logo.png文件放在其中。

现在我们可以直接指向/img/logo.png （注意：路径中没有public，这个目录对客户端来说是隐形的）， static中间件会返回这个文件，并正确设定内容类型。接下来我们修改一下布局文件，以便让我们的logo出现在所有页面上：

<body>    <header>    <img src="/static/imghwm/default1.png"  data-src="/img/logo.png"  class="lazy" alt="Meadowlark Travel Logo">    </header> {{{body}}}</body>

注释：`是HTML5中引入的元素，它出现在页面顶部，提供一些与内容有关的额外语义信息，比如logo、标题文本或导航等。

视图中的动态内容

视图并不只是一种传递静态HTML的复杂方式（尽管它们当然能做到）。视图真正的强大之处在于它可以包含动态信息。

比如在关于页面上发送“虚拟幸运饼干”。我们在meadowlark.js中定义一个幸运饼干数组：

var fortunes = [  "Conquer your fears or they will conquer you.",  "Rivers need springs.",  "Do not fear what you don't know.",  "You will have a pleasant surprise.", "Whenever possible, keep it simple.",];

修改视图（/views/about.handlebars）以显示幸运饼干：

<h1 id="About-Meadowlark-Travel">About Meadowlark Travel</h1>
Your fortune for the day:
{{fortune}}

接下来修改路由/about，随机发送幸运饼干：

app.get('/about', function(req, res){  var randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)]; res.render('about', { fortune: randomFortune });  );

重启服务器，加载/about页面，你会看到一个随机发放的幸运饼干。模板真的是非常有用。

小结

我们刚用Express创建了一个非常基本的网站。尽管简单，但这个网站包含了功能完备的网站所需的一切。