Как создать веб-приложение на Vue.js с Firebase, Vuex и Vue Router (часть 1)

Здесь мы собираемся реализовать демонстрационное приложение с серверной частью Firebase. Мы будем использовать Vuetify, Vuex, Vue-Router и Firebase.

Что мы будем делать

Создать приложение Vue.js
Добавить vuetify
Создайте структуру для нашего приложения
Рабочий процесс нашего приложения
Создать учетную запись firebase
Свяжите firebase с приложением
Создайте панель навигации для приложения
Добавить страницу регистрации
Тестовая регистрация с использованием firebase
Добавить страницу входа
Тестовый вход с помощью firebase
Интегрировать vuex
Выполните рефакторинг файла Register.vue
Выполните рефакторинг файла Signin.vue
Устранение проблем с навигацией при входе и выходе

1. Создайте приложение Vue.js

Для этого я использовал vue-cli. У него есть несколько приятных функций, с помощью которых мы можем выбрать все функции при создании приложения Vue.js. Они также предоставляют возможность сохранять конфигурации в качестве предустановки, чтобы мы могли использовать их при создании новых приложений. По умолчанию при использовании vue-cli он также устанавливает и настраивает vuex и vue-router.

vue create showcase

Ура, первый шаг выполнен, теперь нужно запустить локальную разработку с помощью

npm run serve

Наше приложение работает на порту 8080.

2. Добавьте vuetify

Vuetify - это фреймворк материального дизайна для Vue.js, который упрощает реализацию потребностей нашего приложения. Мы тоже собираемся это использовать. Поскольку мы используем vue-cli, мы можем легко добавить vuetify в наше приложение с помощью команды,

vue add vuetify

Теперь запустите сервер разработки, чтобы увидеть волшебство vuetify.

Потрясающе, vuetify интегрирован в наше приложение

3. Создайте структуру для нашего приложения.

В настоящее время наше приложение имеет такую структуру.

Мы вносим некоторые изменения в наше приложение, чтобы оно содержало некоторые изменения. Структура основана на некоторых вариантах использования, а также на некоторых общих идеях из других блогов. Некоторых это тоже может обидеть. Не стесняйтесь использовать свою собственную структуру проекта, если она у вас есть.

Это будет предложенный нами план для приложения. Папка auth будет содержать компоненты регистрации и входа в систему.

Папка служб будет содержать любые вызовы API или данные, которые необходимо добавить.

Папка помощника поможет любым охранникам, например, для просмотра любой страницы необходима аутентификация.

Я считаю, что остальная часть структуры папок не требует пояснений.

5. Создайте учетную запись firebase.

Прежде чем погрузиться в firebase, нужно понять, почему именно firebase. Прежде всего, это результат цитирования Google их слов.

Firebase предоставляет вам такие функции, как аналитика, базы данных, обмен сообщениями и отчеты о сбоях, поэтому вы можете быстро двигаться и сосредоточиться на своих пользователях.

В нашем приложении мы сосредоточимся только на аутентификации и функциях базы данных.

Ссылка для firebase

Мы можем использовать наш Gmail для входа в консоль firebase. В правом верхнем углу у нас есть «Консоль Goto», которая перенаправляет в раздел приложений.

У меня уже есть приложение, работающее с firebase. Щелкните ссылку «Добавить проект» и также добавьте название своего проекта,

Да, наш проект готов к запуску в firebase.

Поскольку мы аутентифицированы с помощью firebase, нам нужно настроить некоторые точки в firebase.

Нажмите «Аутентификация» - ›настроить метод входа.

В настоящее время я регистрируюсь со сценарием пароля электронной почты, поэтому мы включаем только его.

Теперь нам нужно связать наше приложение с firebase, это можно сделать с помощью конфигураций, которые доступны при нажатии на веб-настройки,

Скопируйте конфиги, нам нужно скоро добавить конфиги в приложение Vue.js.

6. Свяжите firebase с приложением.

До сих пор мы создали приложение firebase, теперь нам нужно связать наше приложение Vue.js. Для этого нам нужно несколько шагов

Добавьте реализацию env.
Установите firebase.
Добавьте в приложение ключи firebase.

1. Добавьте реализацию env.

Это важная часть для меня и для всех. Мы создали приложение firebase, и firebase предоставила нам некоторые учетные данные. Мы не можем слепо добавлять в наше приложение. Это не проблема, другие могут использовать наши учетные данные. Так что лучше оставить их в нашем файле .env.

Прежде чем делать это, необходимо помнить о следующих моментах.

а. Создайте файл .env в корневом пути нашего приложения, который будет содержать все сведения, необходимые для работы нашего приложения в каждом режиме.

б. Создайте файл. env.development, который будет содержать все сведения, необходимые для локального выполнения нашего приложения. Здесь мы храним наши учетные данные firebase.

c. Все переменные env должны начинаться с «VUE_APP_». в противном случае они отбрасываются.

d. Обязательно перезапустите приложение после добавления этого файла. У меня работает только после перезагрузки.

Я просто добавил тестовый заголовок, чтобы убедиться, что он работает в файле .env. Это будет использоваться для каждого режима в нашем приложении.

VUE_APP_TITLE='SHOW CASE'

Теперь код выглядит следующим образом:

В качестве ссылки предоставит витрину

2. Установите firebase

Чтобы использовать firebase в нашем приложении, необходимо установить firebase в наше приложение.

npm install firebase --save

3. Добавьте в приложение ключи firebase.

Теперь мы можем скопировать ключ firebase в наше приложение. мы можем использовать для этого файл .env.development и main.js.

Скопируйте конфигурации из firebase и добавьте их в наш файл main.js в переменных окружения.

Все ключи теперь заменены переменными ENV, они заменены исходными значениями из файла .env.development.

Также импортируйте firebase в файл main.js, общий код в main.js станет следующим:

import Vue from 'vue'
import './plugins/vuetify'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import * as firebase from 'firebase'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
var config = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGE_SENDER_ID
}
firebase.initializeApp(config)

7. Создайте панель навигации для приложения.

В настоящее время у нас есть панель навигации, но мы перемещаем весь код, связанный с навигацией, в отдельный компонент под названием NavBar.vue. В настоящее время мы создаем кнопку для регистрации, входа и выхода на панели навигации. Сделать это

Импортируйте компонент панели навигации в App.vue и определите компонент в App.vue.

<template>
  <v-app>
    <!-- display nav bar -->
    <nav-bar></nav-bar>
  </v-app>
</template>
<script>
import NavBar from '@/views/NavBar'
export default {
  name: 'App',
  components: {
    NavBar
  }
}
</script>

Важный вывод здесь заключается в том, что, как только мы объявляем компонент как дочерний, мы можем использовать компонент, используя то же имя, что и мы объявлены.

вот NavBar === ‹nav-bar›

8. Добавить страницу регистрации

Пришло время страницы регистрации. Нам нужно создать компонент в components / auth / Register.vue

Я добавляю некоторые проверки в формы, например, электронная почта является обязательной, отображать скрытый пароль после щелчка по значку, отключать кнопку регистрации, когда указаны недопустимые данные. Это все, что я узнал из vuetify. Вы проверяете для получения дополнительной информации.

Чтобы отобразить страницу регистрации, мы уже добавили ссылку на панель навигации, теперь нам нужно связать ее с нашим компонентом и отобразить этот компонент. Что можно легко выполнить с помощью vue-router.

Для этого,

Импортируйте компонент в файл router / index.js.
Задайте путь и компонент в файле router / index.js.
Установите ссылку на панели навигации.
Отобразите компонент с помощью ‹router-view› в App.vue

1. Импортируйте компонент в файл router / index.js.

import Register from '@/components/auth/Register.vue'

2. Задайте путь и компонент в файле router / index.js.

routes: [
    {
      path: '/register',
      name: 'Register',
      component: Register
    }
  ]

3. Установите ссылку на панели навигации.

Это мы уже сделали, я просто добавил сюда, чтобы понять,

{
          title: 'Register',
          icon: 'face',
          link: '/register'
        },

4. Отобразите компонент с помощью ‹router-view› в App.vue.

<router-view></router-view>

Вот и все, теперь мы видим страницу регистрации.

Зафиксировать ссылку для изменения

9. Тестовая регистрация с использованием firebase.

Пришло время настоящей игры. Я добавляю модуль регистрации firebase в Register.vue. После этого мы будем использовать vuex. В настоящее время мы проверяем, работает ли он.

У нас есть существующий метод validate на странице регистрации. мы добавляем модуль firebase к этому методу или можем создать отдельный метод и вызывать его из проверки. Кроме того, необходимо также импортировать firebase в Register.vue.

модуль firebase для регистрации

registerWithFirebase () {
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
        .then((response) => {
          alert('success')
          console.log(response)
        })
        .catch((error) => {
          alert('failure')
          console.log(error)
        })
    }

Вызовите этот метод в validate (), используя

this.registerWithFirebase()

Мы добились успеха !!!

Теперь проверьте firebase, она там обновлена,

10. Добавить страницу входа

Изменения здесь такие же, как и на странице регистрации.

Добавьте код входа в auth / Signin.vue
Импортируйте auth / Signin.vue в файл роутера.
Добавьте маршруты в файл роутера.

У нас страничка идет как логин,

Ссылка на фиксацию для изменения кода

11. Проверьте вход с помощью firebase.

В настоящее время мы добавляем модуль входа в Signin.vue. Как только vuex будет завершен, он переместится туда. мы создаем новый метод и также вызываем этот метод в validate (). Кроме того, здесь также необходимо импортировать firebase,

Импортировать firebase в Signin.vue
Добавьте в новый метод модуль входа в firebase.

loginWithFirebase () {
      firebase.auth().signInWithEmailAndPassword(this.email, this.password)
        .then((response) => {
          alert('success')
          console.log(response)
        })
        .catch((error) => {
          alert('failure')
          console.log(error)
        })
    }

3. Вызовите метод входа в firebase внутри метода проверки.

 this.loginWithFirebase()

4. Проверьте успешный вход в систему.

5. Проверьте неудачный вход в систему.

12. Интегрируйте vuex

Теперь это самая важная часть - управление состоянием с помощью vuex. Нам нужно написать большую часть кода, который у нас есть. Прежде чем углубиться в это, необходимо иметь четкое представление о том, что мы собираемся экономить в настоящее время.

Если вы не знаете, как работает vuex, просмотрите один из моих предыдущих блогов об этом,

L чернила для блога vuex

Пока что мы создали регистрацию и авторизуемся в соответствующих файлах vue. Теперь мы перемещаем этот код в store / index.js.

1. состояние доступно в vuex

Состояние в vuex будет совместно использоваться всеми компонентами. Таким образом, как только компонент обновит состояние, это затронет все другие компоненты, использующие это состояние.

У нас есть состояние пользователя, которое сохраняет идентификатор пользователя из базы данных после того, как пользователь войдет в систему или зарегистрируется.

У нас есть статус, который укажет, успешен ли вход в систему или регистрация.

У нас есть состояние ошибки, которое сохранит любую ошибку при использовании firebase, будет отображать эту ошибку в будущем.

2. Мутации в vuex

Если мы хотим изменить состояние, нужно также использовать мутации. Здесь мы используем,

setUser () установит пользователя, полученного из базы данных firebase.

removeUser () удалит идентификатор пользователя из состояния.

setStatus () изменить статус.

setError () установить статус ошибки или удалить ошибку из состояния

3. Действия в vuex

Это мутации, которые необходимы только для изменения состояния, но иногда выполняется асинхронная операция с использованием действий.

Мутации подходят только для синхронизирующих действий. Действия, в свою очередь, также вызовут мутации.

Мы можем удалить код из файлов vue и вызвать действия оттуда.

4. геттеры в vuex

Чтобы отобразить некоторые данные на основе состояния, что можно сделать с помощью геттеров,

Последний, но тем не менее важный,

импортировать firebase в store / index.js.

13. Выполните рефакторинг файла Register.vue.

Теперь у нас есть хранилище, и мы можем легко удалить модуль регистрации firebase из файла Register.vue.

Мы можем удалить импортную базу firebase в файле Register.vue, и registerWithFirebase () станет,

registerWithFirebase () {
      const user = {
        email: this.email,
        password: this.password
      }
      this.$store.dispatch('signUpAction', user)
    }

код «this. $ store.dispatch (‘ signUpAction ’, user)» вызовет состояние и обновит детали,

Теперь запустите регистр и проверьте vuex с помощью инструментов vue-devlopement.

После регистрации мы добились успеха, также обновился vuex,

14. Выполните рефакторинг файла Signin.vue.

Здесь мы также применили логику для файла Register.vue. Код становится,

loginWithFirebase () {
      const user = {
        email: this.email,
        password: this.password
      }
      this.$store.dispatch('signInAction', user)
    }

Выход:

15. Устраните проблемы с навигацией при входе и выходе.

В настоящее время мы отображаем все ссылки, это тоже необходимо исправить. Также необходимо реализовать кнопку выхода.

Отображать логин и регистрироваться, только если пользователь не вошел в систему
Отображение выхода из системы, если пользователь вошел в систему.
Реализуйте выход.

1. Отображать логин и регистрироваться, только если пользователь не вошел в систему

Для этого мы можем использовать помощь магазина. Мы можем проверить, что если у состояния есть пользователь, равный нулю, то нам нужно их отобразить. Я буду использовать для этого вычисленное свойство.

userLogedIn () {
      return this.$store.getters.user
    }

он вызовет геттеры магазина и свяжет результат с навигационной панелью с помощью v-if

<v-toolbar-items class='hidden-xs-only' v-if="!userLogedIn">
        ...
      </v-toolbar-items>

2. Отобразите выход из системы, если пользователь вошел в систему.

Мы можем использовать тот же метод, что и для регистрации и входа в систему. Но просто v-else

v-toolbar-items class='hidden-xs-only' v-else>
        <v-btn>
         ...
        </v-btn>
</v-toolbar-items>

3. Выполните выход.

Необходимо добавить функцию выхода из firebase в действие магазина и обновить другое состояние,

signOutAction ( {commit}) {
      firebase.auth().signOut()
        .then((response) => {
          commit('setUser', null)
          commit('setStatus', 'success')
          commit('setError', null)
        })
        .catch((error) => {
          commit('setStatus', 'failure')
          commit('setError', error.message)
        })
    }

Теперь нам нужно добавить метод выхода, который будет вызывать действие магазина после того, как произойдет щелчок, это может быть достигнуто с помощью

@click='logoutFromFirebase'

в NavBar.vue,

methods: {
    logoutFromFirebase () {
      this.$store.dispatch('signOutAction')
    }
  }

и выход завершен,

Я знаю, что есть много незавершенных работ, которые необходимо завершить, но здесь мы выполнили только функцию регистрации и входа в систему, будет ли автоматический вход в систему при обновлении страницы, перенаправление на новую страницу после проверки подлинности, очистить поля формы, аутентифицированы от нежелательных атак на страницы, отображают сообщение об ошибке от firebase и т. д., все это будет рассмотрено в следующей части.

Если эта история поможет вам узнать что-нибудь, пожалуйста, купи мне кофе.

Как я и обещал, ссылка на репозиторий GitHub.

Прокомментируйте или похлопайте, если вы сочтете это полезным.