Fermer

décembre 11, 2020

Construire un magasin d'alimentation à l'aide de l'interface utilisateur de Kendo et de Vue


Notre boutique de fruits en ligne est un exemple simple de la façon dont les applications peuvent être créées facilement à l'aide d'une bibliothèque comme Vue.js et les composants de Kendo UI.

Kendo UI est une bibliothèque utilisée pour développer des applications à un rythme relativement plus rapide. rythme avec précision; il fournit des composants d'interface utilisateur pour des bibliothèques telles que jQuery, Angular, React et Vue, et est livré avec de nombreux composants pour créer des graphiques, des tableaux de données et des pages glisser-déposer.

Vue.js est un cadre de développement frontal pour développer une gamme d'applications sur différentes plates-formes. En plus de son intégration simple, de sa documentation détaillée et de sa flexibilité, Vue vous permet d'étendre le langage de modèle avec vos composants. Vue fournit également des bibliothèques pour le routage et la gestion des états, et nous utiliserons cette dernière dans cet article.

Dans ce didacticiel, nous construisons un marché en utilisant Vue et Kendo UI; notre magasin présente aux utilisateurs une gamme de fruits délicieux; il permet également aux utilisateurs d'ajouter et de supprimer des articles du panier. Nous allons créer le magasin à l'aide des composants de l'interface utilisateur de Kendo et d'un serveur minimal utilisant Express pour servir les produits à l'application.

Pour suivre ce didacticiel, une compréhension de base de Vue et Node.js est nécessaire. Veuillez vous assurer que Node et npm sont installés avant de commencer.

Si vous n'avez aucune connaissance préalable de Vue, veuillez suivre la documentation officielle ici . Revenez et terminez l'article après avoir parcouru la documentation.

Nous utiliserons ces outils pour créer notre application:

Voici une démo du produit final:

Initialisation de l'application et installation des dépendances du projet

Pour commencer, nous utilisons vue-cli pour amorcer notre application. Tout d'abord, nous installerons la CLI en exécutant npm install -g @ vue / cli dans un terminal.

Pour créer un projet Vue à l'aide de la CLI, nous exécuterons la commande suivante: [19659012] vue create vue-shop

Après avoir exécuté cette commande, plutôt que de sélectionner la configuration par défaut, nous opterons pour la configuration manuelle. Nous faisons cela parce que nous voulons ajouter un préprocesseur CSS dans notre application et la gestion des états en utilisant Vuex . Suivez la capture d'écran ci-dessous:

Préréglage: sélectionnez manuellement les fonctionnalités. Fonctionnalités nécessaires: Babel, Vuex, préprocesseurs CSS, Linter / Formatter

Le reste des invites peut être configuré comme il vous convient le mieux.

Ensuite, exécutez les commandes suivantes dans le dossier racine de le projet d'installation des dépendances.

 //  installe  les dépendances requises pour construire le serveur
 npm   install  analyseur de corps express

// dépendances frontales
 npm   install  @ progress / kendo-theme-default

Démarrez le serveur de développement d'applications en exécutant npm run serve dans un terminal situé dans le dossier racine de votre projet.

Un onglet de navigateur doit s'ouvrir sur http: // localhost: 8080. La capture d'écran ci-dessous doit être similaire à ce que vous voyez dans votre navigateur:

Construction de notre serveur

Nous allons créer notre serveur en utilisant Express . Express est un framework web rapide, sans opinion et minimaliste pour Node.js .

Créez un fichier appelé server.js à la racine du projet et mettez-le à jour avec l'extrait de code ci-dessous


 const  express  =   require  ( 'express' ) ; 
 const  bodyParser  =   require  ( 'body-parser' ) ; 

 const  app  =   express  () ; [19659031] const  port  =  process .  env .  PORT  ||   4000 ; 
 const  produits  =   nécessitent  ( «./ products» ) ; 

app .  use  ( bodyParser .  json  () ) ; 
app .  use  ( bodyParser .  urlencoded  ( { extended :   false  } [19659027]) ) ; 
app .  use  ( ( req  res  next )   =>   { 
  res .  header  ( 'Access-Control-Allow-Origin'   '*' ) ; 
  res .  header  (
     'Access-Control-Allow-Headers' 
     'Origin, X-Requested-With, Content-Type, Accept' 
   ) ; 
   suivant  () ; 
} ) ; 

app .  get  ( '/ products'   ( req  res )   => [19659064] {
  res .  json  ( products ) ; 
} ) ; 

app .  écoute  ( port   ()   =>   {
  console .  log  ( `Serveur démarré sur le port  $ { port }  `  ) [19659027]; 
} ) ;

Les appels à notre terminal proviennent d'une origine différente. Par conséquent, nous devons nous assurer que nous incluons les en-têtes CORS ( Access-Control-Allow-Origin ). Si vous n'êtes pas familier avec le concept des en-têtes CORS, vous pouvez trouver plus d'informations ici .

La configuration ci-dessus est standard pour les applications Node, rien de particulier pour notre application.

Nous créons un serveur pour fournir des données à notre application afin que nous puissions voir comment Effects peut être utilisé pour récupérer des ressources externes afin de peupler le magasin.

Créez un fichier nommé products.js contenant les produits de notre magasin. Ouvrez le fichier et remplissez-le avec le code ci-dessous:


 module .  exports  =   [
   {
     "name" :   "Apples "
    " prix ":   23,54 
    " image ":  " https://images.pexels.com/photos/39028 /apples-fruit-red-juicy-39028.jpeg?cs=srgb&dl=apples-food-fruits-39028.jpg&fm=jpg"[19659027Often[19659082Often"description"[19659027d'unepomme"
  } 
   {
    " name ":  " Lemons "
    " price ":   10.33 
     "image" :   "https://images.pexels.com/photos/1898261/pexels-photo-1898261.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w= 400 "
    " description ":  " Grandes tranches de citron "
  } 
   {
    " nom ":  " Grand plat "
    " prix ":   12.13 [19659082] "image" :   "https://images.pexels.com/photos/37316/kaki-fruit-orange-subject.jpg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400" [19659027]
     "description" :   "Repas sain servi avec un accompagnement de protéines" 
  } 
   {
     "name" :   ] "Mangues" 
     "prix" :   10.33 
     "image" :   "https://images.pexels.com/ photos / 918643 / pexels-photo-918643.jpeg? auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "
    " description ":  " Un joli tableau de mangues slushy. " 
  } 
   {
     "name" :   "Berries!" 
     "price" :   10.33  , 
     "image" :   "https://images.pexels.com/photos/1334131/pexels-photo-1334131.jpeg?cs=srgb&dl=abundance-berries-close-up-1334131 .jpg & fm = jpg & auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "
    " de scription ":  " Berry abondance "
  } 
   {
    " name ":  " Coconut drink "
    " prix ":   10.33 
    " image ":  " https://images.pexels.com/photos/1030973/pexels-photo-1030973.jpeg? cs = srgb & dl = baies-berry-chia-1030973.jpg & fm = jpg & auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "
    " description ":  " Boisson rafraîchissante à la noix de coco avec des fraises 
  } 
   {
     "name" :   "Fruits" 
     "price" :   16.43 
     "image" :   "https://images.pexels.com/photos/103662/background-bitter-breakfast-bright-103662.jpeg?cs=srgb&dl=citrus-close-up- food-103662.jpg & fm = jpg & auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "
    " description ":  " Une sélection de fruits révélatrice "
  } 
   {
     "nom" [19659027]:   "Bananes" 
     "price" :   16.43 
     "image" :   "https: // images .pexels.com / photos / 1093038 / pexels-photo-1093038.jpeg? auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "
    " description ":  " Un tas de bananes "
  } 
   {
    " name ":  " Mangez sainement "
    " price ":   16.43 [19659027]
     "image" :   "https://images.pexels.com/photos/142520/pexels-photo-142520.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=400&w=400 "
    " description ":  " Maïs, poivrons, tomates et pois "
  } 
   {
    " name ": [19659077] "Tomatoes sprite" 
     "price" :   16.43 
     "image" :   "https: //images.pexels. com / photos / 533288 / pexels-photo-533288.jpeg? auto = compress & cs = tinysrgb & dpr = 2 & h = 400 & w = 400 "[1 9659027]
     "description" :   "Une tomate va avec n'importe quel plat" 
  } 
]

Remarque: Les images proviennent de https: // pexels.com .

Démarrez le serveur en exécutant la commande suivante dans un terminal dans le dossier du projet:

 node server.js

Vue d’accueil

Pour commencer, nous allons définir les vues de l’application, à partir de la page d’accueil. La page d'accueil contient la grille des produits. Créez un fichier nommé Home.vue dans le dossier src / components . Ouvrez le fichier et mettez-le à jour à l'aide des extraits ci-dessous. Nous allons diviser les extraits de composants en trois pour le modèle le script et le style .

Tout d'abord, le modèle . Copiez le contenu suivant dans le fichier src / components / Home.vue :


 < template > 
   < div   class  = [19659027] " main "  > 
     < section   class  =  " bannières "  [19659027]> 
       < div   v-for  =  " banner in banner "   : key  =  " banner.src "  > 
         < img  : src  =  " banner.src "   : alt  =  " banner.alt "  > 
       </  div > 
     </  section > 
     < section   class  =  " product-area "  > 
      
     </  section > 
   </  div [19659027]> 
 </  modèle >

Dans l'extrait ci-dessus, nous avons défini une zone pour les bannières et la grille de produits. La zone des bannières contient quatre images de bannières. Nous allons créer le composant de grille de produit plus loin dans le didacticiel.

Stylisation du composant Home

Ensuite, nous allons mettre en forme la page d'accueil, la zone de la bannière pour être exacte. Nous allons donner aux images une hauteur définie et donner au conteneur une largeur maximale.

Ensuite, nous allons créer la propriété de données banners avec un tableau d'images. Ouvrez le fichier home.component.ts et mettez-le à jour pour qu'il ressemble à l'extrait ci-dessous:

Puisque nous utiliserons des polices externes, nous mettrons à jour le fichier public / index.html avec une balise link :




  
    
    
    
     <link rel = "icon" href = " favicon.ico ">
    
     vue-shop 
  
  
    
    
 

    
  



 Ensuite, nous sélectionnerons Muli comme famille de polices par défaut; nous annulerons également le remplissage par défaut   et la marge   sur les éléments  body  et  html . Ouvrez le fichier  App.vue  et mettez à jour la zone de style   avec le contenu suivant: 



  
 Ensuite, nous allons créer et rendre un composant d'en-tête dans notre application avant de commencer à travailler sur la grille de produits.
 Le composant d'en-tête affiche le logo de l'application et le nombre d'articles dans le  panier  . Nous avons calculé la valeur  cart  du magasin Vuex.
 Créez un fichier  Header.vue  dans le dossier  src / components . Ouvrez le fichier et suivez le processus en trois étapes de création du composant ci-dessous:
 Tout d'abord, nous allons créer la section  template :



 Ensuite, nous allons styliser l'en-tête dans la section  style . Mettez à jour le fichier à l'aide de l'extrait ci-dessous:


 Enfin, nous inclurons la section  script :
 < template > 
   ...
 </  modèle >  

 < style   lang  =  " scss "    scoped > 
   ... 
  </  style >  

 < script > 
   export   par défaut   {
  nom :   "En-tête" 
  calculé :   {
     chariot  ()   {
      
    } 
  } 
} ; 
  </  script > 

 App Component
 Après avoir créé les composants  Home  et  Header l'étape suivante consiste à effectuer le rendu les composants du composant racine  App . Ouvrez le fichier  App.vue  dans le répertoire  src / . Mettez à jour la section  modèle  pour afficher à la fois  En-tête  et  Accueil les composants et la section  script  pour créer le chariot   property.


  
 Démarrez le serveur d'applications en exécutant la commande suivante:  npm serve .
 Ensuite, accédez à http: // localhost: 8080 sur votre navigateur, vous devriez voir quelque chose de similaire à la capture d'écran ci-dessous: [19659004]  en-tête avec le logo Just fruits et un panier, et ci-dessous des photos de fruits 
 Remarque: Assurez-vous d'utiliser vos propres images préférées ici.
 Ensuite, nous allons configurer la boutique Vuex en créant l'état par défaut de l'application et la définition des actions et mutations pour l'application.
 Gestion de l'état de l'application
 Pour garantir les meilleures pratiques pour l'application et s'assurer que l'application adopte un flux de données unidirectionnel, nous ' Je vais utiliser la bibliothèque  Vuex . Vuex est une bibliothèque de gestion d'état pour les applications Vue.js. Il sert de magasin pour tous les composants d'une application; cela garantit que l'état ne peut être muté que de manière prévisible.
 La Vue-CLI génère déjà le fichier  store.js  pour nous, donc tout ce que nous devons faire est de définir l'état initial de notre application et de créer les mutations   et  actions  requises pour mettre à jour correctement l'état.
 Ouvrez le fichier  src / store.js  et mettez à jour le contenu en suivant l'extrait ci-dessous: [19659432] // src / store.js
importer Vue depuis 'vue';
 importer Vuex depuis 'vuex';
 Vue.use (Vuex);
 exporter le nouveau Vuex.Store par défaut ({
 Etat: {
 éléments: [],
 chariot: [],
 },
 mutations: {
 loadSuccess (état, charge utile = []) {
 state.items = [...state.items, ...payload];
 },
 addToCart (état, élément = {}) {
 state.cart = [...state.cart, item];
 },
 removeFromCart (état, élément = {}) {
 state.cart = [
 ...state.cart.filter((product) => product.name !== item.name),
 ];
 },
 },
 Actions: {
 loadItems ({commit}, éléments) {
 commit ('loadSuccess', éléments);
 },
 addToCart ({commit}, élément) {
 commit ('addToCart', élément);
 },
 removeFromCart ({commit}, élément) {
 commit ('removeFromCart', élément);
 },
 },
 });
 Tout d'abord, nous devons définir l'état initial de l'application; notre application affiche une liste d'éléments   et permet également aux utilisateurs d'ajouter et de supprimer des éléments du panier  de sorte que le  initialState  de notre application comporte un tableau vide de  items  et un tableau vide  cart .
 Les actions sont généralement utilisées pour décrire des événements dans l'application lorsqu'un événement est déclenché; un événement correspondant est distribué pour gérer les événements déclenchés. Les actions sont similaires aux mutations dans Vue.js; la différence est que les actions commettent des mutations.
 Dans l'extrait de code ci-dessus, nous avons créé trois actions:
  •  loadItems : Nous envoyons cette action lorsque nous souhaitons remplir le magasin avec des éléments du serveur.
  •  addToCart : L'action  addToCart  est envoyée pour ajouter un article au panier; elle commet une mutation de nom similaire.
  •  removeFromCart : Cette action prend un élément comme second argument et le supprime du panier.
 Les mutations sont de pures fonctions qui font passer l'état de votre application de l'un à l'autre. Il est similaire à un événement, ce qui signifie qu'il obtient un type   et un gestionnaire  . La fonction  handler  est l'endroit où nous effectuons la transition de l'état de l'application.
 Dans l'extrait de code ci-dessus, nous avons défini trois fonctions de mutation:
  •  loadSuccess : Dans cette méthode, nous chargeons le  items  avec les produits récupérés sur le serveur.
  •  addToCart : La méthode  addToCart  prend un article et l'ajoute au tableau  cart . [19659437] removeFromCart : Cette méthode obtient un élément   et le filtre hors du panier  .
 Ensuite, nous allons créer le composant pour rendre les produits et travailler également sur la fonctionnalité d'ajout au panier. Restez à l'écoute.
 Affichage de la liste des produits
 Créez les fichiers suivants dans le répertoire  src / components :  Product.vue  pour afficher les fiches produits individuelles et  ProductList. vue  pour afficher une liste de fiches produit.
 Après avoir créé ces fichiers, ouvrez le fichier  Product.vue  et mettez à jour avec le code ci-dessous. Commencez par la section  modèle :




 Ici, nous avons deux boutons pour ajouter et supprimer un article du panier. Un drapeau  inCart  est utilisé pour déterminer lequel des boutons afficher. Nous avons également utilisé le jeu d’icônes de Kendo UI pour définir le bouton d’icône du panier. L'interface utilisateur de Kendo a un riche ensemble d'icônes qui sont disponibles  ici . Ils sont faciles à configurer et à personnaliser.
 Stylisons le composant en ajoutant une section de style   dans le fichier du composant:


 Ensuite, nous allons ajouter la section  script  pour créer les variables et méthodes utilisées dans la section  template .

  
 Le composant  Produit  prend un seul produit d'étai  ; cet objet contient des détails sur le produit que nous rendons.
 La méthode  addToCart  prend un paramètre ( item ); nous expédions cette méthode avec un article à ajouter au panier. Après avoir expédié l'article, nous définissons la propriété  inCart  sur  true . Cet indicateur permet d'afficher le bouton «Ajouter au panier» lorsque  true  et le bouton «Remove from cart» lorsque  false .
 Pendant ce temps, le  removeFromCart  method envoie un article à supprimer du panier et met à jour la propriété  inCart  en  false .
 Ensuite, nous allons rendre le composant  Product  dans le Composant  ProductList . Ouvrez le fichier  ProductList.vue  et mettez à jour la section  template  pour rendre le  Product  similaire et la zone  script  pour écouter les événements personnalisés depuis le composant  Product :

  
 Le composant de liste de produits reçoit un tableau  products  du composant  Home . Il parcourt ensuite le tableau  products  en utilisant le composant  Product  pour rendre chaque élément du tableau.
 Après avoir effectué cette modification, l'étape suivante consiste à rendre le composant de liste de produits dans le composant  Home.vue . Nous mettrons également à jour le composant  Home  pour récupérer les produits du serveur et le composant  Header  pour vous abonner au panier  .
 Ouvrez le  Home.vue  et affichez le composant de liste de produits dans l'élément avec l'attribut de classe  product-area :
   

      
 Tout d'abord, nous récupérons les produits en faisant une requête au serveur à l'aide de l'API  Fetch  dans le cycle de vie du composant  monté . Après avoir récupéré les produits avec succès, nous envoyons un événement pour peupler le magasin avec les produits renvoyés par le serveur.
 Nous nous sommes également abonnés à la propriété  items  du magasin; cela maintient notre composant synchronisé avec le magasin Vuex.
 Enfin, nous mettrons à jour le composant  Header  pour vous abonner au tableau  cart  du magasin; cela met à jour l'en-tête avec le nombre d'articles dans le panier.
    

      
 Après cette modification, si vous accédez à http: // localhost: 8080, vous devriez voir toutes les dernières modifications que nous avons apportées, y compris la possibilité d'ajouter et de supprimer un article du panier. Vous devriez également voir le nombre d'articles dans le panier lorsqu'un article est ajouté ou retiré du panier.
 
  Remarque:  Assurez-vous que le serveur de développement Vue fonctionne sur le port  8080  et que le serveur fonctionne sur le port  4000 .
 Conclusion
 Dans ce didacticiel, nous avons créé une boutique de fruits en ligne qui sert les fruits les plus frais. Nous avons utilisé Vuex pour gérer l'état de notre application. Notre boutique est un exemple simple de la façon dont les applications peuvent être créées facilement à l'aide d'une bibliothèque comme Vue.js et les composants de Kendo UI.
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link