Bagaimana untuk melaksanakan fungsi log masuk dalam vue

Vue ialah rangka kerja JavaScript sumber terbuka yang digunakan secara meluas dalam pembangunan bahagian hadapan. Dengan populariti Internet dan lebih banyak fungsi laman web, keperluan pengguna semakin tinggi Fungsi log masuk laman web telah menjadi fungsi penting setiap laman web. Artikel ini akan memperkenalkan langkah dan kaedah untuk melaksanakan fungsi log masuk dalam Vue.

1. Pengetahuan prasyarat

Mata pengetahuan diperlukan dalam artikel ini:

Gunakan Vue-cli3 untuk membina projek

Vue-router, untuk penghalaan Halaman pengurusan

Vuex, digunakan untuk pengurusan negeri

Axios, digunakan untuk data permintaan tak segerak dalam halaman

2 Permulaan Projek

1. cli3

Vue-cli3 ialah alat perancah rasmi Vue.js, yang boleh membantu kami memulakan projek Vue dengan cepat. Masukkan arahan berikut dalam tetingkap baris arahan:

npm install -g @vue/cli

2. Buat projek

Masukkan arahan berikut dalam tetingkap baris arahan:

vue create login

di mana log masuk ialah nama projek , ubah suai mengikut keperluan. Anda kemudiannya akan diminta untuk memilih beberapa item konfigurasi, seperti pemalam yang diperlukan untuk projek, konfigurasi pratetap, dll., yang tidak akan dijelaskan di sini.

3. Mulakan projek

Masukkan arahan berikut dalam tetingkap baris arahan:

cd login
npm run serve

4. Cipta laluan dan halaman

Dalam src, Cipta direktori penghala baharu, dan kemudian buat fail index.js dalam direktori penghala. Tulis konfigurasi dan peraturan penghalaan tika VueRouter dalam fail index.js dan eksport tika penghalaan.

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

Kod di atas mentakrifkan Komponen Vue halaman log masuk, dengan laluan /log masuk. Kemudian kita perlu mencipta fail Login.vue baharu dalam direktori src/views. Fail ini ialah komponen sebenar halaman log masuk.

<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. Laksanakan fungsi log masuk

Dalam halaman log masuk Login.vue, kita perlu mengikat acara penyerahan borang, mendapatkan nama pengguna dan kata laluan yang dimasukkan oleh pengguna, dan kemudian hantar permintaan Ajax Pergi ke latar belakang dan lengkapkan proses log masuk. Axios ialah perpustakaan klien HTTP JavaScript yang berkuasa yang boleh kami gunakan untuk menghantar permintaan Ajax.

1. Pasang Axios

Masukkan arahan berikut dalam tetingkap baris arahan:

npm install axios

2 Tulis logik log masuk

dalam Log Masuk. vue file Tambahkan kod berikut pada kaedah serah:

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

Antaranya, kami menghantar permintaan pos ke antara muka /api/login melalui Axios. Alamat di sini perlu diubah suai mengikut situasi sebenar. Data yang dihantar ke latar belakang ialah nama pengguna dan kata laluan yang dimasukkan oleh pengguna dalam kotak input, dan kemudian logik kejayaan dan kegagalan log masuk diproses. Antaranya, jika log masuk berjaya, kami boleh menyimpan maklumat pengguna dalam Vuex untuk pengurusan negeri.

3. Gunakan Vuex untuk pengurusan negeri

Dalam direktori src, buat direktori kedai baharu dan buat fail index.js dalam direktori kedai untuk konfigurasi fungsi Vuex.

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

Antaranya, nilai awal pengguna ditetapkan kepada null. Kaedah mutasi setUser digunakan untuk mengubah suai pengguna dalam keadaan. Kaedah tindakan setUser digunakan untuk menyerahkan kaedah setUser dalam mutasi.

Dalam kaedah serah dalam Login.vue, apabila log masuk berjaya, kami perlu memanggil kaedah setUser dalam tindakan untuk menyimpan maklumat pengguna dalam 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. Ringkasan

Setakat ini, kami telah menyelesaikan pembangunan fungsi log masuk Vue. Menggunakan Vue untuk membangunkan halaman boleh menjadikan keseluruhan kod lebih elegan dan lebih mudah untuk diselenggara. Di samping itu, menggunakan Vuex untuk pengurusan negeri boleh menjadikan data lebih mudah digunakan dan diurus mengikut komponen, dan kod akan lebih mudah dibaca dan diselenggara. Memandangkan fungsi ini agak mudah, pemprosesan berkaitan bahagian belakang ditinggalkan dan pembaca boleh melaksanakan proses log masuk bahagian belakang dan interaksi hadapan dan belakang dengan sendirinya.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi log masuk dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!