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.
//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 = '';
}
}
});
