Блог

Я новичок в программировании с помощью VueJS и создаю простое приложение, которое позволяет пользователю войти в систему и после аутентификации отобразить список служб в таблице.

Я управляю аутентификацией через Laravel, затем предоставляю API (протестированные с бессонницей и работающие правильно), которые я вызываю из своего приложения VueJS.

Поэтому я создал в своем проекте Vue компонент, который называется LoginPage.vue и в котором я вызываю API для входа в систему. Для этого я прочитал документацию и примеры в Интернете.

У меня такая проблема, когда я заполняю форму входа в систему и нажимаю на Login кнопку в браузере, открывающую инструменты разработчика, в консоли у меня ошибка 404.

Не имея опыта работы с vue, я не могу понять, в чем может быть проблема.

Я ценю любые советы или предложения

• Страница входа.vue

 lt;templategt;  lt;div class="hello"gt;  lt;h1gt;{{ msg }}lt;/h1gt;  lt;pgt;Compila il form sottostante con le tue credenziali per effettuare il loginlt;/pgt;  lt;divgt;  lt;form v-on:submit.prevent="loginForm"gt;  lt;div class="form-group"gt;  lt;input  type="text"  class="form-control"  placeholder="Immetti la tua mail"  id="mail"  v-model="mail"  gt;  lt;/divgt;  lt;div class="form-group"gt;  lt;input  type="password"  class="form-control"  placeholder="Immetti la tua password"  id="psw"  v-model="psw"  gt;  lt;/divgt;  lt;button class="btn btn-primary"gt;Loginlt;/buttongt;  lt;/formgt;  lt;/divgt;  lt;pgt;oppure accedi con la tua identitamp;agrave; digitale SPIDlt;/pgt;  lt;divgt; TODO - SPID BUTTON HERElt;/divgt;  lt;/divgt; lt;/templategt;  lt;scriptgt;  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 =gt; response.json())  .then(data =gt; (this.info = data));  } };  lt;/scriptgt;  lt;!-- Add "scoped" attribute to limit CSS to this component only --gt; lt;style scopedgt; h3 {  margin: 40px 0 0; } ul {  list-style-type: none;  padding: 0; } li {  display: inline-block;  margin: 0 10px; } a {  color: #42b983; } lt;/stylegt;   

Редактировать:

Я изменил свой код, как показано ниже, и теперь он работает хорошо, я размещаю здесь код, который работает правильно, надеясь, что он также поможет другим

• LoginPage.vue

 lt;templategt;  lt;div class="hello"gt;  lt;h1 style="font-size: 28px"gt;{{ msg }}lt;/h1gt;  lt;pgt;  Compila il form sottostante con le tue credenziali per effettuare il login  lt;/pgt;  lt;divgt;  lt;form class="login-form" @submit.prevent="doLogin"gt;  lt;div class="form-field"gt;  lt;input type="text" placeholder="email" v-model="user.email" /gt;  lt;/divgt;  lt;div class="form-field"gt;  lt;input  type="password"  placeholder="password"  v-model="user.password"  /gt;  lt;/divgt;  lt;div class="form-action"gt;  lt;button class="login-btn" type="submit"gt;Submitlt;/buttongt;  lt;/divgt;  lt;/formgt;   lt;span v-if="loading amp;amp; !show"gt;Loading...lt;/spangt;  lt;div v-else-if="show"gt;  lt;pgt;Login success: {{ successMessage }}lt;/pgt;  lt;pgt;Token: {{ token }}lt;/pgt;  lt;/divgt;  lt;/divgt;  lt;pgt;oppure accedi con la tua identitamp;agrave; digitale SPIDlt;/pgt;  lt;divgt;TODO - SPID BUTTON HERElt;/divgt;  lt;/divgt; lt;/templategt;  lt;scriptgt; 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 =gt; {  this.token = data['data'].token;  this.successMessage = 'Login avvenuto correttamente';  this.loading = false;  this.show = true;  });    }  } }; lt;/scriptgt;  lt;!-- Add "scoped" attribute to limit CSS to this component only --gt; lt;style scopedgt; h3 {  margin: 40px 0 0; } ul {  list-style-type: none;  padding: 0; } li {  display: inline-block;  margin: 0 10px; } a {  color: #42b983; } lt;/stylegt;   

Прежде всего, у вас есть вызов api в созданном цикле жизненного цикла, и вы хотите привязать вызов api к кнопке, нажатой в вашей форме. Я также не вижу никаких моделей в вашем объекте данных. Вы неправильно используете api выборки, позвольте мне объяснить:

Шаги:

1. Настройте правильную разметку для формы
2. Создайте объект пользователя с email помощью ключей password и поместите его в свой объект данных.
3. При использовании submit.prevent вам нужно будет добавить кнопку в форму с типом submit
4. Создайте функцию в объекте методы Vuejs и добавьте ее submit.prevent в свою форму

Вот пример с тестовым api:

 const template = ` lt;divgt;  lt;form class="login-form" @submit.prevent="doLogin"gt;  lt;div class="form-field"gt;  lt;input type="text" placeholder="Email" v-model="user.email" /gt;  lt;/divgt;  lt;div class="form-field"gt;  lt;input type="password" placeholder="Wachtwoord" v-model="user.password" /gt;  lt;/divgt;  lt;div class="form-action"gt;  lt;button class="login-btn" type="submit"gt;Submitlt;/buttongt;  lt;/divgt; lt;/formgt;  lt;span v-if="loading amp;amp; !show"gt;Loading...lt;/spangt; lt;div v-else-if="show"gt; lt;pgt;Login success: {{ successMessage }}lt;/pgt; lt;pgt;Token: {{ token }} lt;/pgt; lt;/divgt; lt;/divgt; `;  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 =gt; {  const { token } = data;  this.token = token;  this.successMessage = 'Yes sir!';  this.loading = false;  this.show = true;  });    }  } };  new Vue({  el: '#root',  components: { LoginForm },  template: `lt;LoginForm /gt;` }) 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"gt;lt;/scriptgt; lt;div id="root"gt;lt;/divgt;