油猴子脚本——豆瓣读书的图书馆插件（1）

标签（空格分隔）： 爬虫

上学期就有的想法，昨天因为不想自己闲下来所以开始动手继续折腾。到今天位置也算做好大部分的内容了。也算是对假期学习php+js的一个总结吧。

需要的技术：

  1. 油猴子脚本api——GM_xmlhttprequest（超好用！）；
  2. xpath还有正则表达式（开启了新世界的大门啊喂！）；
  3. xpathhelper（强大的chrome插件，以后做爬虫再也不用第三方的模块啦！）；

简单的流程：

  1. 获取豆瓣书籍名字；
  2. 提交到我的vps；
  3. 由我的vps向海事大学图书馆查询端口提交请求；
  4. 分析返回的请求再返回给脚本；
  5. 显示出来；

差不多也就那么多事了，可以开始写代码了。

1
2
3
4
5
6
7
8
9
10
// ==UserScript==
// @name         豆瓣读书海事大学图书馆插件
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  一个用来在豆瓣读书页面显示大连海事大学图书馆相关藏书地以及借书号的脚本
// @author       weakiwi
// @match        https://book.douban.com/subject/*
// @grant        none
// @grant        GM_xmlhttpRequest
// ==/UserScript==

首先看油猴子脚本开头的注释快，名称、作者、更新地址什么的都是一目了然。需要关心的是@grant还有@match前者是用来包含油猴子提供给你的内部函数的，后者是用来指定在那些页面下生效的。我需要在豆瓣读书下生效，所以对应的是https://book.douban.com/subject/*注意通配符。获取书籍名称非常容易，一行代码能够搞定，var keyword1 = title.replace( '(豆瓣)', '' ).trim();

接下来使用gm_xmlhttprequest模块构造get请求，提交书籍名称到我的vps。可以参考greasepot的wiki，不难写出代码，注意提交完成后的执行内容得写在onload里面。代码如下：
function newztflh(book_name, book_location, book_ztflh) {
this.book_name = book_name;
this.book_location = book_location;
this.book_ztflh = book_ztflh;
}
var ztflh = new newztflh(‘’,’’,’’);
GM_xmlhttpRequest({
method: “GET”,
url: “”+keyword1,//请求的url
synchronous : false,//是否为异步请求
onload: function(response) {
var obj = JSON.parse(response.responseText);
if (obj.book_name == null) {
ztflh.book_name = “找不到该书籍”;//抛出异常
}
else{
ztflh.book_name = obj.book_name;
ztflh.book_location = obj.book_location;
ztflh.book_ztflh = obj.book_ztflh;
}
switch(location.host){//构造页面显示
case “movie.douban.com”:
appendLinks(Movie_links, link)

                link.append('<br>')
                    .append('<span class="pl">字幕链接:</span>')
                    .append(
                        $("<a>").attr({
                            href: "http://shooter.cn/search/" + movieTitle,
                            target: "_blank"
                        }).html("Shooter")
                    );

                break;
            case "book.douban.com":
                appendLinks(Book_links, link)                    
                link.append('<br>')
                    .append('<span class="pl">图书馆信息 :</span>'+ztflh.book_name+' '+ztflh.book_location+' '+ztflh.book_ztflh+' '+'<br/>')
                break;
        }

        $('#info').append(link);
    }
});

接下来是后端的内容，因为还不会用php的模块，所以直接用xpath来对页面进行解析。这里推荐xpathhelper，只需按下ctrl+shift+x再按下shift把鼠标移动到哪就可以显示对应的xpath，不过需要注意生成的是从根标签开始的，如果太长可以直接用”/“来代替。

最后是返回json数据（主要是看到v2ex上有人吐槽为何后端不能返回json数据，所以良好习惯从现在开始吧。我这数据量不大，老老实实组成数组，然后再用json_encode转换就好了。注意因为出现中文所以需要在开始加header("Content-Type: text/html;charset=utf-8");//防止出现乱码
还有json_encode需要多一个参数cho json_encode($arr, JSON_UNESCAPED_UNICODE);

js上再用json.parse取出就好了，实在方便的一匹啊。
此处输入图片的描述

todolist:

  1. 返回的json增加错误代码（主要是图书馆最近在维护，希望能在后端直接判断出来）
  2. 生成的书籍信息更加好看一些（要是能像广州十校图书馆那样就好了）