movii / Vue-Fanfou-Daily

「饭否每日精选·日历」Web 版 | A project made while learning Vue.js

Home Page:https://fanfou-daily.leanapp.cn/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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


重要的前言

Profile 中的:Vue-Fanfou-DailyWechat-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 IDApp Key 和被忽略了的 ./dist 之外完全相同。后续改进也会尽快推送上来保持版本间的一致。

升级到 v2

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

  • v1.x.x:一条记录 = 一天的数据,包含二十条状态;
  • v2.x.x:一条记录 = 一条状态的数据。

改写爬虫的缘由

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

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

使用

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

下载和安装

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

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

前往 LeanCloud 注册、登陆后,开一个新应用,在该应用的「菜单面板」中的「设置 - 应用 Key」里找到 App IDApp 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 之外,还有新增 ENTRIESSTATUSES 两个 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

About

「饭否每日精选·日历」Web 版 | A project made while learning Vue.js

https://fanfou-daily.leanapp.cn/

License:MIT License


Languages

Language:JavaScript 50.5%Language:Vue 45.0%Language:CSS 3.6%Language:HTML 0.9%