摘要：從之前黃軼老師的高仿外賣開始接觸過這個滾動庫，感覺體驗感很好，用起來也比較順手，所以在后來的項目聯(lián)系中就一直在使用。

雖然在此之前已經(jīng)有類似的仿豆瓣電影的webapp,但或是開發(fā)的有些簡潔功能不太完善，或是體驗感覺得可以再完善下，所以自己摸索著對比豆瓣和豆瓣電影兩款app做了一下，初步滿足了自己的想法，經(jīng)過幾次完善基本不會出現(xiàn)bug，如果發(fā)現(xiàn)存在問題請告訴我修改，謝謝！

2017/7/27 一點小更新：發(fā)現(xiàn)只有建軍大業(yè)這部電影的詳情無法查看，原因是這部電影豆瓣返回的電影id存在問題，導(dǎo)致服務(wù)器返回 movie_not_found，點了這部電影發(fā)現(xiàn)報錯了整個人都不好了，解決方案就是看豆瓣會不會修復(fù)這個問題 :(

使用vue2.0仿豆瓣電影app，根據(jù)豆瓣電影api對功能作了適當修改

api來源自豆瓣官方api，詳情請戳豆瓣電影api

項目源碼：請戳 github

求star，如果對您有幫助，可以在github上點右上角 "Star" 支持一下 謝謝！ ^_^

豆瓣電影webapp

打開瀏覽器進入開發(fā)者模式，選擇移動端視口

chrome瀏覽器下的iphone5/6/6 plus體驗效果更佳

打開手機瀏覽器掃描下方二維碼或訪問上面的地址，推薦全屏模式下體驗

clone項目源碼

git clone https://github.com/buptsky/vue-douban-movie.git

安裝依賴

cd vue-douban-movie
npm install

運行

npm run dev

打開瀏覽器進入localhost:8000，在開發(fā)者工具的移動端模式下查看效果

node 6+ npm 4+

vue2.0 + vue-router + vuex：vue全家桶

axios：用于ajax請求

vue-lazyload：用于圖片懶加載

better-scroll：移動端滾動庫，優(yōu)化移動端滾動效果

webpack： 構(gòu)建工具

es6: 使用es6語法

stylus: css預(yù)處理

使用flex布局進行移動端適配，用eslint進行代碼規(guī)范檢查

使用localStorage存儲收藏的電影信息，影人信息，評論點贊信息

webpack + webpack-dev-server + http-proxy-middleware進行本地開發(fā)環(huán)境http請求轉(zhuǎn)發(fā)，實現(xiàn)跨域請求

線上使用express的http-proxy-middleware實現(xiàn)請求轉(zhuǎn)發(fā)

獲取正在上映的電影信息和即將上映電影的信息

電影信息滾動(底部)加載提高響應(yīng)速度

獲取所有可以從豆瓣api得到的排行榜

查看排行榜詳細，在排行榜中查看具體電影詳細

支持用戶根據(jù)關(guān)鍵字搜索

支持用戶根據(jù)給出標簽進行標簽搜索(與輸入與標簽相同的關(guān)鍵字進行搜索不同)

根據(jù)搜索結(jié)果查看電影詳情

查看搜索歷史

獲取電影所有的基礎(chǔ)信息和評分信息

獲取電影的短評和長評，可查看該電影所有短評長評

將電影標記為想看/看過

獲取影人基本信息

查看影人作品詳細

查看收藏的影人

查看想看的電影

查看看過的電影

項目通過vue腳手架vue-cli進行配置，可在"config/index"目錄下進行如下配置

proxyTable: {
      "/v2": {
        target: "http://api.douban.com",
        changeOrigin: true,
        pathRewrite: {
          "^/v2": "/v2"
        }
      }
    }

參數(shù)里中的changeOrigin，接收一個布爾值，如果設(shè)置為true,那么本地會虛擬一個服務(wù)端接收你的請求并代你發(fā)送該請求，這樣就不會有跨域問題了
vue-cli的這個設(shè)置來自于其使用的插件http-proxy-middleware

服務(wù)器端配置

const express = require("express");
const proxy = require("http-proxy-middleware");

const app = express();
app.use("/static", express.static(`${__dirname}/static`));
app.use("/v2", proxy({
  target: "http://api.douban.com",
  changeOrigin: true,
}));

app.get("/*", (req, res) => {
  res.sendFile(`${__dirname}/index.html`);
});
app.listen(8000);

本質(zhì)上都是通過使用"http-proxy-middleware"中間件實現(xiàn)代理

better-scroll 是一個移動端滾動的解決方案，它是基于 iscroll 的重寫，它和 iscroll 的主要區(qū)別在這里。better-scroll 也很強大，不僅可以做普通的滾動列表，還可以做輪播圖、picker 等等。

從之前黃軼老師的高仿elem外賣app開始接觸過這個滾動庫，感覺體驗感很好，用起來也比較順手，所以在后來的項目聯(lián)系中就一直在使用。
推薦大家也嘗試一下:)

滾動的原理時父容器有固定的高度。父容器的第一個子元素，它的高度會隨著內(nèi)容的大小而撐高。當內(nèi)容的高度不超過父容器的高度，是不能滾動的，而它一旦超過了父容器的高度，我們就可以滾動內(nèi)容區(qū)了，這就是better-scroll 的滾動原理。

可以通過黃軼老師的這篇文章具體了解下:當 better-scroll 遇見 Vue

better-scroll的github地址戳:better-scroll

如果您不想在項目中使用better-scroll，也可以將相關(guān)代碼進行替換，如取消一些為了實現(xiàn)scroll組件使用的css的絕對/固定定位，頁面的滾動的數(shù)據(jù)獲取采用原生方式獲取或使用其他庫等，重構(gòu)成本不會很大。

├─build                       // webpack配置文件
├─config                      // 項目開發(fā)環(huán)境配置相關(guān)代碼      
├─screenshots                 // 項目截圖
├─src                         // 源碼目錄    
│  ├─api ? ? ? ? ? ? ? ? ? ?  // axios請求，獲取項目數(shù)據(jù)
│  ├─base ? ? ? ? ? ? ? ? ? ? // 項目基礎(chǔ)組件
│  │  ├─confirm ? ? ? ? ? ? ? // 確認框組件
│  │  ├─history-list ? ? ? ?  // 歷史記錄列表組件
│  │  ├─loading ? ? ? ? ? ? ? // 初始加載過渡組件
│  │  ├─loadmore ? ? ? ? ? ?  // 加載更多組件
│  │  ├─scroll ? ? ? ? ? ? ?  // 頁面滾動組件
│  │  ├─search-box ? ? ? ? ?  // 搜索框組件
│  │  ├─star ? ? ? ? ? ? ? ?  // 星級評分組件
│  │  └─switches ? ? ? ? ? ?  // 選項卡組件
│  ├─common ? ? ? ? ? ? ? ? ? // 公共資源 
│  │  ├─fonts ? ? ? ? ? ? ? ? // 圖標字體
│  │  ├─image ? ? ? ? ? ? ? ? // 圖片資源
│  │  ├─js ? ? ? ? ? ? ? ? ?  // 公共方法
│  │  └─stylus ? ? ? ? ? ? ?  // css樣式
│  ├─components ? ? ? ? ? ? ? // 業(yè)務(wù)組件 
│  │  ├─all-discussion ? ? ?  // 全部評論組件
│  │  ├─celebrity-detail ? ?  // 影人詳情組件
│  │  ├─celebrity-info ? ? ?  // 影人基礎(chǔ)信息組件
│  │  ├─celebrity-list ? ? ?  // 影人列表組件
│  │  ├─celebrity-works ? ? ? // 影人作品組件
│  │  ├─movie-comment ? ? ? ? // 電影短評組件
│  │  ├─movie-detail ? ? ? ?  // 電影詳情組件
│  │  ├─movie-info ? ? ? ? ?  // 電影基礎(chǔ)信息組件
│  │  ├─movie-list ? ? ? ? ?  // 電影列表組件
│  │  ├─movie-review ? ? ? ?  // 電影長評組件
│  │  ├─movie-show ? ? ? ? ?  // 主頁上映電影組件
│  │  ├─rank ? ? ? ? ? ? ? ?  // 排行組件
│  │  ├─rank-detail ? ? ? ? ? // 排行詳情組件
│  │  ├─rank-list ? ? ? ? ? ? // 排行列表組件
│  │  ├─review-detail ? ? ? ? // 電影長評詳情組件
│  │  ├─search ? ? ? ? ? ? ?  // 電影搜索組件
│  │  ├─suggest ? ? ? ? ? ? ? // 搜索結(jié)果組件
│  │  ├─tab ? ? ? ? ? ? ? ? ? // 主頁tab欄組件
│  │  └─user-center ? ? ? ? ? // 用戶中心組件
│  ├─router ? ? ? ? ? ? ? ? ? // vue-router路由管理
│  └─store ? ? ? ? ? ? ? ? ?  // vuex狀態(tài)管理 
└─static 

在config文件下的webpack.base.conf.js 里我配置了一些別名方便組件引入

resolve: {
    extensions: [".js", ".vue", ".json"],
    alias: { // 配置別名
      "src": resolve("src"),
      "common": resolve("src/common"),
      "components": resolve("src/components"),
      "base": resolve("src/base")
    }
  }

所以在引入組件的時候沒有加相對路徑，如不想更改直接使用相對路徑找到引用的文件就好了，這里說一下避免出現(xiàn)問題浪費不必要的時間

最后編輯于 2017/7/28 22:52