Comment utiliser Vue pour implémenter les paramètres de sortie de saut de page de connexion

Avec le développement rapide et la vulgarisation de la technologie front-end, de plus en plus d'entreprises commencent à appliquer la technologie Vue pour créer leurs propres sites Web. Dans l'application pour les sites Web d'entreprise, la connexion est un lien qui ne peut être ignoré et Vue possède sa propre méthode unique pour réaliser la fonction de connexion. Cet article explique comment utiliser Vue pour implémenter les paramètres de sortie du saut de page de connexion, puis implémenter la vérification de la connexion de l'utilisateur.

1. Préparation

Avant de commencer à implémenter les paramètres de sortie de saut, nous devons effectuer les étapes suivantes :

(1) Installer Vue-CLI

Vue-CLI est l'outil d'échafaudage officiel de Vue qui simplifie les opérations de configuration, notamment en termes de création de projet, de développement et de construction de packaging, il peut rapidement vous initier au développement de Vue.

Méthode d'installation :

npm install -g @vue/cli

(2) Créer un projet Vue

Nous pouvons utiliser la ligne de commande pour créer un projet Vue dans le terminal, entrer dans le répertoire racine du projet et utiliser le ligne de commande pour exécuter les instructions suivantes :

vue create my-project

2. Implémenter la logique

1) Page de connexion

Dans la page de connexion, nous devons entrer le nom d'utilisateur et le mot de passe pour la vérification et l'affichage du saut.

Une fois le projet Vue créé, nous devons importer le plug-in Vue vue-router pour implémenter les sauts de page.

Tout d'abord, nous entrons dans le répertoire src du projet, créons un nouveau fichier login.vue et effectuons l'opération de connexion sur la page.

<script><br>import { mapActions } from "vuex";<br>export default {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">data() {     return {         username: '',         password: ''     } }, methods: {     ...mapActions(['login']),     // 登录     async submit() {         await this.login({ username: this.username, password: this.password });     } }</pre><div class="contentsignin">Copier après la connexion</div></div> <p>}<br></script>

2) Établir une interface serveur Opération backend du site Web

Nous devons fournir une interface API RESTful côté serveur pour traiter les demandes de connexion et renvoyer les données de résultat correspondantes. Dans le projet Vue, nous pouvons utiliser la bibliothèque Axios pour les opérations d'interface de requête.

Dans le répertoire racine du projet Vue, utilisez la ligne de commande pour exécuter :

npm install axios

Dans le répertoire racine du projet Vue, créez un nouveau fichier service.js pour encapsuler le processus de requête API basé sur Axios et traitez-le comme un plugin distinct. Les plugins Vue sont fournis pour une utilisation dans toute l'application.

//Introduire la bibliothèque axios
importer axios depuis "axios";
// Créer une instance axios
const service = axios.create({

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

});
export default ({ Vue }) =>

}

Dans le fichier index.js du répertoire src, nous devons enregistrer le fichier service.js que nous venons d'encapsuler en tant que plug-in Vue.

importer Vue depuis 'vue'

importer un service depuis './service' //Présenter le service

//Enregistrer le plug-in de service

Vue.use(service, {Vue})

Lorsque nous cliquons sur le bouton, la logique de connexion est exécutée. Après cela, vous devez appeler l'arrière-plan pour vérifier et obtenir les données du résultat de connexion. Les données de résultat de connexion sont stockées dans Vuex et enregistrées via le plug-in Vue Vuex.

Dans le répertoire src, créez un nouveau répertoire store pour stocker les opérations liées à Vuex. Tout d'abord, créez un nouveau fichier types.js dans le répertoire du magasin pour définir le type d'opération de Vuex :

// types.js

export const LOGIN_SUCCESS = "LOGIN_SUCCESS"; // Connexion réussie
export const LOGIN_FAIL = "LOGIN_FAIL"; // Échec de la connexion

Créez un nouveau fichier actions.js dans le répertoire du magasin et encapsulez les actions Vuex pour déclencher ces actions dans le composant Vue et mettre à jour l'état.

importer * en tant que types depuis './types.js'

export par défaut {

Vue.prototype.$axios = service;

}

Dans le répertoire src/store, créez un nouveau fichier store.js, créez des statistiques, des mutations, des actions et d'autres contenus associés.

// store.js

importer Vue depuis 'vue'
importer Vuex depuis 'vuex'
importer des actions depuis './actions.js'
importer * en tant que types depuis './types.js'

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

})

export default store

Dans le fichier main.js du répertoire src, nous devons enregistrer store.js dans Vue, comme suit :

importer Vue depuis 'vue'

importer l'application depuis './App.vue'
importer le routeur depuis './router'
importer le magasin depuis './store/store.js'

Vue.config.productionTip = 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) Accédez à la page et affichez les résultats des paramètres

Introduisez les paramètres d'état isLogged et name dans Vuex. sera affiché dans l'état de mise à jour de Vuex. Après une connexion réussie, lorsque nous passons à une nouvelle page via le routage, nous devons transmettre les informations de connexion et les paramètres de résultat de sortie à la nouvelle page.

Dans le projet Vue, nous pouvons choisir la méthode de programmation du routeur pour accéder à une nouvelle page via le code.

Dans le fichier router.js, définissez deux champs clés pour décrire l'état de routage et de vérification de connexion, ainsi que les paramètres de résultat de sortie.

importer Vue depuis 'vue'

importer le routeur depuis 'vue-router'
importer la maison depuis './views/Home.vue'
importer la connexion depuis './views/Login.vue'
Vue.use (routeur)
const router = new Router({

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

})

router.beforeEach((to, from, next) => { // Effectuer une vérification de connexion à la page lorsque le routage est commuté

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

})

Après une connexion réussie Quand , nous devons utiliser un routeur pour sauter et transmettre les paramètres de résultat de sortie au composant requis, qui doit introduire la bibliothèque 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的网站登录验证功能。当然了，本文的实现是源于作者的参考和思考，如果您也有更好的实现方式，请跟我们一起分享并探讨。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!