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

Тук ще реализираме витрина на приложението с firebase. Ще използваме Vuetify, Vuex и Vue-Router и Firebase.

Какво ще правим

  1. Създайте приложение Vue.js
  2. Добавете vuetify
  3. Създайте структура за нашето приложение
  4. Работен поток на нашето приложение
  5. Създайте акаунт в firebase
  6. Свържете firebase с приложението
  7. Създайте лента за навигация към приложението
  8. Добавете страница за регистрация
  9. Тестова регистрация с помощта на firebase
  10. Добавете страница за вход
  11. Тествайте вход с firebase
  12. Интегрирайте vuex
  13. Refactor файла Register.vue
  14. Рефакторирайте файла Signin.vue
  15. Поправете проблемите с навигацията при влизане и излизане

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

За това използвах vue-cli за това. Той има някои приятни функции, чрез които можем да избираме всички функции при създаването на приложението Vue.js. Те също така предоставят опция за запаметяване на конфигурациите като предварително зададени, така че да можем да ги използваме при създаването на нови приложения. По този начин по подразбиране, когато използвате vue-cli, той също ще инсталира и конфигурира vuex и vue-router.

Vue създаване на витрина

Ура, първата стъпка е завършена, сега трябва да стартирате локалното развитие, използвайки

npm run сервис

Приложението ни работи на порт 8080.

2. Добавете vuetify

Vuetify е материална рамка за дизайн на Vue.js и опростява реализирането на нуждите на нашето приложение. Ще използваме и това. Тъй като използваме vue-cli, лесно можем да добавим vuetify към нашето приложение с помощта на командата,

vue добавям vuetify

Сега стартирайте сървъра за разработка, за да видите магията на vuetify.

Страхотно, воутифицирано интегрирано в нашето приложение

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

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

Правим някои промени в нашето приложение, за да съдържат някои промени. Структурата се основава на някои случаи на използване и някои общи идеи в други блогове. Може да е обидно и за някои. Чувствайте се свободни да използвате собствената си структура на проекта, ако имате.

Това ще бъде предложеният от нас план за кандидатстване. Папката auth ще съдържа компоненти за регистър и вход.

Папката с услуги ще съдържа всяко обаждане от API или трябва да се добавят данни.

Папката на помощника ще помогне на всички охранители, като автентификацията е необходима за преглед на всяка страница.

Останалата част от структурата на папките според мен е сама по себе си.

5. Създайте акаунт в firebase

Преди да се потопите в огнената база, човек трябва да разбере защо firebase. На първо място, това е продукт на Google, цитирайки думите им

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

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

връзка за firebase

Можем да използваме нашия Gmail за влизане в firebase конзолата. В горния десен ъгъл имаме „Goto console“ ще пренасочи към секцията с приложения.

Вече имам приложение, работещо с firebase. Кликнете върху връзката Добавяне на проект и добавете и името на проекта си,

Да, нашият проект е готов да работи в firebase.

Тъй като ние се удостоверяваме с помощта на firebase, трябва да конфигурираме някои точки в firebase.

Кликнете върху удостоверяване -> метод за вход в настройката.

В момента се регистрирам със сценарий с парола за имейл, така че ние го активираме само.

Сега трябва да свържем нашето приложение с firebase, това може да стане с помощта на конфигурациите, които са достъпни при кликване върху настройката на мрежата,

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

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

Досега създадохме приложение за firebase, сега трябва да се свържем с нашето приложение Vue.js. За целта ни трябват няколко стъпки

  1. Добавяне на env изпълнение.
  2. Инсталирайте firebase.
  3. Добавете ключовете на firebase в приложението.

1. Добавете env изпълнение.

Това е важна част за мен и всички. Създадохме приложение за firebase и firebase ни даде някои пълномощни данни. Не можем сляпо да добавим към нашето приложение. Това не е проблем, други може да използват нашите пълномощия. Така че ще бъде добре да запазите тези в нашия .env файл

По-долу точки трябва да имате предвид, преди да направите това.

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

б. Създайте .env.development файл, който ще съдържа всички подробности, необходими, за да се изпълни нашето приложение на местно ниво. Ние пазим нашите данни за firebase тук.

° С. Всички променливи на env трябва да бъдат започнати с „VUE_APP_“. или иначе се изхвърлят.

д. Не забравяйте да рестартирате приложението, след като добавите тези файлове. За мен тя работи само след рестартиране.

Току-що добавих тестова рубрика, за да се уверя, че работи във .env файла. Това ще се използва за всеки режим в нашето приложение.

VUE_APP_TITLE = 'ПОКАЗАНЕ СЛУЧАЙ'

Сега кодът става,

Ще даде шоу случай като връзка

2. Инсталирайте firebase

За да използвате firebase в нашето приложение, трябва да инсталирате firebase в нашето приложение.

npm инсталирайте firebase - спестява

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

Сега можем да копираме ключа на firebase в нашето приложение. за това можем да използваме .env.development файла и main.js.

Копирайте конфигурациите от firebase и ги добавете към нашия main.js файл в променливи на околната среда.

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

Импортирайте firebase и във файла main.js, общият код в main.js става,

импортиране Vue от 'vue'
import "./plugins/vuetify"
импортиране на приложение от „@ / App.vue“
импортиране на рутер от „@ / router“
импортиране на магазин от „@ / store“
import * като firebase от 'firebase'
Vue.config.productionTip = false
ново Vue ({
  маршрутизатор,
  магазин,
  рендер: h => h (приложение)
}). $ Монтиране ( "# приложение")
var config = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  база данниURL: 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 (конфигурационния)

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

В момента имаме лента за навигация, но преместваме целия код, свързан с навигацията, като отделен компонент, наречен NavBar.vue. В момента създаваме опция за регистрация, влизане и изход от бутона в навигационния бар. Да направя това

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

<Шаблон>
  <О приложение>
    
    <Навигация бар> 
  
<Скрипт>
импортиране на NavBar от „@ / views / NavBar“
експортиране по подразбиране {
  име: „Приложение“,
  компоненти: {
    навигационната лента
  }
}

Важното тук е, че след като декларираме компонент като дете, можем да използваме компонента, използвайки същото име, както сме декларирани.

тук NavBar ===

8. Добавете страница за регистрация

Сега е моментът на страницата за регистрация. Трябва да създадем компонент в компоненти / auth / Register.vue

Добавям някои валидации във формулярите като имейл е задължително, показва скрита парола веднъж щракнете върху иконата деактивирайте бутона за регистриране, когато са дадени невалидни данни. Това са всичко, което разбрах от vuetify. Вие проверявате за повече информация.

За да се покаже страницата на регистъра, вече сме добавили връзка в лентата за навигация, сега трябва да свържем това към нашия компонент и трябва да покажем компонента. Което може лесно да се изпълни с помощта на vue-рутер.

За това,

  1. Импортирайте компонента във файла router / index.js
  2. Задайте пътя и компонента във файла router / index.js.
  3. Задайте връзката в навигационната лента.
  4. Показвайте компонента с помощта на в App.vue

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

import регистър от '@ / компоненти / auth / Register.vue'

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

маршрути: [
    {
      път: '/ регистрирай се',
      име: „Регистрация“,
      компонент: Регистрация
    }
  ]

3. Задайте връзката в лентата за навигация.

Това вече сме направили, просто добавих тук, за да разбера,

{
          заглавие: „Регистрация“,
          икона: „лице“,
          линк: '/ регистрирай се'
        }

4. Показвайте компонента с помощта на в App.vue

<Рутер изглед> 

Това е всичко, сега можем да видим страницата за регистрация.

ангажирайте връзка за промяната

9. Тест Регистрация с помощта на firebase

Сега е време за истинска игра. Добавям някакъв модул за регистрация на firebase в Register.vue. Ще използваме vuex след това. В момента проверяваме, за да се уверим, че работи.

В страницата на регистъра имаме съществуващ метод, наречен валидиране. добавяме модула firebase към този метод или можем да създадем отделен метод и да го извикаме от валидиращия. Също така, трябва да импортирате firebase и в Register.vue.

модул за пожарна база за регистрация

registerWithFirebase () {
      firebase.auth (). createUserWithEmailAndPassword (this.email, this.password)
        .then ((отговор) => {
          предупреждение ( "успех")
          console.log (отговор)
        })
        .catch ((грешка) => {
          предупреждение ( "провал")
          console.log (грешка)
        })
    }

Извикайте този метод в validate (), като използвате

this.registerWithFirebase ()

Получихме успеха си !!!

Сега проверете огнената база, която е актуализирана там,

10. Добавете страница за вход

Промените тук също са същите като тези на страницата за регистрация.

  1. Добавете входния код в auth / Signin.vue
  2. Импортирайте файла auth / Signin.vue във маршрутизатора.
  3. Добавете маршрутите във файла на маршрутизатора.

Имаме страница, която идва като вход,

ангажира връзка за промяна на кода

11. Тествайте вход с firebase

В момента добавяме модула за вход в Signin.vue. След като vuex е завършен, ще се премести там. ние създаваме нов метод и го наричаме във validate (). Също така, трябва да импортирате firebase също тук,

  1. Импортирайте firebase в Signin.vue
  2. Добавете модула за вход в firebase към новия метод.
loginWithFirebase () {
      firebase.auth (). signInWithEmailAndPassword (this.email, this.password)
        .then ((отговор) => {
          предупреждение ( "успех")
          console.log (отговор)
        })
        .catch ((грешка) => {
          предупреждение ( "провал")
          console.log (грешка)
        })
    }

3. Обадете се на метода за вход в firebase в рамките на валидиращия метод

 this.loginWithFirebase ()

4. Тествайте успешното влизане

5. Тествайте данните за грешка

конзолен изход

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

Сега това е най-важната част, управлението на държавата с vuex. Трябва да напишем по-голямата част от кода, който имаме в момента. Преди да се потопите в това, трябва да имате ясна представа за какво ще спестяваме в момента.

Ако нямате идея как работи vuex, моля, прегледайте някой от по-ранните ми блогове за това,

Връзка за блога vuex

Досега създадохме регистрация и вход в съответните vue файлове. Сега преместваме този код в магазина / index.js

1. състояние на разположение във vuex

Състоянието във vuex ще бъде споделено между всички компоненти. Така че след като един компонент актуализира състоянието, той ще бъде засегнат всички останали компоненти, които използват това състояние.

Имаме състояние на потребителя, което ще запази идентификационния номер на потребителя от firebase, след като потребителят се подпише или регистрира

Имаме състояние на състоянието, което ще посочи дали входът или регистрацията са успешни или не.

Имаме състояние на грешка, което ще запази всяка грешка при използване на firebase, ще показва тези грешки в бъдеще.

2. Мутации във vuex

Ако искаме да променим състоянието, трябва да използваме и мутациите. Тук използваме,

setUser () ще зададе потребителя, който имаме от firebase

removeUser () ще премахне идентификационния номер на потребителя от държавата.

setStatus () променя състоянието.

setError () зададе състоянието на грешката или премахнете грешката от състоянието

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

Мутациите са сами, необходими за промяна на състоянието, но понякога се извършва операция за асинхронизация, която ще използва действията.

Мутациите са добри само за действия за синхронизиране. Действията от своя страна също ще наричат ​​мутациите.

Можем да премахнем кода от файловете vue и да извикаме действията оттам.

4. getters във vuex

За да се покажат някои данни въз основа на състоянието, което може да стане с помощта на getters,

Не на последно място,

импортирайте firebase в магазина / index.js.

13. Рефакторирайте файла Register.vue

Вече имаме магазин, можем лесно да премахнем модула за регистрация на firebase от файла Register.vue.

Можем да премахнем огнената база за импортиране във файла Register.vue и registerWithFirebase () става,

registerWithFirebase () {
      const user = {
        имейл: this.email,
        парола: this.password
      }
      това. $ store.dispatch ('signUpAction', потребител)
    }

кодът „this. $ store.dispatch („ signUpAction “, потребител)“ ще извика състоянието и ще актуализира подробностите,

Сега стартирайте регистъра и проверете vuex с помощта на инструментите vue-devlopement.

След регистрацията имаме успех и vuex също се актуализира,

14. Рефакторирайте файла Signin.vue

Тук също приложихме логиката за файла Register.vue. Кодът става,

loginWithFirebase () {
      const user = {
        имейл: this.email,
        парола: this.password
      }
      това. $ store.dispatch ('signInAction', потребител)
    }

Резултатът е,

15. Поправете проблемите с навигацията при влизане и излизане.

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

  1. Показвайте данните за вход и се регистрирайте само ако потребителят не е влязъл
  2. Показване на изхода, ако потребителят е влязъл.
  3. Изпълнете изхода.

1. Показвайте данните за вход и се регистрирайте само ако потребителят не е влязъл

За това можем да използваме помощта на магазина. Можем да проверим дали ако държавата има потребител е нула, тогава трябва да ги покажем. Ще използвам изчисленото свойство за това.

userLogedIn () {
      върнете това. $ store.getters.user
    }

тя ще се обади на магазините и ще свърже резултата с навигацията с v-if


        ...
      

2. Показвайте изхода, ако потребителят е влязъл.

Можем да използваме същия метод, използван за регистрация и влизане. Но просто v-else

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

3. Изпълнете изхода.

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

signOutAction ({commit}) {
      firebase.auth (). signOut ()
        .then ((отговор) => {
          commit ('setUser', null)
          ангажиране ('setStatus', 'успех')
          commit ('setError', null)
        })
        .catch ((грешка) => {
          ангажиране ('setStatus', 'неуспех')
          ангажиране ('setError', грешка.месеца)
        })
    }

Сега трябва да добавим метод за изход, който ще извика действието в магазина, след като се случи едно щракване, това може да се постигне чрез,

@ Кликване = 'logoutFromFirebase "

в NavBar.vue,

методи: {
    logoutFromFirebase () {
      това. $ store.dispatch ( "signOutAction")
    }
  }

и записването завърши,

Знам, има много чакащи работи, които трябва да бъдат завършени, но тук завършихме само функцията за регистрация и влизане, дали автоматично ще влезе, когато страницата се опресни, ще се пренасочи към нова страница, след като бъде удостоверена, изчистете полетата на формата, удостоверява се от нежелани атаки на страници, показва съобщение за грешка от firebase и т.н., всички тези ще бъдат обхванати в следващата част.

Както обещах, връзката за репото на GitHub.

Моля, коментирайте или ръкопляскайте, ако смятате това за полезно.