@Kacie
2022-05-23 16:21
采纳率: 100%
浏览 109
已结题

vue中用axios发post请求500

请求接口
登录
地址:http://47.243.33.127:8021/member/login
请求方式:post请求
需要参数: username password

img

点击登录
运行结果报错

<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>


img

3条回答 默认 最新

相关推荐 更多相似问题