我是 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à 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>
編輯：
我已經像下面的代碼一樣修改了我的代碼，現在它運行良好，我將正確運行的代碼放在這里，希望它也能對其他人有所幫助
- 登錄頁面.vue
<template>
<div class="hello">
<h1 style="font-size: 28px">{{ msg }}</h1>
<p>
Compila il form sottostante con le tue credenziali per effettuare il login
</p>
<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="password"
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>
<p>oppure accedi con la tua identità digitale SPID</p>
<div>TODO - SPID BUTTON HERE</div>
</div>
</template>
<script>
export default {
name: "LoginPage",
props: {
msg: String,
},
data() {
return {
user: {
email: '',
password: ''
},
show: false,
loading: false,
successMessage: '',
token: ''
}
},
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('http://localhost:8000/api/login', this.user)
.then(data => {
this.token = data['data'].token;
this.successMessage = 'Login avvenuto correttamente';
this.loading = false;
this.show = true;
});
}
}
};
</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>
uj5u.com熱心網友回復：
首先，您在創建的生命周期鉤子中有您的 api 呼叫，您想要的是將 api 呼叫系結到在表單中單擊的按鈕。我也沒有在您的資料物件中看到任何模型。您使用的 fetch api 錯誤，讓我解釋一下：
步驟：
- 為表單設定正確的標記
- 使用戶物件的鑰匙
email和password也放到了你的資料物件。 - 當您使用時，
submit.prevent您需要在表單中添加一個型別為的按鈕submit - 在 Vuejs 的方法物件中創建一個函式并將其添加到
submit.prevent您的表單中
這是一個帶有測驗 api 的示例：
const template = `
<div>
<form @submit.prevent="doLogin">
<div >
<input type="text" placeholder="Email" v-model="user.email" />
</div>
<div >
<input type="password" placeholder="Wachtwoord" v-model="user.password" />
</div>
<div >
<button 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: '[email protected]',
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/354198.html
標籤：javascript 接口 Vue.js 验证