Vorwort
Mein JavaScript -Level ist durchschnittlich. Nun, es ist ziemlich durchschnittlich. Daher ist es für die neueste Front-End-Framework-Technologie wirklich ein bisschen schwierig, aber die Realität macht mich darauf hingewiesen. Daher ist das Lernen der einzige Ausweg.
Ich verglich n Front-End-Frames vertikal und wählte schließlich Vue. Warum? Die Gründe sind wie folgt:
1.angular Die Zukunft ist unbekannt, 1.x hat eine hohe Lernkurve und scheint aufgegeben worden zu sein, während 2 noch nicht offiziell gestartet wurden.
2. React ist ziemlich stark, hat aber keinen Kontakt.
3. Vue ist einfach und durch den Einstieg ist es besser für mein Denken und mein Level geeignet.
Vue hat chinesische Dokumentation und ich sehe wohler aus.
Da ich mich entschlossen habe, Vue zu lernen, ist der beste Weg zum Üben. Ich habe versehentlich gesehen, dass es eine öffentliche API für das Cnodejs.org -Forum gibt, was so bequem ist. Also habe ich mich entschlossen, diese öffentliche API zu verwenden, um eine Demo zu schreiben.
Schnittstelleneinführung
Dies ist die von cnodejs.org öffentlich bereitgestellte Schnittstelle. Natürlich ist es nicht nur für uns, für das Front-End zu verwenden. Es kann für verschiedene Programme verwendet werden. Die Schnittstellenadresse lautet http://cnodejs.org/api. Auf dieser Seite wird der entsprechende Inhalt ausführlich eingeführt.
Die von ihnen bereitgestellten Schnittstellen sind vollständig, was bedeutet, dass wir über diese Schnittstellen ein Forum wie sie erstellen können.
Projektplan
1. Erstellen Sie eine Listenseite, auf der die Listeninhalte von CNodeJS gelesen werden können.
2. Erstellen Sie eine Detail -Seite, klicken Sie auf den Link auf der Liste der Listen und geben Sie die Seite Details ein.
3. Verwenden Sie die SSI -Technologie, um die Wiederverwendung von HTML -Code zu verwirklichen. Suchen Sie nach SSI+SHTML, um über verwandte Inhalte zu erfahren.
4. Der CSS -Code wird mit SASS vorkompiliert.
Dateiverzeichnis
├─Idex.shtml Rendering List -Seite
├─content.shtml Rendering Details Seite
├─inc fragmentierte Datei
│ ├─Bar.html Seitenleistecode
│ ├─footer.html Urheberrechtsteil des Codes
│ ├├head.html Kopffläche ruft JS und andere Codes auf
│ └─Header.html Seitenhader -Logo und Navigationscode
└─Res Resource -Datei
├─image
├─js
│ ├º common mein Code -Verzeichnis
│ │ ├─common.js öffentliche Ausführung js
│ └─ method.js benutzerdefinierte Methode js
│ ├─jQuery JQuery Quellcode -Verzeichnis
│ ├├plugins andere Plugin -Verzeichnisse
│ └─laypage Layout -Seite Paging Plugin
│ └─Vue Vue Source Code Verzeichnis
└ºStyle
├─Style.scss Sass -Quelldatei
çStyle.css die kompilierte CSS -Datei
├─ Base
└─Scss
Laden Sie meine Quelldatei herunter https://github.com/fengcms/vue-cnodejsorgestest
Schreiben Sie Code
Befolgen Sie zunächst das obige Dateiverzeichnisdesign und schreiben Sie Dateien ein. Res ist das Ressourcenverzeichnis. Sie können es sich ansehen oder wissen, was es ist.
Tatsächlich ist der Schlüsselpunkt die Dateien index.shtml und content.shtml.
Bereiten Sie die HTML -Datei der Homepage -Liste vor
<! DocType html> <html lang = "zh"> <pead> <meta charset = "utf-8"> <title> title </title> <link rel = "stylesheet" href = "res/style/style.css"> </head> <Haceer> <H1> <a href = "> <H1> <a href ="> <href = " Fungleo </a> </h1> <nav> <ul> <li> Navigationsliste </li> </ul> </nav> </header> <sabschnitt> <sabschnitt> <li> <i> <img src = "##avatar url"> <span> username </ilhtml? Titel </a> </li> </ul> <div> </div> </abschnitt> <seite> <h3> Anweisungen auf dieser Seite </h3> ... </daher> </§> <Fouts> Copyright -Anweisung </footer> <div> </div> </body> </html>> </html>
Wie oben erwähnt, ist es die statische Seite, die ich zuerst geschrieben habe. In Verbindung mit meinem CSS ist der Effekt in der folgenden Abbildung dargestellt:
Bitte erhalten Sie den vollständigen Code von Github
Stellen Sie JS -Dateien wie Vue & JQuery ein
<script src = "res/js/jQuery/jQuery-2.2.3.min.js"> </script> <script src = "res/js/vue/vue.min.js"> </script> <script src = "res/js/common/commor.js"> </script>
Holen Sie sich Daten von der Schnittstelle ab
Egal was, egal was, wir müssen die Daten von der Schnittstelle erhalten, bevor wir es weiter tun können. Wir verwenden JQuery, um die AJAX -Methode zu verwenden, um die Daten zu übernehmen.
Der folgende Code:
$ (function () {$ .ajax ({type: 'get', url: "http://cnodejs.org/api/v1/topics", DataType: 'JSON', Erfolg: Funktion (Daten) {if (Data.success) {console.log (Daten)}} {{alert (json.al.Stringify), {{alert (json.al.Stringy),}, {alert (json.al.Stringy),}, {alert (json.al.Stringy),}, {alert (json.al.Stringy),}, {alert (jONER.SUCCESS (DATA),}, {alert (json), {alert (jONER. Funktion (Daten) {alert (JSON.Stringify (Daten));}});})Der Code ist wie oben. Schauen wir uns die Browserkonsole an und der Screenshot lautet wie folgt:
Wie in der obigen Abbildung gezeigt, haben wir die Daten erfolgreich erhalten.
Daten analysieren
Wie in der obigen Abbildung gezeigt, enthalten die Daten den folgenden Inhalt
1. Autor
1. Avatar -URL des Autors
2. Autor Benutzername
2. Autor ID
3.. Inhalt posten
4. Veröffentlichungszeit
5. Ist es die Essenz?
6. Post ID
7. Letzte Antwortzeit
8. Anzahl der Antworten
9.Attribution Tags
10. Post -Titel
11. Ob Sie es übertreffen sollten
12. Statistiken durchsuchen
Die Datenschnittstelle ist wie oben. Wenn Sie ein voll funktionsfähiges Forum sind, sind diese Daten natürlich nützlich. In meinem Projekt werden viele von ihnen nicht verwendet. Schauen wir uns an, was ich brauche.
<li> <i> <img src = "#avatar url"> <span> userername </span> </i> <time> Gepostet vor 5 Tagen </time> <a href = "content.html?
Wie im obigen Code gezeigt, müssen wir die Schleife enthalten
1. Avatar -URL des Autors
2. Autor Benutzername
3. Veröffentlichungszeit
4. Post ID
5. Post -Titel
Kein Problem, alle Inhalte und Schnittstellen, die wir benötigen, sind verfügbar.
Einkapselner Ajax -Code
Obwohl der Ajax -Code nicht lang ist, fühle ich mich immer noch unwohl. Daher verwende ich den folgenden Code, um ihn zu verkörpern
// ajax get json method function getJson(url,func){ $.ajax({ type:'get', url:url, dataType: 'json', success: function(data){ if (data.success){ func(data); }else{ alert("Interface call failed"); } }, error: function(data){ Alert (JSON.Stringify (Daten));Wie oben erwähnt, müssen wir bei Bedarf nur die Funktion getJson (URL, Func) verwenden.
Referenz eingekapselter Code
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getJson (url, function (data) {console.log (data);});});Lassen Sie uns nach dem Ändern eines solchen Umfangs einen Blick darauf werfen, ob wir die Daten, die wir benötigen, ausdrucken können. Wie in der Abbildung unten gezeigt:
Ohne Probleme haben wir die Daten immer noch erhalten. Wir verkörpern die Rückruffunktion und ändern sie in den folgenden Code
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getJson (url, pushdom);});OK, wenn es keinen Fehler gibt, können die Schnittstellendaten definitiv ausgedruckt werden. Nach diesem Vorgang ist unser Code äußerst präzise und erhöht die Lesbarkeit. Als nächstes müssen wir es in der Funktion "Pushdom (Daten)) tun.
Vue -Rendering -Code
Zunächst müssen wir die VUE -Methode verwenden, um die Daten zu schreiben, die wir in die Seite einfügen möchten.
HTML -Code -Teil
<li v-für = "Info in data"> <i> <img src = "{{info.author.avatar_url}}"> <span> {{info.author.logInname}} </span> </i> </i> </i> </i> {{{{hülreate_at}}}} </i/i> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time> </time }} "> {{info.title}} </a> </li> 1Vue -Wissenspunkte
Schleifendaten http://vuejs.org.cn/api/#v-for
JS -Code -Teil
Funktion pushdom (Daten) {var vm = new Vue ({el: '.List', Daten: Daten});}Schauen wir uns den Effekt an:
Ok, sehr aufgeregt. In nur wenigen Codezeilen haben wir die Liste erfolgreich mit Vue gemacht.
Zusammenfassung
1.Ajax ist der Schlüssel zum Erhalten von Daten
2. Sobald Sie ein bisschen Vue -Inhalt verstanden haben, können Sie loslegen.
3. Beim Erstellen eines Projekts müssen der Code und die Dateien klar und klar sein.
Anhang
Vue offizielle Website
CnodeJS -API -Details
Laden Sie den Quellcode dieser Reihe von Tutorials herunter
Kapitel 1 des VueJS Practical Tutorial, den Aufbau der Grundlagen und das Rendern der Liste
VueJS Practical Tutorial Kapitel 2, Fehler beheben und die Zeit verschönern
VueJS Practical Tutorial Kapitel 3 mit dem Layout-Plug-In, um die Pagination zu realisieren
Dieser Artikel wurde ursprünglich von Fungleo geschrieben
Erste Veröffentlichungsadresse: http://blog.csdn.net/fungleo/article/details/51649074
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Für Tutorials zu Vue.js -Komponenten klicken Sie bitte auf das spezielle Thema VUE.JS -Komponenten -Lern -Tutorial zum Erlernen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.