2.城市列表頁開發

• 功能點概述

  1. 頁面路由跳轉(Home -> City): 點選首頁城市選擇按鈕，即可跳轉至城市列表頁。
     
  2. 使用者可以在搜尋欄中可輸入資訊進行城市資訊的檢索，檢索結果以列表形式展現，選定城市後會進行首頁的路由跳轉。
     
  3. 使用者可以在熱門城市、字母城市列表中選擇城市資訊，選定城市後會進行首頁的路由跳轉。
     
  4. 使用者可以在城市列表頁右側的字母導航條中進行點選具體字母項進行準確的城市資訊定位，也可以通過上下拖動字母表導航條進行字母城市列表的隨動檢索。
     
  5. 使用者選定的城市資訊將通過記憶體進行儲存，並且選定的城市資訊將展示在首頁Header右側的城市資訊展示區域和城市列表頁的當前城市資訊展示區域中。

• TIPS：下文提到的分元件開發採取的形式為：增量式的記錄形式，針對元件中的程式碼改進進行額外說明。

• City：父元件 (增量式)

  • 路由配置

    1. 座標：router/index.js
       • 引入元件：import City from '@/pages/city/City'
       • 配置路由項
         { path: '/city', name: 'City', component: City }

  • 元件管理(Header、Search、List、Alphabet下文將對以下內容進行增量細節補充

    )

    • <template>

        <template>
        <div>
          <city-header></city-header>
          <city-search></city-search>
          <city-list></city-list>
          <city-alphabet></city-alphabet>
        </div>
        </template>		
      

    • <script>

      • 引入元件

          import axios from 'axios'
          import CityHeader from './components/Header.vue'
          import CitySearch from './components/Search.vue'
          import CityList from './components/List.vue'
          import CityAlphabet from './components/Alphabet.vue'
        

      • 宣告元件

          components: {
              CityHeader,
              CitySearch,
              CityList,
              CityAlphabet
          }
        

  • 元件互動(City、Home)

    路由跳轉：<router-link>

    這裡所提到的元件互動，對應: 功能點1

    從外層看是Home元件和City做了互動，實質上是Home的Header元件與City.Header元件發生了互動。即：頁面路由跳轉

    為了方便敘述，當前模組中提及其他模組時均採用：otherComponent.childComponent 形式標明

    • Home.Header

        <!-- router-link 元件實現路由跳轉 -->
        <router-link to="/city">
            <div class="header-right">
               // 內容省略
            </div>
        </router-link>
      

    • Header

        <router-link to="/">
          <div class="iconfont header-back">&#xe624;</div>
        </router-link>
      

    • 細節配置補充1：採用<router-link>標籤後，作用於DOM套上<a>標籤等同，此時內部<div>的樣式會無效，解決此類問題兩種方法。

      • style變更

        例如：上述Home.Header中<div class=“header-right”>，該類選擇器對應的樣式無效，可以在該元件的style區域進行樣式變更

      • <router-link>標籤中tag屬性

          有時候想要 <router-link> 渲染成某種標籤。
          例如 <li>：  
          <router-link to="/foo" tag="li">foo</router-link>
          <!-- 渲染結果 -->
          <li>foo</li>
        

        更改之後的標籤依然會沿用原樣式，根據class做樣式繫結、事件監聽等操作。

• 資料傳遞：通過axios傳送資料請求，該操作在父元件City中，統一進行資料請求和資料處理。

  • 資料存放

      	data() {
      	    return {
      	      cities: {},
      	      hotCities: [],
      	      // 儲存alphabet中的letter
      	      letter: ''
      	    }
          },
    

    • 資料獲取與處理

      • 請求方法：資料獲取

          getCityInfo() {
            axios.get('/api/city.json').then(
              this.handleGetCityInfoSucc
            )
          },
        

      • 成功回撥函式：資料處理

          handleGetCityInfoSucc(res) {
            res = res.data
            if (res.ret && res.data) {
              const data = res.data
              this.cities = data.cities
              this.hotCities = data.hotCities
            }
          },
        

      • 鉤子函式呼叫：元件渲染時自動呼叫

          mounted() {
         		this.getCityInfo()
        	}