vue仿貓眼電影webapp

非常記得你發表於2019-03-18

總算是完成了自己的第一個開源小專案！！

前言

個人多次想嘗試做一個完整的vue專案，但無奈基礎差，水平有限，一直沒能夠實現。最近又萌生了這個念頭，於是選擇貓眼電影作為“下手目標”，斷斷續續用了幾個星期，利用vue全家桶完成了此專案。 UI介面並非完全和貓眼電影移動版一樣，而是結合了原生貓眼app，對部分介面作了修改（個人對UI審美有點強迫症）。

說明

資料介面來源貓眼電影，專案不會被用於作商業用途。

效果演示（請用chrome手機模式預覽）

小貓電影

gihub倉庫地址

完成功能

模擬登陸攔截、登出功能
城市搜尋、選取
個人定位
電影收藏、打分、視訊預告
電影詳情、影院詳情
電影、影院搜尋
影院條件過濾
影院選座、選座推薦
模擬購票
歷史訂單

技術棧

專案沒有使用UI庫,而是簡單封裝了幾個基礎常用元件：alert+ toast + loading

vue2.5 + vue-router + vuex + webpack + es6/es7 + sass + svg

介面資料

專案使用了貓眼電影的兩個介面

電影：https://m.maoyan.com/ajax 票房：https://box.maoyan.com/promovie/api/box

本地開發環境使用proxy設定代理

    // 配置多個代理
    proxy: {
      "/movie": {
        target: "https://m.maoyan.com",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "/movie": ''
        }
      },
      "/boxOffice": {
        target: "https://box.maoyan.com/promovie/api/box",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          "/boxOffice": ''
        }
      }
    }
    
    //部分請求介面
    
        /* 影院詳情 */
    export const getCinemaDetail = (cinemaId) => {
      return http.fetchGet(`/movie/ajax/cinemaDetail`, {
        cinemaId
      })
    }
    
    /* 票房 */
    export const getBoxOffice = (beginDate) => {
      return http.fetchGet(`/boxOffice/second.json`, {
        beginDate
      })
    }
複製程式碼

線上環境使用nginx作反向代理，解決跨域問題

專案執行

//vue-cli版本是 3.0

npm i

npm run serve
複製程式碼

專案細節

骨架屏

在首頁載入資料之前，會有一段空白時間，為了增強應用體驗效果，一般使用loading載入圖示，也可以用骨架屏。骨架屏是在網路請求較慢時，提供基礎佔位，當資料載入完成，恢復資料展示。這樣給使用者一種很自然的過渡，不會造成頁面長時間白屏或者閃爍等情況。骨架屏實現起來有多種方法，我是使用了vue-content-loader這一外掛，它可以實現線上編輯，實現起來更加簡單。

vue-content-loader

自動生成骨架屏

為vue專案新增骨架屏