Anmelden/Registrieren mit Firebase Vue JS #STEP (Registrierung)

Zunächst zeige ich die Struktur des SRC-Ordners in meinem Vue JS-Projekt.

.
├── src
│   └── assets
│       └── images
|           └── imagem_logo_google.png
│   └── module
│       └── login
|           └── component
|               └── formLogin.vue
|           └── controller
|               └── loginController.js
|           └── view
|               └── login.vue
│       └── register
|           └── component
|               └── formRegister.vue
|           └── controller
|               └── registerController.js
|           └── view
|               └── register.vue
│   └── router
│       └── index.js
│   └── App.vue
│   └── main.js

Lassen Sie es uns erklären:

• Im Ordner Assets befinden sich die Bilder meines Projekts. In diesem Fall habe ich dort das Bild des Google-Logos abgelegt, damit wir es später zur Implementierung der Google-Anmeldeoption verwenden können ;

• Im Ordner Module habe ich die Projektmodule. In diesem Fall habe ich jedes Modul durch Ordner getrennt und innerhalb jedes Ordners habe ich zur besseren Organisation weitere Unterordner mit den Dateien erstellt;

  • In den Ordnern login und register habe ich die Unterordner erstellt:

  Komponente: wo ist der HTML-Code der Bildschirme;
  Controller: wo sich die Funktionen befinden, die wir auf dem Bildschirm ausführen werden;
  Ansicht: wo ich den in der Komponente erstellten Bildschirm aufrufe und ihm die Controller-Requisite zuordne.

• Der Router-Ordner enthält die Routen für unser Projekt;

• Die App.vue-Datei ruft lediglich die Projektrouten auf und definiert einige Standard-CSS-Stile auf allen Bildschirmen;

• Schließlich die Datei main.js, in der ich die SDK-Einstellungen aufrufe, die Firebase uns bereitgestellt hat, und einige andere Importe, die Vue JS selbst erstellt.

---

Zuerst installieren wir zunächst die Bibliotheken, die wir verwenden werden, in diesem Fall Vue-Router und Firebase, indem wir die folgenden Befehle im Terminal ausführen:

$ npm install vue-router

Nachher

$ npm install firebase

---

Jetzt beginnen wir mit dem Hinzufügen des SDK, das Firebase uns zur Verfügung gestellt hat, in der Datei main.js. Achten wir also auf die folgende Struktur:

.
├── src
│   └── main.js

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: "AIzaSyA_Bq3nqLfRUWXsqtkpzietY5eu0ewFtzA",
  authDomain: "login-app-8c263.firebaseapp.com",
  projectId: "login-app-8c263",
  storageBucket: "login-app-8c263.appspot.com",
  messagingSenderId: "854129813359",
  appId: "1:854129813359:web:02f776146a0c34be906a9a"
}

initializeApp(firebaseConfig)

const app = createApp(App)

app.use(vuetify).mount('#app')

Beachten Sie, dass ich Vue mit Vuetify verwende, um das Erstellen von Komponenten zu vereinfachen. Sie können jedoch Tailwind oder jedes andere gewünschte Framework verwenden.

---

Jetzt erstellen wir die Projektroute und konfigurieren sie in der App.vue-Datei, also konzentrieren wir uns unten auf diese Struktur.

.
├── src
│   └── router
│       └── index.js
│   └── App.vue

Zuerst gehen wir zur Datei index.js und fügen Folgendes hinzu:

.
├── src
│   └── assets
│       └── images
|           └── imagem_logo_google.png
│   └── module
│       └── login
|           └── component
|               └── formLogin.vue
|           └── controller
|               └── loginController.js
|           └── view
|               └── login.vue
│       └── register
|           └── component
|               └── formRegister.vue
|           └── controller
|               └── registerController.js
|           └── view
|               └── register.vue
│   └── router
│       └── index.js
│   └── App.vue
│   └── main.js

Linha	Explicação
1	Importa as funções createRouter e createWebHistory da biblioteca vue-router. createRouter é usado para configurar o roteador, e createWebHistory define o modo de histórico do navegador para gerenciar URLs de forma limpa (sem o símbolo #).
2	Importa o componente Register, que representa a página de registro, localizado na pasta especificada. Este componente será carregado quando o usuário acessar a rota correspondente.
4/13	Cria uma instância do roteador (router) com createRouter. Aqui, history define o modo de histórico (createWebHistory) e routes define as rotas disponíveis. A rota { path: '/cadastro', name: 'Register', component: Register } configura o caminho /cadastro para carregar o componente Register. name é um nome opcional para a rota, que facilita a navegação programática.
15	Exporta a rota como o módulo padrão, para que ele possa ser importado e usado no aplicativo Vue.

Jetzt rufen wir die Route in der App.vue-Datei wie folgt auf:

$ npm install vue-router

Zuletzt fügen wir die Route zu unserer main.js-Datei hinzu, damit die Anwendung sie verwenden kann.

$ npm install firebase

---

Jetzt gehen wir zur Erstellung unserer eigentlichen Registrierungskomponente, ihrer Funktionen und ihres Aufrufs über. Konzentrieren wir uns also auf diese Struktur.

.
├── src
│   └── main.js

Datei formRegister.vue.

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: "AIzaSyA_Bq3nqLfRUWXsqtkpzietY5eu0ewFtzA",
  authDomain: "login-app-8c263.firebaseapp.com",
  projectId: "login-app-8c263",
  storageBucket: "login-app-8c263.appspot.com",
  messagingSenderId: "854129813359",
  appId: "1:854129813359:web:02f776146a0c34be906a9a"
}

initializeApp(firebaseConfig)

const app = createApp(App)

app.use(vuetify).mount('#app')

registerController.js-Datei.

.
├── src
│   └── router
│       └── index.js
│   └── App.vue

Register.vue-Datei.

1  | import { createRouter, createWebHistory } from 'vue-router'
2  | import Register from '@/module/register/view/register.vue'
3  |
4  | const router = createRouter({
5  | history: createWebHistory(),
6  | routes: [
7  |   {
8  |     path: '/cadastro',
9  |     name: 'Register',
10 |     component: Register
11 |   }
12 | ]
13 | })
14 |
15 | export default router

Bislang haben wir also bereits den Code zur Integration des SDK in Firebase zu unserem Projekt in der Datei main.js hinzugefügt, die Routen in router/index.js konfiguriert und die Route in main.js und App.vue aufgerufen , wir haben die Registrierungsbildschirmkomponente in der Datei formRegister.vue erstellt, wir haben die Funktionen in der Datei registerController.js erstellt und den Bildschirm und die Controller-Requisite in der Datei register.vue aufgerufen, theoretisch jetzt, wenn Sie auf Ihre Anwendung zugreifen /bereits registrieren Das Formular sollte wie folgt aussehen:

Das obige ist der detaillierte Inhalt vonAnmelden/Registrieren mit Firebase Vue JS #STEP (Registrierung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!