重構商城App項目——知識總結

參考文檔：mint UI ，swiper

---

1. index.html 標籤解釋

• <link rel="dns-prefetch" href="#"> DNS預解析，能夠減小圖片的解析時間。

2. Vue 相關知識

• vue實例掛載點，不能是 body 或 html ， 因此要加一層容器，包裹想要掛載的地方。
• 單vue文件，template 是必需的並且只能有一個根節點，style 能夠有多個。
• Vue組件庫：自行查找

Mint UI 對比 Element UI
複製代碼

---

首頁

1. Mint UI ：基於 Vue.js 的移動端組件庫

- 1. npm安裝
    $ npm i mint-ui -S
    
- 2. 引入 Mint UI
    - 1. 完整引入
    - 2. 按需引入
         1.須要安裝babel-plugin-component：
         $ npm install babel-plugin-component -D
         2.而後，將 .babelrc 修改成：
             {
              "presets": [
                ["es2015", { "modules": false }]
              ],
              "plugins": [
                  // 主要是這部分 , 實際使用時，大括號外的中括號需去掉（代碼複製於官網）
                  ["component", [  
                    {
                      "libraryName": "mint-ui",
                      "style": true
                    }
                  ]]
                  // 到這部分
              ]
            }
            
- 3. 選擇想要引入的組件按指令操做便可。
複製代碼

• 觸底加載更多數據———Infinite scroll：無限滾動指令

- 1. 引入
    import { InfiniteScroll } from 'mint-ui';
    Vue.use(InfiniteScroll);
    
- 2. 例子
    爲 HTML 元素添加 v-infinite-scroll 指令便可使用無限滾動。滾動該元素，
    當其底部與被滾動元素底部的距離小於給定的閾值（經過 infinite-scroll-distance 設置）時，
    綁定到 v-infinite-scroll 指令的方法就會被觸發。
    
    <ul
      v-infinite-scroll="getLists"        // 綁定到 v-infinite-scroll 指令的方法就會被觸發
      infinite-scroll-disabled="loading"  // 若爲真，則無限滾動不會被觸發       
      infinite-scroll-distance="10">      // 觸發加載方法的滾動距離閾值(像素)   
      <li v-for="item in list">{{ item }}</li>
    </ul>
    
- 3. bug: 觸發綁定的方法期間，若再次觸發，則仍會觸發該方法，這是不合理的。
    設置loading值：在觸發方法時先設置loading=true ，方法完成後設置loading=false
    
- 4. bug: 每次觸發方法只刷新數據，原數據被覆蓋，這不符合商品列表的指望。
    獲得當前的商品列表(curLists)時，判斷商品列表(lists)是否爲空：
        空則直接賦值 this.lists = curLists
        非空則使用數組拼接方法鏈接數據 this.lists = this.lists.concat(curLists) 
    
複製代碼

2. bottom-nav

- 1. 將 bottom-nav 單獨拿出來，放在新建的 Foot.vue 中， 而且抽出對應的css 放入style中。
- 2. 點擊底部按鈕時，要完成兩個任務
    - 1. 點擊按鈕，切換頁面，切換樣式
        - 1. 將四個按鈕使用v-for渲染，let navConfig = []，存放四個按鈕的 name，href，icon
        - 2. 使用 index === curIndex 法渲染 active 效果。
        發現：切換頁面後，渲染的效果失效
        方法: 切換頁面時傳遞index參數: location.href = `${list.href}?index=${index}`
              渲染界面時，解析href獲得index: 
                let {index} = qs.parse(location.search.substr(1))
                curIndex: parseInt(index) || 0 
     
     須要引入 qs ，解析 location 。
複製代碼

3. swiper

將 swiper-container 拿出來，放在新建的 Swipe.vue 中

使用swiper組件：
- 1. 下載並安裝swiper
     $ npm install swiper
     
- 2. 分析：除首頁須要輪播，商品詳情頁須要輪播，因此把輪播組件單獨拿出來，
     使用的時候只須要傳遞不一樣的數據(參數)便可。
     
- 3. 在 index.html 中引入 Swipe
    - 1. 在 api.js 中加入 輪播圖的路徑：  banner: '/index/banner'
    - 2. 在 index.js 的 methods 中 寫 getBanner 方法，而且放入 created 中
    - 3. 在 index.js 中引入 Swipe.vue ，並放入 components 中
    - 4. 在 index.html 中對應位置寫<Swipe></Swipe>
    
- 4. 把數據傳遞給給組件，讓組件進行渲染 ———— props（Vue-組件-prop 查看 props的數組形式、對象形式）
    - 1. 在 Swipe.vue 中 寫props對象形式（對象形式能進行 prop驗證 ）
        對象形式：
          props:{
              lists:{
                type: 指定輸出類型
                required: true時,必須符合 type 的類型  
              }
          }
    - 2. 當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制檯的警告。
         注意那些 prop 會在一個組件實例建立以前進行驗證，因此實例的屬性 
         (如 data、computed 等) 在 default 或 validator 函數中是不可用的。
         
- 5. 使用 Swiper 組件時，要遵照人家給出的頁面格式：
        <!-- Slider main container 滑塊主容器 -->
        <div class="swiper-container">
            <!-- Additional required wrapper 附加所需包裝器 -->
            <div class="swiper-wrapper">
                <!-- Slides 幻燈片 -->
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                ...
            </div>
            <!-- If we need pagination 若是咱們須要分頁 -->
            <div class="swiper-pagination"></div>
        
            <!-- If we need navigation buttons 若是咱們須要導航按鈕 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        
            <!-- If we need scrollbar 若是咱們須要滾動條 -->
            <div class="swiper-scrollbar"></div>
        </div>
     因此按照此格式，在 index.html-Swpie 中補充 class ，加入分頁器
     
- 6. v-for 列表渲染 swiper-slide ， 而且動態綁定url、img

- 7. swiper是對dom節點進行操做的，dom節點何時生成？
     生命週期：mounted
     - 1. index.html 中
          <Swipe :lists="bannerLists" v-if="bannerLists"></Swipe>
          只有得到了數據，纔會渲染
     - 2. Swipe.vue 中 (此時不須要限制 lists 的類型)
          對數據進行監聽
          created() {
            // console.log('created: ',document.querySelectorAll(".swiper-slide"));
          },
          mounted() {
            // console.log('mounted: ',document.querySelectorAll(".swiper-slide"));
          },
          watch: {
            lists(value, oldValue) {
              console.log('value, oldValue: ',value, oldValue);
              console.log('before nextTick: ',document.querySelectorAll(".swiper-slide"));
              this.$nextTick(() => {
                console.log('after nextTick: ',document.querySelectorAll(".swiper-slide"));
              });
            }
          }
          結果：
            created:  NodeList []
            mounted:  NodeList []
            value, oldValue:  (3) [{…}, {…}, {…}, __ob__: Observer] null
            before nextTick:  NodeList []
            after nextTick:  
            NodeList(3) [div.swp-page.swiper-slide, div.swp-page.swiper-slide, div.swp-page.swiper-slide]
            
    注意：項目中選擇了 1 方法，如下代碼都是按照 1 方法進行。
    
- 8. 引入 Swiper ，並引入 Swiper 的樣式：
        import Swiper from 'swiper'
        import 'swiper/dist/css/swiper.css'
        
- 9. 配置Swiper（參考官方文檔）
     在mounted中：
            var mySwiper = new Swiper(".swiper-container", {
              direction: "horizontal", // 水平方向輪播
              loop: true,              // 設置爲true以啓用連續循環模式
              pagination: {            // 分頁器
                el: ".swiper-pagination"
              },
              autoplay: {              // 自動輪播，延遲5s
                delay: 5000
              }
            });
複製代碼

---

分類頁

1. 基礎處理

- 1. 將 category.html category.css 放入新建的 pages/category 文件夾，
     並建立 category.js ，引入響應的css，引入Vue、axios、Foot、url 。
     並將 category.html 中Foot對應的部分刪除，切換爲   <Foot></Foot>
     用div(id=app) 包裹整個頁面，用來掛載vue實例
     
- 2. 找到右邊商品列表的容器：class="main-content",在對應的css上寫   overflow-y: scroll;
     overflow：定義當一個元素的內容太大而沒法適應 塊級格式化上下文 時候該作什麼
               是 overflow-x、overflow-y 的簡寫
            屬性：
             - 1. visible：默認值。內容不會被修剪，能夠呈如今元素框以外。
             - 2. hidden：若是須要，內容將被剪裁以適合填充框。 不提供滾動條。
             - 3. scroll：若是須要，內容將被剪裁以適合填充框，瀏覽器一直顯示滾動條
             - 4. auto：取決於用戶代理。若是內容適合填充框內部，則它看起來與可見內容相同，
                        但仍會創建新的塊格式化上下文。 若是內容溢出，桌面瀏覽器會提供滾動條。
            注意：
             - 1. 除visible外的值均會建立一個新的快格式化上下文。
             - 2. 爲使 overflow 有效果，塊級容器必須有一個指定的高度（height或者max-height）
                  或者將white-space設置爲nowrap。
             - 3. 設置一個軸爲visible（默認值），同時設置另外一個軸爲不一樣的值，會致使設置visible
                  的軸的行爲會變成auto。
             - 4. 即便將 overflow 設置爲 hidden ，也可使用JavaScript Element.scrollTop
                  屬性來滾動HTML元素。
複製代碼

2. 頁面分析

- 1. 側邊的一級分類的數據也是得到的，
    data-cid="xx" 是什麼意思？
複製代碼

3. 得到 一級分類 的數據並渲染

- 1. 在 api.js 中 url寫入：topList: '/category/topList'
- 2. 在 category.js 中 建立vue實例,並綁定在 div(app) 上，
     data 中聲明    topLists: null
- 3. methods 中寫 getTopList(){axios.get(url.topList).then(res => {this.topLists = res.data.lists})}
     並在 created 中 調用該方法 created() { this.getTopList() }
- 4. 在 category.html 中
     找到一級分類，在 li 上使用v-for進行列表渲染 v-for="(list,index) in topLists"
     
     此處有兩個問題：
     1. 點擊不一樣的li，渲染不一樣的標籤（實際上只有綜合排行爲一種，剩下的分類爲一種）
     - 1. category.html 中
          在 <li> 上綁定事件    @click="getSubList(index,list.id)"
          在綜合排行對應的div上寫 v-show="topIndex===0" （後更改成v-if）
          在其他分類對應的div上寫 v-show="topIndex>0"  （後更改成v-if）
     - 2. category.js 中
          data:{ topIndex: 0 // 此處按照下標進行區分，綜合排行爲0，其他均大於0 }
          methods: {  getSubList(index,id) { this.topIndex = index}  }
     2. 點擊不一樣的li，切換 class"active"（焦點狀態切換問題）
     - 1. 在<li>上添加  :class="{active:index===topIndex}"
          由 getSubList() 方法可知，點擊哪一個li就會使得topIndex等於被點擊li的index
          當點擊 li 時，就會使得條件成立，渲染clas"active"
          此時其他的未被點擊的 li 的index是不等於topIndex的
          因此就實現了切換 active 的需求。
複製代碼

4. 得到 二級分類(綜合排行、普通分類) 的數據並渲染

- 1. 在 api.js 中 url寫入：  
        subList:'/category/subList',
        rank:'/category/rank',
- 2. 在 category.js 中 建立vue實例,並綁定在 div(app) 上，
     data 中聲明    topLists: null
- 3. methods 中寫 getTopList(){axios.get(url.topList).then(res => {this.topLists = res.data.lists})}
     並在 created 中 調用該方法 created() { this.getTopList() }
- 4. 在 category.html 中
     找到對應的 li 使用 v-for 進行渲染，並對數據進行替換
- 5. 問題：subData、rankData 初始值爲null，再頁面剛打開時就渲染會報錯。
     辦法：在對應的 ul 上寫 v-if="subData" 或者 v-if="rankData"
           當獲取數據後，才渲染。
- 6. 將價格變爲帶兩位小數的浮點數：
     使用filter，結合toFixed()方法便可。
複製代碼

5. 問題補充：null 和 undefined

複製代碼

---

列表頁

1. sku
2. 爲何data要return數據：在單vue頁面下，多個組件可能會共享數據，爲了保持數據的獨有性，就把數據return出去。
3. qs: querything 是一個增長了一些安全性的查詢字符串解析和序列化字符串的庫。

qs.parse()
複製代碼

4. 點擊熱門品牌、熱門分類下的 item ，會跳轉到 search.html ，且傳遞點擊 tiem 的 id 和 name

location.href = `search.html?keyword=${list.name}&cate_id=${list.id}`
複製代碼

5. search 中

search.js 中
- 1. getSearchList(){} 發請求獲取searchLIst
- 2. let { keyword, id } = qs.parse(location.search.substr(1)) 接收 keyword，id

search.html 中
- 1. input中接收keyword：`:value="keyword"`
- 2. 對應 li 上v-for 渲染數據。
複製代碼

6. 發現：foot組件複用，formatePrice 方法複用，因此引入 mixin.js

- 1. src/modules/js/mixin.js 中
    import Foot from '@/components/Foot.vue'
    let mixin = {
      filters: {
        formatePrice(value) {
          return value.toFixed(2)
        }
      },
      components: {
        Foot
      }
    }
    export default mixin
    
    將引入 foot 、formatePrice 方法均放入 mixin.js 中
- 2. 在須要引入 mixin.js 的文件中
     import mixin from 'js/mixin.js'
    new Vue({
        ···
        mixins:[mixin]
        ···
    })
複製代碼

7. 回到頂部

使用第三方庫：velocity
複製代碼

---

過渡

1. 過渡的概念
2. 在哪些場景使用過渡
3. 怎麼用
4. 涉及到的知識點

1. 組件的封裝
2. slot--組件
3. 組件的通信

1. 父子
2. 兄弟
3. vuex
4. slot

5. fullpage

1. 靜態數據：mounted
2. 異步數據：this.$nextTick

---

詳情頁

1. 入口、數據獲取和渲染
2. 商品詳情和本店成交
3. 選擇規格彈框：過渡效果、數據增減
4. 加入購物車：購物車按鈕顯示、信息提示

知識點：

1. v-cloak
2. v-html
3. 過渡效果