In picockpit.com verwende ich AJAX-Anfragen zur Kommunikation mit dem Backend für Aktualisierungsvorgänge. Zum Beispiel,

Wenn Sie den Namen dieses Pi ändern möchten, wählen Sie:

das ein Inline-Formular anzeigt:

wie man dieses Inline-Formular mit vue.js anzeigt, ist nicht Gegenstand dieses Beitrags (auch wenn es sehr interessant ist!)

Klicken Sie auf Abbrechen, um die Umbenennung abzubrechen, klicken Sie auf OK, um eine AXIOS-Anfrage zu starten, die mit dem Backend kommuniziert.

Hier ist der JS-Code:

commitEdit: function (event) {
     let name = this.name;
     let serial = this.serial;
     let pointer = this;
     this.renameSpinnerMode = true;
     axios.post('/mypis/' + serial + '/wechselname',
         {
             Name: Name
     })
     .then(function (response) {
         pointer.renameMode = false;
         pointer.renameSpinnerMode = false;
         pointer.backupName = pointer.name;
     })
     .catch(function (error) {
         info("Sorry, Name von " + '"' + pointer.backupName + '"' + " konnte nicht geändert werden. " + error );
         zeiger.name = zeiger.backupName;
         pointer.renameMode = false;
         pointer.renameSpinnerMode = false;
       });
}

Wie Sie sehen können, verwende ich die standardmäßige Axios-Syntax, die vorgeschlagen wird.

Außerdem übergebe ich einen Zeiger ("pointer") auf "this" (dies bezieht sich auf die Vue.js-Komponente!), so dass ich den Zustand der Komponente in den Callbacks von Axios ändern kann.

In dem von Kemal betriebenen Backend habe ich diesen Code:

post "/mypis/:serial/changename" do |env|
     Rückgabecode = 400
     (...)
     newname = ""
     serial = ""

     if env.params.url.has_key?("serial")
         serial = env.params.url["serial"].not_nil! if !env.params.url["serial"].nil?
         json_raw = env.request.body.as(IO).gets_to_end
         Daten = Hash(String, String).from_json(json_raw)
         if data.has_key?("name")
             newname = data["name"].not_nil!
         Ende
     Ende

(...)

Ende

Wie Sie sehen können, erhalten wir die Daten tatsächlich JSON-kodiert!

Das war das große Problem vor, ich habe versucht, die Daten formularcodiert (env.params.body["name"]) in Kemal, und nicht JSON-codiert zu erhalten!

Falls die Daten JSON-kodiert sind, wird env.params.body leer sein!

Es ist viel einfacher, die Backend-Implementierung auf die Verarbeitung von JSON umzustellen, als AXIOS davon zu überzeugen, die Daten als Formular zu kodieren.

Axios "params" Lösung

Übrigens findet man im Internet oft den Vorschlag, den params-Schlüssel für Axios zu setzen. Dies ist meiner Meinung nach schlecht, da es die Daten tatsächlich als Teil der URL kodiert.

Sie müssten die URL umschreiben, um den Abfrage-String zu erhalten, und die Daten in Kemal interpretieren.

Und: Die URL unterliegt einer Längenbeschränkung.

Daher ist bei POST-Anfragen der Weg über das Parsen von JSON der solidere Weg, IMHO.

Wir sind zu vermieten - Beratung, Entwicklung, Projektleitung ...

Tagessatz: 1500 € netto. Wenn Sie auf der Suche nach einem flexiblen Entwickler mit Schwerpunkt auf dem Raspberry Pi sind, könnten wir eine gute Wahl für Sie sein.

Kontaktieren Sie uns.