vue中的form method="post"不能POST

Question

我正在尝试创建一个网站，让用户可以使用给定的密码和时间段预订座位。我制作了一个表格，用户应该输入密码和他们的名字，然后提交表格进行预订。我遇到的问题是，如果我在表单中使用 get 方法，它会添加一个 ?到我不想要的 URL。单击按钮后，它应该只是在数据库中创建一个条目并将用户重定向到 HomeView。绕过？问题我想在表单中使用 post 方法，但如果我这样做，我会不断收到错误“Cannot POST /”。我搜索了很多地方，显然我必须在某个地方指定帖子，但是在哪里？

<form @submit="reserve" method="post" action="">
   <fieldset>
    <div class="mainmiddle">
      <a id="Header">Wählen Sie Ihre Einstellungen für die Reservierung:</a>
      <div id="settings" v-bind:key="this.$seat.seat.seatNumber">
        <a id="seatNumber">Sitz-Nummer: {{ this.seatNumber }}</a><br>
        <div id="time">
          <label for="daySuggestion">Tag:</label>&nbsp;
          <input v-on:click="setMinDateToday" v-model="dateOfReservation" type="date" id="daySuggestion">
          <label for="fromSuggestion">Von:</label>&nbsp;
          <input v-model="startTimeOfReservation" type="time" id="fromSuggestion">
          <label for="untilSuggestion">Bis:</label>&nbsp;
          <input v-model="endTimeOfReservation" type="time" id="untilSuggestion">
        </div>
        <input id="password" placeholder="Passwort" type="password" v-model="password" v-on:keyup="validatePassword" required/><br>
        <div id="passwordDiv">
          <input id="passwordAgain" placeholder="Passwort wiederholen" type="password" v-model="passwordAgain" v-on:keyup="validatePassword" required/>
          <span id='message'></span>
          <input id="showPassword" type="checkbox" v-on:click="showPassword"/>&nbsp; Passwort anzeigen
        </div>
        <label id="anonymLabel">Anonym reservieren:</label>
        <input id="anonym" type="checkbox" v-model="anonym"><br>
        <input id="nameReservingPerson" type="text" placeholder="Name..." v-model="nameReservingPerson" required/>

      </div>

      <div id="footer">
        <button type="submit" class="bottomButtons">Jetzt Reservieren</button>
        <button class="bottomButtons" v-on:click="goPrev">Abbrechen</button>
      </div>
    </div>
  </fieldset>
</form>

这是我在提交表单时调用的保留方法

reserve() {
      axios.post(`${config.apiBaseUrl}/seat/reserve/`,
          {
            seatNumber: this.seatNumber,
            password: this.password,
            anonym: this.anonym,
            nameReservingPerson: this.nameReservingPerson,
            reservedAt: {
              fromDate: Date.parse(this.dateOfReservation +" "+ this.startTimeOfReservation),
              untilDate: Date.parse(this.dateOfReservation +" "+ this.endTimeOfReservation),
            }
          },
          {
            headers: {
              'Content-Type': 'application/json',
              'Character-Encoding': 'utf-8',
            }
          }
      )
          .then(() => {
            alert("Der Platz wurde Erfolgreich Reserviert!")
            this.$router.push({path: '/'});
          })
          .catch(() => {
            alert("Der Platz wurde !NICHT! Erfolgreich Reserviert!")
          });
    },

一切都已经在表单中使用 get 方法了，但我无法绕过 ?问题。如何让 post 方法表单起作用？

Answer 1

您正在使用默认的 HTML 表单提交。 POST 方法用于将表单数据发送到服务器。
当您使用 JavaScript，尤其是 Axios 时，这些都不需要。

提交处理程序采用 event 参数，您应该使用它来阻止自动 HTML 提交：

event.preventDefault()

之后，您可以使用任何 HTTP 库来发挥自己的作用。