Log masuk/daftar dengan firebase Vue JS #STEP (pendaftaran)

Pertama sekali, saya akan menunjukkan struktur folder SRC dalam projek Vue JS saya.

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

Mari jelaskan:

• Folder aset ialah tempat imej projek saya terletak, dalam kes ini, ia adalah tempat saya meletakkan imej logo Google supaya kita boleh menggunakannya kemudian untuk melaksanakan pilihan log masuk Google ;

• Folder modul ialah tempat saya mempunyai modul projek, dalam kes ini saya mengasingkan setiap modul dengan folder dan dalam setiap folder saya mencipta sub-folder lain dengan fail untuk organisasi yang lebih baik;

  • Dalam folder log masuk dan daftar saya mencipta subfolder:

  komponen: di manakah HTML skrin;
  pengawal: di mana fungsi yang akan kita laksanakan pada skrin akan ditempatkan;
  pandangan: tempat saya memanggil skrin yang dibuat dalam komponen dan menetapkan prop pengawal kepadanya.

• Folder penghala mempunyai laluan untuk projek kami;

• Fail App.vue hanya memanggil laluan projek dan mentakrifkan beberapa gaya CSS lalai pada semua skrin;

• Akhir sekali, fail main.js yang merupakan tempat saya memanggil tetapan SDK yang disediakan oleh firebase kepada kami dan beberapa import lain yang Vue JS sendiri buat.

---

Pada mulanya, sebelum perkara lain, mari pasang lib yang akan kita gunakan, dalam kes ini vue-router dan firebase dengan menjalankan arahan di bawah dalam terminal:

$ npm install vue-router

Selepas

$ npm install firebase

---

Sekarang, mari kita mulakan dengan menambahkan SDK yang firebase berikan kepada kita dalam fail main.js, jadi mari kita perhatikan struktur ini di bawah:

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

Ambil perhatian bahawa saya menggunakan Vue dengan Vuetify untuk memudahkan anda membuat komponen, tetapi anda boleh menggunakan Tailwind atau mana-mana rangka kerja lain yang anda mahukan.

---

Sekarang, mari kita cipta laluan projek dan konfigurasikannya dalam fail App.vue, jadi mari fokus pada struktur ini di bawah.

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

Pertama, mari pergi ke fail index.js dan tambahkan yang berikut:

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

Sekarang mari kita panggil laluan dalam fail App.vue seperti berikut:

$ npm install vue-router

Akhir sekali, mari tambah laluan ke fail utama.js kami supaya aplikasi boleh menggunakannya.

$ npm install firebase

---

Sekarang, mari kita teruskan untuk mencipta komponen pendaftaran sebenar kita, fungsinya dan panggilannya, jadi mari kita fokus pada struktur ini.

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

Borang failRegister.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')

fail registerController.js.

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

Fail Daftar.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

Jadi, setakat ini kami telah menambah kod untuk menyepadukan SDK dalam firebase ke projek kami dalam fail main.js, mengkonfigurasi laluan dalam router/index.js dan memanggil laluan dalam main.js dan App.vue , kami mencipta komponen skrin pendaftaran dalam fail formRegister.vue, kami mencipta fungsi dalam fail registerController.js dan memanggil skrin dan prop pengawal dalam fail register.vue, secara teori, sekarang, jika anda mengakses aplikasi anda dalam /register already Borang hendaklah dipaparkan seperti di bawah:

Atas ialah kandungan terperinci Log masuk/daftar dengan firebase Vue JS #STEP (pendaftaran). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!