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

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

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

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

api來源自豆瓣官方api，詳情請(qǐng)戳豆瓣電影api

項(xiàng)目源碼：請(qǐng)戳 github

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

豆瓣電影webapp

打開瀏覽器進(jìn)入開發(fā)者模式，選擇移動(dòng)端視口

chrome瀏覽器下的iphone5/6/6 plus體驗(yàn)效果更佳

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

clone項(xiàng)目源碼

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

安裝依賴

cd vue-douban-movie
npm install

運(yùn)行

npm run dev

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

node 6+ npm 4+

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

axios：用于ajax請(qǐng)求

vue-lazyload：用于圖片懶加載

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

webpack： 構(gòu)建工具

es6: 使用es6語法

stylus: css預(yù)處理

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

使用localStorage存儲(chǔ)收藏的電影信息，影人信息，評(píng)論點(diǎn)贊信息

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

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

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

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

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

查看排行榜詳細(xì)，在排行榜中查看具體電影詳細(xì)

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

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

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

查看搜索歷史

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

獲取電影的短評(píng)和長(zhǎng)評(píng)，可查看該電影所有短評(píng)長(zhǎng)評(píng)

將電影標(biāo)記為想看/看過

獲取影人基本信息

查看影人作品詳細(xì)

查看收藏的影人

查看想看的電影

查看看過的電影

項(xiàng)目通過vue腳手架vue-cli進(jìn)行配置，可在"config/index"目錄下進(jìn)行如下配置

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

參數(shù)里中的changeOrigin，接收一個(gè)布爾值，如果設(shè)置為true,那么本地會(huì)虛擬一個(gè)服務(wù)端接收你的請(qǐng)求并代你發(fā)送該請(qǐng)求，這樣就不會(huì)有跨域問題了
vue-cli的這個(gè)設(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"中間件實(shí)現(xiàn)代理

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

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

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

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

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

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

├─build                       // webpack配置文件
├─config                      // 項(xiàng)目開發(fā)環(huán)境配置相關(guān)代碼      
├─screenshots                 // 項(xiàng)目截圖
├─src                         // 源碼目錄    
│  ├─api ? ? ? ? ? ? ? ? ? ?  // axios請(qǐng)求，獲取項(xiàng)目數(shù)據(jù)
│  ├─base ? ? ? ? ? ? ? ? ? ? // 項(xiàng)目基礎(chǔ)組件
│  │  ├─confirm ? ? ? ? ? ? ? // 確認(rèn)框組件
│  │  ├─history-list ? ? ? ?  // 歷史記錄列表組件
│  │  ├─loading ? ? ? ? ? ? ? // 初始加載過渡組件
│  │  ├─loadmore ? ? ? ? ? ?  // 加載更多組件
│  │  ├─scroll ? ? ? ? ? ? ?  // 頁面滾動(dòng)組件
│  │  ├─search-box ? ? ? ? ?  // 搜索框組件
│  │  ├─star ? ? ? ? ? ? ? ?  // 星級(jí)評(píng)分組件
│  │  └─switches ? ? ? ? ? ?  // 選項(xiàng)卡組件
│  ├─common ? ? ? ? ? ? ? ? ? // 公共資源 
│  │  ├─fonts ? ? ? ? ? ? ? ? // 圖標(biāo)字體
│  │  ├─image ? ? ? ? ? ? ? ? // 圖片資源
│  │  ├─js ? ? ? ? ? ? ? ? ?  // 公共方法
│  │  └─stylus ? ? ? ? ? ? ?  // css樣式
│  ├─components ? ? ? ? ? ? ? // 業(yè)務(wù)組件 
│  │  ├─all-discussion ? ? ?  // 全部評(píng)論組件
│  │  ├─celebrity-detail ? ?  // 影人詳情組件
│  │  ├─celebrity-info ? ? ?  // 影人基礎(chǔ)信息組件
│  │  ├─celebrity-list ? ? ?  // 影人列表組件
│  │  ├─celebrity-works ? ? ? // 影人作品組件
│  │  ├─movie-comment ? ? ? ? // 電影短評(píng)組件
│  │  ├─movie-detail ? ? ? ?  // 電影詳情組件
│  │  ├─movie-info ? ? ? ? ?  // 電影基礎(chǔ)信息組件
│  │  ├─movie-list ? ? ? ? ?  // 電影列表組件
│  │  ├─movie-review ? ? ? ?  // 電影長(zhǎng)評(píng)組件
│  │  ├─movie-show ? ? ? ? ?  // 主頁上映電影組件
│  │  ├─rank ? ? ? ? ? ? ? ?  // 排行組件
│  │  ├─rank-detail ? ? ? ? ? // 排行詳情組件
│  │  ├─rank-list ? ? ? ? ? ? // 排行列表組件
│  │  ├─review-detail ? ? ? ? // 電影長(zhǎng)評(píng)詳情組件
│  │  ├─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")
    }
  }

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

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