使用 VueJS 3 App 調用 Laravel 8 登錄 API

Question

我是 VueJs 編程的新手，我正在制作一個簡單的應用程序，它允許用戶登錄並在經過身份驗證后在表中顯示服務列表。

我通過 Laravel 管理身份驗證，然后公開從 VueJS 應用程序調用的 API（使用 Insomnia 測試並正常工作）。

所以我在我的 Vue 項目中創建了一個名為LoginPage.vue的組件，並在其中調用 API 進行登錄。 為此，我已在線閱讀文檔和示例。

我有這個問題，當我填寫登錄表單並單擊瀏覽器上的Login按鈕打開開發人員工具時，在控制台中出現錯誤 404。

沒有使用 vue 的經驗，我無法理解可能是什么問題。

我感謝任何建議或建議

• 登錄頁面.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>Compila il form sottostante con le tue credenziali per effettuare il login</p>
    <div>
      <form v-on:submit.prevent="loginForm">
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            placeholder="Immetti la tua mail"
            id="mail"
            v-model="mail"
          >
        </div>
        <div class="form-group">
          <input
            type="password"
            class="form-control"
            placeholder="Immetti la tua password"
            id="psw"
            v-model="psw"
          >
        </div>
          <button class="btn btn-primary">Login</button>
      </form>
    </div>
    <p>oppure accedi con la tua identit&agrave; digitale SPID</p>
    <div> TODO - SPID BUTTON HERE</div>
  </div>
</template>

<script>

export default {
  name: "LoginPage",
  props: {
    msg: String,
  },
  data() {
    return {
      info: null
    };
  },
  created() {
    // Simple POST request with a JSON body using fetch
    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json" }
    };
    fetch("http://localhost:8000/api/login", requestOptions)
      .then(response => response.json())
      .then(data => (this.info = data));
  }
};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Answer 1

首先，您在創建的生命周期鈎子中有您的 api 調用，您想要的是將 api 調用綁定到在表單中單擊的按鈕。 我也沒有在您的數據對象中看到任何模型。 您使用的 fetch api 錯誤，讓我解釋一下：

步驟：

1. 為表單設置正確的標記
2. 使用密鑰email和password用戶對象，並將其放入您的數據對象中。
3. 當您使用submit.prevent您需要在表單中添加一個類型為submit的按鈕
4. 創建Vuejs的方法對象的功能，並添加到submit.prevent在表單

這是一個帶有測試 api 的示例：

 const template = ` <div> <form class="login-form" @submit.prevent="doLogin"> <div class="form-field"> <input type="text" placeholder="Email" v-model="user.email" /> </div> <div class="form-field"> <input type="password" placeholder="Wachtwoord" v-model="user.password" /> </div> <div class="form-action"> <button class="login-btn" type="submit">Submit</button> </div> </form> <span v-if="loading && !show">Loading...</span> <div v-else-if="show"> <p>Login success: {{ successMessage }}</p> <p>Token: {{ token }} </p> </div> </div> `; const LoginForm = { name: 'LoginForm', data() { return { user: { email: 'eve.holt@reqres.in', password: 'cityslicka' }, show: false, loading: false, successMessage: '', token: '' } }, template, methods: { async postData(url = '', data = {}) { const response = await fetch(url, { method: 'POST', // *GET, POST, PUT, DELETE, etc. headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); return response.json(); // parses JSON response into native JavaScript objects }, doLogin() { this.loading = true this.postData('https://reqres.in/api/login', this.user) .then(data => { const { token } = data; this.token = token; this.successMessage = 'Yes sir!'; this.loading = false; this.show = true; }); } } }; new Vue({ el: '#root', components: { LoginForm }, template: `<LoginForm />` })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="root"></div>