自制chatroom_构建由Node.js驱动的Chatroom Web App：具有Bootstrap的Chatroom UI

最新推荐文章于 2024-11-09 13:12:18 发布

dingshi7798

最新推荐文章于 2024-11-09 13:12:18 发布

阅读量122

点赞数

文章标签： css java html web python

原文链接：https://www.sitepoint.com/build-node-js-powered-chatroom-web-app-chatroom-ui-bootstrap/

版权

自制chatroom

本文是Microsoft的Web开发技术系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

这个Node.js教程系列将帮助您构建完全部署在云中的由Node.js驱动的实时聊天室Web应用程序。在本系列中，您将学习如何在Windows计算机上设置Node.js （如果在Mac上则仅学习概念），如何使用Express开发Web前端，如何将Node.js Express应用程序部署到Azure ，如何使用Socket.IO添加实时层，以及如何一起部署所有实时层。

本教程将使用可选的Visual Studio和Visual Studio插件的Node.js工具作为开发环境。我提供了两个工具的免费下载链接。这是中级文章的初学者-您应该了解HTML5和JavaScript。

第1部分– Node.js简介

第2部分–欢迎使用带有Node.js和Azure的Express

第3部分–使用Node.js，Mongo和Socket.IO构建后端

第4部分–使用Bootstrap构建Chatroom UI

第5部分–将聊天室与WebSockets连接

第6部分–结局和调试远程Node.js应用

第4部分–使用Bootstrap构建Chatroom UI

欢迎来到动手Node.js教程系列的第4部分：构建一个由Node.js驱动的聊天室Web应用程序。

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

什么是Bootstrap？

Bootstrap是一种流行HTML和CSS框架，用于构建网站和Web应用程序。这是GitHub上的第一项目。 Bootstrap支持响应式网页设计，使页面的布局适合设备（台式机，平板电脑，移动设备）。

在我们的项目中添加Bootstrap

要将Bootstrap添加到我们的项目中，我们必须下载Bootstrap的最小CSS和JS文件。您可以从此链接下载Bootstrap。下载Bootstrap之后，解压缩文件，然后将css ， js和fonts文件夹复制到项目中的public文件夹。

您会发现与现有文件夹结构存在一些不一致之处。我们将统一样式表和JavaScript文件夹。我更喜欢stylesheets css的Bootstrap命名法，而javascript则使用js的Bootstrap命名法，因为它与其他第三方库共享。将stylesheets的文件复制到css并删除javascript文件夹，因为它应该为空。接下来转到layout.jade并更改以下行：

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

至：

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

接下来，我们要增加对HTML5应用的引导CSS文件的链接头和适当的meta标签中layout.jade文件。您必须在包含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添加到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')

创建聊天界面布局

现在该开发聊天用户界面布局了。首先，您可能想阅读有关Bootstrap的信息，并看一下这个冗长的教程。所有聊天引擎都有一个用于最近接收到的消息的区域和一个供用户编写和发送消息的区域。从历史上看，布局的底部是编辑区域，顶部是消息。

无需进行任何工作就很难将HTML页面上的元素固定到视口的底部。我将按照此示例将页脚固定在底部。我们要修改index.jade文件，并删除内容块下的所有代码行。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

首先，我们添加页面区域，其中将包含收到的消息。让我们从添加带有wrap类的div开始。在Jade中，您只需编写.wrap即可生成<div class="wrap"></div> 。通过使用缩进，我们可以向Jade模板引擎发出信号，即更多的缩进元素将进入较少缩进的元素中。看看这玉教程，如果您在其他教程错过了。

接下来，我们要添加另一个带有类container-fluid div以向页面添加流体宽度。在内部，我将创建一个h1 ，说元素“欢迎使用节点聊天室”和一个div用一个ID messages和最终div与类push ，我们将使用该聊天室的消息在编辑区域向下推至底部视口。

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

接下来，我们将开发消息编辑区域。我们想捕捉的文本框和一个内发送按钮div称为footer和div称为container-fluid 。 footer div的缩进与wrap div缩进相同。

接下来，我将使用Bootstrap网格系统（在此处阅读有关内容）将消息编辑区域分成两个区域。其中一列将占据大部分空间，并将包含用于编写消息的文本框，第二列将包含用于发送消息的block-level按钮。请注意，Jade如何让我们使用paragraph符号指定元素的属性。该代码将如下所示：

.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%

其次，我们要确保包装区域占用最大高度，但在页脚和邮件编辑区域的底部留出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