axios.post-前后端对接参考（登录）

<template>
  <div class="wrapper">
    <img class="wrapper__img" src="http://x'x'x.png"/>
    <div class="wrapper__input">
      <input
        class="wrapper__input__content"
        placeholder="用户名"
        v-model="data.username"
      />
    </div>
    <div class="wrapper__input">
      <input
        type="password"
        class="wrapper__input__content"
        placeholder="请输入密码"
        v-model="data.password"
      />
    </div>
    <div class="wrapper__login-button" @click="handleLogin">登陆</div>
    <div class="wrapper__login-link" @click="handleRegisterClick">立即注册</div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import axios from 'axios'
import { reactive } from 'vue'

axios.defaults.headers.post['Content-Type'] = 'application/json'

export default {
  name: 'Login',
  setup() {
    const data = reactive({
      username: '',
      password: ''
    })
    const router = useRouter();
    const handleLogin = () => {
      axios.post('/jd/api/user/login', {
        username: data.username,
        password: data.password
      }).then(() => {
        localStorage.isLogin = true
        router.push({ name: 'Home' })
      }).catch(() => {
        alert('登陆失败')
      })
    }
    const handleRegisterClick = () => {
      router.push({name: 'Register'})
    }
    return { handleLogin, handleRegisterClick, data }
  }
}
</script>