使用的技术点:
vue-router
axios
vuex
element-ui
qs
项目介绍:
这个项目是一个类似google相册功能的项目,目前实现的是图片特征提取,可以以图搜图,最终打造成一个智能相册。后台由go语言开发,图片特征提取由c++开发,前端使用vuejs实现完全前后端分离。
现在就开始我们的前段代码吧。这里我们都使用vue组件开发
实现登录
组件代码如下:
登 录
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%, -50%);
-m