Luoo.qy for mac

落網(wǎng)音樂電臺這個小眾的音樂網(wǎng)站官方是沒有提供電腦客戶端的，這里西西提供的這款Luoo.qy for mac是獨立程序員開發(fā)的第三方客戶端，雖說是第三方的客戶端，不過制作一點也不差，改有的功能都有了，界面也是十分清爽簡潔，推薦喜歡落網(wǎng)的用戶下載使用。

軟件介紹：

落網(wǎng)是另一個在小眾音樂網(wǎng)站中比較「大眾」的網(wǎng)站，擁有一批數(shù)量不多但是非常忠實的粉絲，其中當然不乏自力更生的程序員，同樣是在官方?jīng)]有推出電腦客戶端（但是居然有 windowsphone 客戶端......）的情況下制作了第三方客戶端 —— Luoo.qy。

Luoo.qy 界面風格頗有微軟流暢設(shè)計（Fluent Design）的風范，好看程度在所有音樂客戶端里面屬于第一梯隊。大體上功能也沒落下，是一個能用著很舒服的客戶端，可以感受到制作它的作者是真正喜歡落網(wǎng)的。

技術(shù)實現(xiàn)：

技術(shù)棧

整個 Luoo.qy v1.0 項目采用了 MVVM 模式, 實現(xiàn)了前后端完全分離, 后端只負責響應前端的 API 請求;

整個前端技術(shù)棧由 v0.0 版本的 React 轉(zhuǎn)向了 Vue; 后端技術(shù)棧也全面擁抱 JavaScript 生態(tài), 由 Python + Flask 轉(zhuǎn)為 Node + Koa (提供 API 接口) 和 Python + Urllib + Beautiful (爬取數(shù)據(jù)) 與 MongoDB (存儲數(shù)據(jù));

由于 V0.0 版本未使用狀態(tài)管理, 使得某些功能的實現(xiàn)略顯繁瑣, 也造成了一些問題, 于是新版本理所當然的使用了 Vue + Vuex 組合, 實現(xiàn)前端的狀態(tài)管理;

用戶功能的實現(xiàn)

為了實現(xiàn)用戶功能, 研究了落網(wǎng)的用戶登錄機制:
第一次訪問網(wǎng)站的時候服務器會返回一個 key 為 "LUOOSESS" 的 Cookie, 當用戶登錄的時候, 帶著這個 Cookie 與用戶的賬號和密碼數(shù)據(jù)以 POST 方法向 "http://www.luoo.net/login/" 發(fā)送請求, 如果登陸成功, 服務端將會返回一段包含用戶信息的 JSON 數(shù)據(jù), 同時返回另一個 key 為 "lult" 的 Cookie;
當用戶進行收藏 / 取消收藏時, 帶著 key 為 "lult" 的 Cookie 向相應的 API 發(fā)送 POST 請求, 成功后服務端將返回一段 JSON 數(shù)據(jù)表示操作成功;
為了獲取用戶收藏, 采用爬蟲的思路, 用 Node 的 request 模塊訪問用戶收藏頁面并解析 DOM 從而獲取用戶收藏列表;
更多細節(jié)請訪問 user.js 文件;

自動更新與熱更新

Electron 有好幾個自動更新的模塊可用, 但是都感覺過于繁瑣, 于是采用了我在另一個項目 Page.qy 中實現(xiàn)的一個輕量級的自動更新模塊來實現(xiàn)了增量更新與熱更新;
采用文件熱替換原理, 如果只更新了渲染進程, 更新完畢后只需要執(zhí)行 webContents.reload() 甚至可以在不重啟軟件的情況下實現(xiàn)無痛更新!