Share
Ce que vous allez créerAu cours des six sessions précédentes, vous avez construit un système de blogging à partir de la base. Tout fonctionne, et c'est génial! Cependant, le code lui-même est assez confus. Nous avons démarré les choses ensemble et avons laissé beaucoup de code répétitif et de solutions temporaires. Cette session se concentrera sur la façon dont vous pouvez nettoyer les choses et résoudre quelques problèmes que nous avons rencontrés..
Tout d’abord, puisque nous avons maintenant un routeur (si vous avez manqué cette session, consultez la partie 5: Routeur), nous n’avons plus besoin de deux serveurs distincts. .html et .js des dossiers. Fusionnons-les ensemble.
À ce stade, je suggère de fusionner admin.html et admin.js et les renommer comme index.html et blog.js parce qu'ils ont plus de logique et de code, mais vous pouvez le faire de toute façon. Cela devrait être assez simple.
Si vous renommez les fichiers, assurez-vous de créer un lien vers blog.js dans le nouveau index.html (précédemment admin.html). Aussi, n'oubliez pas de copier sur # blogs-tpl de l'ancien index.html déposer dans le nouveau et copier dessus BlogsView de l'ancien blog.js déposer dans le nouveau.
Maintenant, visitez http: // localhost / your-directory / et vous devriez voir l'écran de connexion par défaut (ou l'écran d'administrateur si vous êtes déjà connecté).
Ensuite, nous pouvons ajouter un nouveau modèle d'URL dans le routeur pour faire correspondre l'URL racine à une nouvelle fonction. on peut l'appeler indice():
itinéraires: ": 'index',…,
Ce indice() la fonction devrait rendre ce qui était précédemment sur la page d'accueil.
Accentsconagua
index: function () this.blogs.fetch (success: function (blogs) var BlogView = new BlogsView (collection: blogs); blogsView.render (); $ ('. main-container'). html (blogsView.el);, erreur: fonction (blogs, erreur) console.log (erreur);); Et pour que cela fonctionne, redirigeons par défaut vers cette URL lorsque le routeur démarre:
start: function () Parse.history.start (pushState: true); this.navigate (", trigger: true); La prochaine chose à faire est de mettre à jour la barre de navigation en haut. Changeons ces fichiers HTML en URL ici:
Et pour que ceux-ci fonctionnent, nous devons ajouter un événement à .blog-nav-item utiliser blogRouter.navigate () plutôt que l'événement de lien par défaut:
$ (document) .on ('cliquez', '.blog-nav-item', fonction (e) e.preventDefault (); var href = $ (e.target) .attr ('href'); blogRouter. naviguer (href, trigger: true);); Et ajoutons une logique pour basculer le .actif classe aussi:
$ (document) .on ('cliquez', '.blog-nav-item', fonction (e) e.preventDefault (); var href = $ (e.target) .attr ('href'); blogRouter. naviguer (href, trigger: true); $ (this) .addClass ('active'). siblings (). removeClass ('active');); Maintenant, si vous cliquez autour, tout devrait fonctionner!
En passant, on peut voir AddBlogView et EditBlogView sont assez similaires. Donc sont mettre à jour() et créer() fonctionner dans le Blog classe. Fusionnons ceux-là aussi.
Tout d’abord, fusionnons les deux modèles dans index.html être # write-tpl.
Vous pouvez voir que c'est fondamentalement # edit-tpl avec des changements de nom de classe et un titre de formulaire dynamique. Nous allons simplement passer "" dans Titre et contenu lors de l'ajout d'un nouveau blog.
Ensuite, fusionnons le mettre à jour() et créer() fonctions dans la classe Blog. Nous pouvons enchaîner this.set (). save () fonctions pour les deux mettre à jour() et créer(). Pour les champs qui n'ont pas besoin d'être touchés par le mettre à jour() fonction, nous pouvons remplir avec la valeur actuelle:
update: function (titre, contenu) this.set ('title': titre, 'contenu': contenu, // définit l'auteur à l'auteur du blog existant s'il est modifié, utilise l'utilisateur actuel pour créer // la même logique est utilisée les trois champs suivants 'auteur': this.get ('auteur') || Parse.User.current (), 'nomauteur': this.get ('nomauteur') || Parse.User.current (). get ( 'nom d'utilisateur'), 'heure': this.get ('heure') || nouvelle Date (). toDateString ()). save (null, succès: fonction (blog) alert ('Vous avez mis à jour un nouveau blog : '+ blog.get (' title '));, erreur: fonction (blog, erreur) console.log (blog); console.log (erreur);); Maintenant, il est temps de fusionner les deux vues:
WriteBlogView = Parse.View.extend (template: Handlebars.compile ($ ('# write-tpl'). Html ()), événements: 'submit .form-write': 'submit', submit: fonction ( e) e.preventDefault (); var data = $ (e.target) .serializeArray (); // S'il n'y a pas de données de blog, créez un nouveau blog this.model = this.model || new Blog (); this.model.update (data [0] .value, data [1] .value);, render: function () var attributs; // Si l'utilisateur modifie un blog, cela signifie qu'un ensemble de blogs sera créé. comme this.model //, nous utilisons donc cette logique pour restituer différents titres et pour passer des chaînes vides if (this.model) attributs = this.model.toJSON (); attributes.form_title = 'Modifier le blog'; else attributs = formulaire_title: 'Ajouter un blog', titre: ", contenu:" ceci. $ el.html (this.template (attributs)). find ('textarea'). wysihtml5 ();) Remarquez comment vous pouvez utiliser si (ce.modèle) pivoter entre les fonctions d'ajout et d'édition.
Enfin, relions à cette nouvelle WriteBlogView dans le routeur. Il suffit de changer les deux vues pour WriteBlogView et il devrait toujours fonctionner comme d'habitude.
add: function () // Vérifier le login si (! Parse.User.current ()) this.navigate ('login', trigger: true); else var writeBlogView = new WriteBlogView (); writeBlogView.render (); $ conteneur.html (writeBlogView.el); , edit: function (id) // Vérifier le login si (! Parse.User.current ()) this.navigate ('login', trigger: true); else var requête = new Parse.Query (Blog); query.get (id, succès: fonction (blog) var writeBlogView = new WriteBlogView (modèle: blog); writeBlogView.render (); $ conteneur.html (writeBlogView.el);, erreur: fonction (blog , erreur) console.log (erreur);); Notez que vous devez également renvoyer les visiteurs à la page de connexion s'ils ne sont pas connectés..
Maintenant que nous avons supprimé tout le code répétitif, nous pouvons maintenant passer à certaines fonctionnalités que nous pouvons améliorer..
Beaucoup d'entre vous ont demandé comment nous pouvons garder les données en sécurité si l'API est dans le code. Parse.js fournit des listes de contrôle d'accès (ACL) pour aider à gérer l'accès des utilisateurs. Nous avons parlé des listes de contrôle d'accès au niveau de la classe dans la partie 3: Connexion de l'utilisateur. Aujourd'hui, je vais vous montrer comment ajouter une liste de contrôle d'accès au niveau de l'article..
Par exemple, supposons que nous voulions que chaque blog soit modifiable par son auteur original..
Pour ce faire, nous devons définir la ACL champ dans le mettre à jour() une fonction:
update: function (titre, contenu) // Ne définit ACL que si le blog ne l'a pas si (! this.get ('ACL')) // Crée un objet ACL pour accorder l'accès à l'utilisateur actuel // (également l'auteur du blog nouvellement créé) var blogACL = new Parse.ACL (Parse.User.current ()); // Accorde un accès en lecture seule au public afin que tout le monde puisse le voir blogACL.setPublicReadAccess (true); // Définit cet objet ACL sur le champ ACL this.setACL (blogACL); cet ensemble(… ); Un autre problème que beaucoup d’entre vous peuvent penser est qu’il est très difficile de tester le système de blogs que vous créez. Chaque fois que vous testez, vous devez revenir à http: // localhost / your-directory / pour déclencher le routeur..
Réglons d'abord ce problème.
Parse.js facilite la tâche, changeons donc le BlogRouter.start () fonction pour définir une racine de fichier.
start: function () Parse.history.start (// place votre répertoire en dessous de root: '/ tutorial_blog /');
Notez que nous pouvons sortir le this.navigate () fonctionne maintenant.
Un autre problème avec les URL que nous avons en ce moment est qu’elles ne peuvent pas être marquées ou revisitées. Tout ce que vous voulez faire, vous devez commencer par l'URL principale. Par exemple, si vous visitez http: // localhost / blog / admin, le routeur est configuré pour accepter ce modèle d'URL, mais le serveur en renvoie 404. / admin, votre serveur ne sait pas qu'il devrait réellement aller à index.html pour démarrer le routeur en premier lieu.
Une façon de résoudre ce problème consiste à configurer votre serveur afin qu’il redirige toutes les URL vers index.html. Mais ce n'est pas vraiment dans le cadre de cette classe. Nous allons essayer l’autre méthode: ajouter un # / avant toutes nos URL.
L'URL du panneau d'administration devrait ressembler à ceci: http: // localhost / blog / # / admin. Ce n'est pas vraiment idéal, mais c'est un moyen facile. Quand le navigateur rencontre / #, il ne va pas traiter le reste de l'URL comme un chemin de fichier; au lieu de cela, il dirigera l'utilisateur vers index.html, afin que notre routeur puisse prendre le reste.
Maintenant, allons de l'avant et changeons le href attribut de tous les balises dans le index.html de quelque chose comme ceci:
modifier
à quelque chose comme ça:
modifier
De même, changeons tous les BlogApp.navigate () dans blog.js de quelque chose comme ceci:
BlogApp.navigate ('admin', trigger: true); à quelque chose comme ça:
BlogApp.navigate ('# / admin', trigger: true); Vous pouvez prendre certains des événements pour utiliser le tag, aussi.
Par exemple, le “Ajouter un nouveau blog”Bouton utilisé pour utiliser un événement:
events: 'click .add-blog': 'add', add: function () blogRouter.navigate ('# / add', trigger: true); Nous pouvons les supprimer et les remplacer par un lien index.html:
Ajouter un nouveau blog
Vous pouvez également supprimer cette fonction puisque les URL fonctionneront d’elles-mêmes:
$ (document) .on ('cliquez', '.blog-nav-item', fonction (e) e.preventDefault (); var href = $ (e.target) .attr ('href'); blogRouter. naviguer (href, trigger: true); $ (this) .addClass ('active'). siblings (). removeClass ('active');); Sortons aussi le actif classe pour le moment, mais nous allons le rajouter et le faire fonctionner de manière différente lors de sessions ultérieures.
Très bien, parcourez votre blog, testez et assurez-vous que tous les liens sont maintenant vers http: // localhost / # /… sauf la page d'accueil.
Vous avez maintenant des URL que vous pouvez actualiser et revisiter. J'espère que cela vous facilite la vie!
Si le didacticiel très long ne vous dérange pas et que vous souhaitez apporter quelques améliorations supplémentaires, voici quelques autres corrections et améliorations que vous pouvez apporter..
Vous remarquerez peut-être aussi que les blogs sont classés du plus ancien au plus récent. Habituellement, nous nous attendons à voir les derniers blogs en premier. Alors changeons le Les blogs collection pour les trier dans cet ordre:
Blogs = Parse.Collection.extend (modèle: Blog, requête: (nouveau Parse.Query (Blog)). Décroissant ('createdAt')) Voici une autre chose que nous pouvons améliorer. Au lieu de faire apparaître une fenêtre d’alerte après la mise à jour d’un blog, il suffit de faire une redirection vers le / admin page:
this.set (…). save (null, succès: fonction (blog) blogRouter.navigate ('# / admin', trigger: true);, erreur: fonction (blog, erreur) … ); Si vous lancez le nettoyage, vous pouvez également fusionner AdminView et WelcomeView en un seul. Il n'est pas vraiment nécessaire de disposer de deux vues distinctes..
Encore une fois, le modèle HTML en premier:
Alors changeons BlogRouter.admin () passer Nom d'utilisateur à AdminView:
admin: function () var currentUser = Parse.User.current (); // Vérifier la connexion si (! CurrentUser) BlogApp.navigate ('# / login', trigger: true); this.blogs.fetch (succès: fonction (blogs) var blogsAdminView = new BlogsAdminView (// Transmet le nom d'utilisateur actuel à restituer dans # admin-tpl nom_utilisateur: currentUser.get ('nom_utilisateur'), collection: blogs ); blogsAdminView.render (); $ ('. conteneur principal'). html (blogsAdminView.el);, erreur: fonction (blogs, erreur) console.log (erreur);); Et puis passez le Nom d'utilisateur être rendu dans # admin-tpl:
BlogsAdminView = Parse.View.extend (template: Handlebars.compile ($ ('# admin-tpl'). Html ()), rendu: function () var collection = // Transmettez le nom d'utilisateur en tant que variable à utiliser dans le modèle nom d'utilisateur: this.options.nomutilisateur, blog: this.collection.toJSON (); this. $ el.html (this.template (collection)); Enfin, nous pouvons stocker $ ('. main-container') comme une variable pour éviter de faire plusieurs requêtes.
var $ conteneur = $ ('. main-container'); Et juste remplacer tous les $ ('. main-container') avec $ conteneur.
Tout d’abord, félicitations pour avoir réussi à la fin! La session a été longue, mais vous avez nettoyé tout le projet. En outre, vous avez également ajouté ACL aux blogs, implémenté des URL statiques et effectué de nombreux autres correctifs. Maintenant c'est un projet vraiment solide.
Lors de la prochaine session, nous allons accélérer les choses et ajouter trois nouvelles fonctions: affichage d'un seul blog, suppression d'un blog et déconnexion, car vous comprenez maintenant bien Parse.js et pouvez avancer beaucoup plus rapidement. Je vous conseillerais de réfléchir à la manière d'écrire ces fonctions à l'avance pour que vous puissiez tester un peu vos connaissances. Autre que cela, restez à l'écoute!
