Cara menggunakan Vue untuk melaksanakan parameter keluaran lompat halaman log masuk

Dengan perkembangan pesat dan popularisasi teknologi hadapan, semakin banyak syarikat mula menggunakan teknologi Vue untuk membina tapak web mereka sendiri. Dalam aplikasi untuk laman web korporat, log masuk adalah pautan yang tidak boleh diabaikan, dan Vue mempunyai kaedah uniknya sendiri untuk merealisasikan fungsi log masuk. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan parameter output lompat halaman log masuk, dan kemudian melaksanakan pengesahan log masuk pengguna.

1. Persediaan awal

Sebelum mula melaksanakan parameter output lompat, kita perlu melengkapkan langkah berikut:

(1) Pasang Vue-CLI

Vue-CLI ialah alat perancah rasmi Vue yang memudahkan operasi konfigurasi Ia boleh membawa anda ke dalam pembangunan Vue dengan cepat, terutamanya dari segi penciptaan projek, pembangunan dan pembinaan pembungkusan.

Kaedah pemasangan:

npm install -g @vue/cli

(2) Buat projek Vue

Kita boleh menciptanya menggunakan baris arahan dalam projek terminal Vue, masukkan direktori akar projek, gunakan baris arahan untuk melaksanakan pernyataan berikut:

vue create my-project

2 Laksanakan logik

1 ) Halaman log masuk

Dalam halaman log masuk, kita perlu memasukkan nama pengguna dan kata laluan untuk pengesahan dan paparan lompat.

Selepas projek Vue dibuat, kita perlu mengimport vue-router pemalam Vue untuk melaksanakan lompatan halaman.

Pertama, kami memasuki direktori src projek, mencipta fail login.vue baharu dan melaksanakan operasi log masuk pada halaman.

import { mapActions } daripada "vuex";
eksport lalai {

data() {
    return {
        username: '',
        password: ''
    }
},
methods: {
    ...mapActions(['login']),
    // 登录
    async submit() {
        await this.login({ username: this.username, password: this.password });
    }
}

}

2) Wujudkan antara muka pelayan untuk operasi latar belakang tapak web

Kami perlu menyediakan antara muka API RESTful di bahagian pelayan untuk mengendalikan permintaan log masuk , dan kembalikan data hasil yang sepadan. Dalam projek Vue, kita boleh menggunakan perpustakaan Axios untuk meminta operasi antara muka.

Dalam direktori akar projek Vue, gunakan baris arahan untuk melaksanakan:

npm install axios

Dalam direktori akar projek Vue, cipta perkhidmatan baharu .js, merangkumnya berdasarkan proses permintaan API Axios dan menyediakannya sebagai pemalam Vue yang berasingan untuk keseluruhan aplikasi.

//Perkenalkan pustaka axios
import axios daripada "axios";
// Cipta kejadian axios
const service = axios.create({

baseURL: "http://192.168.0.102",
timeout: 10000

} );
eksport lalai ({ Vue }) => {

Vue.prototype.$axios = service;

}

Dalam fail index.js dalam direktori src, kami perlu menambah perkhidmatan yang kami hanya merangkum fail .js didaftarkan sebagai pemalam Vue.

import Vue daripada 'vue'

import perkhidmatan daripada './service' //Perkenalkan perkhidmatan

// Daftar pemalam perkhidmatan
Vue.use( service, { Vue })

Apabila kami mengklik butang dan melaksanakan logik log masuk, kami perlu memanggil latar belakang untuk mengesahkan dan mendapatkan data hasil log masuk. Data hasil log masuk disimpan dalam Vuex dan didaftarkan melalui Vue plug-in Vuex.

Dalam direktori src, buat direktori kedai baharu untuk menyimpan operasi berkaitan Vuex. Mula-mula, buat fail types.js baharu dalam direktori kedai untuk mentakrifkan jenis operasi Vuex:

// types.js
eksport const LOGIN_SUCCESS = "LOGIN_SUCCESS" // Log masuk berjaya
export const LOGIN_FAIL = "LOGIN_FAIL"; // Log masuk gagal

Buat fail actions.js baharu dalam direktori kedai dan rangkumkan tindakan Vuex untuk mencetuskan tindakan ini dalam komponen Vue dan kemas kini keadaan.

import * sebagai jenis daripada './types.js'
eksport lalai {

login: ({ commit }, param) => new Promise((resolve, reject) => {
    const { username, password } = param;
    this.$axios.post('/login', { username, password }).then(res => {
        const data = res.data;
        if (data.code === 200) {
            commit(types.LOGIN_SUCCESS, { data });
            resolve();
        }
        else {
            commit(types.LOGIN_FAIL, { message: data.message });
            reject(data.message);
        }
    })
})

}

Dalam direktori src/store, buat yang baharu simpan. fail js untuk mencipta stata, mutasi, tindakan dan kandungan lain yang berkaitan.

// store.js
import Vue daripada 'vue'
import Vuex daripada 'vuex'
import tindakan daripada './actions.js'
import * sebagai jenis daripada './types.js'

Vue.use(Vuex)
kedai const = Vuex.Store baharu({

state: {
    info: {
        isLogged: false, // 是否登录
        name: "", // 登录用户名
    }
},
mutations: {
    [types.LOGIN_SUCCESS](state, { data }) {
        state.info.isLogged = true;
        state.info.name = data.name;
    },
    [types.LOGIN_FAIL](state, { message }) {
        state.info.isLogged = false;
        state.info.name = "";
        console.log(message)
    }
},
actions

})

eksport lalai simpan

Dalam fail main.js dalam direktori src, kita perlu mendaftar store.js ke dalam Vue, seperti berikut:

import Vue dari 'vue'
import Apl daripada ' ./App.vue'
import penghala daripada './router'
import kedai daripada './store/store.js'

Vue.config.productionTip = false
Vue baharu ({

router,
store, // 注册Vuex
render: h => h(App)

}).$mount('#app')

3) Lompat ke halaman dan keluarkan hasil parameter

Perkenalkan parameter keadaan dalam Vuex isLogged dan nama, apabila log masuk berjaya, status akan dikemas kini dalam Vuex. Selepas log masuk berjaya, apabila melompat ke halaman baharu melalui penghalaan, kami perlu menghantar maklumat log masuk dan parameter hasil output ke halaman baharu.

Dalam projek Vue, kita boleh memilih kaedah pengaturcaraan penghala untuk melompat ke halaman baharu melalui kod.

Dalam fail router.js, tentukan dua medan utama untuk menerangkan penghalaan dan status pengesahan log masuk, serta parameter hasil output.

import Vue daripada 'vue'
import Penghala daripada 'vue-router'
import Laman Utama daripada './views/Home.vue'
import Log masuk daripada './views/Login .vue'
Vue.use(Router)
const router = new Router({

mode: 'history',
routes: [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: { requiresAuth: true } // requireAuth用于表示页面是否需要登录才能访问，本例中仅仅对home页面设置了登录验证
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
]

})
router.beforeEach((to, from, next) => { // Lakukan pengesahan log masuk halaman apabila penghalaan ditukar

if (to.matched.some(record => record.meta.requiresAuth)) {
    const isLogged = store.state.info.isLogged;
    if (!isLogged) next({ name: 'login' })
    else next()
} else {
    next()
}

})

Apabila log masuk berjaya, kita perlu menggunakan penghala untuk melompat dan menghantar parameter hasil output kepada semua Antara komponen yang diperlukan, komponen perlu memperkenalkan perpustakaan queryString:

在登录成功的方法中：

import router from '../router'
import { stringify } from 'querystring'

commit(types.LOGIN_SUCCESS, { data })
const queryString = stringify({ name: data.name }) // 使用 queryString 库，将参数转化为字符串
router.push({ name: "home", query: { authInfo: window.btoa(queryString) }}) // 使用 router 进行跳转，这里使用了 Base64 编码策略，有兴趣的可以了解一下

在Home.vue组件中，我们通过created钩子，获取路由中的输入参数并将其输出。

export default {

name: 'home',
created() {
    if (this.$route.query.authInfo !== undefined) { // 如果存在 authInfo
        const res = atob(this.$route.query.authInfo) // Base64解码操作
        this.formData = qs.parse(res) // 请求参数解码操作
        console.log(this.formData) // 输出参数信息
    }
},
data() {
    return {
        formData: {}
    }
}

}

至此，我们已经成功使用Vue实现登录页跳转输出参数的功能。

结语

本文介绍了如何利用 Vue 实现跳转输出参数，通过 Vue-CLI、Axios、Vuex 和 Vue-Router 等技术栈，实现了基于Vue的网站登录验证功能。当然了，本文的实现是源于作者的参考和思考，如果您也有更好的实现方式，请跟我们一起分享并探讨。

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan parameter keluaran lompat halaman log masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!