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

總結

以上是生活随笔為你收集整理的0301 - 一个比价的小项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。