這兩天幫朋友做了個 比價 的小專案，主要是為了練手 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 - 一個比價的小專案