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

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

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

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

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

使用谷歌搜索

關(guān)注前端流行的技術(shù)棧

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

Fork項目，學(xué)習(xí)他人項目源碼

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

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

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

https://github.com/alex1504/PetalFM

Username: petalFM

Password: petalFM

框架：react

狀態(tài)管理：redux

打包：Webpack，Babel

語言：ES2015, Less

庫:

React Router V4

Material-UI

代碼檢查： ESLint

圖標(biāo)支持：Iconfont

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

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

前置工作：

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

Step2：安裝依賴 npm install

Step3：在 https://leancloud.cn/ 注冊賬號并且在后臺創(chuàng)建一個leancloud應(yīng)用

Step4：在leancloud應(yīng)用后臺導(dǎo)入根目錄database下面的數(shù)據(jù)庫，并且在_User表創(chuàng)建你的管理員賬號（用戶名和密碼需為4-8位的數(shù)字、字母或_）

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入口并且通過搜索接口錄入歌曲，并設(shè)置歌曲所屬類別。

開發(fā)：

Step6：執(zhí)行 npm run dev運行項目

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

部署：

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

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

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