<template>
<div class="login">
<div class="container">
<a href="/#/index"><img src="/imgs/login-logo.png" alt=""></a>
</div>
<div class="wrapper">
<div class="container">
<div class="login-form">
<h3>
<span class="checked">帐号登录</span><span class="sep-line">|</span><span>扫码登录</span>
</h3>
<div class="input">
<input type="text" placeholder="请输入帐号" v-model="username">
</div>
<div class="input">
<input type="password" placeholder="请输入密码" v-model="password">
</div>
<div class="btn-box">
<a href="javascript:;" class="btn" @click="login">登录</a>
</div>
<div class="tips">
<div class="sms" @click="register">手机短信登录/注册</div>
<div class="reg">立即注册<span>|</span>忘记密码?</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-link">
<a href="https://www.imooc.com/u/1343480" target="_blank">河畔一角主页</a><span>|</span>
<a href="https://coding.imooc.com/class/113.html" target="_blank">Vue全栈课程</a><span>|</span>
<a href="https://coding.imooc.com/class/236.html" target="_blank">React全家桶课程</a><span>|</span>
<a href="https://coding.imooc.com/class/343.html" target="_blank">微信支付专项课程(H5+小程序/云+Node+MongoDB)</a>
</div>
<p class="copyright">Copyright ©2019 mi.futurefe.com All Rights Reserved.</p>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
name: 'login',
data(){
return {
username:'',
password:'',
userId:''
}
},
methods:{
login(){
let { username,password } = this;
this.axios.post('/user/login',{
username,
password
}).then((res)=>{
this.$cookie.set('userId',res.id,{expires:'Session'});
// this.$store.dispatch('saveUserName',res.username);
this.saveUserName(res.username);
this.$router.push({
name:'index',
params:{
from:'login'
}
});
})
},
...mapActions(['saveUserName']),
register(){
this.axios.post('/user/register',{
username:'admin1',
password:'admin1',
email:'admin1@163.com'
}).then(()=>{
this.$message.success('注册成功');
})
}
}
}
</script>
<style lang="scss">
.login{
&>.container{
height:113px;
img{
width:auto;
height:100%;
}
}
.wrapper{
background:url('/imgs/login-bg.jpg') no-repeat center;
.container{
height:576px;
.login-form{
box-sizing: border-box;
padding-left: 31px;
padding-right: 31px;
width:410px;
height:510px;
background-color:#ffffff;
position:absolute;
bottom:29px;
right:0;
h3{
line-height:23px;
font-size:24px;
text-align:center;
margin:40px auto 49px;
.checked{
color:#FF6600;
}
.sep-line{
margin:0 32px;
}
}
.input{
display:inline-block;
width:348px;
height:50px;
border:1px solid #E5E5E5;
margin-bottom:20px;
input{
width: 100%;
height: 100%;
border: none;
padding: 18px;
}
}
.btn{
width:100%;
line-height:50px;
margin-top:10px;
font-size:16px;
}
.tips{
margin-top:14px;
display:flex;
justify-content:space-between;
font-size:14px;
cursor:pointer;
.sms{
color:#FF6600;
}
.reg{
color:#999999;
span{
margin:0 7px;
}
}
}
}
}
}
.footer{
height:100px;
padding-top:60px;
color:#999999;
font-size:16px;
text-align:center;
.footer-link{
a{
color:#999999;
display:inline-block;
}
span{
margin:0 10px;
}
}
.copyright{
margin-top:13px;
}
}
}
</style>
2 使用cookie 存userID
使用vue-cookie
查看使用方法:再npm中vue-cookie - npm
1 安装
npm install vue-cookie --save
2 main.js中引入
import Vue from 'vue'
import VueCookie from 'vue-cookie'
// Tell Vue to use the plugin
Vue.use(VueCookie);
3 使用
login(){
let { username,password } = this;
this.axios.post('/user/login',{
username,
password
}).then((res)=>{
this.$cookie.set('userId',res.id,{expires:'Session'});
// this.$store.dispatch('saveUserName',res.username);
this.saveUserName(res.username);
this.$router.push({
name:'index',
params:{
from:'login'
}
});
})
3根据用户信息接口,获得购物车数量放在app.vue当中
1 如果页面不刷新,可以用vuex来做数据的传输,再登录页面成功以后,我们把他保存到vuex当中,再首页我们获取到vuex的数据进行展示。
但是如果用户刷新,会发现存储的东西都有可能会丢失,最好保障的是实时的拉取一次。
而且只会拉取一次,再刷新的时候拉取这一次,后边再也不会拉取了
2 在登录之后才进行获取数据
3 vuex保存用户信息