React+Typescript 實現一個簡單的豆瓣電影應用

做者: github.com/Yangfan2016
源碼: github.com/Yangfan2016…
協議：MIT

這裏還有 electron 版本 douban-movie-electron，目前還在施工中👷...

前言

看掘金上有人寫過 React 高仿的豆瓣電影，我也準備嘗試一下，順便試試 React 新的編寫風格 react-hooks

設計

豆瓣電影主站的 UI 樣式不是很好看（豆瓣，不要打我 😂），多是它們主要是以數據信息爲主，可能在樣式上沒有太注重

這裏，我大部分參照了騰訊視頻的樣式結構

開發選型與技術棧

• 技術選型 因爲此次仍是練手，因此就選擇了流行的開發框架和工具

下圖是整個應用的技術棧結構圖

前端

• React
• React-router
• Typescript

UI 框架和組件

• ant-design
• react-lazy-load

輔助工具

• axios
• lodash

後端

• Koa

---

應用概覽

首頁

• banner
• 歷史記錄
• 檢索建議
• 正在熱映
• 新片榜
• 北美票房榜
• 一週口碑榜
• Top250
• footer

電影詳情頁

• 電影評分、基本信息
• 劇照
• 預告片（點擊打開播放虛擬頁）
• 評論
• 熱評

搜索詳情頁

• 搜索信息列表

標籤詳情頁

• 搜索信息列表

票房頁

• 評分排行圖表
• 地域分佈圖表
• 電影標籤分佈圖表

---

• 首頁

• 電影詳情頁

• 電影預告播放頁

• 搜索詳情頁

• 404 頁

應用介紹

• React + React-router 實現的單頁面應用
• 使用 Ant-design UI 框架開發，提升開發效率
• 用 Typescript 編寫，類型嚴格提示，友好快捷開發
• 所有用 React-hooks 編寫組件，很大程度排除了 this 的干擾
• 使用 react-lazy-load 實現圖片的懶加載，減小首次的 http 請求，減輕服務器負擔
• 編寫骨架屏組件，提高用戶體驗
• 改寫 react-router 調用風格，相似 vue-router 的配置式開發（其實有一個現成的輪子 react-router-config ，你們就不要造輪子了 😂，我是爲了練習）
• 使用 http-proxy-middleware 實現服務代理，解決跨域問題
• 使用 lodash 的防抖函數，合併輸入框的屢次請求，減輕服務器負擔
• 使用 Koa 框架做爲後端，對 ES6 友好，減小回調地獄的出現

總結

• react-hooks 的初次體驗，大大減小了編碼行數，不再用擔憂 this 的問題
• Typescript 開發，嚴格的類型提示，及早發現潛在 bug 和規範 Javascript 的編寫
• 更加喜歡 react 的以 js 爲主的組件式開發
• 還有一部分功能沒有實現，最近的空餘時間很少，以後繼續開發完成

豆瓣數據 api 來源於網絡，侵刪，本應用僅供學習使用，請勿用於商業用途
做者: github.com/Yangfan2016
源碼: github.com/Yangfan2016…
協議：MIT