请求接口
登录
地址:http://47.243.33.127:8021/member/login
请求方式:post请求
需要参数: username password
点击登录
运行结果报错
<template>
<div class="mine">
<div class="info" v-show="isLogin">
<h2>开始学习前端</h2>
<p>学无止境</p>
<br/>
<mt-button type="danger" @click='toLogin'>登录</mt-button>
<mt-button type="primary" @click='toRegister'>注册</mt-button>
<p>登录注册即代表你同意《用户协议》和《隐私政策》</p>
<br/>
</div>
<div class="login" v-show="!isLogin">
<h2>用户登录</h2>
<br/>
<ul>
<li>
<h4>用户名:</h4>
<input type="text" placeholder="请输入用户名" v-model="username" />
</li>
<li>
<h4>密 码:</h4>
<input type="password" placeholder="请输入密码" v-model="password" />
</li>
</ul>
<mt-button type="danger" @click='login'>登录</mt-button>
</div>
</div>
</template>
<script>
// import qs from 'qs'
export default {
name: 'MineView',
data () {
return {
username: 'dsf',
password: '12sdf3456ds',
isLogin: 'true'
}
},
methods: {
toLogin () {
this.isLogin = !this.isLogin
},
toRegister () {
},
login () {
const json = { username: this.username, password: this.password }
this.$axios.post('http://47.243.33.127:8021/member/login', JSON.stringify(json)).then(function (message) {
console.log(message)
}).catch((err) => {
console.log(err)
})
}
}
}
</script>
<style scoped>
.mine{
height: 85vh;
display: flex;
justify-content: center;
align-content: center;
}
.info{
margin: auto;
background-color: #fff;
height: 300px;
width: 80%;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 2px 5px #afafaf;
text-align: center;
}
p{
margin: 10px;
}
.mint-button{
margin: 15px auto;
width: 100%;
}
h2{
text-align: center;
}
.login{
margin: auto;
background-color: #fff;
height: 300px;
width: 80%;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 2px 5px #afafaf;
}
li{
margin: 10px auto;
list-style: none;
}
input {
margin: 5px auto;
height: 25px;
width: 95%;
border: 2px solid rgb(97, 97, 97);
border-radius: 5px;
padding: 5px;
color: black;
}
</style>