摘要：面試造航母，工作擰螺絲，新公司面試技術官要求會技術棧。然而公司項目暫時并沒有用到，不過為了提升實戰經驗，還是在業余時間搗騰出一個，以下是項目介紹。前段為了學習小程序的開發，做了個小程序名叫口袋吉他，這也是個人興趣驅使的開發想法。

面試造航母，工作擰螺絲，新公司面試技術官要求會react技術棧。

問：有使用過React么？
答：沒，只使用過Vue。
又問：給你一星期能上手開發么？
答：可以（一臉篤定）...

南慕容，北喬峰，降龍十八掌，斗轉星移，先接招再說。輾轉反側，開始了React的學習。然而公司項目暫時并沒有用到React...Orz，不過為了提升實戰經驗，還是在業余時間搗騰出一個ReactFM，以下是項目介紹。

對于大部分前端開發工程師而言，其實私人項目更多的是提升自己的實戰經驗，那么究竟開發怎樣的項目和怎么提升開發效率？
我也時常有這樣的疑惑，為什么別人總能做出自己想不到的項目而自己卻沒有任何的想法，我想一定是你接觸信息的姿勢不對，我有如下幾點建議。

使用谷歌搜索

關注前端流行的技術棧

融入前端社區（掘金、知乎、思否等），關注開源項目，關注一些活躍開發者的博客

Fork項目，學習他人項目源碼

若沒有項目想法，想下自己的興趣所在，舉個栗子：
比如你喜歡聽歌，做個私人FM；二次元愛好者，做個聚合番劇的APP；喜歡Kindle，做個kindle的電子書搜索網站等等..

對于提升效率，由于目前許多企業正從傳統的開發方式轉向前后端分離的方式，對于前端而言工作量比傳統開發方式增大了。無疑，我們自己開發私人項目時需要同時完成前端工作也要自己寫接口服務，這意味著開發的周期會相應的延長。我覺得這里需要根據項目考慮和個人情況考慮，如果你有自己的云主機，并且沒有開發過Restful接口的經驗，可以前后端全部自己完成提升實戰經驗；如果沒有自己的主機并且項目比較的小型預期到請求量不會很大，可以使用后端云服務，比如本項目是基于Leancloud數據存儲服務實現的。

訪問 http://fm.huzerui.com/, 或者掃描二維碼預覽（最好在移動端體驗）

https://github.com/alex1504/PetalFM

Username: petalFM

Password: petalFM

框架：react

狀態管理：redux

打包：Webpack，Babel

語言：ES2015, Less

庫:

React Router V4

Material-UI

代碼檢查： ESLint

圖標支持：Iconfont

.
|-- config                           // webpack配置目錄
|-- database                         // 數據庫備份目錄
|-- media                            // readme描述資源
|-- src                              // 源碼目錄
|   |-- components                   // 公共組件
|   |-- pages                        // 頁面組件
|       |-- Login                    // 登陸頁面
|       |-- Guide                    // 標簽定制頁
|       |-- Index                    // 主頁
|       |-- Search                   // 搜索頁
|       |-- Admin                    // 后臺數據錄入頁（僅管理員可見）
|       |-- Dislike                  // 用戶不興趣歌曲頁
|   |-- router                       // 路由定義
|   |-- services                     // 后端服務目錄
|       |-- avinit.js                // leancloudSDK初始化
|       |-- config.js                // 數據庫相關配置
|       |-- songServices.js          // 歌曲相關服務
|       |-- userServices.js          // 用戶相關服務
|       |-- index.js                 // 后端數據庫服務入口
|   |-- store                        // 狀態管理目錄
|       |-- index.js                 // 加載各種store模塊
|       |-- types                    // 定義觸發狀態改變類型
|       |-- reducers                 // 狀態生成器
|   |-- Utils                        // 工具函數
|   |-- index.js                     // 程序入口文件
|-- .gitignore                       // Git提交忽略文件規則
|-- LICENSE                          // 授權協議
|-- README.md                        // 項目說明
|-- package.json                     // 配置項目相關信息
.

由于后端云開啟了WEB安全域名，本地克隆項目后無法直接運行，解決方式如下：

前置工作：

Step1：執行命令克隆項目到本地git clone https://github.com/alex1504/PetalFM.git

Step2：安裝依賴 npm install

Step3：在 https://leancloud.cn/ 注冊賬號并且在后臺創建一個leancloud應用

Step4：在leancloud應用后臺導入根目錄database下面的數據庫，并且在_User表創建你的管理員賬號（用戶名和密碼需為4-8位的數字、字母或_）

Step5：修改 /src/services/config.js配置如下：

export const APP_ID = "YOUR APP_ID FOUND IN LEANCLOUD APP SETTING";
export const APP_KEY = "YOUR APP_KEY FOUND IN LEANCLOUD APP SETTING";
export const SUPER_USER_OBJECT_ID = "YOUR SUPERUSER ACCOUNT OBJECT ID";

只有管理員才能看到Admin入口并且通過搜索接口錄入歌曲，并設置歌曲所屬類別。

開發：

Step6：執行 npm run dev運行項目

Step7：執行 npm run build打包項目，/dist/文件夾為打包后的項目文件

部署：

Step9：在開發過程中，webpack-dev-server將本地 /api/請求轉發到http://music.163.com/api（若需增加別的轉發機制請修改package.json中的proxy配置，完整配置參考http-proxy），因此部署到服務器時請借助nginx或nodejs服務器進行接口轉發，否則搜索和錄入服務不生效。

一個項目的開發過程中你會遇到許多問題，不斷解決問題會使你積累更多的經驗。前段為了學習小程序的開發，做了個小程序APP名叫（口袋吉他），這也是個人興趣驅使的開發想法。開始的學習從小程序文檔開始，APP界面借鑒了其他的小程序，界面成型后發現沒有數據來源，于是通過nodejs寫了爬蟲錄入初始數據，啟用定時抓取保持更新，并封裝了接口服務，甚至做了一個簡單的后臺頁面錄入數據，總而言之，這是一段有趣的歷練。

喜歡本項目可以star或fork，感謝你的支持。歡迎關注公眾號前端新視界，把握技術前沿資訊。