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

有朋友问我为什么我的进度这么缓慢...
殊不知，我每天都只有一个小时可以做额外自主练习阿QQ

这週接续着做Rooms资料处理的部分啰~
立马开始!!

---

#Step 12

首先, 上週漏做了一段xD
RoomCard 有上下外距, 这个一样是自己算出来的
来加上然后结束它~

<div class="d-flex justify-center roomcardmain">  //RoomCard</div>

.roomcardmain {  margin-top: 65px;  margin-bottom: 40px;}

美多了~

#Step 13

接着本週正题开始~
首先看一下 F2E 提供的API, 要先知道它会传哪些栏位出来给我们接
顺带一提, 要用它的API要先注册帐号喔!!! 注册方式也在同个页面~

API页面直接滑到最后的 #[GET] 取得所有房型 部分

会看到其中有个 item阵列, 其中包含:

id: 房间编号, 房间的唯一值, 要取得房间的详细资讯必须使用它imageUrl: 图片网址, 房间的代表图, 只有一张normalDayPrice(integer): 平日价格holidayPrice(integer): 假日价格name: 房间名称

看完之后应该会发现, 这栏位根本不够阿
原来剩下的栏位都在另一个API- [GET] 单一房型细节
不过这边 F2E 的範例就比较简单, 实际传回来的栏位多很多
放上我的Postman截图

其中包含:

id: 房间编号, 房间的唯一值name: 房间名称imageUrl(array): 图片网址, 有多张normalDayPrice(integer): 平日价格holidayPrice(integer): 假日价格descriptionShort(object): 房间简单说明GuestMin(integer): 最少人数GuestMax(integer): 最多人数Bed(array): 床型Private-Bath(integer): 推测是浴室数量(?)Footage(integer): 这个我真的不知道xD, 推测是设计师做的"大小"的栏位description: 房间详细说明checkInAndOut(object): 入住退房时间checkInEarly: 最早入住时间checkInLate: 最晚入住时间checkOut: 退房时间amenities(object): 设施设备Wi-Fi(boolean): wifi(xD)Breakfast(boolean): 早餐Mini-Bar(boolean): 迷你吧(xD)Room-Service(boolean): 客房服务Television(boolean): 电视Air-Conditioner(boolean): 冷气Refrigerator(boolean): 冰箱Sofa(boolean): 沙发Great-View(boolean): 景观Smoke-Free(boolean): 禁止吸菸Child-Friendly(boolean): 适合儿童Pet-Friendly(boolean): 可带宠物

有Google翻译真好

看完之后大致上就可以了解哪个栏位必须放在RoomCard的哪个位置了(吧xD)

#Step 14

接着在开始ajax抓资料之前, 要先来安装vue版的ajax - axios:

npm install axios

安装完成之后, 开启 main.js 引用它:

//main.js//加这两行import axios from 'axios'Vue.prototype.$http = axios

教学一下使用方式, 在要使用的地方放入以下这段, 把必填资讯(例如method、headers等等)填好就可以啰!!!

this.$http(  {    method: "", //填http传递方式 get/post/put...    headers: {}, //F2E的API要求必须填这个, 详见刚才的API使用方式    url: "", //填目标的网址  }).then((res) => {    //存取成功时做什么事  }).catch((err) => {    //存取错误时做什么事  });

#Step 15

预计抓资料的流程会是

从 Rooms 取得 所有房型 的资料把其中的 id 及 imageUrl 传入 RoomCard再由 RoomCard 利用传入的 id 取得 单一房型 的详细资料来呈现

所以来开启久违的 Rooms 吧~
先加上 created hook，準备把[取得 所有房型]的动作
另外 data 里面可以先加个 item 空阵列, 等等资料取回来要放在这:

export default {  ...,  created() {    ...  },  data: () => ({    items: [],  }),};

hook内就可以放刚才的 axios method 啰~ 这里都假设能正常取得资料(通常都要写判断~但是我懒xD):

this.$http({  method: "get",  headers: {    Accept: "application/json",    Authorization:      "Bearer 这边填你自己的token喔",  },  url: "https://challenge.thef2e.com/api/thef2e2019/stage6/rooms",})  .then((res) => {    //成功取得资料时, 把items指定给data.items    this.items = res.data.items;   })  .catch((err) => {    console.log(err);  });

完成后可以开启 chrome 的 Vue工具看看

太蚌了资料都有进来
如此就完成取得房型资料了~

#Step 16

原本的v-for就可以改掉啰~

<RoomCard class="col-4" v-for="item in items" :key="item.id" />

再把 id 和 imageUrl 传入 RoomCard :

<RoomCard  class="col-4"  v-for="item in items"  :key="item.id"  :uid="item.id"  :imageUrl="item.imageUrl"/>

然后 Rooms 继续封印xD

#Step 17

回到 RoomCard , 要来用 props 接收 Rooms 传进来的资料
data 加上 room 物件, 等等资料取回来要放在这:

export default {  name: "RoomCard",  props: ["uid", "imageUrl"],  data: () => ({    room: {},  }),};

接着跟 Step 15 一样, 加上 created hook, 里面放 axios method:

created() {  this.$http({    method: "get",    headers: {      Accept: "application/json",      Authorization:        "Bearer 这边填你自己的token喔",    },    url:      "https://challenge.thef2e.com/api/thef2e2019/stage6/room/" + this.uid,  })    .then((res) => {      //成功取得资料时, 把room指定给data.room      this.room = res.data.room;    })    .catch((err) => {      console.log(err);    });},

完成后一样开启 chrome 的 Vue工具来检查

资料确实有抓到呢!!!

#Step 18

再来我们就可以一一的把原本在画面上放的假资料替换掉啰~
这里没什么技巧, 就是慢慢对应替换而已
有一些需要处理的资料, 可以直接在花括号内处理
例如人数:

<div>人数</div> <div>   <!--如果descriptionShort存在就判断GuestMax与GuestMin是否相等-->   <!--相等就放其中一个就好, 不相等就放"GuestMin~GuestMax"-->   {{     room.descriptionShort       ? room.descriptionShort.GuestMax ===         room.descriptionShort.GuestMin         ? room.descriptionShort.GuestMin         : `${room.descriptionShort.GuestMin}~${room.descriptionShort.GuestMax}`       : ""   }} </div>

或是床:

<div>床</div><div>  <!--Array to string中间会自动加逗号-->  {{ room.descriptionShort ? room.descriptionShort.Bed.toString() : "" }}</div> 

也可以写在 computed 里面处理, 例如设施设备:
这边很可惜的是就算用迴圈写, 还是必须对应中文名称...势必要写一长串code

computed: {  roomAmenities() {    let amenities = [];    if (this.room.amenities) {      //如果设施设备为true就塞到阵列      if (this.room.amenities["Wi-Fi"]) {        amenities.push(" wifi");      }      if (this.room.amenities["Breakfast"]) {        amenities.push(" 早餐");      }      if (this.room.amenities["Mini-Bar"]) {        amenities.push(" 小吧檯");      }      if (this.room.amenities["Room-Service"]) {        amenities.push(" 客房服务");      }      if (this.room.amenities["Television"]) {        amenities.push(" 电视");      }      if (this.room.amenities["Air-Conditioner"]) {        amenities.push(" 冷气");      }      if (this.room.amenities["Refrigerator"]) {        amenities.push(" 冰箱");      }      if (this.room.amenities["Sofa"]) {        amenities.push(" 沙发");      }      if (this.room.amenities["Great-View"]) {        amenities.push(" 景观");      }      if (this.room.amenities["Smoke-Free"]) {        amenities.push(" 禁止吸烟");      }      if (this.room.amenities["Child-Friendly"]) {        amenities.push(" 适合儿童");      }      if (this.room.amenities["Pet-Friendly"]) {        amenities.push(" 可带宠物");      }    }    return amenities.toString();  },},

有更好解法请留言告诉我

对应完可以看到画面上已经都是真实资料啰~

---

首页就剩[Footer]啰~留给下次吧xD
附上这次进度的云端压缩档, 执行前记得先npm install

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