Vue2.0開發仿豆瓣電影WebApp
前言
雖然在此以前已經有相似的仿豆瓣電影的webapp,但或是開發的有些簡潔功能不太完善，或是體驗感受得能夠再完善下，因此本身摸索着對比豆瓣和豆瓣電影兩款app作了一下，初步知足了本身的想法，通過幾回完善基本不會出現bug，若是發現存在問題請告訴我修改，謝謝！css
2017/7/27 一點小更新：發現只有建軍大業這部電影的詳情沒法查看，緣由是這部電影豆瓣返回的電影id存在問題，致使服務器返回 movie_not_found，點了這部電影發現報錯了整我的都很差了，解決方案就是看豆瓣會不會修復這個問題 :(html
項目簡介
使用vue2.0仿豆瓣電影app，根據豆瓣電影api對功能做了適當修改vue
api來源自豆瓣官方api，詳情請戳豆瓣電影apinode
項目源碼：請戳 githubwebpack
求star，若是對您有幫助，能夠在github上點右上角 "Star" 支持一下 謝謝！ ^_^ios
線上體驗
PC訪問
豆瓣電影webappgit
打開瀏覽器進入開發者模式，選擇移動端視口es6
chrome瀏覽器下的iphone5/6/6 plus體驗效果更佳github
移動端訪問
打開手機瀏覽器掃描下方二維碼或訪問上面的地址，推薦全屏模式下體驗web
項目運行
clone項目源碼
git clone https://github.com/buptsky/vue-douban-movie.git
安裝依賴
cd vue-douban-movie npm install
運行
npm run dev
打開瀏覽器進入localhost:8000，在開發者工具的移動端模式下查看效果
運行環境
node 6+ npm 4+
部分效果演示
上映電影信息和電影詳情
排行和影人
搜索和收藏
項目描述
技術棧
vue2.0 + vue-router + vuex：vue全家桶
axios：用於ajax請求
vue-lazyload：用於圖片懶加載
better-scroll：移動端滾動庫，優化移動端滾動效果
webpack： 構建工具
es6: 使用es6語法
stylus: css預處理
使用flex佈局進行移動端適配，用eslint進行代碼規範檢查
使用localStorage存儲收藏的電影信息，影人信息，評論點贊信息
webpack + webpack-dev-server + http-proxy-middleware進行本地開發環境http請求轉發，實現跨域請求
線上使用express的http-proxy-middleware實現請求轉發
功能實現
上映電影部分
獲取正在上映的電影信息和即將上映電影的信息
電影信息滾動(底部)加載提升響應速度
排行部分
獲取全部能夠從豆瓣api獲得的排行榜
查看排行榜詳細，在排行榜中查看具體電影詳細
搜索部分
支持用戶根據關鍵字搜索
支持用戶根據給出標籤進行標籤搜索(與輸入與標籤相同的關鍵字進行搜索不一樣)
根據搜索結果查看電影詳情
查看搜索歷史
電影詳情部分
獲取電影全部的基礎信息和評分信息
獲取電影的短評和長評，可查看該電影全部短評長評
將電影標記爲想看/看過
影人信息部分
獲取影人基本信息
查看影人做品詳細
用戶中心部分
查看收藏的影人
查看想看的電影
查看看過的電影
關於瀏覽器跨域
開發環境
項目經過vue腳手架vue-cli進行配置，可在'config/index'目錄下進行以下配置
proxyTable: {
'/v2': {
target: 'http://api.douban.com',
changeOrigin: true,
pathRewrite: {
'^/v2': '/v2'
}
}
}
參數裏中的changeOrigin，接收一個布爾值，若是設置爲true,那麼本地會虛擬一個服務端接收你的請求並代你發送該請求，這樣就不會有跨域問題了
vue-cli的這個設置來自於其使用的插件http-proxy-middleware
生產環境
服務器端配置
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);
本質上都是經過使用'http-proxy-middleware'中間件實現代理
關於移動端滾動庫better-scroll
better-scroll 是一個移動端滾動的解決方案，它是基於 iscroll 的重寫，它和 iscroll 的主要區別在這裏。better-scroll 也很強大，不只能夠作普通的滾動列表，還能夠作輪播圖、picker 等等。
從以前黃軼老師的高仿elem外賣app開始接觸過這個滾動庫，感受體驗感很好，用起來也比較順手，因此在後來的項目聯繫中就一直在使用。
推薦你們也嘗試一下:)
滾動的原理時父容器有固定的高度。父容器的第一個子元素，它的高度會隨着內容的大小而撐高。當內容的高度不超過父容器的高度，是不能滾動的，而它一旦超過了父容器的高度，咱們就能夠滾動內容區了，這就是better-scroll 的滾動原理。
能夠經過黃軼老師的這篇文章具體瞭解下:當 better-scroll 碰見 Vue
better-scroll的github地址戳:better-scroll
若是您不想在項目中使用better-scroll，也能夠將相關代碼進行替換，如取消一些爲了實現scroll組件使用的css的絕對/固定定位，頁面的滾動的數據獲取採用原生方式獲取或使用其餘庫等，重構成本不會很大。
項目佈局
├─build // webpack配置文件 ├─config // 項目開發環境配置相關代碼 ├─screenshots // 項目截圖 ├─src // 源碼目錄 │ ├─api // axios請求，獲取項目數據 │ ├─base // 項目基礎組件 │ │ ├─confirm // 確認框組件 │ │ ├─history-list // 歷史記錄列表組件 │ │ ├─loading // 初始加載過渡組件 │ │ ├─loadmore // 加載更多組件 │ │ ├─scroll // 頁面滾動組件 │ │ ├─search-box // 搜索框組件 │ │ ├─star // 星級評分組件 │ │ └─switches // 選項卡組件 │ ├─common // 公共資源 │ │ ├─fonts // 圖標字體 │ │ ├─image // 圖片資源 │ │ ├─js // 公共方法 │ │ └─stylus // css樣式 │ ├─components // 業務組件 │ │ ├─all-discussion // 所有評論組件 │ │ ├─celebrity-detail // 影人詳情組件 │ │ ├─celebrity-info // 影人基礎信息組件 │ │ ├─celebrity-list // 影人列表組件 │ │ ├─celebrity-works // 影人做品組件 │ │ ├─movie-comment // 電影短評組件 │ │ ├─movie-detail // 電影詳情組件 │ │ ├─movie-info // 電影基礎信息組件 │ │ ├─movie-list // 電影列表組件 │ │ ├─movie-review // 電影長評組件 │ │ ├─movie-show // 主頁上映電影組件 │ │ ├─rank // 排行組件 │ │ ├─rank-detail // 排行詳情組件 │ │ ├─rank-list // 排行列表組件 │ │ ├─review-detail // 電影長評詳情組件 │ │ ├─search // 電影搜索組件 │ │ ├─suggest // 搜索結果組件 │ │ ├─tab // 主頁tab欄組件 │ │ └─user-center // 用戶中心組件 │ ├─router // vue-router路由管理 │ └─store // vuex狀態管理 └─static
Tip
在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')
}
}
因此在引入組件的時候沒有加相對路徑，如不想更改直接使用相對路徑找到引用的文件就行了，這裏說一下避免出現問題浪費沒必要要的時間
最後編輯於 2017/7/28 22:52
-
每一个你不满意的现在，都有一个你没有努力的曾经。