firebase Vue JS #STEPでログイン・登録（登録）-jsチュートリアル-php.cn

firebase Vue JS #STEPでログイン・登録（登録）

Mary-Kate Olsen

リリース： 2024-10-26 02:40:02

オリジナル

513 人が閲覧しました

まず、Vue JS プロジェクトの SRC フォルダーの構造を示します。

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

ログイン後にコピー

説明しましょう:

assets フォルダーは、プロジェクトの画像が配置されている場所です。この場合は、後で Google ログインオプションを実装するために使用できるように、Google ロゴの画像を配置した場所です。 ;
module フォルダーにはプロジェクトモジュールがあります。この場合、各モジュールをフォルダーで分離し、各フォルダー内にファイルを含む他のサブフォルダーを作成して、整理しやすくしました。
- login フォルダーと register フォルダー内に、次のサブフォルダーを作成しました。
component: は画面の HTML です。
コントローラー: 画面上で実行する機能が配置される場所;
view: ここで、コンポーネント内で作成された画面を呼び出し、それにコントローラープロパティを割り当てます。
ルーターフォルダーにはプロジェクトのルートが含まれています;
App.vue ファイルはプロジェクトルートを呼び出し、すべての画面でデフォルトの CSS スタイルを定義しているだけです。
最後に、firebase が提供する SDK 設定と、Vue JS 自体が作成するその他のインポートを呼び出す main.js ファイルです。

まず、何よりもまず、ターミナルで以下のコマンドを実行して、使用するライブラリ (この場合は vue-router と firebase) をインストールしましょう。

$ npm install vue-router

ログイン後にコピー

その後

$ npm install firebase

ログイン後にコピー

それでは、firebase が提供する SDK を main.js ファイルに追加することから始めましょう。そのため、以下の構造に注目してみましょう。

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

ログイン後にコピー

コンポーネントの作成を容易にするために、Vue と Vuetify を使用していますが、Tailwind またはその他の任意のフレームワークを使用できることに注意してください。

次に、プロジェクトルートを作成して App.vue ファイルで構成しましょう。以下ではこの構造に注目してみましょう。

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

ログイン後にコピー

まず、index.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

ログイン後にコピー

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.

次に、App.vue ファイル内のルートを次のように呼び出してみましょう:

$ npm install vue-router

ログイン後にコピー

最後に、アプリケーションが使用できるように、main.js ファイルにルートを追加しましょう。

$ npm install firebase

ログイン後にコピー

ここで、実際の登録コンポーネント、その関数、およびその呼び出しの作成に進みましょう。この構造に焦点を当てましょう。

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

ログイン後にコピー

ファイルフォームRegister.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 ファイル。

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

ログイン後にコピー

.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

ログイン後にコピー

これまでのところ、firebase の SDK を main.js ファイルのプロジェクトに統合するコードを追加し、router/index.js でルートを設定し、main.js と App.vue でルートを呼び出しています。理論的には、formRegister.vue ファイルに登録画面コンポーネントを作成し、registerController.js ファイルに関数を作成し、register.vue ファイルで画面とコントローラープロパティを呼び出しました。 /すでに登録していますフォームは次のように表示されます:

以上がfirebase Vue JS #STEPでログイン・登録（登録）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。