<template>
<div class="login-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>分布式秒杀系统-用户登录</span>
</div>
<el-form label-width="80px">
<el-form-item label="用户名:">
<el-input v-model="username" placeholder="请输入用户名" style="width: 250px"/>
</el-form-item>
<el-form-item label="密码:">
<el-input v-model="password" type="password" placeholder="请输入密码" style="width: 250px"/>
</el-form-item>
<el-form-item>
<el-button style="width: 250px" type="primary" @click="submit()">登录</el-button>
<p class="errorInfo">{{errorInfo}}</p>
</el-form-item>
</el-form>
<div style="text-align: center">
版权所有:<a href="http://www.java1234.vip">www.java1234.vip</a>
</div>
</el-card>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Login',
data(){
return{
username:'',
password:'',
errorInfo:''
}
},
methods:{
submit(){
if(this.username.trim()==''){
this.errorInfo='用户名不能为空!';
return;
}
if(this.password.trim()==''){
this.errorInfo='密码不能为空!';
return;
}
axios.post("http://localhost:80:/login",{"username":this.username,"password":this.password})
.then(response=>{
console.log(response.data);
}).catch(error=>{
this.errorInfo=error;
})
}
}
}
</script>
<style scoped>
.login-container{
display: flex;
justify-content: center;
margin-top: 150px;
}
.errorInfo{
font-weight: bold;
text-align: center;
color: red;
}
</style>
springcloud分布式电商秒杀系统——axios引入
最新推荐文章于 2024-05-28 11:44:38 发布