「全端挑戰」後台介面與資料串接管理，Api爬梳nosql類資料

14th鐵人賽 typescript tailwindcss 爬梳nosql資料 api

K.o

2022-10-14 13:28:32

5335 瀏覽

分享至

鐵人賽 Day29自己做一個價值幾十萬的動態網站

第二十九課：後台介面與資料串接管理，Api爬梳nosql類資料 part2

前一天我們完成了簡單的資料串接，而今天我們要來實作進階的爬梳資料，利用了訂單中的各項資料id叫出我們想要的特定資料子項目。

Api利用資料id(primary key的概念)來爬梳nosql類資料

第一個要處理的是利用訂單中的hotelid來抓取我們的hotel.photos資料，所以這一步還算簡單，因為我們之前有寫好了/api/v1/hotels/find/:id 這個get Api來抓取個別飯店資料。
接下來這邊會有些小複雜與小困難，會盡量把觀念帶清楚，並ordersList這邊最難，所以如覺得一下子跳太快，可以先往下從下面的hotelsList資料帶入那邊開始。

export const gridOrderhotelsImage = (props) => {
  const { data, loading, error } = useFetch(`/hotels/find/${props.hotelId}`)
  return (
    <div>
      {
        loading ? <>載入中</> :
          <img
            className="rounded-xl h-20 min-w-20 ml-1 "
            src={data.photos?.[0]}
            alt="order-item"
          />
      }
    </div>
  )
};

上述函數可以客製化我們的"飯店照片"欄位

 {
    headerText: "飯店照片",
    template:gridOrderhotelsImage,
    textAlign: 'Center',
    width: '150',
  },

完成後會發現

useFetch這邊完成後，回到我們的orderData內繼續完成我們的資料爬梳。

這邊函數都完成後，剩下我們的headerText: '房型名稱'與headerText: '總價格'的函數撰寫

getRoomData Api，利用roomNumberId反向抓取room.title與room.price

所以先離開我們的admin folder回到Api folder並再製作一次Api的流程就會熟悉，所以直接打開我們的ApiRoutes與RoutesController的roomApi中。

這邊因為爬梳出來的資料是雙重Array[[], [], []]所以使用到了reduce函數與concat來串連成單一層Array，並在最下方使用到new Set來將重複的物件給刪除。這邊運用到的觀念是map()都會回傳Array

////配合admin
export const getRoomData = async (req, res, next) => {
    const roomNumberIdArray = req.params.id.split(",")
    try {
        const getRoomsList = await Promise.all(roomNumberIdArray.map(roomNumberId => {
            return Room.find({ "roomNumbers._id": roomNumberId })
        }))
        // 因為find()函數會回傳[]array值，Promise.all又會把他在組成新的Array所以是雙重Array
        //所以先將雙重Array變回單一層
        const RoomsList = getRoomsList.reduce((ArrayList, array)=>{
            return ArrayList.concat(array);
        });
        //用Set(array)來刪除重複的房間資料，但Set只能比較string數值不能讓object各自比較，
        //所以使用map先把obeject展開變成字串比較後在map改回物件。
        const result = [...new Set(RoomsList.map(item => JSON.stringify(item)))].map(item => JSON.parse(item));
        res.status(200).json(result)
    } catch (error) {
        next(errorMessage(500, "搜尋失敗，找不到其ID", error))
    }
}
///

成功後就可以去insomnia測試看看在，/:id 中夾帶兩個以上的id去搜尋看有沒有成功帶回父層資料，同時同一筆房間不會因為搜尋到兩次而出現兩次，示範url
/rooms/findroom/63173d7ee98b95cd1f04e546,63173d7ee98b95cd1f04e545

並這邊完成後，我們就可以回到admin folder之中把我們的這個新的Api用useFetch一樣帶到我們的訂單爬梳之中，來抓取我們的room.title與price，

並這邊map也可以做一下簡單得排版

延續這個概念處理totalPrice的計算，並可以利用到我們之前做過的datesCalculate，用它來計算住宿的總共夜晚數，來統計後來的房間價格。

這邊附上完整的OrderData.js的連接

附上完成連接day29.finish.version

結論

倒數第二天，今天實作了常見的資料爬梳問題，大多都是useFetch的概念延伸，並再一次針對新的需求寫新的一隻Api，這邊其實大家現在練習後都非常熟練了，將資料爬梳的再進階就是將資料數據化，導入更多的資料來測試，那到這邊其實一個完整且能管理的動態網站就成形了，接下來就是去開拓自己的業務，並行銷自己的網站，朝SEO等與推薦系統加上自動化管理等功能邁進。