vueでログイン機能を実装する方法

Vue は、フロントエンド開発で広く使用されているオープンソースの JavaScript フレームワークです。インターネットの普及とWebサイトの機能の充実に伴い、ユーザーニーズはますます高くなり、Webサイトへのログイン機能はあらゆるWebサイトに欠かせない機能となっています。この記事では、Vueにログイン機能を実装する手順と方法を紹介します。

1. 前提知識

この記事で使用する必要がある知識ポイント:

Vue-cli3 を使用してプロジェクトをビルドする

Vue-router 、ページ ルーティング管理に使用されます

Vuex、状態管理に使用されます

Axios、ページ内の非同期リクエスト データに使用されます

2. プロジェクトの初期化

1インストール Vue-cli3

Vue-cli3 は Vue.js の公式スキャフォールディング ツールで、Vue プロジェクトを迅速に初期化するのに役立ちます。コマンド ライン ウィンドウに次のコマンドを入力します:

npm install -g @vue/cli

2. プロジェクトを作成します

コマンド ライン ウィンドウに次のコマンドを入力します:

vue create login

ここで、login はプロジェクトです。必要に応じて名前を変更します。次に、プロジェクトに必要なプラグイン、プリセット構成など、いくつかの構成項目を選択するよう求められますが、ここでは説明しません。

3. プロジェクトを開始します

コマンド ライン ウィンドウに次のコマンドを入力します:

cd login
npm run serve

4. ルートとページを作成します

src ディレクトリに、新しい 1 つのルーター ディレクトリを作成し、そのルーター ディレクトリにindex.js ファイルを作成します。 VueRouter インスタンスの構成とルーティング ルールを Index.js ファイルに書き込み、ルーティング インスタンスをエクスポートします。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Login from '@/views/Login.vue'

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

上記のコードはログイン ページの Vue コンポーネントを定義しており、パスは /login です。次に、src/views ディレクトリに新しい Login.vue ファイルを作成する必要があります。このファイルは、ログイン ページの実際のコンポーネントです。

<template>
  <div>
    <form>
      <h2>Login Form</h2>
      <div class="form-group">
        <label for="email">Email address:</label>
        <input type="email" class="form-control" id="email" v-model="email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" v-model="password">
      </div>
      <button type="submit" class="btn btn-default" @click.prevent="submit">Submit</button>
    </form>
  </div>
</template>

<script>

export default {
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    submit () {
      // 处理表单提交
    }
  }
}

</script>

3. ログイン関数の実装

ログイン ページ Login.vue で、フォームの送信イベントをバインドし、ユーザーが入力したユーザー名とパスワードを取得する必要があります。次に、Ajax リクエストをバックグラウンドに送信し、ログイン プロセスを完了します。 Axios は、Ajax リクエストの送信に使用できる強力な JavaScript HTTP クライアント ライブラリです。

1. Axios をインストールします

コマンド ライン ウィンドウに次のコマンドを入力します:

npm install axios

2. ログイン ロジックを作成します

Login.vue で送信します。ファイルメソッドに次のコードを追加します。

submit () {
  axios.post('/api/login', {
    email: this.email,
    password: this.password
  })
  .then(response => {
    console.log(response.data)
    // 处理登录成功逻辑
  })
  .catch(error => {
    console.log(error)
    // 处理登录失败逻辑
  })
}

その中で、Axios を介して /api/login インターフェイスに post リクエストを送信します。ここでのアドレスは実際の状況に応じて変更する必要があります。バックグラウンドに送信されるデータは、ユーザーが入力ボックスに入力したユーザー名とパスワードであり、ログインの成功と失敗のロジックが処理されます。このうち、ログインに成功すると、状態管理のためにユーザー情報をVuexに保存できます。

3. 状態管理に Vuex を使用する

src ディレクトリに新しいストア ディレクトリを作成し、そのストア ディレクトリ内に Vuex の機能構成用の Index.js ファイルを作成します。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {
  user: null
}

const mutations = {
  setUser (state, user) {
    state.user = user
  }
}

const actions = {
  setUser ({ commit }, user) {
    commit('setUser', user)
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions
})

export default store

このうち、userの初期値はnullに設定されています。ミューテーションの setUser メソッドは、ユーザーの状態を変更するために使用されます。アクションの setUser メソッドは、ミューテーションで setUser メソッドを送信するために使用されます。

Login.vue の submit メソッドでは、ログインが成功したら、アクションで setUser メソッドを呼び出して、Vuex にユーザー情報を保存する必要があります。

submit () {
  axios.post('/api/login', {
    email: this.email,
    password: this.password
  })
  .then(response => {
    console.log(response.data)
    const user = response.data.user
    if (user) {
      this.$store.dispatch('setUser', user)
      this.$router.push('/')
    }
  })
  .catch(error => {
    console.log(error)
  })
}

4. まとめ

これまでで、Vue のログイン機能の開発は完了しました。 Vue を使用してページを開発すると、コード全体がよりエレガントになり、保守が容易になります。さらに、状態管理に Vuex を使用すると、コンポーネントによるデータの使用と管理がより便利になり、コードがより読みやすく、保守しやすくなります。この機能は比較的単純であるため、バックエンド関連の処理は省略されており、バックエンドのログインやフロントエンドとバックエンドの相互作用の処理を読者自身で実装することができます。

以上がvueでログイン機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。