利用爬虫实现淘票票「看过的电影」自动更新至Hexo博客

使用到的技术及工具：
Python、Js、CSS、Bootstrap、Docker、nginx

额外需要的：
VPS

效果预览：Tangerinew.

1. 编写爬虫前的准备工作

项目的大概流程：

1. 登录淘宝，获取Cookie。
2. 通过cookie访问淘票票页面，获取信息并保存。
3. 定时重复步骤1,2，在服务器端运行web程序，返回保存的数据，供客户端请求信息。

我们通过Chrome/FireFox的开发者工具可以获取到：

淘宝的登陆地址 https://login.taobao.com/member/login.jhtml

电影数据的请求地址 https://acs.m.taobao.com/h5/mtop.film.mtopshowapi.getwatchedshow/6.8/

2. 编写爬虫

获取Cookies

获取淘宝Cookies的过程过于繁琐，幸好在Github上找到了pig6 / login_taobao这个项目，可以用它来得到Cookies。

请求数据

获得Cookies后，用相应的参数带上Cookies向之前获取的的电影数据的请求地址进行POST请求。
请求的参数有：

key	value
jsv	2.5.1
appKey	12574478
api	mtop.film.mtopshowapi.getwatchedshow
v	6.8
timeout	10000
forceAntiCreep	true
AntiCreep	true
type	jsonp
dataType	jsonp
callback	mtojsonp2
data	{“ecode”:1,“pageSize”:100,“currentPage”:1,“lastId”:0,“platform”:“8”}
t	get_time()
sign	get_sign()

其中，t为当前时间的时间戳，我们用get_time()函数来获取：

def get_time(self):
    """
    获取时间戳
    :return: 当前时间的时间戳
    """
    now = time.time()
    t = int(round(now * 1000))  # 毫秒
    return str(t)

sign参数需要通过计算获得，方法为Cookies中的token字段、appKey值、刚刚获取的t值和data值用‘&’连接后进行md5加密，详细见get_sign()：

def get_sign(self):
    """
    计算sign
    :return: sign
    """
    # 获取Cookie中的token
    cookie_list = self.Cookie.split(';')
    _m_h5_tk = ""
    for item in cookie_list:
        item = item.strip()
        kv = item.split('=')
        if kv[0] == '_m_h5_tk':
            _m_h5_tk = kv[1]
    token = _m_h5_tk.split('_')[0]
    # 计算sign
    s = token+'&'+self.t+'&'+self.appKey+'&'+self.data
    sign = self.encrypt_md5(s)
    return sign

data参数包含多个键值，它们是对需要请求的数据进行设置。其中pageSize用来表示单次请求的电影数量, 为了尽量一次获取完,其值设置尽可能高。

然而此时直接请求仍会显示请求失败，原因是在Cookies中缺少 _m_h5_th字段 。可能是因为我们请求的淘票票API只针对手机端有效，而之前我们获取Cookies是用PC端的API进行获取的，所以_m_h5_th字段没有被加入Cookies中。

解决方法：

带上当前的Cookies访问 https://acs.m.taobao.com/h5/mtop.alimama.union.hsf.mama.coupon.get/1.0/?appKey=12574478&v=1 ，可以置换出带_m_h5_th字段的Cookies。

建立Web服务

使用轻量级的的Flask框架，建立Web服务，以供客户端请求，返回获取的电影信息。

安装flask及相关依赖：

pip install flask
pip install flask_cors
pip install flask_apscheduler

app.py：

from flask import Flask, Response
from flask_cors import cross_origin
from flask_apscheduler import APScheduler
import get_data

data = ""


class Config(object):  # 创建配置，用类
    # 任务列表
    JOBS = [
        {
            'id': 'job1',
            'func': '__main__:refresh_data',  # 方法名
            'trigger': 'interval',  # interval表示循环任务
            'days': 1,
        }
    ]


def refresh_data():
    global data
    data = get_data.refresh_data()


app = Flask(__name__)
app.config.from_object(Config())  # 为实例化的flask引入配置
refresh_data()

@app.route('/')
@cross_origin()
def hello():
    return Response(data, mimetype='application/json')


if __name__ == '__main__':
    scheduler = APScheduler()
    scheduler.init_app(app)
    scheduler.start()
    app.run(debug=False)

此Web服务有两个作用：

1. 供浏览器请求数据。
2. 定时重新获取淘票票信息，保存在内存中。

3. 部署

使用Docker部署项目,Docker的安装与使用请参见Docker 教程。

您当然也可以不使用Docker，在您的VPS中直接运行app.py。

注意：直接运行app.py的方法仅适用于开发环境，在生产环境下，推荐使用 nginx + uwsgi + flask 的部署方案。

4. 搭建Hexo自定义页面

在Hexo的sourse文件夹下新建文件夹Movie，在其中创建index.md文件，输入以下参数。

---
title: 記錄
date: 2019-10-19 20:56:22
showOnIndex: true
layout: false
---

在同目录创建index.html文件，通过Ajax向服务器发送请求，处理数据后渲染于网页上。

function loadMoviesWatched() {
    $.ajax({
        url: 'https://me.tangerinew.com/', // 改成你自己的地址
        dataType:'json', // 服务器返回json格式数据
        type:'get', // HTTP请求类型
        timeout:10000, // 超时时间设置为10秒；
        success:function(data){
            document.getElementById("refreshTime").innerHTML = "最后更新时间: " + timestampToTime(data['data']['timestamp'])
            document.getElementById("myDiv").innerHTML = ""
            var list = data['data']['returnValue']['shows']
            var imageUrl = "https://gw.alicdn.com/"
            for(var i = 0; i < list.length; i++) {
                document.getElementById("myDiv").innerHTML +=
                "<div class='media'><div class='media-left'>"+
                "<img class='media-object' src=" + imageUrl + list[i].poster + ">"+
                "</div><div class='media-body'>"+
                "<h2 class='media-heading'>" + list[i].showName + " / " + list[i].features.year + "</h2>"+
                "<div class='comment_time'>" + timestampToTime(list[i].userComment.commentTime) +"</div>" +
                list[i].userComment.content +
                "</div>" +
                "</div>"	
            }
        }
    });
}

Github项目地址：kevin4t/taopiaopiao-spider