px2rem api
500px is a photo community for discovering, sharing, buying and selling inspiring photography. In this article we are going to explore their API and build a small showcase app. Let’s get started.
500px是一个用于发现，共享，购买和出售启发性摄影的照片社区。 在本文中，我们将探索它们的API并构建一个小型展示应用程序。 让我们开始吧。
In this article, we are going to build a small Laravel app with three main features. You can check the final result on Github.
在本文中，我们将构建一个具有三个主要功能的小型Laravel应用。 您可以在Github上查看最终结果 。
The index page will contain the latest popular photos on the 500px website. 索引页面将包含500px网站上的最新热门照片。 A filter will let the user choose from popular, upcoming, etc. and also sort the result according to votes, rating, etc. 过滤器将使用户从受欢迎的，即将来临的等中选择，并根据投票，评级等对结果进行排序。 A photographer’s profile page with the list of available photos will be available. 将提供摄影师的个人资料页面，其中包含可用的照片列表。Before using their API, we need to get some access credentials. After signing in to the website you can go to the application settings and register for a new test application. The consumer key and the consumer secret will be used for accessing the API.
在使用他们的API之前，我们需要获取一些访问凭据。 登录网站后，您可以进入应用程序设置并注册新的测试应用程序。 消费者密钥和消费者秘密将用于访问API。
We are going to use Guzzle to make HTTP requests, and Guzzle Oauth subscriber for using OAuth. If you are not familiar with these two, you can check out this Guzzle introduction and read about using Guzzle OAuth.
我们将使用Guzzle发出HTTP请求，并使用Guzzle Oauth订阅者使用OAuth。 如果您不熟悉这两个，则可以查看Guzzle简介并阅读有关使用Guzzle OAuth的信息 。
Let’s first add the Guzzle packages to our composer.json and autoload our src folder where we put our authentication class. Run composer update to update our app.
首先，将Guzzle软件包添加到composer.json并自动加载src文件夹，在该文件夹中放置身份验证类。 运行composer update来更新我们的应用程序。
// composer.json ... "require": { ... "guzzle/guzzle": "3.9.*", "guzzlehttp/oauth-subscriber": "0.2.*" }, "autoload": { "classmap": [ ... "app/src" ] } ...Inside our src/PxOAuth.php file we are going to provide our consumer_key and consumer_secret to build our OAuth object.
在src/PxOAuth.php文件中，我们将提供consumer_key和consumer_secret来构建我们的OAuth对象。
//src/PxOAth.php class PxOAuth{ public function __construct($host, $consumer_key, $consumer_secret){ $this->consumer_key = $consumer_key; $this->consumer_secret = $consumer_secret; $this->host = $host; $oauth = new Oauth1([ 'consumer_key' => $this->consumer_key, 'consumer_secret' => $this->consumer_secret ]); $this->client = new Client([ 'base_url' => $this->host, 'defaults' => ['auth' => 'oauth']]); $this->client->getEmitter()->attach($oauth); } }To take advantage of Laravel’s IoC we can bind our class to the container so it can be resolved automatically.
为了利用Laravel的IoC，我们可以将我们的类绑定到容器，以便可以自动解决它。
// bootstrap/start.php App::singleton('pxoauth', function(){ $consumer_key = 'TxNYEWxvU26cylAkxTc1KgNmXCPvFc1EazhIk5Po'; $consumer_secret = 'n88vhgVgpkaCr3I0h1yB1bmkhy72jPzhhzFSbpYI'; $host = 'https://api.500px.com/v1/'; $oauth = new PxOAuth($host, $consumer_key, $consumer_secret); return $oauth; });We bound the class as a singleton because we only need to resolve it once and always return the same instance after that.
我们将类绑定为单例，因为我们只需要解析一次即可，然后始终返回相同的实例。
Our index route will retrieve today’s popular photos and supports a number of parameters. You can check the docs for the list of available options.
我们的索引路线将检索当今流行的照片，并支持许多参数。 您可以在文档中查看可用选项的列表。
// app/routes.php Route::get('/', ['uses' => 'PXController@index']); // controllers/PXController.php public function index(){ $filters = [ 'feature' => Input::get('feature', 'popular'), 'sort' => Input::get('sort', 'created_at'), 'sort_direction' => Input::get('sort_direction', 'desc'), 'page' => Input::get('page', 1) ]; $result = $this->loadPhotos($filters); return View::make('index', ['photos' => $result['photos'], "inputs" => $filters]); } private function loadPhotos($parameters){ $parameters = array_merge(['image_size' => 3], $parameters); $px = App::make('pxoauth'); $result = $px->get('photos', $parameters)->json(); return $result; }We can filter the list of photos by category and sort them according to a specific set. You can check the docs for the list of supported parameters. The API returns the list of photos with some other useful properties. The images property inside a single photo item contains an array of photos depending on the requested size. You can choose from 1 to 4, or pass in an array of sizes.
我们可以按类别过滤照片列表，并根据特定的集合对其进行排序。 您可以在文档中查看受支持的参数列表。 API返回具有其他有用属性的照片列表。 单个照片项目中的images属性包含一系列照片，具体取决于请求的大小。 您可以选择1到4，也可以传入一系列大小。
// views/index.blade.php @extends('layouts.master') @section("content") <div class="row photos"> <div class="col-lg-12"> <h1 class="page-header">Popular photos</h1> </div> <form action="/" method="GET" id="filters"> // filter options </form> @include('partials/photos', ['photos' => $photos]) <button id="load_more" class="btn btn-primary load_more center-block">Load more</button> </div> <hr> @endsectionWe include a photos partial and the pagination button to illustrate the use of the page query parameter.
我们包括一个局部的photos和一个分页按钮，以说明page查询参数的用法。
// views/partials/photos.blade.php @foreach($photos as $photo) <div class="col-lg-3 col-md-4 col-xs-6 thumb" data-photo-id="{{ $photo['id'] }}"> <a class="thumbnail" target="_blank" href="http://500px.com{{ $photo['url'] }}"> <img class="img-responsive" src="{{ $photo['images'][0]['url'] }}" alt="{{ $photo['name'] }}"> </a> <div class="caption"> <a class="pull-left" href="/user/{{ $photo['user']['id'] }}">{{ $photo['user']['fullname'] }}</a> <a class="pull-right fa fa-heart favorite" href="#"> {{ $photo['favorites_count'] }}</a> <a class="pull-right fa fa-thumbs-up vote" href="#"> {{ $photo['votes_count'] }}</a> </div> </div> @endforeachThe load more button will fire an ajax request to get the next page and append it to the current page.
load more按钮将触发ajax请求以获取下一页并将其附加到当前页面。
// views/index.blade.php @section("scripts") <script> $(function(){ $('#load_more').click(function(e){ var page = $(this).data('page') || 2, filter_form = $("#filters"), feature = filter_form.find("select[name='feature']").val(), sort = filter_form.find("select[name='sort']").val(), sort_direction = filter_form.find("select[name='sort_direction']").val(); $(this).text("Loading..."); $.ajax({ url: '/ajax/index_more', data: { page: page, feature: feature, sort: sort, sort_direction: sort_direction }, type: 'get', success: function(data){ var photos = $('.photos'), more_photos = $(data); more_photos.insertAfter(photos.find('.thumb:last')); $('#load_more').data('page', page + 1); }//success }).done(function(){ $("#load_more").text("Load more"); }) }); }); </script> @endsection // app/routes.php Route::get('/ajax/index_more', ['uses' => 'PXController@loadMore']); // controllers/PXController.php public function loadMore(){ $filters = [ 'feature' => Input::get('feature', 'popular'), 'sort' => Input::get('sort', 'created_at'), 'sort_direction' => Input::get('sort_direction', 'desc'), 'page' => Input::get('page', 1) ]; $result = $this->loadPhotos($filters); return View::make('partials/photos', ['photos' => $result['photos']]); }After a successful request, we pass the list of photos to the partial and send the result back to the page. We also increment the current page indicator.
成功请求后，我们将照片列表传递给局部照片，并将结果发送回页面。 我们还将增加当前页面指示器。
Every photo has an owner, so when the user selects a photographer we filter photos by the user id.
每张照片都有一个所有者，因此当用户选择摄影师时，我们将通过用户ID过滤照片。
// app/routes.php Route::get('/user/{id}', ['uses' => 'PXController@photosByUser']);The API provides a users/show endpoint to retrieve a specific user using the user id, username or email. After that, we query the previous photos endpoint with some extra parameters.
API提供了一个用户/显示端点，以使用用户ID，用户名或电子邮件来检索特定用户。 之后，我们使用一些额外的参数查询先前的照片端点。
// controllers/PXController.php public function photosByUser($uid){ $px = App::make('pxoauth'); $user = $px->get('users/show', ['id' => $uid])->json(); $inputs = ['image_size' => 3, 'feature' => 'user', 'user_id' => $uid, 'rpp' => 100]; $result = $this->loadPhotos($inputs); return View::make('user', ['photos' => $result['photos'], 'user' => $user['user']]); }The API also provides a set of endpoints to search for a user using some term, list followers and friends. You can check the docs for the list of endpoints.
该API还提供了一组端点，以使用某些术语，列表关注者和朋友来搜索用户。 您可以在文档中查看端点列表。
We can also create new functionality by consuming more API endpoints. For example, when the user selects a photo we can display the list of comments (photos/:id/comments) and maybe let the user submit a new comment. We can also hide adult content when the nsfw attribute is set to true.
我们还可以通过使用更多的API端点来创建新功能。 例如，当用户选择照片时，我们可以显示评论列表( photos /：id / comments )，并可以让用户提交新评论 。 当nsfw属性设置为true时，我们也可以隐藏成人内容。
In this article we covered some basics of the 500px API, in the next part we are going to build more functionality and try to extend our application. You can check the Github repository to test the current version of our app. Let me know what you think in the comments below.
在本文中，我们介绍了500px API的一些基础知识，在下一部分中，我们将构建更多功能并尝试扩展我们的应用程序。 您可以检查Github存储库以测试我们应用的当前版本。 让我知道您在以下评论中的想法。
翻译自: https://www.sitepoint.com/popular-photos-filters-user-profiles-500px-api/
px2rem api
相关资源：css入门笔记