Ankündigung

Einklappen
Keine Ankündigung bisher.

Vue data en bloc lesen und zuweisen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Vue data en bloc lesen und zuweisen

    Hi,

    hatte vor drei Jahren hier im Forum angekündigt, mich mehr mit Vue auseinander zu setzen, was ich jetzt mit etwas Verzögerung tue.

    Als erstes interessiert mich das Arbeiten mit Formularen. Hier geht's rein ums Üben.

    1. Daten initial ins Formular laden
    2. Daten verändern und abschicken
    3. Die per PHP (Ajax) veränderten Daten "zurück laden"

    Es geht eigentlich nur darum wie ich die Daten des Objekts "data" abschicke und wie ich dem Objekt Werte zuweise.

    Dazu habe ich folgendes Testskript geschrieben. Für den Ajax-Part nutze ich jQuery, da Vue hier wohl nichts eigenes hat.
    Das PHP-Skript nimmt die Werte, verändert sie etwas und gibt die veränderten Werte als JSON aus.

    Code:
    const app = new Vue({
                 el:'#app',
                 data: {
                     name: '',
                     age: 0,
                     gender:'female'
                 },
                 methods: {
                     sendData: function () {
                        var that = this;
                        var toSendSerialised = $.param(this.$data);
                        $.getJSON('vue-test-2.php',toSendSerialised)
                            .done(function (data) {
                                $.each(data, function (key, value) {
                                   that.$data[key] = value;
                                });
                            });
                        }
                 }
            });
    Hier der HTML Part
    Code:
    <div id="app">
            <input type="text" v-model="name">
            <input type="text" v-model="age">
            <select v-model="gender">
                <option value="male">male</option>
                <option value="female">female</option>
            </select>
            <button @click="sendData">Process Data</button>
    
        </div>
    Frage: Das funktioniert zwar alles so wie es soll, aber ist es auch vernünftig, das so zu machen?
    Ich habe speziell hierfür kein gutes Tutorial gefunden.

    Hier noch das PHP - Skript, falls das jemanden interessiert:

    PHP-Code:
    if (isset($_GET) && count($_GET) > 0) {
            
    $back['name'] = $_GET['name'].rand(1,9);
            
    $back['age'] = $_GET['age'] + 1;
            
    $back['gender'] = $_GET['gender'] === 'female' 'male' 'female';
        }

      
    $json json_encode($back);
      
    header('Content-Type: application/json');
      echo 
    $json
    [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

  • #2
    Warum vermischst du Vue mit jQuery? Das sind ja zwei recht gegensätzliche Frameworks/Libs.

    Kommentar


    • #3
      Wieso sollte ich eins weglassen?

      Um Deine Frage zu beantworten: An die jQuery Ajax Anweisungen habe ich mich so gewöhnt, dass ich mich nur ungern mit "Plain" JS diesbezüglich auseinandersetze. Vue selber hat da ja wohl nichts, oder?!
      [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

      Kommentar


      • #4
        Zitat von drsoong Beitrag anzeigen
        Wieso sollte ich eins weglassen?
        I.d.R. macht es Sinn, sich für ein zu entscheiden.

        Zitat von drsoong Beitrag anzeigen
        Um Deine Frage zu beantworten: An die jQuery Ajax Anweisungen habe ich mich so gewöhnt, dass ich mich nur ungern mit "Plain" JS diesbezüglich auseinandersetze.
        Das sind für mich so die Argumente, die zeigen, wie überbewertet diese Libraries sind. In PlainJS sind das kaum mehr Zeilen und btw. bau Dir halt ne Method, die das für Dich als Einzeiler macht.
        Ich habe eine kleine JS-Library mit eigenen kleinen Helper für meine Projekte, wo ich bspw. auch Methoden wie load() und xhr() implementiert habe. So ist die Anwendung auch wieder nur ein Einzeiler.
        Competence-Center -> Enjoy the Informatrix
        PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

        Kommentar


        • #5
          @Arne:

          Wenn ich jetzt mal davon ausgehe

          - dass das Laden weiterer ca. 31KB für jQuery nicht ganz so problematisch ist
          - ich die DOM-Manipulation mit jQuery unterlasse

          dann ist doch eher die Frage: Warum sollte ich all so Sachen wie Ajax oder wie im Skript $.each für mich auf andere Weise erarbeiten, wenn das in jQuery schon vorhanden und bestens bekannt ist.

          Wieso sollte ich mir unbedingt eine eigene load Methode schreiben, die jQuery schon cross-browser-fähig vorhält?

          Hinzu kommt noch eins: Wenn ich jetzt Ajax mit Plain JS löse, muss ich mich auch mit der Promise Syntax beschäftigen, die irgendwie nicht ganz meiner Intuition entspricht.
          [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

          Kommentar


          • #6
            Ich mag ja VUE überhaupt nicht, auch wenn es sich immer weiter verbreitet, angular scheint mir um Längen besser.

            wie dem auch sei, nutze doch
            https://github.com/pagekit/vue-resource
            oder
            https://github.com/axios/axios
            für den ajax request.

            for each im template macht ja v-for
            sonst kannst Du ja .forEach nutzen.

            oder lade wenn es sein muss underscore.js

            aber das lässt sich an konkreten beispielen besser klären...

            Kommentar


            • #7
              Zitat von drsoong Beitrag anzeigen
              - dass das Laden weiterer ca. 31KB für jQuery nicht ganz so problematisch ist
              Dann nutzt Du auch noch eine alte Version? Die aktuelle jQuery ist mittlerweile ~86kB groß.
              Um die Größe geht es aber auch nicht, die ist in Zeiten der heutigen Internetverbindungen eher sekundär von Bedeutung. Der Hauptpunkt ist aus meiner Sicht der, dass Du Dich auf externe Quellen verlässt, nur um eine Handvoll Methoden nicht selbst umsetzen zu müssen. Wenn Du jetzt argumentierst, dass Du jQuery lokal lädst, ist ein fragwürdiger Aspekt, warum Du Dich selber mit der Wartung beschäftigen willst, was Du ja aber scheinbar nicht tust, denn ansonsten hättest Du mehr, wie 31kB


              Zitat von drsoong Beitrag anzeigen
              - ich die DOM-Manipulation mit jQuery unterlasse
              Das verstehe ich nicht so ganz. Das würde ja bedeuten, dass es noch weniger Gründe hat, jQuery einzusetzen?!


              Zitat von drsoong Beitrag anzeigen
              dann ist doch eher die Frage: Warum sollte ich all so Sachen wie Ajax oder wie im Skript $.each für mich auf andere Weise erarbeiten, wenn das in jQuery schon vorhanden und bestens bekannt ist.
              Die Frage ist berechtigt, lässt aber vermuten, dass Du jQuery nutzt, gelernt hast und vermutlich beherrschst, ohne die Grundlage zu verstehen, kann das sein? Mit Grundlage meine ich Javascript in nativer Form.


              Zitat von drsoong Beitrag anzeigen
              Hinzu kommt noch eins: Wenn ich jetzt Ajax mit Plain JS löse, muss ich mich auch mit der Promise Syntax beschäftigen, die irgendwie nicht ganz meiner Intuition entspricht.
              Das kommt ganz drauf an. Ich selber nutze das so in der Form nicht explizit. Ich behaupte auch nicht, dass ich es besser mache, wie andere, das wäre vermutlich auch gelogen.
              Aber meine kleine Helper-Library ist gerade mal 3kB groß ( minimiert ) und steht in den hauptsächlichen Funktionen zumindest für meine Projekte jQuery in nichts nach. Crossbrowser bis zu bestimmten IE Versionen inklusive, zumindest in meinen Tests.

              Ist etwas OffTopic, aber kurz zur Erklärung vielleicht:
              Die Selektion von $() habe ich mit grab() umgesetzt ( ich finde $ von der Benennung besser, aber wollte an der Stelle einfach nicht das gleiche verwenden ):
              Basiert einfach - wie auch jQuery - auf querySelector() und querySelectorAll(). Wenn es nur ein Elment gibt, wird das zurückgegeben, wenn mehrere existieren eine NodeList.
              Code:
              grab( '#content > .infobox' );
              Weiterhin habe ich bspw. auch eine load()-Methode, mit der ich direkt HTML Dateien nachlade und an beliebiger Stelle einhänge:
              Code:
              grab( '#content' ).load( 'dummy.html' );
              An der Stelle habe ich sogar die Möglichkeit, das JavaScript aus der nachgeladenen Seite in das Hauptdokument einzuhängen. Mir ist nicht bekannt, dass jQuery das macht, aber da kann ich mich täuschen und vermutlich ist es in den meisten Fällen überflüssig. Ich fands nur an bestimmten Stellen nützlich.

              Was Ajax betrifft:
              Code:
              xhr({
                  url: 'dummy.php',
                  data: grab('form[name="frm1"]').serialize(),
                  fnLoad: (o)=>{
                      console.log( 'using serialize' );
                      console.log( o.responseText );
                  }
              });
              Wobei ich natürlich dazu sagen muss, dass serialize() wiederum eine Eigenimplementation ist.
              Das gleiche geht aber auch mit FormData:
              Code:
              xhr({
                  url: 'dummy.php',
                  data: new FormData( grab('form[name="frm1"]') ),
                  fnLoad: (o)=>{
                      console.log( 'using form data object' );
                      console.log( o.responseText );
                  }
              });
              Dazu ein paar kleine DOM-Manipulationen, wie addNode, copy, move und schon habe ich alles, was ich in jQuery auch nur benötigen würde.
              jQuery kann natürlich viel mehr, aber die meisten Leute nutzen das eben nicht, was Deine Aussage ja auch bestätigt.

              Das, was hier angesprochen wurde, sind elementare Grundfunktionalitäten in JavaScript, die jeder, der in JS entwickelt kennen sollte. Für mich erschließt sich nicht, für sowas eine externe Library zu laden.
              Und btw. mit einer kleinen eigenen Ajax-Methode wäre Deine Kombi aus einer JS-Library und einem JS-Framework auch keine Frage mehr

              Aber das ist leider alles OffTopic, sorry.
              Wollte das nur nicht unbeantwortet lassen.

              Danke für Dein Verständnis

              Competence-Center -> Enjoy the Informatrix
              PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

              Kommentar


              • #8
                Hm, war gerade mal beim Sport....Also,

                @tomBuilder:

                Danke für die praktischen Hinweise. Ich habe mal eine vue-resource Variante des Codes geschrieben. Gefällt mir persönlich tatsächlich besser.

                Bzgl. Angular kann ich kaum was Belastbares sagen. Auf der Vue Site wird Angular ein Stück weit kritisiert. Nachdem ich vor längerem Mal ein paar Lehrvideos
                zum Thema Angular angeschaut hatte, habe ich mich entschlossen, erst mal die Finger von Angular zu lassen. War irgendwie viel zu kompliziert, vlt. waren aber auch die "Dozenten" didaktische Nieten...

                @Arne: Dein Beitrag hat mich sehr gefreut. Ich finde es wirklich bereichernd, mal etwas mehr Einblick bei anderen zu bekommen. (Bin ja Einzelgänger).

                Bzgl. der eigenen Library: Da gibt's viel Für und Wider, wie Du sicher ja selber weist. Klar muss man die "Kosten" fremder Bibliotheken und ihr symbiotisches Potential berücksichtigen.
                Es gilt aber auch der Grundsatz: "Do not re-invent the wheel". Fremde Libraries haben oft zumindest den Nimbus von Stabilität und Sicherheit.

                Ob ich die Grundlage von jQuery (Javascript) verstehe: Mag sein, dass ich mich da zu stark dem "Verkaufsmotto" hingebe: "Do more with less code".
                Wenn man sich darauf einlässt, kümmert man sich tatsächlich weniger um die Grundlagen. Und man (ich) sträubt sich auch (so lange bis man nicht anders mehr kann) die Grundlagen zu durchleuchten.

                So, muss jetzt erst mal wieder weg...


                Hier die oben erwähnte vue-resource Variante, ganz ohne jQuery:

                Code:
                const app = new Vue({
                             el:'#app',
                             data: {
                                 name: '',
                                 age: 0,
                                 gender:'female'
                             },
                             methods: {
                                 sendData: function () {
                                    var toSendSerialised = serializeObj(this.$data);
                                    var url = 'vue-test-2.php?' + toSendSerialised;
                                    this.$http.get(url).then(response => {
                                        for(key in response.body) {
                                            this.$data[key] = response.body[key];
                                        }
                                      }, response => {
                                        console.log('error occurred');
                                      });
                                    }
                             }
                        });
                
                        function serializeObj(obj) {
                            var str = "";
                                for (var key in obj) {
                                    if (str != "") {
                                        str += "&";
                                }
                                str += key + "=" + encodeURIComponent(obj[key]);
                                }
                                return str;
                        }
                [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

                Kommentar


                • #9
                  @Arne: Noch eins: Die 31 KB ist jQuery Version 3.4.1 gezipped. Unzipped über 80 KB.
                  [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

                  Kommentar


                  • #10
                    Ich finde es mit plain Javascript jetzt auch nicht unbedingt schwieriger

                    Code:
                    function ajax(e)
                        {
                            var showData = document.getElementById('show');
                            var form = document.getElementById('app');
                            var formData = new FormData(form);
                    
                            e.preventDefault();
                    
                            xhr = new XMLHttpRequest();
                            xhr.open('POST', 'ajax.php');
                            xhr.onload = function() {
                                if (xhr.status === 200) {
                                    showData.innerHTML = 'JSON = ' + xhr.responseText;
                                }
                                if (xhr.status !== 200) {
                                    alert('Request failed.  Returned status of ' + xhr.status);
                                }
                            };
                            xhr.send(formData);
                        }
                    
                        document.getElementById('sendData').addEventListener('click', ajax, false);
                    Ist jetzt mit POST umgesetzt da müsstest du dann dein Script anpassen.

                    Das Formular mit div und den unbekannten Attributen ist nicht mein so mein Fall, ich bevorzuge diese Variante
                    HTML-Code:
                    <p id="show"></p>
                         <form id="app" action="ajax.php" method="post">
                            <input type="text" name="name">
                            <input type="text" name="age">
                            <select name="gender">
                                <option value="male">male</option>
                                <option value="female">female</option>
                            </select>
                            <button name="sendData" id="sendData">Process Data</button>
                    
                        </form>
                    Wenn Javascript ausgeschaltet ist kann man das Formular dennoch verwenden.

                    Dein verarbeitendes Script heixst vue-test-2.php, bei mir habe ich es ajax.php genannt.


                    Kommentar


                    • #11
                      So, wollte mich nochmal melden.

                      Zunächst: protestix Vielen Dank für Deinen Code. Der wirkt etwas "rustikal" und scheint nur das Ajax Thema zu behandeln. Machst Du das in echten Projekten denn tatsächlich so? Keine coole Bibliothek?

                      Bzgl. Ajax habe ich mir jetzt zusätzlich superagent angeschaut. Das läuft weitestgehend nachvollziehbar und einfach. Habe aber noch nicht alle Features getestet bzw. gefunden, die ich von jQuery kenne.

                      Vue setze ich jetzt erstmals in einem echten Projekt ein. Bisher und zur Zeit noch überwiegend wird dort jQuery eingesetzt.

                      Ich bin aber irgendwie positiv gespannt, wie gut ich damit zurecht komme....
                      [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

                      Kommentar


                      • #12
                        Was ist daran rustikal? Nur weil keine Bibliothek dahinter steckt?
                        Wenn du ein wenig mehr zur Historie und den Anfängen vom Browserkrieg gelesen hast, dann verstehst du warum diese Bibiotheken geschaffen wurden.
                        Aber - Javascript hat sich weiterentwickelt, neue APIs kamen dazu , die Funktionalität wurde verbessert und Standards kamen hinzu an denen sich heute eigentlich jeder Browserhersteller hält.

                        Es gibt demnach heutzutage keinen Grund eine Javascript-Bibliothek zu verwenden, so zumindest die Meinung vieler.
                        Wenn man jedoch Spass dran hat kann man es es tun, ich gehöre nicht dazu.

                        Hinzu kommt das Jquery eine Performancebremse ist, muss sie ja sein, da der Interpreter zwangsläufig mehr zu tun hat.
                        Warum also einen Kastenwagen ausleihen , wenn ich einen Maserati in der Garage habe?

                        Performancetest dazu unter https://medium.com/@trombino.marco/y...y-aa6531d0b0c3

                        Vielleicht ein Grund warum Yahoo seine Library YUI eingestellt hat, ich weiss es nicht.

                        Zu deinem Kritikpunkt, dass ich nur das Ajaxthema aufgriff, tja lies halt noch mal deinen Eröffnungsbeitrag, ging es da nicht um
                        Hier geht's rein ums Üben.

                        1. Daten initial ins Formular laden
                        2. Daten verändern und abschicken
                        3. Die per PHP (Ajax) veränderten Daten "zurück laden"
                        Warum sollte ich also mehr reinschreiben als gefordert?



                        Kommentar


                        • #13
                          Zitat von protestix Beitrag anzeigen
                          Was ist daran rustikal? Nur weil keine Bibliothek dahinter steckt?
                          Wenn du ein wenig mehr zur Historie und den Anfängen vom Browserkrieg gelesen hast, dann verstehst du warum diese Bibiotheken geschaffen wurden.
                          Aber - Javascript hat sich weiterentwickelt, neue APIs kamen dazu , die Funktionalität wurde verbessert und Standards kamen hinzu an denen sich heute eigentlich jeder Browserhersteller hält.
                          Naja, Internet Explorer kann nicht mal die Fetch-API und Edge auch nur unvollständig. Und die beiden Browser werden leider noch sehr oft in großen Unternehmen eingesetzt.

                          Web Components werden nur von Firefox, Chrome und Opera unterstützt.

                          Modernes JavaScript kann man immer noch nicht verwenden. Man verwendet entweder ein Framework oder entwickelt auf dem Stand von vor 10 Jahren.

                          Zum Beispiel das Rumgehampel mit XMLHttpRequest ist überhaupt nicht mehr zeitgemäß. Sowas will ich heutzutage gar nicht mehr verwenden, da es weitaus bessere und praktischere Optionen gibt.

                          Kommentar


                          • #14
                            Zitat von drsoong Beitrag anzeigen
                            1. Daten initial ins Formular laden
                            2. Daten verändern und abschicken
                            3. Die per PHP (Ajax) veränderten Daten "zurück laden"
                            Die "übliche" Vue Bibliothek für Ajax ist axios. Das war mal ein fester Bestandteil und wurde dann im Sinne der Modularität ausgegliedert.
                            Zu 2. was genau meinst du mit "Daten verändern" dein v-model="gender" sorgt dafür, dass in deiner data Variable "gender" auch immer der aktuelle Wert steht.

                            Meine Vorgehensweise ist, dass jede Komponente die ein Formular enthält ein data Objekt "formData" mit den jeweiligen Formularfeldern enthält. Wenn dann die Feldnamen mit den Bezeichnungen die deine API zurückgibt übereinstimmen musst du nahezu nichts mehr machen.

                            Hier mal noch ein kurzes Beispiel, deine 3 Fälle sind hier enthalten.
                            Code:
                                    data: () => ({
                                        formData: {
                                            name: '',
                                            manufacturer: '',
                                            kcal: '',
                                            protein: '',
                                            fat: '',
                                            carbohydrates: '',
                                        },
                                        success: '',
                                        error: '',
                                    }),
                                    methods: {
                                        createApiUrl() {
                                            if (this.nutrition_id == null) {
                                                return '/nutrition/storeApi/';
                                            }
                                            return '/nutrition/updateApi/' + this.nutrition_id;
                                        },
                                        createSubmitButtonText() {
                                            if (this.nutrition_id == null) {
                                                return 'Hinzufügen';
                                            }
                                            return 'Ąndern';
                                        },
                                        onBarcodeDetected(barcode) {
                                            this.formData.barcode = barcode;
                                        },
                                        submitForm() {
                                            Vue.axios.post(this.createApiUrl(), {
                                                formData: this.formData
                                            })
                                                .then((response)  => {
                                                    this.ajaxSaveSuccess(response)
                                                })
                                                .catch((error) => {
                                                    this.ajaxSaveError(error)
                                                });
                                        },
                                        loadNutrition() {
                                            Vue.axios.post('/nutrition/showByIdJson/' + this.nutrition_id, {
                                                formData: this.formData
                                            })
                                                .then((response)  => {
                                                    this.formData = response.data;
                                                })
                                                .catch((error) => {
                                                    this.ajaxSaveError(error)
                                                });
                                        },
                                        ajaxSaveSuccess(response) {
                                            if (response.data.success === true) {
                                                this.success = "Nahrungsmittel erfolgreich gespeichert."
                                            } else {
                                                this.error = "Das Nahrungsmittel konnte nicht gespeichert werden."
                                            }
                                        },
                                        ajaxSaveError(error) {
                                            this.error = "Verbindungsfehler. Das Nahrungsmittel konnte nicht gespeichert werden.";
                                        },
                                        ajaxLoadError(error) {
                                            this.error = "Verbindungsfehler. Das Nahrungsmittel konnte nicht geladen werden.";
                                        }
                                    },
                                    mounted() {
                                        this.loadNutrition();
                                    }

                            Kommentar


                            • #15
                              gelöscht, da nicht relevant zum Thema.

                              Kommentar

                              Lädt...
                              X