Préface
Mon niveau JavaScript est moyen. Eh bien, c'est assez moyen. Par conséquent, c'est vraiment un peu difficile pour la dernière technologie de cadre frontal, mais la réalité me fait face. Par conséquent, l'apprentissage est la seule issue.
J'ai comparé N des cadres frontaux verticalement et j'ai finalement choisi Vue. Pourquoi? Les raisons sont les suivantes:
1.Anguulaire L'avenir est inconnu, 1.x a une courbe d'apprentissage élevée et semble avoir été abandonné, tandis que 2 n'a pas encore été officiellement lancé.
2. React est assez puissant, mais n'a aucun contact.
3. Vue est simple, et en démarrant, il convient plus à ma pensée et à mon niveau.
4. Vue a une documentation chinoise, et je suis plus à l'aise.
Depuis que j'ai décidé d'apprendre Vue, la meilleure façon d'apprendre est de pratiquer. J'ai accidentellement vu qu'il y a une API publique pour le forum Cnodejs.org, ce qui est tellement pratique. J'ai donc décidé d'utiliser cette API publique pour écrire une démo.
Introduction d'interface
Il s'agit de l'interface fournie publiquement par Cnodejs.org. Bien sûr, ce n'est pas seulement pour nous à utiliser pour le front-end. Il peut être utilisé sur divers programmes. L'adresse d'interface est http://cnodejs.org/API. Grâce à cette page, le contenu pertinent est introduit en détail.
Les interfaces qu'ils fournissent sont complètes, ce qui signifie que nous pouvons créer un forum comme eux via ces interfaces.
Plan de projet
1. Faites une page de liste qui peut lire le contenu de la liste de CNODEJS.
2. Créez une page de détails, cliquez sur le lien sur la page de liste et entrez la page Détails.
3. Utilisez la technologie SSI pour réaliser la réutilisation du code HTML. Recherchez SSI + SHTML pour en savoir plus sur le contenu connexe.
4. Le code CSS est précompilé à l'aide de SASS.
Répertoire de fichiers
Page de liste de rendu inditionndex.shtml
├─Content.shtml Détails de rendu
Fichier fragmenté INC
│ ├ --bar.html Code de barre latérale
│ ├fiques-footer.html partie du copyright du code
│ ├─Head.html La zone de tête appelle JS et d'autres codes
│ └─Header.html En-tête de page Logo et code de navigation
Fichier de ressources
├Image
├─js
│ ├ - Commonité mon répertoire de code
│ │ ├fique
│ └fique Méthode.js Méthode personnalisée js
│ ├ - JQuery JQuery Source Code Directory
│ ├fiquesplugins Autres répertoires de plugins
│ └ - Lignon de pagination de page de mise en page de page de page
│ └ - Vue Vue Source Code Directory
└ - style
Fichier source SASS Sass Sass.
├ établie.css le fichier CSS compilé
├ - Base
└ssss
Téléchargez mon fichier source https://github.com/fengcms/vue-cnodejsorgtest
Commencer à écrire du code
Tout d'abord, suivez la conception du répertoire de fichiers ci-dessus et commencez à y écrire des fichiers. Res est le répertoire des ressources. Vous pouvez y jeter un œil ou savoir ce que c'est.
En fait, le point clé est les fichiers index.shtml et contenu.shtml.
Préparez le fichier HTML List Home
<! Doctype html> <html lang = "zh"> <éad> <meta charset = "utf-8"> <itle> title </ title> <link rel = "Stylesheet" href = "res / style / style.css"> </-head> <body> <e-header> <h1> <a href = "index.html"> cnnode Fungleo </a> </h1> <AV> <ul> <li> Liste de navigation </li> </ul> </AV> </-header> <pection> <section> <ul> <li> <i> <img src = "# avatar url"> <span> username </span> </i> <my> a posté il y a 5 jours </morde> <a href = "Contenu. Titre </a> </li> </ul> <div> </div> </ section> <inter> <h3> Instructions sur cette page </h3> ... </ MORSME> </ section> </ Footer> Instruction Copyright </footer> <div> </div> </ body> </html>
Comme mentionné ci-dessus, c'est la page statique que j'ai écrite en premier. En conjonction avec mon CSS, l'effet est illustré dans la figure ci-dessous:
Veuillez obtenir le code complet de GitHub
Présenter des fichiers JS tels que Vue & jQuery
<script src = "res / js / jQuery / jQuery-2.2.3.min.js"> </ script> <script src = "res / js / vue / vue.min.js"> </cript> <script src = "res / js / commun / commun / commun.js"> </script>
Obtenez des données de l'interface
Tout d'abord, quoi qu'il arrive, nous devons obtenir les données de l'interface avant de continuer à le faire. Nous utilisons jQuery pour utiliser la méthode AJAX pour reprendre les données.
Le code suivant:
$ (function () {$ .ajax ({type: 'get', url: "http://cnodejs.org/api/v1/topics", dataType: 'json', succès: function (data) {if (data.success) {console.log (data)} else {allert (json.stringing function (data) {alert (json.stringify (data));}});})Le code est comme ci-dessus. Examinons la console du navigateur et la capture d'écran est la suivante:
Comme indiqué dans la figure ci-dessus, nous avons obtenu avec succès les données.
Analyser les données
Comme indiqué dans la figure ci-dessus, les données contient le contenu suivant
1. Auteur
1. URL de l'avatar de l'auteur
2. Nom d'utilisateur de l'auteur
2. ID de l'auteur
3. Publier du contenu
4. Temps de libération
5. Est-ce l'essence
6. Post ID
7. Dernier temps de réponse
8. Nombre de réponses
9. étiquettes d'attribution
10. Titre de la publication
11. Que ce soit le dépasser
12. Parcourir les statistiques
L'interface de données est comme ci-dessus. Bien sûr, si vous êtes un forum complet, ces données sont utiles. Dans mon projet, beaucoup d'entre eux ne sont pas utilisés. Jetons un coup d'œil à ce dont j'ai besoin.
<li> <i> <img src = "# Avatar URL"> <span> nom d'utilisateur </span> </i> <morde> Publié il y a 5 jours </ time> <a href = "contenu.html? ID de lien"> Publié le titre </a> </li>
Comme indiqué dans le code ci-dessus, ce dont nous avons besoin pour faire boucle
1. URL de l'avatar de l'auteur
2. Nom d'utilisateur de l'auteur
3. Temps de libération
4. Post ID
5. Titre de la publication
Aucun problème, tout le contenu et les interfaces dont nous avons besoin sont disponibles.
Encapsuler le code ajax
Bien que le code Ajax ne soit pas long, je me sens toujours mal à l'aise. Par conséquent, j'utilise le code suivant pour le résumer
// 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 (data));}});}Comme mentionné ci-dessus, si nécessaire, nous n'avons qu'à utiliser la fonction GetJson (URL, FUNC).
Code encapsulé de référence
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getJson (url, function (data) {console.log (data);});});Après l'avoir modifié comme ceci, jetons un coup d'œil et voyons si nous pouvons imprimer les données dont nous avons besoin? Comme indiqué dans la figure ci-dessous:
Sans aucun problème, nous avons toujours obtenu les données. Nous encapsulons la fonction de rappel et la modifions dans le code suivant
$ (function () {var url = "http://cnodejs.org/api/v1/topics"; getjson (url, pushdom);}); fonction pushdom (data) {console.log (data);}OK, s'il n'y a pas d'erreur, les données d'interface peuvent certainement être imprimées. Après cette opération, notre code sera extrêmement concis et considérablement augmenté la lisibilité. Ce que nous devons faire ensuite, c'est le faire dans la fonction PushDom (données).
Vue Rendering Code
Tout d'abord, nous devons utiliser la méthode VUE pour écrire les données que nous souhaitons insérer dans la page.
pièce de code html
<li v-for = "info in data"> <i> <img src = "{{info.author.avatar_url}}"> <span> {{info.author.loginname}} </span> </i> <morde> {{info.create_at} </time> <a href = "contenu. }} "> {{info.title}} </a> </li> 1points de connaissances Vue
Données en boucle http://vuejs.org.cn/api/#v-for
Partie de code JS
fonction pushdom (data) {var vm = new vue ({el: '.list', data: data});}Jetons un coup d'œil à l'effet:
Ok, très excité. Dans quelques lignes de code, nous avons réussi à rendre la liste avec Vue.
résumé
1.Ajax est la clé pour obtenir des données
2. Une fois que vous comprenez un peu de contenu Vue, vous pouvez commencer.
3. Lors de la construction d'un projet, le code et les fichiers doivent être clairs et clairs.
appendice
Site officiel de Vue
Détails de l'API CNODEJS
Téléchargez le code source de cette série de tutoriels
Chapitre 1 du tutoriel pratique Vuejs, construire les bases et rendre la liste
Vuejs Practical Tutorial Chapter 2, corriger les erreurs et embellir le temps
Vuejs Practical Tutorial Chapter 3, en utilisant le plug-in de mise en page pour réaliser la pagination
Cet article a été initialement écrit par Fungleo
Adresse de première version: http://blog.csdn.net/fungleo/article/details/51649074
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.