In picockpit.com, gebruik ik AJAX verzoeken om te communiceren met de backend voor update operaties. Bijvoorbeeld,

als u de naam van deze Pi wilt veranderen, kiest u:

die een inline formulier toont:

hoe dit inline formulier te tonen met vue.js is niet het punt van deze post (ook al zeer interessant!)

Klikken op Annuleren zal het hernoemen annuleren, klikken op OK zal een AXIOS verzoek starten, dat zal praten met de backend.

Hier is de JS code:

commitEdit: functie (gebeurtenis) {
     laat naam = deze.naam;
     laat serieel = dit.serieel;
     laat pointer = this;
     this.renameSpinnerMode = true;
     axios.post('/mypis/' + serial + '/changename',
         {
             naam: naam
     })
     .then(function (response) {
         pointer.renameMode = false;
         pointer.renameSpinnerMode = false;
         pointer.backupName = pointer.name;
     })
     .catch(function (error) {
         info("Sorry, naam van " + '" + pointer.backupName + '" + " kon niet worden gewijzigd. " + error );
         pointer.name = pointer.backupName;
         pointer.renameMode = false;
         pointer.renameSpinnerMode = false;
       });
}

Zoals je kunt zien, gebruik ik de standaard axios syntax die wordt voorgesteld.

Verder geef ik een pointer ("wijzer") door naar "dit" (dit verwijst naar het Vue.js component!), zodat ik de toestand van het component kan wijzigen in de callbacks van Axios.

In de Kemal aangedreven backend, heb ik deze code:

post "/mypis/:serial/changename" do |env|
     retourcode = 400
     (...)
     nieuwe naam = ""
     serial = ""

     als 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
         data = Hash(String, String).from_json(json_raw)
         als data.has_key?("naam")
             nieuwe naam = data["naam"].not_nil!
         einde
     einde

(...)

einde

Zoals u kunt zien, ontvangen we de gegevens JSON gecodeerd!

Dat was het grote probleem, ik probeerde de data form-encoded (env.params.body["name"]) te ontvangen in Kemal, en niet JSON encoded!

In het geval dat de gegevens JSON gecodeerd zijn, zal env.params.body leeg zijn!

Het is veel gemakkelijker om de backend implementatie om te schakelen om met JSON om te gaan, dan te proberen AXIOS ervan te overtuigen de gegevens als een formulier te coderen.

Axios "params" oplossing

Trouwens, vaak vind je op het web de suggestie om de paramsleutel voor Axios in te stellen. Dit is naar mijn mening slecht, omdat het in feite de gegevens zal coderen als onderdeel van de URL.

U zou de URL moeten herschrijven om de querystring te krijgen, en de gegevens in Kemal interpreteren.

En: de URL is aan een lengtebeperking onderhevig.

Daarom is bij POST-verzoeken de route van het parseren van JSON de meest solide, IMHO.

Wij zijn te huur - advies, ontwikkeling, projectmanagement ...

Dagtarief: 1500 € netto. Als u op zoek bent naar een flexibele ontwikkelaar met een focus op de Raspberry Pi, zijn wij wellicht iets voor u.

Neem contact met ons op.