Эй, товарищи фанатики! Сегодня у меня для вас классный проект: приложение для чата, созданное с использованием Vue.js, Firebase и Materialize CSS!
Создание такого приложения — хороший способ выйти за рамки простых функций CRUD. Другими словами, этот проект научит вас, как:
- передавать реквизиты из одного компонента в другой как элемент роутинга.
- Используйте Moment.js в компонентах.
- синтезировать условный рендеринг с пользовательскими классами CSS, чтобы различать текущего пользователя и всех других пользователей в окне чата.
Это один из моих любимых проектов VueStacks, и я с нетерпением жду возможности провести вас через процесс сборки. После завершения этого проекта вы можете просмотреть следующее руководство из этой серии о том, как добавить Vuex.
Оглавление
Настройка проекта
Компонент дома
Компонент чата
Настройка проекта
Если вы еще этого не сделали, установите Vue CLI:
npm install -g @vue/cli
Запустите новый проект, добавив в терминал следующее:
vue create <your project name>
Выберите следующие функции для этого проекта:
Babel Router Vuex Linter
Опять же, мы сохраним Vuex для части 2 этого проекта, но пока продолжим и установим его.
После установки проекта откройте index.html и добавьте следующую ссылку CDN ниже ‹title›‹/title›.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Ссылка выше даст нам доступ к библиотеке стилей Materialize CSS.
Далее нам нужно установить Firebase, Moment.js и VueChatScroll. Последний активирует автоматическую прокрутку вниз окна чата при добавлении нового сообщения.
npm install firebase moment vue-chat-scroll
После установки этих зависимостей откройте main.js (файл точки входа). Настройте свой файл так, чтобы он выглядел так:
Как видите, firebase инициализируется внутри этого файла. Затем мы назначим .firestore() константной переменной с именем db, которая затем будет импортирована в компонент Chat.vue, который мы сейчас настроим. . Это сделано для того, чтобы предоставить нашим компонентам доступ к базе данных Cloud Firestore, которую мы будем использовать вместо RTDB для этого проекта. После того, как вы настроили свой проект Firebase, вставьте свой фрагмент SDK Firebase в инициализатор выше, чтобы подключить этот проект к Firebase.
Теперь настроим роутер. Настройте router/index.js примерно так:
В этом проекте мы будем использовать только два компонента: Главная страница и Чат. Импортируйте эти два компонента в router/index.js и добавьте их в маршруты, как показано выше. props: true позволит нашему маршруту Chat принимать реквизиты. Этот маршрут также должен иметь защиту маршрута:
Защита маршрута предотвращает перенаправление пользователя к компоненту Chat без ввода имени пользователя. Имя пользователя передается в условное выражение в качестве параметра. Это обрабатывается на домашней странице, как мы вскоре увидим.
Наконец, давайте настроим App.vue. Это должно просто выглядеть так:
Отличная работа! Теперь, когда наш проект настроен, мы можем начать создавать наши компоненты!
Главный компонент
Home.vue довольно прост. Сначала добавим шаблон:
Шаблон включает набор классов Materialize CSS для управления стилем карточки, включая Container, Card, Card-Content и выравнивание по центру. . Набор тегов div с классами col, s6, и offset-s3 используется для размещения карты и ее контейнера в сетке. Класс s6 позволяет карточке занимать 6 столбцов. Затем используется класс offset-s3, чтобы сместить карточку на 3 столбца, что позволяет отображать карточку по центру экрана. Внутри карточки находится форма с полем ввода и кнопкой. Форма включает в себя обработчик отправки, связанный с методом «enterChat», который мы настроим чуть позже. Поле ввода привязано к свойству под названием «имя». Форма также включает элемент, который возвращает отзыв на карточку, если пользователь нажимает ввод, не вводя имя чата.
Теперь займемся экземпляром. Наш объект данных должен включать свойства name и feedback:
Метод enterChat() должен быть настроен следующим образом:
Этот метод включает условное выражение, которое сначала ищет «this.name». Если свойство name включает входные данные, компонент перенаправляется к компоненту чата. «this.name» будет добавлено в качестве параметра. Затем этот новый параметр применяется к защите маршрута, которую мы только что настроили для предотвращения маршрутизации без введенного имени пользователя.
Вот полный компонент в Home.vue
Отлично! Теперь давайте настроим Chat.vue.
Компонент чата
После настройки Chat.vue в папке компонентов добавьте следующие пользовательские классы CSS в раздел стилей этого компонента:
Эти классы охватывают стиль левого и правого пузырей сообщений, а также различные элементы окна чата.
Теперь мы настроим шаблон для окна чата следующим образом:
Мы также будем использовать карточку Materialize CSS в качестве контейнера для окна чата, как мы это делали в домашнем компоненте. Внутри карточки находится элемент неупорядоченный список, который будет содержать все сообщения, представленные в виде элементов списка. В открывающую квадратную скобку элемента ul необходимо добавить директиву v-chat-scroll. Эта директива привязана к плагину vue-chat-scroll, который мы установили ранее в проекте. Это позволит нашему окну чата автоматически прокручиваться вниз при вводе новых сообщений.
Элемент list включает директиву v-for для циклического просмотра всех введенных сообщений, полученных из Firestore. Существует два набора элементов div, оба с условными директивами v-if. Условие v-if сравнивает message.name (свойство name, полученное из Firestore) с реквизитом name, которое было передано в компонент чата, когда мы сначала ввели имя пользователя. Если message.name и реквизит name совпадают, то все сообщения, связанные с пользователем с совпадающим именем, будут отображаться справа в виде зеленых кружков сообщений, по существу представляющих текущего пользователя. . Все остальные сообщения будут отображаться во втором div слева в виде серых пузырей сообщений.
Также под окном чата будет еще одна карточка, содержащая поле ввода сообщения. Это поле ввода будет находиться внутри формы, а обработчик отправки будет привязан к методу addMessage().
Экземпляр компонента чата
Начиная с верхней части экземпляра, нам нужно импортировать Firestore в компонент через переменную db, которую мы настроили в main.js.
Внутри экземпляра мы передадим name в качестве реквизита с домашней страницы. Ниже мы настроим некоторые свойства объекта данных, одним из которых является свойство newMessage, связанное с полем ввода под окном чата.
Под объектом данных мы присоединим метод с именем getMessage() к хуку жизненного цикла mounted():
mounted() {
this.getMessage()
},
Давайте добавим несколько методов ниже хука жизненного цикла.
добавитьсообщение()
Для метода addMessage() нам потребуется:
- настройте условие, которое выполняется, если this.newMessage содержит входные данные. Создайте условие else, которое отправляет отзыв на карточку, если пользователь нажимает «ввод» без добавления сообщения.
- добавьте объект newMessage, name и Date().now() в коллекцию Firestore:
await db.collection('messages').add({
content: this.newMessage,
name: this.name,
timestamp: Date.now()
})
3. вернуть newMessage и feedback значение null после того, как пользователь нажмет «ввод».
4. активировать метод getMessage() как вызываемую функцию через this.getMessage().
получить сообщение()
getMessage() будет добавлен над методом addMessage(). Для этого метода нам потребуется:
- назначьте нашу коллекцию Firestore переменной с именем моментальный снимок через переменную db. Метод .orderBy() упорядочивает каждое сообщение в соответствии с меткой времени. Затем следует метод .get():
let snapshot = await db.collection('messages').orderBy('timestamp').get()
2. назначьте новый массив constпеременной с именем messages.
3. добавьте метод .forEach()моментальный снимок, чтобы перебрать все сообщения, хранящиеся в моментальном снимке.
4. добавьте новую переменную с именем appData внутрь метода .forEach(). Затем doc.Data(), который представляет извлеченные сообщения, присваивается переменной appData.
5. назначьте doc.id,который представляет идентификатор отдельных сообщений, для appData.id.
6. передать doc.timestamp в moment(), чтобы применить форматирование Moment.js к каждой полученной метке времени. Назначьте полученные временные метки appData.timestamp:.
appData.timestamp = moment(doc.timestamp).format('lll')
7. поместите appData в массив, назначенный константным сообщениям.
8. назначьте массив const messages для this.messages.
this.messages = messages
Вот полный компонент для Chat.vue.
Теперь запустите приложение чата на localhost:8080. Отправьте несколько сообщений под разными именами. Посмотрите, как они выглядят в вашей базе данных Firestore.
Прекрасная работа! Надеюсь, вам понравился этот проект. Ознакомьтесь с полным кодом этого проекта на GitHub.
Далее: Серия приложений для чата VueStacks (2/2): добавление Vuex
