实践：使用 Node.js 构建聊天室 Web 应用 | 第 4 部分

Rami Sayar

0/5 (0投票)

2015 年 5 月 21 日

CPOL

6分钟阅读

6548

在本期中，我将向您展示如何为聊天室后端添加 Twitter Bootstrap 风格的前端。

这个 Node.js 教程系列将帮助您构建一个完全部署在云中的 Node.js 驱动的实时聊天室 Web 应用。在本系列中，您将学习如何在 Windows 计算机上设置 Node.js，如何使用 Express 开发 Web 前端，如何将基于 Node Express 的应用部署到 Microsoft Azure，如何使用 Socket.IO 添加实时层，以及如何将所有内容整合在一起。

级别：初学者到中级——您需要了解 HTML5 和 JavaScript

第一部分 - Node.js 入门

第二部分 - 欢迎使用 Node.js 和 Azure 的 Express

第三部分 - 使用 Node、Mongo 和 Socket.IO 构建后端

第四部分 – 使用 Bootstrap 构建聊天室 UI

第五部分 - 使用 WebSockets 连接聊天室

第六部分 – 最终章和调试远程 Node 应用

第四部分 – 使用 Bootstrap 构建聊天室 UI

欢迎来到实践 Node.js 教程系列“构建 Node.js 驱动的聊天室 Web 应用”的第 4 部分。

在本期中，我将向您展示如何为你在第 2 部分和第 3 部分中构建的聊天室后端添加 Twitter Bootstrap 风格的前端。

什么是 Bootstrap？

Bootstrap 是一个非常流行的用于构建网站和 Web 应用的 HTML 和 CSS 框架。它是 GitHub 上的第一名项目。Bootstrap 支持响应式 Web 设计，允许您的页面布局适应设备（桌面、平板电脑、移动设备）。

将 Bootstrap 添加到我们的项目中

要将 Bootstrap 添加到我们的项目中，我们需要下载 Bootstrap 的最小化 CSS 和 JS 文件。您可以从这个链接下载 Bootstrap。下载 Bootstrap 后，解压缩文件并将 "css"、"js" 和 "fonts" 文件夹复制到项目中的 "public" 文件夹。

您会注意到与现有文件夹结构有一些不一致。我们将统一样式表和 JavaScript 文件夹。我更喜欢 Bootstrap 的命名约定，即 "css" 代表 "stylesheets" 和 "js" 代表 "javascripts"，因为这与其他第三方库共享。将 "stylesheets" 中的文件复制到 "css" 中，并删除 "javascripts" 文件夹，因为它应该是空的。接下来，转到 layout.jade 并更改以下行：

link(rel='stylesheet' href='/stylesheets/style.css')

link(rel='stylesheet' href='/css/style.css')

接下来，我们要将 Bootstrap CSS 文件链接添加到头部，并在 layout.jade 文件中为 HTML5 应用添加相应的 meta 标签。您必须在包含 style.css 链接的行之前添加以下行。

meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(rel='stylesheet' href='/css/bootstrap.min.css')
link(rel='stylesheet' href='/css/bootstrap-theme.min.css')

接下来，我们要添加 Bootstrap 控件和插件所需的 JavaScript 文件。在 layout.jade 的末尾添加以下行：

script(type='text/javascript' src='/js/bootstrap.min.js')

完成的 layout.jade

doctype html
html
  head
    title= title
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=edge")
    link(rel='stylesheet' href='/css/bootstrap.min.css')
    link(rel='stylesheet' href='/css/bootstrap-theme.min.css')
    link(rel='stylesheet' href='/css/style.css')

  body
    block content

    script(type='text/javascript' src='/js/bootstrap.min.js')

创建聊天 UI 布局

现在是时候开发聊天用户界面布局了。首先，您可能需要阅读有关 Bootstrap 的信息，并查看这个长教程。所有聊天引擎都有一个用于显示最近接收消息的区域和一个用于用户输入和发送消息的区域。传统上，布局是将编辑区域固定在底部，消息显示在顶部。

不经过一些工作，很难将 HTML 页面上的元素固定到视口的底部。我将遵循这个示例将页脚固定到底部。我们要修改 index.jade 文件，并删除 content 块下的所有代码行。

首先，我们添加页面中将包含接收到的消息的区域。让我们先添加一个类名为 wrap 的 div。在 Jade 中，您只需要写 wrap 即可生成一个 <div class="wrap"></div>。通过使用缩进，我们可以向 jade 模板引擎表明，缩进更多的元素将包含在缩进较少的元素中。如果您在其他教程中错过了，可以查看这个 Jade 教程。

接下来，我们要添加一个类名为 container-fluid 的 div 来为页面添加流式宽度。在其中，我将创建一个 h1 元素，上面写着“欢迎来到 Node 聊天室”，一个 id 为 messages 的 div，以及一个最终的类名为 push 的 div，我们将用它将聊天室的消息编辑区域推到视口底部。

  .wrap
    .container-fluid
        h1 Welcome to the Node Chatroom
        #messages

        .push

接下来，我们将开发消息编辑区域。我们要将文本框和发送按钮包含在一个名为 footer 的 div 和一个名为 container-fluid 的 div 中。footer div 将与 wrap div 具有相同的缩进。

接下来，我将使用 Bootstrap 网格系统（在此处阅读）将消息编辑区域分成两部分。其中一个列将占据大部分空间，其中包含用于编写消息的文本框；第二个列将包含一个块级按钮用于发送消息。请注意 Jade 如何让我们使用段落表示法指定元素的属性。代码将如下所示：

  .footer
    .container-fluid
      .row
        .col-xs-8.col-sm-9
          input(type="text" id="message-box" class="form-control input-lg" placeholder="Write a message here..." rows="3")
        .col-xs-4.col-sm-3
          button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message

完成的 index.jade

extends layout

block content
  .wrap
    .container-fluid
        h1 Welcome to the Node Chatroom
        #messages

        .push
  .footer
    .container-fluid
      .row
        .col-xs-8.col-sm-9
          input(type="text" id="message-box" class="form-control input-lg" placeholder="Write a message here..." rows="3")
        .col-xs-4.col-sm-3
          button#send-message-btn.btn.btn-primary.btn-lg.btn-block Send Message

添加 CSS 将消息编辑区域强制固定到视口底部

我们要将消息编辑区域强制固定到视口底部，我们将在 public/css/style.styl 文件中添加一些自定义 CSS。此文件使用 Stylus CSS 预处理器，但您也可以直接粘贴 CSS，它将被复制到生成的 CSS 文件中。

首先，我们要确保整个页面占用 100% 的高度。

html, body
  height: 100%

其次，我们要确保 wrap 区域占用最大可能的高度，但为我们的页脚和消息编辑区域留出 60px 的边距。

.wrap 
  min-height: 100%
  height: auto !important
  height: 100%
  margin: 0 auto -60px

第三，我们要确保为编辑区域留出的空间得到尊重，并将其分配给页脚。

.push, .footer 
  height: 60px

最后，出于样式原因，让我们为页脚添加一种柔和的背景色。

.footer
  background-color: #f5f5f5

完成的 Style.styl 文件

html, body
  height: 100%
 
.wrap 
  min-height: 100%
  height: auto !important
  height: 100%
  margin: 0 auto -60px
 
.push, .footer 
  height: 60px
 
.footer
  background-color: #f5f5f5

屏幕截图

结论

瞧！我们使用 Bootstrap 和 Jade/Stylus 预处理器为我们的聊天室添加了一个漂亮的 UI 布局，该布局由 Node 提供服务。在下一期中，我将向您展示如何通过 WebSockets 连接 UI 和 Node 后端。

敬请期待第 5 部分！

第 5 部分——使用 WebSockets 连接聊天室——即将发布到 CodeProject，也位于我的博客此处。您可以通过关注我的 Twitter 帐户 @ramisayar 来了解此文章和其他文章的最新动态。

实践：使用 Node.js 构建聊天室 Web 应用 | 第 4 部分

第四部分 – 使用 Bootstrap 构建聊天室 UI

什么是 Bootstrap？

将 Bootstrap 添加到我们的项目中

完成的 layout.jade

创建聊天 UI 布局

完成的 index.jade

添加 CSS 将消息编辑区域强制固定到视口底部

完成的 Style.styl 文件

屏幕截图

结论

敬请期待第 5 部分！

更多关于 Azure 上的 Node 学习