Erstellen Sie eine einfache TODO-App mit dem Django REST-Framework.
** Funktionen der zu erstellenden App **
** Umgebung / Version ** Windows 7 Python 3.4.3 Django 1.8.2 Django REST framework 3.1.2
** Leistungen ** https://github.com/koji-ohki-1974/django-rest-todo
Es wird davon ausgegangen, dass Python und Django bereits installiert sind.
Führen Sie den folgenden Befehl aus, um das Django REST-Framework zu installieren.
pip install djangorestframework
Erstellen Sie ein Django-Projekt. Führen Sie den folgenden Befehl in einem beliebigen Ordner aus.
django-admin.py startproject django_rest_todo
Initialisieren Sie die Datenbank und erstellen Sie einen Superuser.
cd django_rest_todo
python manage.py migrate
python manage.py createsuperuser
Legen Sie die Superuser-ID, die E-Mail-Adresse und das Kennwort fest.
| Artikel | Wert |
|---|---|
| Username | admin |
| Email address | [email protected] |
| Password | admin |
Führen Sie den folgenden Befehl aus.
python manage.py runserver
Starten Sie Ihren Browser und greifen Sie auf [http: // localhost: 8000 /](http: // localhost: 8000 /) zu. Wenn das Projekt erfolgreich erstellt wurde, wird der Bildschirm "Es hat funktioniert!" Angezeigt.
Beenden Sie den Server mit "STRG + C".
Führen Sie im Projektordner den folgenden Befehl aus, um eine Anwendung zu erstellen.
cd django_rest_todo
django-admin.py startapp api
Ändern Sie die Projekteinstellungen. Ändern Sie "settings.py" wie folgt.
settings.py (Auszug)
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'django_rest_todo.api',
)
MIDDLEWARE_CLASSES = (
# 'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
# 'django.contrib.auth.middleware.AuthenticationMiddleware',
# 'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
# 'django.contrib.messages.middleware.MessageMiddleware',
# 'django.middleware.clickjacking.XFrameOptionsMiddleware',
# 'django.middleware.security.SecurityMiddleware',
)
Definieren Sie das Todo-Modell. Bearbeiten Sie "api / models.py" und fügen Sie die Todo-Klasse hinzu.
api/models.py
from django.db import models
class Todo(models.Model):
text = models.TextField()
Wenn die Modelldefinition vollständig ist, wird sie in der Datenbank angezeigt. Führen Sie den folgenden Befehl aus.
cd ..
python manage.py makemigrations api
python manage.py sqlmigrate api 0001
python manage.py migrate
Definiert einen Serializer, der das Modell JSON zuordnet. Erstellen Sie "api / serializers.py".
api/serializers.py
from .models import Todo
from rest_framework import serializers
class TodoSerializer(serializers.HyperlinkedModelSerializer):
class Meta:
model = Todo
fields = ('id', 'text')
Erstellen Sie eine Ansicht für REST. Fügen Sie die TodoViewSet-Klasse zu "api / views.py" hinzu.
api/views.py
from rest_framework.viewsets import ModelViewSet
from .models import Todo
from .serializers import TodoSerializer
class TodoViewSet(ModelViewSet):
queryset = Todo.objects.all()
serializer_class = TodoSerializer
Stellen Sie das Routing so ein, dass die API verarbeitet werden kann. Ändern Sie "urls.py".
urls.py
from django.conf.urls import include, url
from rest_framework.routers import DefaultRouter
from .api import views
router = DefaultRouter()
router.register(r'todos', views.TodoViewSet)
urlpatterns = [
url(r'^api/', include(router.urls)),
url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]
Starten Sie den Server erneut und überprüfen Sie den Betrieb der API. Führen Sie den folgenden Befehl aus.
python manage.py runserver
Starten Sie Ihren Browser und greifen Sie zu:
http://localhost:8000/api/ http://localhost:8000/api/todos/
Beenden Sie den Server mit "STRG + C".
Gibt den Speicherort statischer Dateien (.html und .js) an. Bearbeiten Sie "settings.py" und fügen Sie Folgendes hinzu:
settings.py
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
Erstellen Sie einen "statischen" Ordner.
mkdir static
Erstellen Sie einen Todo-Listenbildschirm. Erstellen Sie "static / index.html".
static/index.html
<!doctype html>
<html ng-app="djangoTodo">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Django REST framework Todo App</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style>
html { overflow-y:scroll; }
body { padding-top:50px; }
#todo-list { margin-bottom:30px; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="core.js"></script>
</head>
<body ng-controller="mainController">
<div class="container">
<div class="jumbotron text-center">
<h1>Aufgabenliste<span class="label label-info">{{ todos.length }}</span></h1>
</div>
<div id="todo-list" class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="checkbox" ng-repeat="todo in todos">
<label>
<input type="checkbox" ng-click="deleteTodo(todo.id)"> {{ todo.text }}
</label>
</div>
</div>
</div>
<div id="todo-form" class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<form>
<div class="form-group">
<input type="text" class="form-control input-lg text-center" placeholder="Bitte geben Sie Todo ein" ng-model="formData.text">
</div>
<button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">hinzufügen</button>
</form>
</div>
</div>
</div>
</body>
</html>
Beschreiben des Aufrufs der API in JavaScript. Erstellen Sie "static / core.js".
static/core.js
var djangoTodo = angular.module('djangoTodo', []);
function mainController($scope, $http) {
$scope.readTodos = function() {
$http.get('/api/todos/')
.success(function(data) {
$scope.formData = {};
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
$scope.createTodo = function() {
$http.post('/api/todos/', $scope.formData)
.success(function(data) {
console.log(data);
$scope.readTodos();
})
.error(function(data) {
console.log('Error: ' + data);
});
};
$scope.deleteTodo = function(id) {
$http.delete('/api/todos/' + id + '/')
.success(function(data) {
console.log(data);
$scope.readTodos();
})
.error(function(data) {
console.log('Error: ' + data);
});
};
$scope.readTodos();
}
Legen Sie fest, dass die Anforderung auf die oberste Seite "/" zu "static / index.html" umgeleitet wird. Ändern Sie "urls.py".
urls.py
from django.conf.urls import include, url
from django.views.generic import RedirectView
from rest_framework.routers import DefaultRouter
from .api import views
router = DefaultRouter()
router.register(r'todos', views.TodoViewSet)
urlpatterns = [
url(r'^api/', include(router.urls)),
url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
url('', RedirectView.as_view(url='/static/index.html')),
]
Starten Sie den Server.
python manage.py runserver
Starten Sie Ihren Browser und greifen Sie auf [http: // localhost: 8000 /](http: // localhost: 8000 /) zu. Wenn die Todo-Liste angezeigt wird, sind Sie fertig.
Recommended Posts