之前博客有做过一个豆瓣书架的功能，可以显示你再豆瓣的想读、在读、已读的三种状态的书籍信息。不过后来因为豆瓣改了API后增加了防盗链，导致所有的图片都因为403后无法加载后去掉了这个功能。

不过因为前天决定开始做一个每月读一本书的计划，所以想重新修复下这个功能，之前自己研究了很久也没解决这个问题，因为这个是豆瓣那边的问题，人家防盗链了你没办法呀。今天百度了蛮久后，无意间看到vue调用豆瓣API加载图片403问题这篇文章，作者绕过豆瓣那边利用第三方的缓存服务来解决这个问题。

使用起来很简单，把所有有防盗链的图片地址前面统一加上https://images.weserv.nl/?url=，利用这个服务进行图片中转就可以正常显示图片了，后来把相关代码做了下修改，修复了该功能，具体效果参见BOOKS。

步骤有点多，嫌麻烦，我就不一一说具体实现了，直接贴下所有的代码吧。
如果有问题可以留言问，我尽量解答...

样式文件：https://1900.live/assets/css/doubanbooks.css?v=d657e41618

Page页面代码

<div class="douban-books">
  <!-- 正在读 -->
  <div class="db-status-reading">
    <div class="loading"></div>
    <h3 class="db-status-title">在读的书</h3>
    <ul id="db-reading-books" class="db-books">
      <script id="reading-template" type="text/x-handlebars-template">
        {{#each this}}
          <li>
            <a href="{{book.alt}}" target="_blank">
              <img src="{{book.images.medium}}" />
              <span>{{book.title}}</span>
            </a>
          </li>
        {{/each}}
      </script>
    </ul>
  </div>

  <!-- 想读的 -->
  <div class="db-status-wish">
    <div class="loading"></div>
    <h3 class="db-status-title">想读的书</h3>
    <ul id="db-wish-books" class="db-books">
      <script id="wish-template" type="text/x-handlebars-template">
        {{#each this}}
          <li>
            <a href="{{book.alt}}" target="_blank">
              <img src="{{book.images.medium}}" />
              <span>{{book.title}}</span>
            </a>
          </li>
        {{/each}}
      </script>
    </ul>
  </div>

  <!-- 读过的 -->
  <div class="db-status-read">
    <div class="loading"></div>
    <h3 class="db-status-title">读过的书</h3>
    <ul id="db-read-books" class="db-books">
      <script id="read-template" type="text/x-handlebars-template">
        {{#each this}}
          <li>
            <a href="{{book.alt}}" target="_blank">
              <img src="{{book.images.medium}}" />
              <span>{{book.title}}</span>
            </a>
          </li>
        {{/each}}
      </script>
    </ul>
  </div>

  
  
</div>

<!-- Script -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<!-- 引入要主js文件，地址根据你的情况填写。内容就是下面这个代码段 -->
<script src="/assets/js/doubanbooks.js"></script>

js文件内容

(function() {
  var DoubanBooks = {
    init: function(opt) {
      var apikey = opt.apikey ? '&apikey=' + opt.apikey : '';
      this.url = 'https://api.douban.com/v2/book/user/' + opt.username + '/collections?count=20' + apikey + '&callback=?';
      this.fetch();      
    },
    template: function(type, obj) {
      var tmpl = $('#' + type + '-template').html(),
          ctnr = $('#db-' + type + '-books');
      // 编译模版
      var _tmpl = Handlebars.compile(tmpl);
      
      $(".loading").hide();
      ctnr.append(_tmpl(obj));
    },
    fetch: function() {
      var self = this;
      // 获取 JSON 数据
      $.getJSON(this.url, function(data) {
        data = data.collections;
        $.map(data, function(book) {
          //对获取到的豆瓣JSON数据里的图片地址进行修改
          book.book.images.medium = 'https://images.weserv.nl/?url=' + book.book.images.medium;
          switch(book.status) {
            case "wish":
              self.wishBooks = [book];
              self.template('wish', self.wishBooks);
              break;
            case "reading":
              self.readingBooks = [book];
              self.template('reading', self.readingBooks);
              break;
            case "read":
              self.readBooks = [book];
              self.template('read', self.readBooks);
              break;
          };
        });
      });   
    }
  };
  DoubanBooks.init({
    //设置豆瓣用户名
    username: 'trax.long', // 豆瓣用户名
    apikey: ''
  });
})();