使用 Node、Express、Bootstrap 和 Jade 创建一个简单的响应式网站 - 第一部分

如果您已经了解 NodeJS，可以跳过此部分，直接进入 Node 的安装。

让我简要总结一下 Node 是什么/为什么使用它。这只涵盖了一些场景，Node 的功能远不止于此。

Ryan Dahl 的创作…… Node 是一个事件驱动的、异步的服务器端编程平台。NodeJS 是当前的网络开发平台。使用 Node 构建的 Web 应用程序将响应事件，而不是像 PHP 这样的传统应用程序开发模型。Node 使用 JavaScript 编写，并采用了 Google 的 V8 引擎，还使用了大量 C 语言编写的开源库进行操作系统级别的操作。哈，就是这样吗？如今，这种事件驱动的编程模型在传统的 Web 平台中也已经存在，例如流行的 ASP.NET，但 Node 的优势是什么？请继续阅读。除了传统的 Web 应用程序，它在以下方面表现出色。

支持推送式

让我用一个例子来解释。假设您在一个团队中工作，领导会给团队成员分配任务，每位团队成员都需要在规定时间内完成自己的任务。那么，要知道您是否被分配了任何任务，您会不断地催促您的领导，但最好的方式是您的领导告诉您：“当分配任务给您时，我会通知您”，这是一种推送式的解决方案。

实时应用的绝佳选择

考虑天气更新、股票行情更新。所有这些都应该是服务器向客户端推送数据的用例。如果服务器在天气或股票行情有变动时通知客户端，这肯定比客户端一直轮询服务器来了解情况要好，可以节省大量网络流量，而且非常实时。

日常开发示例

如果您曾经使用传统 Web 平台在 Web 上编写过文件上传进度条，相信我，这可能并不那么优雅，因为客户端-服务器 Web 编程模型虽然是事件驱动编程，但它是从客户端到服务器的拉取模型。例如，如果客户端想知道文件上传了多少百分比以便在浏览器中更新其进度条，客户端必须不断地向服务器轮询，让服务器告知客户端文件上传的进度。想象一下，如果有成千上万的客户端每次都询问此文件上传状态，这无疑会产生不必要的流量，如果平台切换到 Node，就可以节省这些流量。

如今的社交网络网站

现在的 Web 博客平台都是基于实时的，一旦服务器检测到数据变化，它就会通知相应的客户端。推送模型。例如，如果用户在博客网站上发表评论，服务器会立即将数据通知收件人。LinkedIn 已经在使用 Node 平台。

从前端到后端使用单一编程语言

您不需要学习多种语言或雇用多种语言的人员来维护不同的层。使用 Node，您几乎可以在 Web 开发的所有层中使用单一的 JavaScript 语言栈。这也有很大的代码复用空间。

异步编程模型

Node 通过异步编程模型实现了上述推送模型。它使用 JavaScript 回调机制来实现异步编程风格。Node 有一个始终运行的单一事件循环。每次事件循环运行时，都称为一个“tick”。因此，每个回调都会注册到一个特定的 tick，意味着在一个事件循环周期内。当所有回调都执行完毕后，事件循环将结束。

安装 Node

如果您已经在机器上安装了 Node，可以跳过此部分，直接进入下一节。
在 Windows 上安装 Node 不到 3 分钟，但对于 Mac 和 Linux，您需要做一些额外的工作。所以，我建议您访问 NodeJS 网站。Windows 用户请点击网站上的绿色“Install”按钮，它会为您下载 MSI 文件。如果您想对软件进行病毒扫描，最好这样做，我使用 Symantec Endpoint 进行病毒扫描。Linux 和 Mac 用户请点击“Downloads”链接，并获取适合您的版本。要确认 Node 是否安装成功，您可以在 Windows 中打开命令提示符，输入 Node，然后按 Enter 键，它会等待几秒钟然后显示 Node 提示符。这意味着您的 Node 安装成功了。

这不是简单的 Hello World

我们不是在设置一个简单的 Hello World 页面，而是要做的更多。让我们不要总是做 Hello World。因此，在接下来的几节中，我将介绍一些用于创建网站的技术。如果它们需要任何设置，我们也会进行。让我们开始吧。

Jade 模板引擎

在创建我们的网站时，我选择了 Jade 模板引擎，因为它是一个 Node 的模板引擎，非常容易理解和编写。编写模板只需要很少的按键次数，否则我们必须费力地在页面上编写 HTML，这意味着总是输入小于号、大于号、斜杠，很痛苦……不是吗？

这是 Jade 模板引擎的教程，花几分钟时间看看这个网站，欣赏它的美妙之处。

我们正在使用 Bootstrap

响应式来了，如果我们的网站要在桌面、手机和平板电脑等设备上运行，我们需要为每个设备设计 CSS，这不是一件简单的事情。别担心，专家们已经处理了这部分工作。我们有 Twitter Bootstrap 框架可用，它是开源的，随时可以下载，这里。您可以从 Bootstrap 下载各种控件并开始使用它们。
我喜欢 Cyborg 主题，并且我获得了 Cyborg 主题的 Bootstrap CSS，我在我的示例中使用了相同的主题。

Node Express

Node Express 非常棒。它是一个用于 Node 平台的 Web 应用程序框架。如果您有兴趣在 Node 平台上构建 Web 应用程序，以获得推送模型、轻量级和网站速度等好处，请考虑使用 Node Express。它是包含许多功能的中间件。所以，现在不要太担心它，您不需要立刻完全了解这些技术，因为在本篇文章的范围内，我们只需要知道我们需要知道的部分。

我们的网站设计

我获得了一个灵感，第二天早上就创办了一家公司，成为了一名企业家。它叫做 **City Router Hub**。您知道我们做什么，我们为世界各地提供免费互联网，无论您在哪里。我只是在**开玩笑**。您知道公司的其他业务，可以查看公司网站。这里有两个页面：主页和关于。主页是描述我们服务的登陆页，关于页面介绍我们。

如果您有兴趣，请注意其中的文字，它**很有趣**。我花了一些时间写这些有趣的内容。

这是我们的 **关于** 页面

阅读我的下一篇文章。请看 第二部分。

CodeProject