html密码验证 并跳转页面,vuejs 实现前后端分离登录验证和页面自动跳转

使用的技术点：

vue-router

axios

vuex

element-ui

qs

项目介绍：

这个项目是一个类似google相册功能的项目，目前实现的是图片特征提取，可以以图搜图，最终打造成一个智能相册。后台由go语言开发，图片特征提取由c++开发，前端使用vuejs实现完全前后端分离。

现在就开始我们的前段代码吧。这里我们都使用vue组件开发

实现登录

组件代码如下：

My-Albums

登 录

import axios from 'axios';

export default {

name: 'login',

data () {

return {

userInfo :{

userName : '',

password : '',

},

show : false,

}

},

methods : {

doLogin (){

if (this.userName == ''){

alert('用户名不能为空');

return false

}

if (this.password == ''){

alert('密码名不能为空');

return false

}

axios.post('/login',JSON.stringify(this.userInfo))

.then(res => {

console.log(res)

if(res.status == 200){

this.$store.commit('setToken',res.data);

localStorage.userName = this.userInfo.userName;

localStorage.token_expire = res.data.expire;

localStorage.token = res.data.token;

this.$notify({

title : '提示信息',

message : '登录成功',

type : 'success'

});

this.$router.push({path:'/'})

}else {

this.$notify({

title : '提示信息',

message : '账号或密码错误',

type : 'error'

});

}

})

.catch(err => {

console.log(err)

})

}

},

mounted (){

var wi=window.screen.width;

var hi=window.screen.height;

document.getElementById("bg").style.width=wi+"px";

document.getElementById("bg").style.height=hi+"px";

},

}

/*.bg {*/

/*!*background-color: aqua;*!*/

/*background-image: url("../assets/bj.jpg");*/

/*background-size:100% 100%*/

/*}*/

.login {

position:absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%,