[鼠年全马] W35 - Vue出一个旅馆预约平台(9)

这周很重要~要来写旅馆预约平台的 [预约功能]

在F2E API中有提供一个 [POST] 预约房型 方法:

我们要利用它来做预约的功能

#呼叫API方式

呼叫时使用 POST 方法，在URL要带上要预约的房间编号
传入资料:

• name (string): 订房者名称
• tel (string): 订房者电话
• date[] (string): 订房日期，格式 Y-m-d

API回传结果包含

• 是否成功
• 房间详细资讯

回传後就可以将结果呈现在画面上
事不宜迟实作看看吧~

#Step 1

首先, 我们先帮预约的表单加上表单的前端验证
设计师没做这部分的图, 但就我所知, 几乎所有的表单都该有表单验证, 例如必填栏位却没填, 或是格式不对等等

验证的部分参考 Vuetify-Forms 表单组件

第一步，要在需要验证的组件加上验证规则(rules):

<v-text-field
  outlined
  dense
  color="#a5bb94"
  v-model="name"
  required
  :rules="[(v) => !!v || '姓名必填']"
></v-text-field>

这里放上姓名的验证规则，日期跟电话的规则也是一样的写法
只要栏位空的没资料就会跳提示出来罗!!

#Step 2

表单外层使用 v-form 包覆，并加上 ref 属性协助取得组件:

<v-form ref="form">
  //表单内容
</v-form>

下方的 [确定预定日期] 按钮加上点击事件:

<v-btn
  color="#496146"
  dark
  block
  height="63"
  class="mt-4"
  @click="submit"
  >确定预定日期
</v-btn>

事件中可以先加上表单验证方法 this.$refs.form.validate()，当点击按钮就会触发表单验证罗~

methods: {
  submit() {
    this.$refs.form.validate();
  },
},

#Step 3

在触发表单验证时，可以加上一个 if 判断:

submit() {
  if (this.$refs.form.validate()) {
    //表单验证通过之後要做的事
  }
},

当验证通过後就可以呼叫预约的API:

if (this.$refs.form.validate()) {
  this.$http({
    method: "POST",
    headers: {
      Accept: "application/json",
      /* 注意这里要用你的token */
      Authorization: "Bearer 你的token", 
      "Content-Type": "application/json",
    },
    /* 注意这里要加上要预约的房间编号 */
    url: `https://challenge.thef2e.com/api/thef2e2019/stage6/room/${this.roomid}`, 
    data: JSON.stringify({
      name: this.name,
      tel: this.phone,
      date: this.dates,
    }),
  })
    .then((res) => {
      //成功後要做的事
    })
    .catch((err) => {
      //错误时要做的事
    });
}

#Step 4

当API回传错误时会被 catch 到

这时候可以使用一些方法来回馈使用者，这里我使用 Vuetify-Alerts 组件来呈现:

<v-alert v-if="alertmsg" class="mt-2" dense outlined type="error">
  {{ alertmsg }}
</v-alert>

data 的部分也要加上:

data: () => ({ 
  ..., 
  alertmsg: "" 
}),

在 catch() 方法中把接收到的错误讯息放进 alertmsg:

.catch((err) => {
  this.alertmsg = err.response.data.message;
});

预约成功 时的事件先保留起来xD

附上这次进度的云端压缩档, 执行前记得先npm install

有需要改进或是任何意见建议欢迎下面留言~