豆瓣API介面開發，結合angularJS來做，感覺爽歪歪！

標籤：average   original   resource   -o   alt   dir   rand   簡單   title   

第一次做還是先說下API 是什麼鬼？

API ： application program interface API：

有那些常見的API：

webAPI : 通過WEB方式提供結構叫 WEBAOPI ;API ： 所有有輸入有輸出的東西都可以稱之為API  --- 都是函數；例如：Math.random()  --- api 例如：豆瓣API 開發平台：https://developers.douban.com/wiki/?title=guide 豆瓣API V2 (測試版)：https://developers.douban.com/wiki/?title=api_v2會看到： 這些都是豆瓣提供的一些常用的API介面：找到對應的，例如：電影API V2 進去：例如：找一個正在上映的介面：點擊進去就可以看到：

正在上映：Resources URI/v2/movie/in_theaters

那麼對應的“正在上映”的API地址就是：

http://api.douban.com/v2/movie/in_theaters

訪問就可以看到效果；

 

對應API 介面的一些參數：

  簡單使用：例如：start : 表示從那條開始，可以用來做翻頁；例如：count 表示多少條：

http://api.douban.com/v2/movie/in_theaters?count=2 

 

返回的內容是這樣的：  這樣看很難看明白：可以藉助一些工具：例如：google的一個外掛程式：  或者360瀏覽器的：  使用之後查看後的效果就會好一些；  如何結合angularJS去處理資料？例如請求回來的資料是這樣的：

{    "count": 2,    "start": 0,    "total": 36,    "subjects": [        {            "rating": {                "max": 10,                "average": 7.6,                "stars": "40",                "min": 0            },            "genres": [                "劇情",                "動作",                "武俠"            ],            "title": "繡春刀II：修羅戰場",            "casts": [                {                    "alt": "https://movie.douban.com/celebrity/1077991/",                    "avatars": {                        "small": "http://img3.doubanio.com/img/celebrity/small/1453574419.48.jpg",                        "large": "http://img3.doubanio.com/img/celebrity/large/1453574419.48.jpg",                        "medium": "http://img3.doubanio.com/img/celebrity/medium/1453574419.48.jpg"                    },                    "name": "張震",                    "id": "1077991"                },                {                    "alt": "https://movie.douban.com/celebrity/1052359/",                    "avatars": {                        "small": "http://img7.doubanio.com/img/celebrity/small/37843.jpg",                        "large": "http://img7.doubanio.com/img/celebrity/large/37843.jpg",                        "medium": "http://img7.doubanio.com/img/celebrity/medium/37843.jpg"                    },                    "name": "楊冪",                    "id": "1052359"                },                {                    "alt": "https://movie.douban.com/celebrity/1274761/",                    "avatars": {                        "small": "http://img7.doubanio.com/img/celebrity/small/25943.jpg",                        "large": "http://img7.doubanio.com/img/celebrity/large/25943.jpg",                        "medium": "http://img7.doubanio.com/img/celebrity/medium/25943.jpg"                    },                    "name": "張譯",                    "id": "1274761"                }            ],            "collect_count": 60970,            "original_title": "繡春刀II：修羅戰場",            "subtype": "movie",            "directors": [                {                    "alt": "https://movie.douban.com/celebrity/1321200/",                    "avatars": {                        "small": "http://img7.doubanio.com/img/celebrity/small/59201.jpg",                        "large": "http://img7.doubanio.com/img/celebrity/large/59201.jpg",                        "medium": "http://img7.doubanio.com/img/celebrity/medium/59201.jpg"                    },                    "name": "路陽",                    "id": "1321200"                }            ],            "year": "2017",            "images": {                "small": "http://img3.doubanio.com/view/movie_poster_cover/ipst/public/p2492665487.webp",                "large": "http://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2492665487.webp",                "medium": "http://img3.doubanio.com/view/movie_poster_cover/spst/public/p2492665487.webp"            },            "alt": "https://movie.douban.com/subject/26270502/",            "id": "26270502"        },        {            "rating": {                "max": 10,                "average": 5.4,                "stars": "30",                "min": 0            },            "genres": [                "劇情",                "動作",                "奇幻"            ],            "title": "悟空傳",            "casts": [                {                    "alt": "https://movie.douban.com/celebrity/1013782/",                    "avatars": {                        "small": "http://img7.doubanio.com/img/celebrity/small/1368156632.65.jpg",                        "large": "http://img7.doubanio.com/img/celebrity/large/1368156632.65.jpg",                        "medium": "http://img7.doubanio.com/img/celebrity/medium/1368156632.65.jpg"                    },                    "name": "彭于晏",                    "id": "1013782"                },                {                    "alt": "https://movie.douban.com/celebrity/1315861/",                    "avatars": {                        "small": "http://img7.doubanio.com/img/celebrity/small/1368598869.24.jpg",                        "large": "http://img7.doubanio.com/img/celebrity/large/1368598869.24.jpg",                        "medium": "http://img7.doubanio.com/img/celebrity/medium/1368598869.24.jpg"                    },                    "name": "倪妮",                    "id": "1315861"                },                {                    "alt": "https://movie.douban.com/celebrity/1041510/",                    "avatars": {                        "small": "http://img7.doubanio.com/img/celebrity/small/802.jpg",                        "large": "http://img7.doubanio.com/img/celebrity/large/802.jpg",                        "medium": "http://img7.doubanio.com/img/celebrity/medium/802.jpg"                    },                    "name": "餘文樂",                    "id": "1041510"                }            ],            "collect_count": 72206,            "original_title": "悟空傳",            "subtype": "movie",            "directors": [                {                    "alt": "https://movie.douban.com/celebrity/1274244/",                    "avatars": {                        "small": "http://img7.doubanio.com/img/celebrity/small/1387853548.15.jpg",                        "large": "http://img7.doubanio.com/img/celebrity/large/1387853548.15.jpg",                        "medium": "http://img7.doubanio.com/img/celebrity/medium/1387853548.15.jpg"                    },                    "name": "郭子健",                    "id": "1274244"                }            ],            "year": "2017",            "images": {                "small": "http://img3.doubanio.com/view/movie_poster_cover/ipst/public/p2475060299.webp",                "large": "http://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2475060299.webp",                "medium": "http://img3.doubanio.com/view/movie_poster_cover/spst/public/p2475060299.webp"            },            "alt": "https://movie.douban.com/subject/26035290/",            "id": "26035290"        }    ],    "title": "正在上映的電影-北京"}

 

 使用angularJS ：

<script type=‘text/javascript‘>var myApp = angular.module(‘myApp‘,[]);myApp.controller(‘myAppController‘,[‘$scope‘,function($scope){    $scope.subjects = date[‘subjects‘];}]);})(angular);</script>

頁面迴圈遍曆使用 angularJS的文法：

<div ng-app="myAPp" ng-controller="myAppController">    <div class="media" ng-repeat="item in subjects track by $index">      <div class="media-left">        <a href="#">          <img class="media-object" ng-src="{{item.images.small}}" alt="{{item.title}}">        </a>      </div>      <div class="media-body">        <h4 class="media-heading">{{item.title}}</h4>        <p>劇情：{{item.genres.join(‘、‘)}}</p>        <p>演員：<span ng-repeat="atc in item.casts track by $index">{{atc.name}}<span ng-if="!$last">、</span></span></p>      </div>    </div></div>

頁面效果：

  這個只是用 angularJS 結合 豆瓣API 開發的一個小例子。如有雷同，純屬偶然；     

豆瓣API介面開發，結合angularJS來做，感覺爽歪歪！