django-rest-framework/topics/browsable-api.html

204 lines
15 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Django REST framework</title>
2012-10-05 18:26:53 +04:00
<link href="http://tomchristie.github.com/django-rest-framework/img/favicon.ico" rel="icon" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://tomchristie.github.com/django-rest-framework/css/prettify.css" rel="stylesheet">
<link href="http://tomchristie.github.com/django-rest-framework/css/bootstrap.css" rel="stylesheet">
<link href="http://tomchristie.github.com/django-rest-framework/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://tomchristie.github.com/django-rest-framework/css/default.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
2012-10-01 19:27:59 +04:00
<body onload="prettyPrint()" class="browsable-api-page">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="repo-link btn btn-primary btn-small" href="https://github.com/tomchristie/django-rest-framework/tree/restframework2">GitHub</a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://tomchristie.github.com/django-rest-framework">Django REST framework</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="http://tomchristie.github.com/django-rest-framework">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tutorial <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://tomchristie.github.com/django-rest-framework/tutorial/1-serialization">1 - Serialization</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/tutorial/2-requests-and-responses">2 - Requests and responses</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/tutorial/3-class-based-views">3 - Class based views</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/tutorial/4-authentication-permissions-and-throttling">4 - Authentication, permissions and throttling</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/tutorial/5-relationships-and-hyperlinked-apis">5 - Relationships and hyperlinked APIs</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/tutorial/6-resource-orientated-projects">6 - Resource orientated projects</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">API Guide <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/requests">Requests</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/responses">Responses</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/views">Views</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/generic-views">Generic views</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/parsers">Parsers</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/renderers">Renderers</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/serializers">Serializers</a></li>
2012-10-05 20:10:33 +04:00
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/fields">Serializer fields</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/authentication">Authentication</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/permissions">Permissions</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/throttling">Throttling</a></li>
2012-10-01 19:27:59 +04:00
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/pagination">Pagination</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/content-negotiation">Content negotiation</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/format-suffixes">Format suffixes</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/reverse">Returning URLs</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/exceptions">Exceptions</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/status-codes">Status codes</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/api-guide/settings">Settings</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Topics <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://tomchristie.github.com/django-rest-framework/topics/csrf">Working with AJAX and CSRF</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/topics/formoverloading">Browser based PUT, PATCH and DELETE</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/topics/browsable-api">Working with the browsable API</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/topics/contributing">Contributing to REST framework</a></li>
<li><a href="http://tomchristie.github.com/django-rest-framework/topics/credits">Credits</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Version: 2.0.0 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Trunk</a></li>
<li><a href="#">2.0.0</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
2012-10-05 18:26:53 +04:00
<div id="wrap">
<div class="container-fluid">
<div class="row-fluid">
2012-10-05 16:22:18 +04:00
<div class="span3">
2012-10-05 16:22:18 +04:00
<div id="table-of-contents">
<ul class="nav nav-list side-nav well sidebar-nav-fixed">
<li class="main"><a href="#working-with-the-browsable-api">Working with the Browsable API</a></li>
<li><a href="#urls">URLs</a></li>
<li><a href="#formats">Formats</a></li>
<li><a href="#customizing">Customizing</a></li>
</ul>
</div>
</div>
<div id="main-content" class="span9">
<h1 id="working-with-the-browsable-api">Working with the Browsable API</h1>
<p>API may stand for Application <em>Programming</em> Interface, but humans have to be able to read the APIs, too; someone has to do the programming. Django REST Framework supports generating human-friendly HTML output for each resource when the <code>HTML</code> format is requested. These pages allow for easy browsing of resources, as well as forms for submitting data to the resources using <code>POST</code>, <code>PUT</code>, and <code>DELETE</code>.</p>
<h2 id="urls">URLs</h2>
<p>If you include fully-qualified URLs in your resource output, they will be 'urlized' and made clickable for easy browsing by humans. The <code>rest_framework</code> package includes a <a href="../api-guide/reverse"><code>reverse</code></a> helper for this purpose.</p>
<h2 id="formats">Formats</h2>
<p>By default, the API will return the format specified by the headers, which in the case of the browser is HTML. The format can be specified using <code>?format=</code> in the request, so you can look at the raw JSON response in a browser by adding <code>?format=json</code> to the URL. There are helpful extensions for viewing JSON in <a href="https://addons.mozilla.org/en-US/firefox/addon/jsonview/">Firefox</a> and <a href="https://chrome.google.com/webstore/detail/chklaanhfefbnpoihckbnefhakgolnmc">Chrome</a>.</p>
<h2 id="customizing">Customizing</h2>
<p>To customize the look-and-feel, create a template called <code>api.html</code> and add it to your project, eg: <code>templates/rest_framework/api.html</code>, that extends the <code>rest_framework/base.html</code> template.</p>
<p>The included browsable API template is built with <a href="http://getbootstrap.com">Bootstrap (2.1.1)</a>, making it easy to customize the look-and-feel.</p>
<h3 id="theme">Theme</h3>
<p>To replace the theme wholesale, add a <code>bootstrap_theme</code> block to your <code>api.html</code> and insert a <code>link</code> to the desired Bootstrap theme css file. This will completely replace the included theme.</p>
<pre class="prettyprint lang-py"><code>{% block bootstrap_theme %}
&lt;link rel="stylesheet" href="/path/to/my/bootstrap.css" type="text/css"&gt;
{% endblock %}
</code></pre>
<p>A suitable replacement theme can be generated using Bootstrap's <a href="http://twitter.github.com/bootstrap/customize.html#variables">Customize Tool</a>. Also, there are pre-made themes available at <a href="http://bootswatch.com/">Bootswatch</a>. To use any of the Bootswatch themes, simply download the theme's <code>bootstrap.min.css</code> file, add it to your project, and replace the default one as described above.</p>
<p>You can also change the navbar variant, which by default is <code>navbar-inverse</code>, using the <code>bootstrap_navbar_variant</code> block. The empty <code>{% block bootstrap_navbar_variant %}{% endblock %}</code> will use the original Bootstrap navbar style.</p>
<p>For more specific CSS tweaks, use the <code>extra_style</code> block instead.</p>
<h3 id="blocks">Blocks</h3>
<p>All of the blocks available in the browsable API base template that can be used in your <code>api.html</code>.</p>
<ul>
<li><code>blockbots</code> - <code>&lt;meta&gt;</code> tag that blocks crawlers</li>
<li><code>bodyclass</code> - (empty) class attribute for the <code>&lt;body&gt;</code></li>
<li><code>bootstrap_theme</code> - CSS for the Bootstrap theme</li>
<li><code>bootstrap_navbar_variant</code> - CSS class for the navbar</li>
<li><code>branding</code> - section of the navbar, see <a href="http://twitter.github.com/bootstrap/components.html#navbar">Bootstrap components</a></li>
<li><code>breadcrumbs</code> - Links showing resource nesting, allowing the user to go back up the resources. It's recommended to preserve these, but they can be overridden using the breadcrumbs block.</li>
<li><code>extrastyle</code> - (empty) extra CSS for the page</li>
<li><code>extrahead</code> - (empty) extra markup for the page <code>&lt;head&gt;</code></li>
<li><code>footer</code> - Any copyright notices or similar footer materials can go here (by default right-aligned)</li>
<li><code>global_heading</code> - (empty) Use to insert content below the header but before the breadcrumbs.</li>
<li><code>title</code> - title of the page</li>
<li><code>userlinks</code> - This is a list of links on the right of the header, by default containing login/logout links. To add links instead of replace, use {{ block.super }} to preserve the authentication links.</li>
</ul>
<h4 id="components">Components</h4>
<p>All of the <a href="http://twitter.github.com/bootstrap/components.html">Bootstrap components</a> are available.</p>
<h5 id="tooltips">Tooltips</h5>
<p>The browsable API makes use of the Bootstrap tooltips component. Any element with the <code>js-tooltip</code> class and a <code>title</code> attribute has that title content displayed in a tooltip on hover after a 1000ms delay.</p>
<h3 id="advanced-customization">Advanced Customization</h3>
<h4 id="context">Context</h4>
<p>The context that's available to the template:</p>
<ul>
<li><code>allowed_methods</code> : A list of methods allowed by the resource</li>
<li><code>api_settings</code> : The API settings</li>
<li><code>available_formats</code> : A list of formats allowed by the resource</li>
<li><code>breadcrumblist</code> : The list of links following the chain of nested resources</li>
<li><code>content</code> : The content of the API response</li>
<li><code>description</code> : The description of the resource, generated from its docstring</li>
<li><code>name</code> : The name of the resource</li>
<li><code>post_form</code> : A form instance for use by the POST form (if allowed)</li>
<li><code>put_form</code> : A form instance for use by the PUT form (if allowed)</li>
<li><code>request</code> : The request object</li>
<li><code>response</code> : The response object</li>
<li><code>version</code> : The version of Django REST Framework</li>
<li><code>view</code> : The view handling the request</li>
<li><code>FORMAT_PARAM</code> : The view can accept a format override</li>
<li><code>METHOD_PARAM</code> : The view can accept a method override</li>
</ul>
<h4 id="not-using-basehtml">Not using base.html</h4>
<p>For more advanced customization, such as not having a Bootstrap basis or tighter integration with the rest of your site, you can simply choose not to have <code>api.html</code> extend <code>base.html</code>. Then the page content and capabilities are entirely up to you.</p>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
2012-10-05 18:26:53 +04:00
<div id="push"></div>
</div>
<!--
<div class="row footer">
<div class="span12">
<p>Sponsored by <a href="http://dabapps.com/">Dab Apps</a>.</a></p>
</div>
</div>
-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://tomchristie.github.com/django-rest-framework/js/jquery-1.8.1-min.js"></script>
2012-10-05 16:22:18 +04:00
<script src="http://tomchristie.github.com/django-rest-framework/js/prettify-1.0.js"></script>
<script src="http://tomchristie.github.com/django-rest-framework/js/bootstrap-2.1.1-min.js"></script>
<script>
//$('.side-nav').scrollspy()
var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);
2012-09-17 23:21:26 +04:00
$('.dropdown-menu').on('click touchstart', function(event) {
event.stopPropagation();
});
</script>
2012-10-01 19:27:59 +04:00
</body></html>