Mit Ng-admin und [Django REST Framework](http: //www.django-rest) können Verwaltungstools mit REST API + Static Web implementiert werden. Ich habe versucht, -framework.org/) zu verwenden. Dieser Artikel richtet sich an Leser mit Erfahrung in Python und Javascript. Der Quellcode dieses Artikels wird im folgenden Repository veröffentlicht.
--Django REST Framework: Ein Python-Webframework, mit dem REST-APIs einfach erstellt werden können. Wie der Name schon sagt, basiert es auf Django. --ng-admin: Javascript-Clientbibliothek, die auf Verwaltungstools spezialisiert ist. Dies hängt von Angularjs ab.
In der Abbildung ist die Serverkonfiguration natürlich wie folgt.
---------------------------
Static Web (127.0.0.1:8080) // ng-admin
---------------------------
|
---------------------------
Web API (127.0.0.1:8000) // REST framework
---------------------------
Es wird davon ausgegangen, dass Python 3.5.2 von Pyenv (pyenv-virtualenv) installiert wird. Nehmen Sie außerdem an, dass npm bereits installiert ist. Meine Umgebung ist übrigens macOS El Capitan.
Django REST framework
Installieren Sie das Django REST-Framework. Dieses Mal werde ich das vom Autor erstellte Repository verwenden.
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 createsuperuserWenn Sie Ihre eigene Umgebung von Grund auf neu erstellen möchten, lesen Sie bitte Schnellstart-Tutorial. Wir machen das gleiche wie in diesem Tutorial, abgesehen von einigen Fehlerkorrekturen.
ng-admin
cd ../jsnpm install ng-admin --saveStellen Sie sicher, dass Sie die obige "npm install" im js-Verzeichnis ausführen. Dies hängt vom Pfad zu den erstellten Knotenmodulen ab.
Bereiten Sie ein Terminal mit zwei Bildschirmen vor, um den Django-Server und den (statischen) Webserver getrennt zu starten.
Django REST framework
cd /path/to/rest-admin-example/tutorialpython manage.py runserverhttp://127.0.0.1:8000/ng-admin
Hier verwenden wir den Python 3 Standard-Webserver (http.server). Andere Webserver wie Nginx sind in Ordnung.
cd /path/to/rest-admin-example/jspython -m http.server 8080http://127.0.0.1:8000/API
Es werden zwei API-Gruppen, Benutzer und Gruppen, definiert. Die Definition jedes Modells ist wie folgt.
User: url, username, email, groups Group: url, name
Benutzer können einer beliebigen Anzahl von Gruppen angehören. Die URL stellt einen Link zum erstellten API-Element dar. http://127.0.0.1:8000/users/1/ http://127.0.0.1:8000/groups/1/
Auf der Verwaltungsseite haben wir eine Funktion implementiert, um eine Liste von Benutzern und Gruppen anzuzeigen und ein neues Element zu erstellen. Diese Funktion ist in zwei Dateien implementiert: index.html und 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>
Das Obige bezieht sich auf admin.js unten, zusätzlich zu js und css für ng-admin, die auf node_modules installiert sind.
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);
}]);
Zunächst definieren wir http: //127.0.0.1: 8000 / als baseApiUrl. Als Nächstes definieren wir Benutzer und Gruppen als Entität. Die Standardspezifikation für ng-admin geht davon aus, dass der URI nicht mit einem Schrägstrich (/) endet. Die Django-Framework-Spezifikation enthält jedoch immer einen Schrägstrich (/) am Ende des URI. Daher haben wir eine URL-Funktion definiert, um diesen Unterschied auszugleichen. ListView und CreationView sind für Benutzer bzw. Gruppen definiert. Die Elemente von Gruppen in User werden in Array definiert, daher wird json als Feldtyp von ng-admin angegeben.
--CORS-Einstellungen
Unter normalen Einstellungen kann die API JSON aufgrund eines Problems mit der gemeinsamen Nutzung von Ressourcen nicht an ng-admin übergeben.
Wir umgehen dieses Problem mit "django_cors_middleware".
Da es in settings.py festgelegt ist, ist keine spezielle Aktion erforderlich, wenn auf das Repository des Autors verwiesen wird.
require.txt beschrieben, damit Sie das Problem vermeiden können.Da das Django REST-Framework selbst die Web-Benutzeroberfläche bereitstellt, können die Vorteile der Kombination mit ng-admin verwirrend sein. Das Django REST-Framework kann auch bequem allein verwendet werden. Natürlich kann ng-admin auch mit anderen Web-APIs arbeiten.
Recommended Posts