Luoo.qy for mac

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

軟件介紹：

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

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

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

技術(shù)棧

整個(gè) Luoo.qy v1.0 項(xiàng)目采用了 MVVM 模式, 實(shí)現(xiàn)了前后端完全分離, 后端只負(fù)責(zé)響應(yīng)前端的 API 請(qǐng)求;

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

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

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

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

自動(dòng)更新與熱更新

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