Share
Ce que vous allez créerLors de la dernière session, vous avez appris à ajouter des données sur Parse.com et à les rendre sur votre site Web. Vous vous êtes familiarisé avec le concept des objets, des collections et des vues et vous avez créé votre premier cours. À partir de cette session et à l'avenir, vous créerez le panneau d'administration du système de blog..
Et tout commence par la création d'une classe d'utilisateurs et l'activation de la connexion..
Parse.com a rendu extrêmement facile l'ajout d'une nouvelle classe d'utilisateurs. Cliquez "Ajouter une classe"et choisissez"Utilisateur"pour le créer.
Ajoutez une nouvelle ligne pour vous-même:
Maintenant que vous avez un utilisateur, nous pouvons renforcer la sécurité de l'application en définissant des autorisations d'accès au niveau classe..
Allez à votre table pour les articles de blog et cliquez sur "Sécurité":
Changez l'autorisation "Ajouter des champs" du public à vous-même:
Cela empêchera les autres d'ajouter de nouveaux champs à la table.
De même, accédez à la table des utilisateurs et limitez-vous également l'autorisation "Ajouter des champs"..
Vous pouvez définir le reste des autorisations au niveau classe en fonction de vos besoins, mais nous le laisserons pour l'instant..
Tout d'abord, nettoyons un peu la barre de navigation du modèle HTML pour laisser de la place à la nouvelle page d'administration. Changer la élément pour n'avoir que deux liens: Accueil et Admin:
Puis, dupliquez index.html et le renommer admin.html, et dupliquer blog.js et le renommer admin.js. (Pour ceux qui sont familiers avec le concept de routeur et qui détestent le code dupliqué, supportez-moi pendant un moment. Je vous promets que vous allez éventuellement apprendre à utiliser un routeur et à tout nettoyer!)
Dans admin.html, Appliquer le .actif classe à l'onglet correct:
Et un lien vers admin.js au lieu de blog.js:
Assurez-vous que tout fonctionne encore correctement et que nous pouvons maintenant passer rapidement à la création de HTML pour une page de connexion..
Le même vieux truc, allez à http://getbootstrap.com/examples/signin, et copiez le code HTML de .connexion à la forme dans .conteneur principal.
Obtenez le style dans signin.css, et le copier dans notre blog.css, sauf pour le style de corps:
.sign-form-form largeur-max: 330px; rembourrage: 15px; marge: 0 auto; .form-signin .form-signin-heading, .form-signin .checkbox margin-bottom: 10px; .form-signin .checkbox font-weight: normal; .form-signin .form-control position: relative; hauteur: auto; -webkit-box-dimensionnement: border-box; -moz-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; rembourrage: 10px; taille de police: 16px; .form-signin .form-control: focus z-index: 2; .form-signin input [type = "email"] margin-bottom: -1px; border-bottom-right-radius: 0; rayon en bas à gauche: 0; .form-signin input [type = "mot de passe"] margin-bottom: 10px; rayon en haut à gauche: 0; border-top-right-radius: 0;
Enfin, débarrassez-vous de tout admin.js au dessous de Parse.initialize ():
$ (function () Parse. $ = jQuery; // Remplacez cette ligne par celle de votre page de guide Quickstart
Maintenant, actualisez la page:
Avoir l'air bien!
Quelques modifications finales à la page: nous utiliserons un nom d’utilisateur pour vous connecter, changez donc le champ email en un champ texte et ajoutez le prénom attribuer aux deux champs de saisie:
Changer le sélecteur CSS de email à texte en conséquence:
.entrée de signature de formulaire [type = "text"] margin-bottom: -1px; border-bottom-right-radius: 0; rayon en bas à gauche: 0;
Et supprimez la case à cocher "Souvenez-vous de moi", car nous ne prévoyons pas de le faire dans ce tutoriel..
Nous sommes enfin prêts à activer la connexion. Écrivons une fonction JavaScript simple pour connecter les utilisateurs lorsqu'ils cliquent sur Soumettre dans admin.js:
Accentsconagua
$ ('. form-signin'). on ('submit', function (e) // Empêcher la soumission par défaut e.preventDefault (); // Récupère les données du formulaire et les met dans des variables var data = $ ( this) .serializeArray (), nom d'utilisateur = data [0] .value, mot de passe = data [1] .value; // Appelez la fonction de connexion Parse avec ces variables Parse.User.logIn (nom d'utilisateur, mot de passe, // Si le nom d'utilisateur et le mot de passe correspond à succès: function (utilisateur) alert ('Bienvenue!'); // S'il y a une erreur, erreur: function (utilisateur, erreur) console.log (erreur);));Essayons…
Aussi simple que cela: vous êtes maintenant connecté!
Une fois que vous êtes connecté, vous ne voulez certainement pas simplement voir un message d’alerte et rester sur la page de connexion. Nous devons créer un écran de bienvenue pour les utilisateurs connectés..
Pour ce faire, nous allons créer une page de connexion et une page de bienvenue dans Views et les servir avec Parse.js..
Comme nous l'avons fait avec les modèles de blog, sortons tout dans .conteneur principal et créer des modèles pour la page de connexion et la page d'accueil:
Nous pouvons garder la vue d'accueil très simple pour l'instant. Il suffit de prendre l'objet utilisateur et d'afficher le nom d'utilisateur.
Définissons ces vues dans admin.js. Notez que parce que LoginView n'a besoin de rendre aucun objet, la fonction de rendu place simplement le modèle HTML dans le DOM.
var LoginView = Parse.View.extend (template: Handlebars.compile ($ ('# login-tpl'). html ()), rendu: function () ceci. $ el.html (this.template ()) ;), WelcomeView = Parse.View.extend (template: Handlebars.compile ($ ('# bienvenue-tpl'). Html ()), render: function () var attributs = this.model.toJSON ( ); this. $ el.html (this.template (attributs)););Rappelez-vous la fonction de connexion simple que nous avons? Maintenant, vous pouvez en faire un événement sous LoginView:
var LoginView = Parse.View.extend (template: Handlebars.compile ($ ('# login-tpl'). html ()), événements: 'submit .form-signin': 'login', login: fonction (e) // Empêcher la soumission par défaut e.preventDefault (); // Récupère les données du formulaire et les met dans des variables var data = $ (e.target) .serializeArray (), nom_utilisateur = data [0] .value , password = data [1] .value; // Appelez la fonction Parse Login avec ces variables Parse.User.logIn (nom d'utilisateur, mot de passe, // Si le nom d'utilisateur et le mot de passe correspondent à succès: function (utilisateur) alert ('Bienvenue! ');, // S'il y a une erreur d'erreur: function (utilisateur, erreur) console.log (erreur););, render: function () this. $ El.html (this.template ());)Notez que nous avons changé $ (this) .serializeArray () à $ (e.target) .serializeArray (). C'est parce que dans ce contexte, ce pointera vers LoginView.
Avant de passer à l'affichage de la vue d'accueil, générons d'abord un affichage de la page de connexion et voyons si cela fonctionne:
var loginView = new LoginView (); loginView.render (); $ ('. main-container'). html (loginView.el);Exécutez-le à nouveau, et cela fonctionne comme avant.
Maintenant, changeons la fonction de rappel de succès de s'identifier() pour rendre une vue de bienvenue à l'aide du retour utilisateur objet.
success: function (utilisateur) var welcomeView = new WelcomeView (model: user); welcomeView.render (); $ ('. main-container'). html (welcomeView.el); Testez à nouveau:
Et oui, ça marche sûrement!
Dans cette session, vous avez créé votre deuxième classe: la classe d'utilisateurs. Vous avez également créé deux vues importantes: LoginView et WelcomeView. Vous avez également activé la connexion des utilisateurs sur votre site Web et vous pouvez désormais envoyer un message de bienvenue personnel à vos utilisateurs..
Ce n'est que le point de départ de la création d'un panneau d'administration de blog. Restez à l'écoute et dans le prochain tutoriel, nous allons créer une nouvelle vue et activer la fonction "Ajouter un nouveau blog".
