Connectez-vous/inscrivez-vous avec Firebase Vue JS #STEP (inscription)

Tout d'abord, je vais montrer la structure du dossier SRC dans mon projet Vue JS.

.
├── 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

Expliquons :

• Le dossier assets est l'endroit où se trouvent les images de mon projet, dans ce cas, c'est là que j'ai placé l'image du logo Google afin que nous puissions l'utiliser plus tard pour implémenter l'option de connexion Google ;

• Le dossier module est l'endroit où se trouvent les modules du projet, dans ce cas j'ai séparé chaque module par des dossiers et dans chaque dossier j'ai créé d'autres sous-dossiers avec les fichiers pour une meilleure organisation ;

  • Dans les dossiers login et register j'ai créé les sous-dossiers :

  composant : où est le HTML des écrans ;
  contrôleur : où se trouveront les fonctions que nous allons effectuer sur l'écran ;
  view: où j'appelle l'écran créé dans le composant et lui attribue le accessoire du contrôleur.

• Le dossier du routeur contient les itinéraires de notre projet ;

• Le fichier App.vue appelle simplement les itinéraires du projet et définit certains styles CSS par défaut sur tous les écrans ;

• Enfin, le fichier main.js dans lequel j'appelle les paramètres du SDK que Firebase nous a fournis et quelques autres importations créées par Vue JS lui-même.

Dans un premier temps, avant toute chose, installons les librairies que nous allons utiliser, en l'occurrence vue-router et firebase en exécutant les commandes ci-dessous dans le terminal :

$ npm install vue-router

Après

$ npm install firebase

Maintenant, commençons par ajouter le SDK que Firebase nous a fourni dans le fichier main.js, faisons donc attention à cette structure ci-dessous :

.
├── 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')

Notez que j'utilise Vue avec Vuetify pour faciliter la création de composants, mais vous pouvez utiliser Tailwind ou tout autre framework de votre choix.

Maintenant, créons la route du projet et configurons-la dans le fichier App.vue, concentrons-nous donc sur cette structure ci-dessous.

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

Tout d'abord, allons dans le fichier index.js et ajoutons ce qui suit :

.
├── 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

Appelons maintenant l'itinéraire dans le fichier App.vue comme suit :

$ npm install vue-router

Enfin, ajoutons la route à notre fichier main.js pour que l'application puisse l'utiliser.

$ npm install firebase

Maintenant, passons à la création de notre composant d'enregistrement proprement dit, ses fonctions et son appel, concentrons-nous donc sur cette structure.

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

Formulaire de fichierRegister.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')

fichierregisterController.js.

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

Fichier Register.vue.

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

Jusqu'à présent, nous avons déjà ajouté le code pour intégrer le SDK dans Firebase à notre projet dans le fichier main.js, configuré les routes dans router/index.js et appelé la route dans main.js et App.vue , nous avons créé le composant screen d'enregistrement dans le fichier formRegister.vue, nous avons créé les fonctions dans le fichier registerController.js et appelé l'écran et le prop contrôleur dans le fichier register.vue, en théorie, maintenant, si vous accédez à votre application dans /inscrivez-vous déjà Le formulaire devrait apparaître comme ci-dessous :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!