<template>
<div id="app">
<div v-if="loginFlag" id="loginPage">
<p>
用户名：
<input type="text" v-model="username">
</p>
<p>
密码：
<input type="password" v-model="password">
</p>
<p>
<button @click="login">登录</button>
</p>
</div>
<div id="homePage" v-else>
<table border="1">
<tr>
<th>创建时间</th>
<th>更新时间</th>
<th>商品价格</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "App",
data(){
return {
username:"",
password:"",
loginFlag:true,
pagenum:1,
pagesize:5
}
},
methods:{
login(){
if(this.username.trim()==''||this.password.trim()==''){
alert('用户名或者密码不能为空')
return
}
this.$axios({
method:"post",
url:"login",
data:{
username:this.username,
password:this.password
}
})
.then(res=>{
console.log(res);
/* 判断登录是否成功，status为200 表示登录成功 */
if(res.meta&&res.meta.status=="200"){
/* 打印出登录成功的提示语 */
alert(res.meta.msg)
/* 把用户信息token存在本地缓存 */
localStorage.token=res.data.token;
/* 把用户名存在本地缓存 */
localStorage.username=res.data.username;
/* 过800毫秒 */
setTimeout(()=>{
/* 把登录页关闭，把订单列表页展示 */
this.loginFlag = false;
/* 调取订单接口获取订单列表的数据 */
this.getOrder();
},800)
}
})
.catch(err=>{
console.log(err);
alert('接口异常')
})
},
getOrder(){
this.$axios({
method:"get",
url:"orders",
headers:{
Authorization:localStorage.token
},
params:{
pagenum:this.pagenum,
pagesize:this.pagesize
}
})
.then(res=>{
console.log(res);
})
}
}
};
</script>
0人点赞
作者：前端许
链接：https://www.jianshu.com/p/fd892e09d187
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
