饭否每日精选·日历 | vue-fanfou-daily

在线访问地址

重要的前言

Profile 中的：Vue-Fanfou-Daily 和 Wechat-Fanfou-Daily， 作者自己把它们两个作为学习 Vue.js 和微信小程序的练手项目，最早的时候只是拿一些假数据在本地学习两者。后来，作为一个多年的饭否用户，无意间发现「饭否每日精选」提供 JSON 数据供稿作为 Public API 给第三方使用，于是就鼓捣想试试看，后来就有了这两个项目。

如果在设置爬虫、以及抓取数据存储至 LeanCloud 的过程中有问题，请提 issue。

为什么会有爬虫抓取数据，然后存到 LeanCloud？

微信小程序中所有发出的请求必须是 HTTPS 的，开始制作的时候（2017 年 5 月）「饭否每日精选」官方数据源是没有 HTTPS 支持的，所以当时首要的问题就是搞定数据源 HTTPS，做了点简单的 research 之后决定放在 LeanCloud 上（看了 LeanCloud 官方写的一个使用 LeanCloud 做为数据存储的 TODOs demo）。

概述

1. 此 Vue-Fanfou-Daily 是个人项目，官方版本的地址在此：饭否精选，官方数据的 JSON 供稿在此：链接；
2. 服务端用 Express + CornJob 定时抓取饭否精选的数据；
3. 部署在 LeanCloud 上，同时使用 LeanCloud数据存储服务（免费，同时提供各种语言 API，本项目使用 JavaScript 数据存储服务 ）来保存从官网抓取来的「每日精选」数据；
4. 前端使用 Vue.js + Vuex + Vue-Router 实现；
5. 打包、编译等构建工作均使用 Webpack。

仓库中的版本和线上的版本，除了 App ID、App Key 和被忽略了的 ./dist 之外完全相同。后续改进也会尽快推送上来保持版本间的一致。

升级到 v2

仓库中有两个分支，主要的区别在于爬虫抓取数据存储的姿势不同，所以导致前端获取数据的方式不同：

• v1.x.x：一条记录 = 一天的数据，包含二十条状态；
• v2.x.x：一条记录 = 一条状态的数据。

改写爬虫的缘由

有这样一个场景，用户分享出去一条状态（一条精选的详情页），被分享的用户打开页面，这个时候需要首先去请求一整天的状态才能获得其中的目标数据。因为写 爬虫 v1 的时候没有考虑到这个情况，所以实际处理这个「先请求一天的数据，再从中取出一条数据」的代码当时写得很变扭。

所以，年底（2017年）想做点更新的时候，索性从爬虫开始全部做了修改，以至于前台的代码也做了很多更新，于是有了现在 2.0 版本。

使用

以下对在 LeanCloud 上保存数据做个大致说明。

下载和安装

下载代码，使用 npm install 安装依赖。

首次抓取所有存量数据并存储至 LeanCloud

前往 LeanCloud 注册、登陆后，开一个新应用，在该应用的「菜单面板」中的「设置 - 应用 Key」里找到 App ID 和 App Key，将两者填充项目根目录的 ./leancloud/index 中:

- const APP_ID = ''
- const APP_KEY = ''

+ const APP_ID = 'your App ID'
+ const APP_KEY = 'your App Key'

接着通过 npm run start 来启动，以下为首次启动之后的一些说明：

• 首次启动：注意终端中会开始一天天地抓取饭否精选官方数据，并存入到 LeanCloud，为了避免请求数量过大被远程断开采取的是每秒抓取一天的策略，同时即使被远程断开也会在五秒之后重试。
• 启动后，如果没有任何提示任何抓取动作 是因为任务写的是分钟数为 5 的倍数时（比如 00:05、00:10、00:15 以此类推）才会执行抓取，等候一会儿就好；或者自行对 ./cronjob/index.js 进行修改。
• 首次启动抓取所有数据完毕后，会有提示，或者去往你在 LeanCloud 开始的新应用的菜单的「存储」，会看到除了系统默认生成的 Class 之外，还有新增 ENTRIES、STATUSES 两个 Class，截止 2018-01-03，STATUSES 一共有 16.3k 条数据。

Serve at localhost

npm run serve

build development

npm run build:dev

build production

npm run build:prod

☁️ 部署至 LeanCloud

LeanCloud 对于 NodeJS 应用的部署指南在此：《网站托管开发指南 · Node.js》，很方便。

但如果本身的就习惯通过 Github 来管理项目，那么更推荐其中《网站托管开发指南 · Node.js - Git 部署》章节，在「仓库 - 设置 - Deploy keys」新建 key 填入到 LeanCloud 应用的 「云引擎 - 部署」中，接着按一下「部署」按钮就可以，简单得不行。

感谢

• 鸣谢 Z 姐（@小脸儿）制作的网站 logo（favicon）；
• 断断续续向 rex 大（@.rex）请教了不少问题，都耐心一一解答，👍；
• 之前在开发小程序过程中帮助测试反馈的各位小伙伴（奶瓶 @小小小奶瓶 同学发现了很多 bug，尤其感谢）。

相关 blog 文章

1. 笔记：「饭否精选」微信小程序（一）制作记录
2. 笔记：「饭否精选」微信小程序（二）爬虫部分
3. 笔记：「饭否精选」微信小程序（三）小程序开发中遇到的问题

License

MIT License Copyright (c) 2018 Lien