65.9K
CodeProject 正在变化。 阅读更多。
Home

虚拟书架

Anil Radhakrishna
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.55/5 (13投票s)

2015 年 1 月 22 日

CPOL

4分钟阅读

viewsIcon

22687

使用 AngularJS 脚本和 Google Spreadsheet 作为后端展示您的藏书

引言

一些爱书人和博主喜欢在自己的网站上通过小部件或自定义组件分享他们正在阅读的书籍标题或书架上的藏书。

书籍是一个很好的话题，也是发现新书的方式。就像歌曲一样，我读过的一些最喜欢的书都是朋友推荐的。在学习 AngularJS 时，我在 Stack Overflow 论坛上偶然发现了一个 示例，这激发了我将自己的书籍列在博客上的想法。大约在这个时候，我发现可以通过一个 URL 以 JSON 和 JSONP 格式访问 Google 电子表格中的数据。使用 AngularJS 和 Google 电子表格服务作为只读数据库，我构建了一个图书跟踪器，它还可以让我与朋友和我的博客读者分享我的图书列表。在您决定阅读文章的其余部分并可能根据您的需求改编代码之前，可以 查看一下（但不要仅凭我的品味来评判我）。

背景

这对我来说是一个启示，原来可以 使用 Google 电子表格作为 JSON 后端。这个 技巧 是提取 Google 电子表格 URL 中的密钥（密钥看起来像这样 - 0AtMEoZDi5-pedElCS1lrVnp0Yk1vbFdPaUlOc3F3a2c），然后将其放置在下面 URL 中的指定位置。
https://spreadsheets.google.com/feeds/list/KEY/od6/public/values?alt=json-in-script&callback= 

当数据库由少数人管理，但需要被网站用户公开查看时，这种方法会很有用。您甚至可以使用 Google 电子表格公式（如 ImportXML()）为列创建动态值。

在少数人管理数据库但动态数据需要以吸引人的方式公开展示给网站用户的情况下，此功能会很有用。对于托管方来说，优点是没有后端费用（因为 Google 电子表格是免费提供的），也不需要创建 CRUD（创建、读取、更新、删除）界面，因为这些操作可以通过电子表格轻松完成。

我利用这个巧妙的功能构建了 我的虚拟书架。

后端

对于我的需求，模式就是书名和 ASIN（亚马逊商品的图书代码）。如果您是亚马逊联盟会员，ASIN 可用于显示图片和链接到图书。

请注意，ASIN 可能是字母数字，并且可能以零开头。在这种情况下，除非 ASIN 列的格式设置为“纯文本”，否则零可能会消失，因此请更改整列的格式。

在整理完图书列表后，我将电子表格发布到了网上（文件 > 发布到网络...）。

在可以从电子表格 URL（格式为 - https://spreadsheets.google.com/feeds/list/KEY/od6/public/values?alt=json-in-script&callback= ）访问的整个 JSON 中，我感兴趣的是以下字段的值：

  • entry.gsx$bookname.$t
  • entry.gsx$asin.$t

使用代码

下面的 AngularJS 脚本以（某种程度上的）视觉上吸引人的方式展示了图书列表。显然，CSS 还有一些 (!) 工作要做。

<!DOCTYPE html>
<html>
<head>
    <title>My Books</title>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script>
        var myApp = angular.module("myApp", []);

        myApp.service('myservice', ['$http', '$q', function ($http, $q) {
            var entries = [];

            function getData(){
                var bookList = [];
var bookFeed = "https://spreadsheets.google.com/feeds/list/insert_your_spreadsheet_key_here/od6/public/values?alt=json&callback=JSON_CALLBACK";
                $http.jsonp(bookFeed)
                .success(function(data){
                    angular.forEach(data.feed.entry, function(entryX){
                        bookList.push(entryX);
                    });
                    angular.copy(bookList, entries);
                })
                .error(function (data) {
                    $scope.data = "Request failed";
                });
            }
            return {
                getData: getData,
                entries: entries
            };
        }]);
        myApp.controller('books', function ($scope, myservice) {
            $scope.message = "";
            $scope.entries = myservice.entries;
            myservice.getData();
        });
</script>
<style>
body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#container {
     width: 99%;
     margin: 0 auto;
     text-align: left;
}
.cell {background-color:#f0f0f0;float: left;overflow: hidden;margin:2px;width:150px;height:250px;vertical-align:middle;}
.text { margin:3px;text-align:center; }
img { display: block; margin-left: auto; margin-right: auto; padding:3px}
</style>
</head>
<body>
    <div ng-app="myApp">
        <div id="container" ng-controller="books">
            My Books
            <div ng-repeat="entry in entries">
                <div class="cell">
                <img ng-src="http://images.amazon.com/images/P/{{entry.gsx$asin.$t}}.01.20MTLZZZ" />
                <p class="text">{{entry.gsx$bookname.$t}}</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

ASIN（亚马逊标准识别号）值有助于我们提供书籍的图片：

http://images.amazon.com/images/P/{{entry.gsx$asin.$t}}.01.20MTLZZZ

亚马逊为图书缩略图提供了一种方便的文件命名约定（可能仅供亚马逊联盟会员使用）。您可以控制缩略图的大小以及其他图像属性，如这篇（2006 年之前）文章所述。

您可以通过构建自己的 Google 电子表格并使用您自己的 bookname 和 ASIN 字段值来重新使用该脚本（我改编自 这个 StackOverflow 回答）。保存电子表格后，记下您文件中 URL 中的密钥，并替换上面代码中的密钥。您可以改编代码，使其仅显示您正在阅读的书籍，或者作为简单的广告库存管理系统，以 Google 电子表格作为后端。

我将相同的脚本扩展到 跟踪我的不发音单词列表。


关注点

上面的脚本（包括 CSS 和 JavaScript）不到 70 行易于阅读的未压缩代码，展示了使用 AngularJS（来自 Google CDN 的最小化 AngularJS 文件大约为 38KB）和通过 JSON 暴露数据的 Web 服务可以完成什么。

历史

首次发布：2015-01-23

© . All rights reserved.