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.$storemit('setToken',res.data); localStorage.userName = this.userInfo.userName; ken_expire = pire; ken = ken;
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;
},
}
/*.bg {*/go语言能做什么
/*!*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%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 400px;
}
.login-btn {
background-color: whitesmoke;
}
.logo {
font-family: "DejaVu Sans Mono";
color: lightblue;
font-size: 50px;
}
这⾥先不对代码进⾏说明，我先把index的组件代码也⼀并贴上，稍后解析知识要点。实现⾸页展⽰相册
代码如下：
Toggle navigation
创建相册
上传照⽚到此相册
{{image.album}}
{{image.filename}}
下载
删除
import axios from 'axios';
import qs from 'qs';
import UploadImage from './UploadImage.vue';
import CreateAlbum from './CreateAlbum.vue';
export default {
name : 'index',
data () {
return {
Create : false,
show : false,
title : this.$store.state.title
}
},
components :{UploadImage,CreateAlbum},
computed : {
// 获取相册列表
albumsName (){
return this.$AlbumsName;
},
// 获取相册内的图⽚列表
images (){
return this.$ImagesList;
}
},
mounted (){
axios.post('/auth/managealbum/get', JSON.stringify({username : localStorage.userName})).then(res => { if (res.data.status == 0){
this.$storemit('setAlbums',res.data.data)
}else {
this.$storemit('setAlbums','您没有相册')
}
}).catch(err => {
})
},
methods : {
// 打开上传弹窗
uploadImage (){
this.show = true;
},
showCreate(){
this.Create = true;
},
// 获取选中的相册的图⽚列表
listImages (name){
this.$storemit('setCurrentAlbum',name);
axios.post('/auth/download?page=1&size=10',qs.stringify({username :localStorage.userName,album:name})).then(res => { if (res.data.status == 0){
if (res.data.data == null){
this.$notify({
title : '提⽰信息',
message : ' 相册是空的哦，上传⼀些照⽚吧',
type : 'error'
})
}else {
this.$storemit('putImages',res.data.data);
}
}else {
this.$msgbox({
title : '提⽰信息',
message : '没有此相册',
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。