Эта статья является частью серии технологий веб-разработки от Microsoft. Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
Эта серия руководств по Node.js поможет вам создать веб-приложение для чатов в режиме реального времени с поддержкой Node.js, полностью развернутое в облаке. В этой серии вы узнаете, как настроить Node.js на вашем компьютере с Windows (или просто познакомитесь с концепциями, если вы работаете на Mac), как разработать веб-интерфейс с Express , как развернуть приложение Node.js Express для Azure , как использовать Socket.IO для добавления слоя в реальном времени и как развернуть его все вместе.
В этом учебном пособии в качестве среды разработки будут использоваться необязательный плагин Visual Studio и плагин Node.js Tools for Visual Studio . Я предоставил ссылки на бесплатные загрузки обоих инструментов. Это статья для начинающих и среднего уровня — вы должны знать HTML5 и JavaScript.
Часть 2. Добро пожаловать в экспресс с Node.js и Azure
Часть 3 — Создание серверной части с Node.js, Mongo и Socket.IO
Часть 4. Создание пользовательского интерфейса чата с помощью Bootstrap
Часть 4. Создание пользовательского интерфейса чата с помощью Bootstrap
Добро пожаловать в четвертую часть практического руководства по Node.js: создайте веб-приложение для чата на основе Node.js.
В этой статье я покажу вам, как добавить интерфейс в стиле Bootstrap в стиле Twitter в бэкэнд, созданный вами в Части 2 и 3 .
Что такое Bootstrap?
Bootstrap — это популярная платформа HTML и CSS для создания веб-сайтов и веб-приложений. Это проект номер один на GitHub. Bootstrap поддерживает адаптивный веб-дизайн, позволяющий адаптировать макет вашей страницы к устройству (настольный, планшетный, мобильный).
Добавление Bootstrap в наш проект
Чтобы добавить Bootstrap в наш проект, мы должны загрузить минимизированные файлы CSS и JS для Bootstrap. Вы можете скачать Bootstrap по этой ссылке . После загрузки Bootstrap разархивируйте файл и скопируйте папки css , js и fonts в public папку вашего проекта.
Вы заметите несколько несоответствий с существующей структурой папок. Мы объединяем таблицы стилей и папки JavaScript. Я предпочитаю номенклатуру Bootstrap css для stylesheets и js для javascript как она используется другими сторонними библиотеками. Скопируйте файлы в stylesheets в css и удалите папку javascript как она должна быть пустой. Затем перейдите к layout.jade и измените следующую строку:
link(rel='stylesheet' href='/stylesheets/style.css')
чтобы:
link(rel='stylesheet' href='/css/style.css')
Далее мы хотим добавить ссылки на файл Bootstrap CSS в заголовок и соответствующие метатеги для приложений HTML5 в файле 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')
Далее мы хотим добавить файл JavaScript, который нужен Bootstrap для его компонентов и плагинов. Добавьте следующую строку в конец 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 и удалить все строки кода под блоком контента.
Сначала мы добавляем область страницы, которая будет содержать полученные сообщения. Давайте начнем с добавления div с классом wrap . В Jade все, что вам нужно написать — это .wrap чтобы сгенерировать <div class="wrap"></div> . Используя отступы, мы можем сигнализировать движку Jade Templating, что больше элементов с отступами попадет в элементы с меньшим отступом. Посмотрите этот урок по Jade, если вы пропустили его в других уроках.
Далее мы хотим добавить еще один div с классом container-fluid чтобы добавить ширину жидкости на страницу. Внутри я создам элемент h1 надписью «Welcome to the Node Chatroom» и div с messages id и заключительный div с push messages класса, который мы будем использовать, чтобы протолкнуть вниз область редактирования сообщений в чат-комнате до нижней части окно просмотра.
.wrap .container-fluid h1 Welcome to the Node Chatroom #messages .push
Далее мы собираемся разработать область редактирования сообщений. Мы хотим захватить текстовое поле и отправить кнопку внутри div называемого « footer и div называемый container-fluid div footer будет иметь тот же отступ, что и 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 для форсирования области редактирования сообщений в нижней части области просмотра
Мы хотим переместить область редактирования сообщения внизу области просмотра, нам нужно добавить несколько пользовательских правил CSS на public/css/style.styl странице public/css/style.styl . Этот файл использует препроцессор Stylus CSS, но вы также можете вставить дословный CSS, который будет скопирован в сгенерированный файл CSS.
Во-первых, мы хотим убедиться, что вся страница занимает 100% высоты.
html, body height: 100%
Во-вторых, мы хотим, чтобы область переноса занимала максимально возможную высоту, но оставляла поле 60 пикселей внизу для нашего нижнего колонтитула и области редактирования сообщений.
.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, чтобы добавить хороший макет интерфейса для нашего чата, который обслуживается Node.js. В следующей части я покажу вам, как соединить пользовательский интерфейс и серверную часть Node.js через WebSockets.
Оставайтесь с нами для части 5!
Часть 5 — Соединение чата с WebSockets здесь . Вы можете быть в курсе этой и других статей, следуя моей учетной записи в Twitter
Подробнее Node.js Обучение на Azure
Для более глубокого изучения Node.js мой курс доступен здесь, в Microsoft Virtual Academy.
Или видео в более коротком формате на похожие темы Node.js:
Эта статья является частью серии технологий веб-разработки от Microsoft. Мы рады поделиться с вами Project Spartan и его новым механизмом рендеринга . Получите бесплатные виртуальные машины или проведите удаленное тестирование на устройстве Mac, iOS, Android или Windows на сайте modern.IE .