0301 - 一個比價的小項目

這兩天幫朋友作了個 比價 的小項目，主要是爲了練手 Vue 及相關網站開發。

主要功能：

• 批量查詢產品對應的京東價格
• 手動根據京東價格調整批發價格
• 將產品及價格信息，以網頁形式分享出去

因爲是私人項目，連接什麼的就不放了，主要記錄一些技術上的點吧。

前端

前端 方面，天然是 Vue，畢竟最近在學這個。

樣式 方面，沒有用 CSS 庫，純手工 CSS 代碼，畢竟也沒什麼樣式，也是爲了練習。

數據 方面，用二層數組實現了品牌（即分組）與產品這二層數據，利用數組的特徵支持品牌及分組的排序。另外，支持數據的查改增刪。

前期數據純粹是在瀏覽器本地存儲中。後來，爲了實現分享，將數據遠程存儲在服務器。不過，依然沒有引入帳戶系統，只是本地隨機生成一個 ID 做爲僞帳戶，對不一樣地方上傳的數據進行區分（事實上，基本也只是一我的使用）

分享時，會隨機生成 ShareID，並與 ID 匹配。經過 ShareID 查看共享頁面的用戶，並不能直接猜想出 ID，必定程度起到安全（主要是避免有人惡意修改數據，畢竟沒有帳戶系統）

目前，只支持在固定電腦編輯固定僞帳戶 ID 的數據，可經過備份與導入的方式，在不一樣電腦間切換。畢竟，對我的使用，這也足夠了。

交互 方面，沒什麼可說的，都是很基礎的東西。其中，對於頻繁操做的修改價格，支持雙擊修改、回車肯定等提升效率的操做，畢竟我是作工具軟件出身的，有這個習慣。

後端

有 2 個緣由，使得這個小小的項目，須要後端支持：

• 因爲跨域的問題，前端沒法直接查詢京東價格，只能藉助後端查詢
• 因爲須要共享，必須雲端存儲數據，前端獲取並展現

提及查詢京東價格，主要是經過網上找到的 p.3.cn 這個第三方 API 實現。這種相似黑盒的 API，我的用用還好，做爲商業使用可能就不合適了。期間，還了解了 慢慢買 的 API，他們並不公開價格，郵件銷售提到的價格是 1000 每個月，顯然並不適合。

爲何不使用京東官方 API？由於好像我的沒法申請到「所謂開放」的服務，也就沒法使用。畢竟，價格是電商核心的東西，沒有平臺會這麼輕易地開放。

另外，點擊京東價格，能夠跳轉至京東官網查看對應產品的詳情。這裏又有個坑：京東聯盟。我本覺得，能夠根據京東聯盟 ID，輕易地拼出對應的連接，沒想到有個 utm_term 好像是根據算法生成的 md5，沒法直接僞造（不知道出發點是什麼，提升轉鏈難度？）沒辦法，只能經過抓包官方平臺建立連接的操做，逆向出接口，用於代碼生成連接。

Chrome 插件

前面提到的京東聯盟連接，其中核心是 獲取 Cookie，這方面是 Chrome 插件，24 * 7 運行在服務器端，經過按期刷新頁面保持 Cookie 有效，並將 Cookie 上傳至後端服務器，用以生成京東聯盟連接。

尾巴

剛開始覺得只是個純前端的小項目，沒想到拔出蘿蔔帶出泥，整這麼大動靜。從維護的角度，這個項目最大的不肯定性有兩個：

• p.3.cn 這個第三方價格獲取接口
• Chrome 插件可否長期穩定地工做

博客原文：0301 - 一個比價的小項目