提姆寫程式

0%

Vue 筆記 - 溜小孩好去處實作

發表於 分類於 Disqus：
台北市公園資料串接實作

park

目前工作在台北，住也在台北，目前小孩正值活蹦亂跳、電力充沛的階段，有小孩的爸媽都知道，假日最重要的就是要帶小孩出門放電，所以為了找尋能放電又不會一直在相同的公園，小孩膩了也是很麻煩的事情，所以就想找一下台北市到底有那些公園可以去巡禮，就試著做了這個 side project 給自己使用。

找台北市公園 API

這是我找到的 data，https://github.com/hsuchihting/taipei_park_data/blob/master/db.json
資料平台當初下載的原始檔案是 CSV，本想嘗試自己轉成遠端 API，無奈會有 CROS 狀況，只好整包先下載下來使用。

確認資料內容與設定需求

看完 API 後我決定只要出現以下幾個條件：

  1. 一個選擇欄位，用管理單位做分類。
  2. 一個篩選欄位，在輸入路名可以找到比對的資料。
  3. 卡片形式呈現，有公園名稱，公園地點跟交通指南。
    公園管理處的欄位是：pm_unit。
    可以看到資料的欄位是：pm_name、pm_location、pm_transit。

template 架構

分成兩個區塊，選單與卡片

選單與搜尋欄位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<section>
     <div class="header">
       <div class="container">
         <h1 class="title">溜小孩好去處</h1>
         <p class="subTitle">台北市共有 {{parkData.length}} 座公園</p>
         <p class="version">版本 v2.0</p>
         <div class="inputGroup">
           <select class="select" v-model="selectUnit">
             <option value="null" disabled>-- 請選擇公園管理處 --</option>
             <option :value="park" v-for="park in parkMangement">{{park}}
             </option>
           </select>

           <input type="search" class="search" placeholder="請輸入鄰近公園的路名，例：永吉路"
             v-model.trim="search">

         </div>

       </div>
   </section>

卡片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<section>
  <div class="cards">
    <div class="cardBody" v-for="item in parkData">
      <div class="parkList">
        <h2 class="parkName">{{item.pm_name}}</h2>
        <hr />
        <p><span class="itemName"> 公園地點：</span> {{item.pm_location}}</p>
        <p>
          <span class="itemName">交通指南：</span>
          {{item.pm_transit}}
        </p>
      </div>
    </div>
  </div>
</section>

JavaScript

說明：

  1. 資料我用一個變數 originData 包裝，放在 Vue 實體上方，因資料太長，本頁就不呈現，僅擷取一筆資料內容當參考。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
       0: "157",
       pm_name: "七虎公園",
       pm_overview:
         "　　為位於育仁路上、薇閣小學及七虎泳池之間的小公園，於83，84年間開闢，面積10,098平方公尺，園內設施包括兒童遊樂設施及簡易涼亭各1座，植栽部份則有蜘蛛百合、洋紫荊等，公園中心樟樹群落綠意盎然，臨溪畔近來種有吉野櫻數株，3月期間櫻粉與林綠相互襯托，令人賞心悅目，為薇閣小學及鄰近住戶共享的1處優良綠蔭遊憩場地。 ",
       pm_lon: "25.136499405",
       pm_lat: "121.50205994",
       pm_unit: "陽明山公園管理所",
       pm_construction: "1994",
       pm_location: "育仁路108號（薇閣小學旁）",
       pm_area: "10098",
       pm_opening_s: "00：00",
       pm_opening_e: "24：00",
       pm_libie: "長安里",
       pm_phone: "",
       pm_sports: "游泳池",
       pm_recreation: "組合遊具",
       pm_service: "涼亭*1",
       pm_other: "",
       pm_transit:
         "北投公園站:216區, 218, 218區, 218直達車, 223, 266, 602,230,小6, 小7,小25,小26,小9,市民小巴2 ",
       pm_name_eng: "Qihu Park",
       pm_ecology: "",
     },
  1. search 變數一開始為空值。
  2. selectUnit 讓一開始為沒有選擇。
  3. parkManagement 為選單內容，也就是公園管理處。
  4. 使用 parkList 方法存放要計算的內容。
  5. 變數 parkList 的值是資料 originData 去做篩選。
  6. 當我選單的值等於資料的 pm_unit 欄位，以及搜尋文字內容是空值或是跟 pm_location 的值一樣的時候，就回傳值到 parkData 變數中。
  7. 透過 watch 檢查 search 跟 selectUnit 資料變動狀態。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
let vm = new Vue({
  el: "#app",
  data: {
    parkData: originData,
    search: "",
    selectUnit: null,
    parkManagement: [
      "南港公園管理所",
      "陽明山公園管理所",
      "花卉試驗中心",
      "園藝工程隊(東區分隊)",
      "園藝工程隊(西區分隊)",
      "園藝工程隊(南區分隊)",
      "園藝工程隊(北區分隊)",
      "園藝管理所",
      "青年公園管理所",
    ],
  },
  watch: {
    search() {
      this.parkList();
    },
    selectUnit() {
      this.parkList();
    },
  },
  methods: {
    parkList() {
      this.parkData = originData.filter((item) => {
        return (
          this.selectUnit === item.pm_unit &&
          (this.search === "" || item.pm_location.indexOf(this.search) >= 0)
        ); //找得到
      });
    },
  },
});

Demo

頁面連結：https://hsuchihting.github.io/taipei_park_vue/
放電小孩公園成就陸續解鎖中。