Ng-admin et [Django REST framework](http: //www.django-rest) sont les moyens d'implémenter des outils de gestion avec l'API REST + Web statique. J'ai essayé d'utiliser -framework.org/). Cet article est destiné aux lecteurs expérimentés avec Python et Javascript. Le code source de cet article est publié dans le référentiel suivant.
--Django REST framework: Un framework Web Python qui facilite la création d'API REST. Comme son nom l'indique, il est basé sur Django. --ng-admin: bibliothèque client Javascript spécialisée pour les outils administratifs. Cela dépend d'Angularjs.
Il va sans dire que sur la figure, la configuration du serveur est la suivante.
---------------------------
Static Web (127.0.0.1:8080) // ng-admin
---------------------------
|
---------------------------
Web API (127.0.0.1:8000) // REST framework
---------------------------
On suppose que Python 3.5.2 est installé par Pyenv (pyenv-virtualenv). Supposons également que npm est déjà installé. Au fait, mon environnement est macOS El Capitan.
Django REST framework
Installez le framework Django REST. Cette fois, j'utiliserai le référentiel préparé par l'auteur.
git clone https://github.com/algas/rest-admin-example.gitcd rest-admin-example && pyenv virtualenv 3.5.2 rest-admin-examplepyenv activate rest-admin-examplepip install -U pip && pip install -r requirements.txtcd tutorial && python manage.py migratepython manage.py createsuperuserSi vous souhaitez créer votre propre environnement à partir de zéro, veuillez vous référer au tutoriel de démarrage rapide. Nous faisons la même chose que ce tutoriel à l'exception de quelques corrections de bogues.
ng-admin
cd ../jsnpm install ng-admin --saveAssurez-vous d'exécuter npm install ci-dessus dans le répertoire js.
Cela dépend du chemin d'accès aux node_modules créés.
Préparez un terminal à deux écrans pour lancer le serveur Django et le serveur Web (statique) séparément.
Django REST framework
cd /path/to/rest-admin-example/tutorialpython manage.py runserverhttp://127.0.0.1:8000/ng-admin
Ici, nous utilisons le serveur Web standard python 3 (http.server). D'autres serveurs Web tels que nginx fonctionnent bien.
cd /path/to/rest-admin-example/jspython -m http.server 8080http://127.0.0.1:8000/API
Deux groupes d'API, utilisateurs et groupes, sont définis. La définition de chaque modèle est la suivante.
User: url, username, email, groups Group: url, name
Les utilisateurs peuvent appartenir à n'importe quel nombre de groupes. url représente un lien vers l'élément API créé. http://127.0.0.1:8000/users/1/ http://127.0.0.1:8000/groups/1/
Sur la page de gestion, nous avons implémenté une fonction pour afficher une liste d'utilisateurs et de groupes et créer un nouvel élément. Cette fonctionnalité est implémentée dans deux fichiers, index.html et admin.js.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rest Admin Page</title>
<link rel="stylesheet" href="node_modules/ng-admin/build/ng-admin.min.css">
</head>
<body ng-app="restAdmin">
<div ui-view></div>
<script src="node_modules/ng-admin/build/ng-admin.min.js" type="text/javascript"></script>
<script src="admin.js" type="text/javascript"></script>
</body>
</html>
Ce qui précède fait référence à admin.js ci-dessous, en plus de js et css de ng-admin installés dans node_modules.
admin.js
var restAdmin = angular.module('restAdmin', ['ng-admin']);
restAdmin.config(['NgAdminConfigurationProvider', function (nga) {
var admin = nga.application('Rest Admin')
.baseApiUrl('http://127.0.0.1:8000/');
var group = nga.entity('groups').identifier(nga.field('url')).url(function(entityName, viewType, identifierValue, identifierName) {
return 'groups/';
});
var groupFields = [
nga.field('url'),
nga.field('name')
]
group.listView().fields(groupFields);
group.creationView().fields(groupFields);
admin.addEntity(group);
var user = nga.entity('users').identifier(nga.field('url')).url(function(entityName, viewType, identifierValue, identifierName) {
return 'users/';
});
var userFields = [
nga.field('url'),
nga.field('username'),
nga.field('email'),
nga.field('groups', 'json'),
]
user.listView().fields(userFields);
user.creationView().fields(userFields);
admin.addEntity(user);
nga.configure(admin);
}]);
Tout d'abord, nous définissons http: //127.0.0.1: 8000 / comme baseApiUrl.
Ensuite, nous définissons les utilisateurs et les groupes comme Entité.
La spécification par défaut de ng-admin suppose que l'URI ne se termine pas par une barre oblique (/).
Cependant, la spécification du framework django inclut toujours une barre oblique (/) à la fin de l'URI, nous avons donc défini une fonction url pour absorber cette différence.
ListView et creationView sont respectivement définis pour les utilisateurs et les groupes.
Les éléments des groupes dans User sont définis dans Array, donc json est spécifié comme type de champ de ng-admin.
django_cors_middleware.
Comme il est défini dans settings.py, aucune action spéciale n'est requise lors du référencement du référentiel de l'auteur.
-Résolution de dépendance
La source fork de la bibliothèque ci-dessus n'était pas mise à jour et n'était pas compatible avec Django-1.10, donc je l'ai résolue en me référant à la branche de l'utilisateur qui a fait Pull Req.
Ceci est également décrit dans requirements.txt, vous devriez donc être en mesure d'éviter le problème.Étant donné que le framework Django REST lui-même fournit l'interface utilisateur Web, les avantages de sa combinaison avec ng-admin peuvent être déroutants. Le framework Django REST est également pratique à utiliser seul. Bien entendu, ng-admin peut également fonctionner avec d'autres API Web.
Recommended Posts