iT邦幫忙

2021 iThome 鐵人賽

DAY 26
1
Modern Web

前端?後端?你早晚都要全端的,何不從現在開始?系列 第 26

[Day 26] 實作-節慶詳情頁面

今天來實作節慶詳情頁面!

昨天有講到我是用router-link query的方式把參數帶到URL中換頁,換頁的網址會如下:

http://localhost:8080/#/festivalDetail?actId=419

拿到了一個actId,那首先第一步就是先把這把資料從api中撈出來,

如果是做前後端分離的話,通常換頁、搜尋、傳輸參數這種事都會交給後端來做,避免前端要做太多的事,不過這不代表前端做不到!

剛好趁現在還沒做後端,就先來試試看怎麼在前端把資料撈出來,Let's go


撈取單筆節慶資料

首先一樣先把所有的資料放進data裡

資料集連結 節慶專區

data: () => ({
		actId: 0,     // 這個頁面的活動id
    actData: {},  // 這個頁面要用到的data
    festivalList: [...] // 所有節慶活動資料清單
})

撈取邏輯大致如下:

  1. this.$route.query.actId 取得活動id
  2. 迴圈搜尋 festivalList , 尋找 actId = 活動id的資料
  3. 把資料回存到 actData

實作如下:

methods: {
  getActData() {
    const actId = this.$route.query.actId;
    let selectedAct;
    this.festivalList.forEach((obj) => {
      if (obj.actId === parseInt(actId, 10)) { // 資料集中actId是字串,這邊先轉成整數
        selectedAct = obj; // 因為沒有辦法直接把obj存進this.actData,所以又多放一個參數來存
      }
    });
    this.actData = selectedAct;
  },
},

在頁面渲染時資料就需要先載入,不然user會看不到資料,所以在created()裡,要呼叫getActData()

詳情可參考 Vue 生命週期函數

created() {
   this.getActData();
},

資料撈取成功

簡單地把它渲染到前端看看

https://ithelp.ithome.com.tw/upload/images/20211008/20140745vnkOArXHXL.png


實作前端畫面

資料拿到了,接下來就是簡單的刻畫面過程惹,一樣先上UI圖

https://ithelp.ithome.com.tw/upload/images/20211008/20140745azAxD3CLeE.png

欄位處理

  1. 日期、地點欄位就照節慶活動那頁處理

  2. 主軸

    這個比較麻煩,因為他是六個欄位,可能都有值,也可能只有一個有值,所以要篩選一下

    我先把這六個欄位用解構賦值的方式取出來,再把有值的欄位存到字串中

    解構賦值 (Destructuring assignment) 語法是一種 JavaScript 運算式,可以把陣列或物件中的資料解開擷取成為獨立變數。參考文件

    getGrade() {
      const { grade1, grade2, grade3, grade4, grade5, grade6 } = this.actData;
      const gradeList = [grade1, grade2, grade3, grade4, grade5, grade6];
      let gradeResult = '';
      gradeList.forEach((grade) => {
        if (grade) {
          gradeResult += (`${grade} `);
        }
      });
      return gradeResult;
    },
    

程式碼

請參考 GitHub

組件 FestivalDetailPage.vue

成果

https://ithelp.ithome.com.tw/upload/images/20211008/20140745pFMmaygJTS.png

另外有調整一下RWD的部分,現在組件會依照頁面大小調整了


明天~~~~~ 感覺做得差不多了,可以接api了


上一篇
[Day 25] vue-router路由傳送參數 props
下一篇
[Day 27] 串接Api axios基本用法
系列文
前端?後端?你早晚都要全端的,何不從現在開始?31

尚未有邦友留言

立即登入留言