So verwenden Sie Vue, um Ausgabeparameter für den Sprung von Anmeldeseiten zu implementieren

Mit der rasanten Entwicklung und Popularisierung der Front-End-Technologie beginnen immer mehr Unternehmen, die Vue-Technologie zum Erstellen ihrer eigenen Websites einzusetzen. In der Anwendung für Unternehmenswebsites ist die Anmeldung ein Link, der nicht ignoriert werden kann, und Vue verfügt über eine eigene einzigartige Methode zur Realisierung der Anmeldefunktion. In diesem Artikel wird erläutert, wie Sie mit Vue Ausgabeparameter für den Sprung von Anmeldeseiten implementieren und anschließend die Überprüfung der Benutzeranmeldung implementieren.

1. Vorbereitung

Bevor wir mit der Implementierung von Sprungausgabeparametern beginnen, müssen wir die folgenden Schritte ausführen:

(1) Vue-CLI installieren

Vue-CLI ist das offizielle Gerüsttool von Vue, das Konfigurationsvorgänge vereinfacht, insbesondere in Bezug auf Von der Projekterstellung über die Entwicklung bis hin zum Verpackungsaufbau können Sie schnell in die Entwicklung von Vue einsteigen.

Installationsmethode:

npm install -g @vue/cli

(2) Erstellen Sie ein Vue-Projekt

Wir können die Befehlszeile verwenden, um ein Vue-Projekt im Terminal zu erstellen, das Projektstammverzeichnis einzugeben und das zu verwenden Befehlszeile zum Ausführen der folgenden Anweisungen:

vue create my-project

2. Logik implementieren

1) Anmeldeseite

Auf der Anmeldeseite müssen wir den Benutzernamen und das Passwort zur Überprüfung und Sprunganzeige eingeben.

Nachdem das Vue-Projekt erstellt wurde, müssen wir das Vue-Plug-in Vue-Router importieren, um Seitensprünge zu implementieren.

Zuerst geben wir das src-Verzeichnis des Projekts ein, erstellen eine neue login.vue-Datei und führen den Anmeldevorgang auf der Seite durch.

. Website-Backend-Betrieb

Wir müssen auf der Serverseite eine RESTful-API-Schnittstelle bereitstellen, um Anmeldeanfragen zu verarbeiten und entsprechende Ergebnisdaten zurückzugeben. Im Vue-Projekt können wir die Axios-Bibliothek für Anforderungsschnittstellenoperationen verwenden.

Verwenden Sie im Stammverzeichnis des Vue-Projekts die Befehlszeile, um Folgendes auszuführen:

npm install axios

Erstellen Sie im Stammverzeichnis des Vue-Projekts eine neue service.js-Datei, um den auf Axios basierenden API-Anforderungsprozess zu kapseln und behandeln Sie es als separates Vue-Plugin, das in der gesamten Anwendung verwendet werden kann.

//Axios-Bibliothek vorstellen

Axios aus „Axios“ importieren;

//Axios-Instanz erstellen

const service = axios.create({

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

});

export default ({ Vue }) => {

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

}

In der Datei index.js im Verzeichnis src müssen wir die Datei service.js registrieren, die wir gerade als Vue-Plug-in gekapselt haben.

Vue aus 'vue' importieren

Dienst aus './service' importieren //Dienst einführen

//Dienst-Plug-in registrieren

Vue.use(service, { Vue })

Wenn wir auf die Schaltfläche klicken, Die Anmeldelogik wird ausgeführt. Anschließend müssen Sie den Hintergrund aufrufen, um die Anmeldeergebnisdaten zu überprüfen und abzurufen. Die Anmeldeergebnisdaten werden in Vuex gespeichert und über das Vue-Plug-in Vuex registriert.

Erstellen Sie im src-Verzeichnis ein neues Speicherverzeichnis, um Vuex-bezogene Vorgänge zu speichern. Erstellen Sie zunächst eine neue Datei „types.js“ im Speicherverzeichnis, um den Operationstyp von Vuex zu definieren:

//types.js
export const LOGIN_SUCCESS = „LOGIN_SUCCESS“; // Anmeldung erfolgreich

export const LOGIN_FAIL = „LOGIN_FAIL“; // Anmeldung fehlgeschlagen

Erstellen Sie eine neue Actions.js-Datei im Store-Verzeichnis und kapseln Sie Vuex-Aktionen, um diese Aktionen in der Vue-Komponente auszulösen und den Status zu aktualisieren.

import * als Typen aus './types.js'

export default {

Vue.prototype.$axios = service;

}

Erstellen Sie im Verzeichnis src/store eine neue Datei „store.js“, erstellen Sie Stata, Mutationen, Aktionen und andere verwandte Inhalte.

// store.js
Vue aus 'vue' importieren

Vuex aus 'vuex' importieren

Aktionen aus './actions.js' importieren

* als Typen aus './types.js' importieren

Vue.use (Vuex)

const store = new Vuex.Store({

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);
        }
    })
})

})

Standardspeicher exportieren

In der main.js-Datei im src-Verzeichnis müssen wir store.js wie folgt in Vue registrieren:

Vue aus 'vue' importieren

App aus './App.vue' importieren

Router aus './router' importieren

Store aus './store/store.js' importieren

Vue.config.produktionTip = false

new Vue({

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

}).$mount('#app')

3) Springen Sie zur Seite und geben Sie die Parameterergebnisse aus

Geben Sie die Statusparameter isLogged und den Namen in Vuex ein wird im Vuex-Update-Status angezeigt. Nach erfolgreicher Anmeldung müssen wir beim Springen zu einer neuen Seite über Routing die Anmeldeinformationen und Ausgabeergebnisparameter an die neue Seite übergeben.

Im Vue-Projekt können wir die Router-Programmiermethode auswählen, um durch Code zu einer neuen Seite zu springen.

In der Datei router.js definieren Sie zwei Schlüsselfelder, um den Routing- und Anmeldeüberprüfungsstatus sowie die Ausgabeergebnisparameter zu beschreiben.

Vue von 'vue' importieren

Router von 'vue-router' importieren

Home von './views/Home.vue' importieren

Anmeldung von './views/Login.vue' importieren

Vue.use(Router)

const router = new Router({

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

})
router.beforeEach((to, from, next) => { // Überprüfung der Seitenanmeldung durchführen, wenn das Routing umgeschaltet wird

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

})

Nach erfolgreicher Anmeldung Wann , wir müssen einen Router verwenden, um zu springen und die Ausgabeergebnisparameter an die erforderliche Komponente zu übergeben, die die queryString-Bibliothek einführen muss:

在登录成功的方法中：

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的网站登录验证功能。当然了，本文的实现是源于作者的参考和思考，如果您也有更好的实现方式，请跟我们一起分享并探讨。

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue, um Ausgabeparameter für den Sprung von Anmeldeseiten zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!