Construire une application de télconférence web avec Vue.js

Introduction

Dans ce projet, vous allez apprendre à construire une application de téléméconférence web à l'aide de Vue.js 2.x. Le projet se concentre sur la mise en œuvre de divers effets d'affichage pour la liste des participants dans le logiciel de téléméconférence web.

👀 Aperçu

Aperçu de l'application de téléméconférence web

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment implémenter la fonctionnalité de lecture et de rendu de données asynchrones pour récupérer et afficher les données des utilisateurs dans les fenêtres de connexion et de participants.
Comment implémenter la fonction de commutation de connexion et de déconnexion, permettant aux utilisateurs de se connecter et de se déconnecter de l'application.
Comment s'assurer que l'utilisateur connecté est toujours affiché en premier dans la liste des participants.
Comment implémenter la fonctionnalité de commutation de la visibilité de la fenêtre des participants.
Comment implémenter la fonctionnalité de commutation de l'effet d'affichage de la liste des participants, y compris afficher tous les participants, cacher la liste des participants et ne montrer que l'utilisateur actuellement connecté.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Construire une application de téléméconférence web à l'aide de Vue.js 2.x avec diverses fonctionnalités d'interface utilisateur.
Récupérer et afficher des données de manière asynchrone à l'aide d'Axios.
Implémenter la gestion d'état et la gestion des événements dans une application Vue.js.
Créer des interfaces utilisateur dynamiques et basculer entre différents modes d'affichage.

Configurer la structure du projet

Dans cette étape, vous allez apprendre à configurer la structure du projet. Suivez les étapes ci-dessous pour compléter cette étape :

Ouvrez le dossier du projet pour ce projet. La structure de répertoire est la suivante :

├── index.html
├── css
├── images
└── js
    ├── axios.min.js
    ├── userList.json
    └── vue.js

Dans lequel :

index.html est la page principale.
css est le dossier de style.
images est le dossier d'images.
js/axios.min.js est le fichier axios.
js/userList.json est le fichier de données qui doit être demandé.
js/vue.js est le fichier Vue 2.x.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Description de l'image

Implémenter la lecture et le rendu de données asynchrones

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité de lecture et de rendu de données asynchrones.

Ouvrez le fichier index.html dans le projet fourni.
Dans l'option data de l'instance Vue, ajoutez quelques attributs pour une utilisation ultérieure.

new Vue({
  el: "#app",
  data() {
    return {
      list: [],
      indexUser: "Tom",
      isShow: false,
      isShowRbtn: false,
      isShowUserList: true,
      isShowOtherUser: false,
      isShowIndexUser: true,
      user: "",
      buttonIndex: 2
    };
  }
});

Dans l'instance new Vue(), ajoutez le code suivant dans le hook de cycle de vie mounted() pour récupérer les données des utilisateurs à partir de ./js/userList.json à l'aide d'Axios :

new Vue({
  el: "#app",
  data: {
    //...
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      // Utilisez axios pour récupérer les données du serveur
      const res = await axios({
        url: "./js/userList.json"
      });
      this.list = res.data;
    }
  }
});

Dans la fenêtre de connexion, mettez à jour le code pour afficher les données des utilisateurs récupérées dans le menu déroulant :

<!-- Le code original : -->
<!-- <p>
  Sélectionnez un utilisateur :
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Utilisateur actuel : Tom</p> -->

<!-- Le code mis à jour : -->
<p v-if="!isShow">
  Sélectionnez un utilisateur :
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Utilisateur actuel : {{user.name}}</p>

Après avoir terminé cette étape, la fenêtre de connexion affichera les données des utilisateurs récupérées asynchronement à partir de ./js/userList.json.

L'effet est le suivant :

Effet de rendu de données asynchrones dans la fenêtre de connexion

Implémenter la commutation entre la connexion et la déconnexion

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité de commutation de connexion et de déconnexion.

Ouvrez le fichier index.html dans le projet fourni.
Dans les méthodes de l'instance new Vue(), ajoutez la fonction login.
Dans la méthode login(), ajoutez le code pour basculer entre les fenêtres de connexion et de déconnexion :

methods: {
  //...
  login() {
    this.isShow =!this.isShow;
    this.user = this.list.find((item) => item.name == this.indexUser);
  },
},

Dans les calculées de l'instance new Vue(), ajoutez la propriété isShow pour contrôler l'affichage du texte :

computed: {
  loinOrlogout() {
    return this.isShow? "Déconnexion" : "Connexion";
  }
},
methods: {
  //...
},

Dans la fenêtre de connexion ou de déconnexion, mettez à jour le code pour afficher le contenu approprié selon l'état de connexion :

<!-- Le code original : -->
<!-- <h3>Connexion</h3>
<p>
  Sélectionnez un utilisateur :
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Utilisateur actuel : Tom</p>

<a class="login-btn">Connexion</a> -->

<!-- Le code mis à jour : -->
<h3>{{loinOrlogout}}</h3>
<p v-if="!isShow">
  Sélectionnez un utilisateur :
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Utilisateur actuel : {{user.name}}</p>
<a @click="login" class="login-btn">{{loinOrlogout}}</a>

Après avoir terminé cette étape, la fonctionnalité de commutation de connexion et de déconnexion sera implémentée, et la fenêtre des participants ne montrera que les informations de l'utilisateur actuellement connecté par défaut.

L'effet est le suivant :

Effet après connexion

Effet après déconnexion

Vérifier que l'utilisateur connecté est toujours le premier dans la liste des participants

Dans cette étape, vous allez apprendre à assurer que l'utilisateur connecté est toujours le premier dans la liste des participants.

Ouvrez le fichier index.html dans le projet fourni.
Dans la fenêtre des Participants, mettez à jour le code pour class="say-list" et class="user-list" pour ne montrer que les informations de l'utilisateur actuellement connecté par défaut :

<ul class="say-list">
  <li>
    <span class="iconfont icon-microphone"></span>
  </li>
  <li class="line"></li>
  <li>Étant parlé à : {{list.find((item) => item.isHost).name}};</li>
</ul>
<ul v-if="isShow" class="user-list">
  <li v-if="isShowIndexUser">
    <img class="header" :src="user.imgPath" />
    <div class="user-name">
      <span v-if="user.isHost" class="iconfont icon-user header-icon"></span>
      <span class="iconfont icon-microphone"></span>
      {{user.name}}
    </div>
  </li>
  <li v-for="item in list" v-if="item.name!=user.name&&isShowOtherUser">
    <img class="header" :src="item.imgPath" />
    <div class="user-name">
      <span
        v-if="item.isHost&&changeBtnActive"
        class="iconfont icon-user header-icon"
      ></span>
      <span class="iconfont icon-microphone"></span>
      {{item.name}}
    </div>
  </li>
</ul>

Après avoir terminé cette étape, l'utilisateur connecté sera toujours affiché comme le premier utilisateur dans la liste des participants.

L'effet est le suivant :

Le premier utilisateur dans la liste des participants est toujours l'utilisateur connecté

Implémenter le commutateur de visibilité de la fenêtre des participants

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité de commutation de la visibilité de la fenêtre des participants.

Ouvrez le fichier index.html dans le projet fourni.
Dans les méthodes de l'instance new Vue(), ajoutez la fonction showUserList et la fonction showRbtn.

methods: {
  showUserList() {
    this.isShowUserList =!this.isShowUserList;
    this.showRbtn();
  },
  showRbtn() {
    this.isShowRbtn =!this.isShowRbtn;
  },
},

Dans le HTML, mettez à jour le code pour ajouter le bouton pour afficher ou cacher la fenêtre des participants :

<!-- Le code original : -->
<!-- <button id="show" class="right-btn">
  <span class="iconfont icon-left-arrow"></span>
</button> -->

<!-- Le code mis à jour : -->
<button
  v-if="isShow&&isShowRbtn"
  @click="showUserList"
  id="show"
  class="right-btn"
>
  <span class="iconfont icon-left-arrow"></span>
</button>

Après avoir terminé cette étape, vous pourrez afficher ou cacher la fenêtre des participants en cliquant sur le bouton.

L'effet est le suivant :

Position de l'icône du bouton pour afficher/cacher la fenêtre des participants

Implémenter le commutateur de l'effet d'affichage de la liste des participants

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité de commutation de l'effet d'affichage de la liste des participants.

Ouvrez le fichier index.html dans le projet fourni.
Dans les méthodes de l'instance new Vue(), ajoutez la fonction changeBtnActive.
Dans la méthode changeBtnActive(), ajoutez le code pour gérer la commutation de l'effet d'affichage de la liste des participants :

methods: {
  changeBtnActive(userFlag, otherUserFlag, value) {
    this.isShowIndexUser = userFlag;
    this.isShowOtherUser = otherUserFlag;
    this.buttonIndex = value;
  },
},

Dans le HTML, localisez la classe class="user-dialog" et mettez à jour le code pour ajouter le bouton utilisé pour basculer l'effet d'affichage de la liste des participants :

<div v-if="isShowUserList&&isShow" class="user-dialog">
  <ul class="tools">
    <li class="tools-left">
      <button
        @click="changeBtnActive(false,false,1)"
        :class="{'active': buttonIndex==1? true : false}"
      >
        <span class="iconfont icon-close"></span>
      </button>
      <button
        @click="changeBtnActive(true,false,2)"
        :class="{'active': buttonIndex==2? true : false}"
      >
        <span class="iconfont icon-dialog"></span>
      </button>
      <button
        @click="changeBtnActive(true,true,3)"
        :class="{'active': buttonIndex==3? true : false}"
      >
        <span class="iconfont icon-list"></span>
      </button>
    </li>
    <li @click="showUserList" class="tools-right">
      <button class="show-list">
        <span class="iconfont icon-retract"></span>
      </button>
    </li>
  </ul>
  <!-- liste d'utilisateurs -->
  <!-- Omettez le code déjà mentionné... -->
</div>

Après avoir terminé cette étape, vous pourrez basculer l'effet d'affichage de la liste des participants en cliquant sur les boutons correspondants.

L'effet est le suivant :

Effet d'affichage de tous les participants