Ahora veremos cómo hacer un login con vue.js, mysqli y bootstrap, los archivos que componen este script se muestran en la siguiente imagen.

A continuación veremos el contenido de cada script, para tener el mismo diseño hago uso de Bootswatch v4.1.3 Material de Thomas Park, Antes de comenzar a ejecutar el script debes crear una base de datos, los datos de conexión debes agregarlos en login.php y success.php.

Login con vue.js y bootstrap

//app.js
var app = new Vue({
    el: '#login',
    data:{
        successMessage: "",
        errorMessage: "",
        logDetails: {username: '', password: ''},
    },
 
    methods:{
        keymonitor: function(event) {
            if(event.key == "Enter"){
                app.checkLogin();
            }
        },
 
        checkLogin: function(){
            var logForm = app.toFormData(app.logDetails);
            axios.post('login.php', logForm)
                .then(function(response){
 
                    if(response.data.error){
                        app.errorMessage = response.data.message;
                    }
                    else{
                        app.successMessage = response.data.message;
                        app.logDetails = {username: '', password:''};
                        setTimeout(function(){
                            window.location.href="success.php";
                        },2000);
                         
                    }
                });
        },
 
        toFormData: function(obj){
            var form_data = new FormData();
            for(var key in obj){
                form_data.append(key, obj[key]);
            }
            return form_data;
        },
 
        clearMessage: function(){
            app.errorMessage = '';
            app.successMessage = '';
        }
 
    }
});

Shares:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *