Erstellen einer AJAX Helloworld mit Python Pyramid

Einführung

In diesem Tutorial werde ich Sie durch den Prozess führen, Ajax zu verwirklichen. Wenn Sie einen kleinen Überblick darüber haben möchten, was Ajax eigentlich bedeutet, bevor Sie es tatsächlich implementieren, dann schauen Sie sich dieses Tutorial an.

Ajax erfordert serverseitigen und clientseitigen Code, um gut zu funktionieren. Dieses Tutorial behandelt beide Seiten. Auf der Serverseite verwenden wir das Pyramid-Framework und auf der Clientseite verwenden wir JQuery. Diese Tools sind sehr robust und gut dokumentiert und werden von großen freundlichen Communities unterstützt. Dieses Tutorial behandelt nicht die Grundlagen der verschiedenen verwendeten Technologien. Die behandelten Techniken, Werkzeuge und Sprachen sind nicht die einzigen, die es wert sind, verwendet zu werden. Dies ist nur eine Hallo-Welt.

Es gibt eine vollständige Arbeitskopie des Codes, den ich durchgehen werde hier.

Erste Schritte mit Pyramid – Installation

Pyramid ist ein sehr leichtes Web-Framework, das in Python geschrieben ist. Wir werden dies für die Serverseite unserer Anwendung verwenden. Machen Sie sich keine Sorgen, wenn Sie mit Pyramid oder sogar Python nicht vertraut sind, der Code, den ich hier einfügen werde, ist kinderleicht.

Um mit Pyramid zu beginnen, müssen wir es zuerst installieren. Stellen Sie zunächst sicher, dass Sie Python installiert haben, öffnen Sie dann ein Terminal, navigieren Sie zu dem Verzeichnis, in dem Sie dieses Projekt speichern möchten, und geben Sie dann Folgendes ein:

virtualenv my_venv --no-site-packages

Dadurch entsteht ein virtuelle Umgebung. Das Starten neuer Projekte in ihrer eigenen Umgebung ist im Allgemeinen eine bewährte Vorgehensweise, da dadurch bestimmte Arten von Paketkonflikten verhindert werden. Wenn das keinen Sinn macht, machen Sie sich keine Sorgen. Wir werden trotzdem weiterhin der bewährten Praxis folgen.

Der Befehl, den wir gerade ausgeführt haben, hat ein Verzeichnis namens erstellt my_env und lege ein paar Sachen hinein. Der nächste Schritt besteht darin, die Umgebung zu aktivieren:

cd my_env
source bin/activate

Dies aktiviert Ihre virtuelle Umgebung. Zum Deaktivieren einfach eintippen deactivate.

Jetzt installieren wir Pyramid mit diesem Befehl in der Umgebung:

pip install pyramid

Keine Fehler? Gut. Das bedeutet, dass Pyramid jetzt in Ihrer virtuellen Umgebung installiert ist. Wenn Sie diese Schritte nicht zum Laufen bringen können, finden Sie auf der Pyramid-Website ausführliche Anweisungen zur Installation von Pyramid auf verschiedenen Betriebssystemen.

Ihre erste Webanwendung

Sobald Pyramid installiert ist, ist es ziemlich einfach, eine einfache Web-App zum Laufen zu bringen. Geben Sie Folgendes in Ihre Konsole ein:

pcreate -s starter hello_ajax

Mit diesem Befehl wird eine grundlegende Anwendung aufgerufen hello_ajax. Es nutzt die starter Gerüst. Pyramid hat für Sie das Gerüst einer Webanwendung erstellt, die Anwendung funktioniert, leistet aber nicht viel. Pyramid wird mit einigen verschiedenen Gerüsten geliefert und weitere können heruntergeladen werden. Ein Scaffold ist quasi ein Rezept für eine Web-App. Verwendung der Anlasser Gerüst erstellt Pyramid etwas sehr Grundlegendes, andere Gerüste können verwendet werden, um andere Funktionen hinzuzufügen. Zum Beispiel die alchemy Scaffold fügt der Mischung Datenbankinteraktion hinzu. Für weitere Informationen zu den verfügbaren Gerüsten und deren Verwendung verweise ich Sie erneut auf die offizielle Pyramid-Dokumentation.

Im nächsten Schritt installieren Sie Ihre Web-App. Geben Sie Folgendes in Ihre Konsole ein:

cd hello_ajax
python setup.py develop

Dadurch werden alle Abhängigkeiten der hello_ajax Anwendung sind vorhanden. Sobald dieser Befehl abgeschlossen ist, ist es an der Zeit, die Anwendung zu starten:

pserve development.ini --reload

Dadurch wird der Entwicklungsserver gestartet und Ihre App bereitgestellt. Sie werden feststellen, dass am Ende der Ausgabe wahrscheinlich eine Adresse steht 0.0.0.0:6543. Das 0.0.0.0 Teil ist ein IP Adressees ist die Adresse der localhost, der Computer, an dem Sie arbeiten. Das 6543 Teil wird als Portnummer bezeichnet, was für manche Leute etwas schwer vorstellbar ist. Wenn eine IP-Adresse auf ein Haus zeigt, dann zeigt die Portnummer auf eine bestimmte Tür oder ein bestimmtes Fenster. Wenn das keinen Sinn macht, dann mach dir keine Sorgen. Wichtig ist, dass Sie einen Browser öffnen und die Adresse eingeben 0.0.0.0:6543 in der URL-Leiste werden Sie dann von einer hübschen Willkommensseite mit einer Nachricht in der Art begrüßt Willkommen bei hello_ajax, einer vom Pyramid Web Framework generierten Anwendung.

Gut erledigt! Sie haben jetzt eine funktionierende Webanwendung erstellt. Der nächste Schritt besteht darin, etwas anderes als eine freundliche Willkommensnachricht anzuzeigen.

Grundlegende Anwendungsstruktur

Das pcreate Befehl hat nichts besonders Magisches getan, es hat nur eine Verzeichnisstruktur erstellt und ein paar Dateien darin abgelegt. Die Verzeichnisstruktur sieht in etwa so aus (ich habe einige Dinge absichtlich übersprungen, es ist nicht alles relevant für dieses Tutorial):

\hello_ajax
      \hello_ajax        <-- this holds the actual application   
      development.ini    <-- settings file. We wont need to edit this
      setup.py           <-- python script used to install the app

Wir werden an Dateien innerhalb der arbeiten hello_ajax Anwendungsverzeichnis. Hier sehen Sie ein paar Dinge:

\static      <-- stores all the css and js files our app uses.
\templates   <-- templates are 'rendered' to create html 
__init__.py  <--  is the initialisation script
tests.py     <-- unit tests. We wont be writing any
views.py     <-- view code

Das Vorlagenverzeichnis enthält Vorlagen, die sind rendered durch Verwendung einer Rendering-Engine. Es sind viele verschiedene Rendering-Engines verfügbar, das Startergerüst verwendet Chameleon. Wir könnten es gegen ein anderes austauschen, wenn wir wollten, aber das ist hier nicht notwendig. Wenn das nicht viel Sinn macht, sollte es bald sein, Sie werden ziemlich bald Ihre eigene Vorlage schreiben.

Ansichtsfunktionen werden als Ergebnis von HTTP-Anforderungen aufgerufen, die an die Webanwendung gesendet werden. Sie sind nur Funktionen, die URLs zugeordnet sind. Sie können verwendet werden, um einige sehr clevere Dinge zu tun, wie Datenbankinteraktionen, das Starten externer Prozesse, das Berechnen von Pi auf 100 Stellen, was auch immer wirklich. Pyramid nimmt alles, was eine Ansichtsfunktion zurückgibt, und rendert es mit einem Renderer. Das Ergebnis davon wird dann in ein http-Antwortobjekt verpackt und an denjenigen gesendet, der die Anfrage an die URL gesendet hat, die der Ansicht zugeordnet ist.

Nun gibt es ziemlich viele verschiedene Arten von Renderern, diejenigen, mit denen wir arbeiten werden, sind das Chameleon-Vorlagen-Rendering-System und das json Renderer.

Ihre erste Ansicht

Aufmachen views.py. Sie sehen eine Funktion. Eine Kleinigkeit wie:

@view_config(route_name="home", renderer="templates/mytemplate.pt")
def my_view(request):
    return {'project': 'hello_ajax'}

Die Anwendung hat in ihrer jetzigen Form nur eine Ansicht. Ändern Sie es zu sagen greetings ajax Anstatt von hello_ajax' and save your changes. Then refresh the page you had open in your browser (0.0.0.0:6543`). Sehen Sie, dass sich die Begrüßungsnachricht geändert hat?

Das my_view Die Ansichtsfunktion verwendet den Renderer templates/mytemplate.pt. Öffnen Sie es in Ihrem bevorzugten Texteditor. Da ist ziemlich viel drin, das uns einfach nicht interessiert, also lösche seinen gesamten Inhalt. Kopieren Sie nun Folgendes in die Datei und speichern Sie sie:

<!DOCTYPE html>
<html lang="${request.locale_name}">
  <head>
  </head>
  <body>
    <h1>${project}</h1>
    <button onclick="do_some_ajax()">Do some ajax</button>     
  </body>
</html>

Sieht sehr nach HTML aus, oder?

Laden Sie die Seite erneut und sehen Sie, was passiert. Sie werden etwas deutlich weniger Schönes sehen als das, was durch das Gerüst erzeugt wurde. Wenn Sie die drücken Mach ein bisschen Ajax Taste passiert nichts.

Statische Ressourcen hinzufügen

Öffnen Sie die static Verzeichnis in Ihrem Projekt. Da wirst du einiges sehen. Sie können alles löschen, wenn Sie möchten, wir brauchen es nicht. Erstellen Sie eine neue Datei mit dem Namen hello_ajax.js und im statischen Verzeichnis abgelegt. Öffnen Sie die Datei und fügen Sie Folgendes ein:

function do_some_ajax(){
    alert("TODO: implement ajax call");
}

Jetzt bearbeiten templates/mytemplate.pt also sieht es so aus:

<!DOCTYPE html>
<html lang="${request.locale_name}">
  <head>
     <script type="text/javascript" src="https://www.codementor.io/@sheena/${request.static_url("hello_ajax:static/hello_ajax.js')}"></script>
  </head>
  <body>
    <h1>${project}</h1>
    <button onclick="do_some_ajax()">Do some ajax</button>     
  </body>
</html>

Speichern Sie alles und laden Sie die Seite in Ihrem Browser neu. Klicken Sie nun auf die Mach ein bisschen Ajax Taste. Sie erhalten eine Benachrichtigung.

Schauen Sie sich diese Zeile an:

<script type="text/javascript" src="

Es wurde in ein normal aussehendes HTML gerendert, das src -Attribut wurde von Chameleon durch Aufrufen der Funktion ausgefüllt request.static_url('hello_ajax:static/hello_ajax.js'). Diese Funktion gab eine URL zurück, über die der Browser auf die zugreifen konnte hello_ajax.js Datei, die wir gerade erstellt haben. Wenn das verwirrend aussieht, dann mach dir keinen Stress. Der Punkt ist, dass unsere App statische Dateien bereitstellen kann.

Ajax mit JQuery machen

Der nächste Schritt besteht darin, Ajax tatsächlich zu verwirklichen. Das bedeutet, dass der Client in der Lage sein muss, eine Ajax-Anfrage zu stellen und der Server darauf antworten kann. Gehen Sie zur JQuery-Website und laden Sie sie herunter. Wir werden Version verwenden 1.11.2 aber der Code, den wir hier schreiben, wird mit allen modernen Versionen kompatibel sein. Legen Sie die jQuery-Quelle in Ihr statisches Verzeichnis. Und fügen Sie die entsprechende Zeile hinzu templates/mytemplate.pt.

<!DOCTYPE html>
<html lang="${request.locale_name}">
  <head>
     <script type="text/javascript" src="https://www.codementor.io/@sheena/${request.static_url("hello_ajax:static/jquery-1.11.2.min.js')}"></script>
     <script type="text/javascript" src="https://www.codementor.io/@sheena/${request.static_url("hello_ajax:static/hello_ajax.js')}"></script>
  </head>
  <body>
    <h1>${project}</h1>
    <button onclick="do_some_ajax()">Do some ajax</button>     
  </body>
</html>

Wenn Ihre Verzeichnisstruktur so aussieht: static/a/b/c/jquery.js dann sieht deine Vorlage so aus:

<!DOCTYPE html>
<html lang="${request.locale_name}">
  <head>
     <script type="text/javascript" src="https://www.codementor.io/@sheena/${request.static_url("hello_ajax:static/a/b/c/jquery.js')}"></script>
     <script type="text/javascript" src="https://www.codementor.io/@sheena/${request.static_url("hello_ajax:static/hello_ajax.js')}"></script>
  </head>
  <body>
    <h1>${project}</h1>
    <button onclick="do_some_ajax()">Do some ajax</button>     
  </body>
</html>

Einfach oder?

Jetzt werden wir verwenden jQuery um eine Ajax-Anfrage zu stellen. Aufmachen static/hello_ajax.js erneut und bearbeiten Sie es so, dass es so aussieht:

function do_some_ajax(){
    jQuery.ajax({
        url     : 'ajax_view',
        type    : 'POST',
        dataType: 'json',
        success : function(data){
            alert("Success. Got the message:\n "+ data.message)
        }
    });
}

Speichern Sie Ihre Änderungen und laden Sie die Seite im Browser neu. Wenn Sie jetzt auf die klicken Mach ein bisschen Ajax Knopf… Nichts passiert!

Geben Sie Firebug (oder Äquivalent) ein

Jeder moderne Browser verfügt entweder über integrierte Entwicklertools oder stellt diese als Plugin zur Verfügung. Ich werde Sie nicht alle durchsprechen, weil es ziemlich viele Optionen gibt. Sie alle haben jedoch ziemlich ähnliche Funktionen. Firebug ist ein Firefox-Add-On und wird das Tool sein, an dem ich in dieser Erklärung festhalten werde. Um es mit Firefox zu installieren, gehen Sie zu tools > add-ons und installiere firebug. Nach der Installation müssen Sie möglicherweise Ihren Browser neu starten.

Navigieren Sie nun zu 0.0.0.0:6543 und drücke F12. Dies öffnet ein kleines Ding am Ende der Seite. Klicke auf console und wenn Sie eine Schaltfläche sehen, die sagt enable console oder etwas ähnliches, dann klicken Sie darauf und laden Sie die Seite neu. Klicken Sie jetzt auf unsere Mach ein bisschen Ajax Taste. Sie sollten eine kleine rote Meldung in der Firebug-Konsole sehen, die etwas in der Art von sagt POST 404 not found.

Das bedeutet, dass der von uns geschriebene Client-Code eine Ajax-Anfrage erstellt und an die von uns erwähnte URL gesendet hat. Aber diese URL existiert nicht, weil wir sie noch nicht erstellt haben. Zeit, den serverseitigen Teil zu machen.

Ihre zweite Ansicht und der Json-Renderer

Um die Ajax-Funktionalität zu vervollständigen, müssen wir auch die Serverseite der Ajax-Konversation implementieren. Das bedeutet, dass wir eine Ansichtsfunktion erstellen müssen, die die gewünschten Daten zurückgibt, und wir müssen Pyramid mitteilen, welche URL dieser Funktion zugeordnet werden soll.

Aufmachen __init__.py. Das meiste davon wird keinen Sinn machen.

Irgendwo wird da eine Zeile sein, die sagt config.add_route('home', '/'). Das bedeutet, wenn jemand auf die Root-URL zugreift 0.0.0.0:6543/verwenden Sie dann die Ansichtsfunktion mit dem Routennamen home. Darunter fügen wir eine Zeile hinzu, die so aussieht:

    config.add_route('generate_ajax_data', '/ajax_view')

Sie haben es erraten, diese Zeile erstellt eine Ansicht mit dem Namen generate_ajax_data unter der URL verfügbar 0.0.0.0:6543/ajax_view. Speichern Sie Ihre Änderungen.

Der nächste Schritt besteht darin, die eigentliche Ansicht zu erstellen. Schauen wir uns noch einmal an views.py. Dies ist die bereits implementierte Ansicht.

@view_config(route_name="home", renderer="templates/mytemplate.pt")         #1
def my_view(request):                                                       
    return {'project': 'greetings ajax'}                                    

Die View-Funktion selbst wird in den Zeilen 2 und 3 definiert. Eine View-Funktion nimmt a request als Parameter und gibt ein Wörterbuch mit einigen Daten aus. Auf die Details all dessen einzugehen, was Sie mit einem Request-Objekt tun können, würde den Rahmen dieses Tutorials bei weitem sprengen, also machen Sie sich vorerst keine Gedanken darüber. Linie 1 schmückt das my_view Funktion, um Pyramid das mitzuteilen my_view ist der Streckenname zu geben home und gibt ihm einen Renderer, der eine Vorlage ist.

Fügen Sie diesen Code zu views.py hinzu:

@view_config(route_name="generate_ajax_data", renderer="json")                     #1
def my_ajax_view(request):                                                         
    return {'message': "yo mamma's so classless she could be a marxist utopia"}    

Zeile 1 sagt, dass unsere Ansicht den Routennamen haben wird generate_ajax_data und wird als json gerendert. Die Zeilen 2 und 3 sind die eigentliche Ansichtsfunktion. Speichern Sie Ihre Änderungen und aktualisieren Sie die Seite in Ihrem Browser. Stellen Sie sicher, dass Firebug geöffnet ist, und klicken Sie dann auf Mach ein bisschen Ajax Taste. Hier gibt es ein paar Dinge zu beachten: Erstens die Warnbox, die erscheint. Erkennen Sie es? Die darin enthaltene Nachricht wurde von unserer Ansichtsfunktion zurückgegeben. Schauen wir uns noch einmal unseren JavaScript-Code an:

function do_some_ajax(){
    jQuery.ajax({
        url     : 'ajax_view',
        type    : 'POST',
        dataType: 'json',
        success : function(data){                                     
            alert("Success. Got the message:\n "+ data.message)       
        }                                                             
    });
}

Die markierten Zeilen sind diejenigen, die das Alarmfeld tatsächlich ausgelöst haben. Die Wahl success Parameter des JQuery-Ajax-Aufrufs eine Funktion übernimmt, haben wir ihm eine anonyme Funktion gegeben, die nur eine Warnung ausgibt.

Das nächste, was erwähnenswert ist, ist, dass es keine neue Fehlermeldung in der Firebug-Konsole gibt. Der Ajax-Aufruf wird immer noch notiert, aber er ist nicht mehr rot.

Fazit

Wir haben in diesem Tutorial ziemlich viel behandelt. Wir haben Pyramid in seiner eigenen virtuellen Umgebung installiert, eine grundlegende Anwendung mit einem Gerüst erstellt, unsere eigene Chameleon-Vorlage erstellt und genügend JavaScript- und Python-Maschinen hinzugefügt, um einen einfachen Ajax-Aufruf zu ermöglichen. Klopfen Sie sich auf den Rücken. Nun, was kommt als nächstes?

Wenn Sie sich über die grundlegenden Mechanismen, auf denen Ajax basiert, immer noch nicht sicher sind, würde ich vorschlagen, sich das Einführungsmaterial von CodeMentor anzusehen. Wenn Sie damit zufrieden sind und mehr über die Client-Seite erfahren möchten, würde ich vorschlagen, die JQuery-Dokumentation zu lesen. Wenn Sie Pyramid nicht mögen, stehen viele verschiedene Frameworks und serverseitige Technologien zur Auswahl.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *