vue中axios請求資料

一个人走在路上發表於2024-09-19
VueiOS

首先引入包：yarn add axios
再匯入 import axios from 'axios'

<template>
  <div>
    <h1>登入頁面</h1>
    <form>
      <label for="username">使用者名稱:</label>
      <input type="text" id="username" placeholder="請輸入使用者名稱" v-model="formData.username">
      <br>
      <label for="password">密碼:</label>
      <input type="password" id="password" placeholder="請輸入密碼" v-model="formData.password">
      <br>
      <button type="button" @click="login">登入</button>
    </form>
  </div>
</template>

<script>
import axiox from 'axios'

export default {
  data() {
    return {
      // 這裡可以放置一些資料
      formData: {
        username: '',
        password: ''
      }

    }
  },
  methods: {
    // 這裡可以放置一些方法
    login() {
      axiox.get('http://localhost:3000/users', {
        params: this.formData
      }).then(res => {

        if (this.formData.username === '' || this.formData.password === '') {
          alert('使用者名稱或密碼不能為空')
          return
        }
        console.log(res)
        if (res.data.length > 0) {
          this.$router.push({ name: 'home' })

        } else {

          alert('使用者名稱或密碼錯誤')
        }
      }).catch(err => {
        console.log(err)
      })
    },
  }


}
</script>

<style></style>

相關文章