Créez une application TODO simple à l'aide du framework Django REST.
** Fonctionnalités de l'application à créer **
--Application de page unique qui gère la création / l'achèvement de TODO --Store TODO dans SQLite3 --Utiliser le framework Django REST --Créer une API RESTful
** Environnement / Version ** Windows 7 Python 3.4.3 Django 1.8.2 Django REST framework 3.1.2
** Livrables ** https://github.com/koji-ohki-1974/django-rest-todo
On suppose que Python et Django sont déjà installés.
Exécutez la commande suivante pour installer le framework Django REST.
pip install djangorestframework
Créez un projet Django. Exécutez la commande suivante dans n'importe quel dossier.
django-admin.py startproject django_rest_todo
Initialisez la base de données et créez un superutilisateur.
cd django_rest_todo
python manage.py migrate
python manage.py createsuperuser
Définissez l'ID de super utilisateur, l'adresse e-mail et le mot de passe.
| article | valeur |
|---|---|
| Username | admin |
| Email address | [email protected] |
| Password | admin |
Exécutez la commande suivante.
python manage.py runserver
Démarrez votre navigateur et accédez à [http: // localhost: 8000 /](http: // localhost: 8000 /). Si le projet a été créé avec succès, l'écran «Cela a fonctionné!» S'affichera.
Quittez le serveur avec "CTRL + C".
Dans le dossier du projet, exécutez la commande suivante pour créer une application.
cd django_rest_todo
django-admin.py startapp api
Modifiez les paramètres du projet. Modifiez "settings.py" comme suit.
settings.py (extrait)
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',
)
Définissez le modèle Todo. Modifiez "api / models.py" et ajoutez la classe Todo.
api/models.py
from django.db import models
class Todo(models.Model):
text = models.TextField()
Lorsque la définition du modèle est terminée, elle sera reflétée dans la base de données. Exécutez la commande suivante.
cd ..
python manage.py makemigrations api
python manage.py sqlmigrate api 0001
python manage.py migrate
Définit un sérialiseur qui mappe le modèle à JSON. Créez "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')
Créez une vue pour REST. Ajoutez la classe TodoViewSet à "api / views.py".
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
Définissez le routage pour que l'API puisse être traitée. Modifiez "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'))
]
Redémarrez le serveur et vérifiez le fonctionnement de l'API. Exécutez la commande suivante.
python manage.py runserver
Lancez votre navigateur et accédez:
http://localhost:8000/api/ http://localhost:8000/api/todos/
Quittez le serveur avec "CTRL + C".
Spécifie l'emplacement des fichiers statiques (.html et .js). Modifiez "settings.py" et ajoutez ce qui suit:
settings.py
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
Créez un dossier «statique».
mkdir static
Créez un écran de liste Todo. Créez "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>Liste de choses à faire<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="Veuillez entrer Todo" ng-model="formData.text">
</div>
<button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">ajouter à</button>
</form>
</div>
</div>
</div>
</body>
</html>
Décrivez le processus d'appel de l'API en JavaScript. Créez "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();
}
Défini pour rediriger la demande vers la première page "/" vers "static / index.html". Modifiez "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')),
]
Démarrez le serveur.
python manage.py runserver
Démarrez votre navigateur et accédez à [http: // localhost: 8000 /](http: // localhost: 8000 /). Lorsque la liste Todo s'affiche, vous avez terminé.
Recommended Posts