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 - 一个比价的小项目