Lassen Sie uns zusammen eine Besprechung haben

Einführung

In diesem Projekt lernen Sie, wie Sie eine Webkonferenzanwendung mit Vue.js 2.x erstellen. Das Projekt konzentriert sich auf die Implementierung verschiedener Anzeigeeffekte für die Liste der Teilnehmer in der Webkonferenzsoftware.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt lernen Sie:

• Wie Sie die Funktion zum asynchronen Lesen und Rendern von Daten implementieren, um Benutzerdaten in den Anmelde- und Teilnehmerfenstern abzurufen und anzuzeigen.
• Wie Sie die Funktion zum Umschalten zwischen Anmeldung und Abmeldung implementieren, damit Benutzer sich bei der Anwendung an- und abmelden können.
• Wie Sie sicherstellen, dass der angemeldete Benutzer immer als erster Benutzer in der Teilnehmerliste angezeigt wird.
• Wie Sie die Funktion zum Umschalten der Sichtbarkeit des Teilnehmerfensters implementieren.
• Wie Sie die Funktion zum Umschalten des Anzeigeeffekts der Teilnehmerliste implementieren, einschließlich der Anzeige aller Teilnehmer, des Versteckens der Teilnehmerliste und der Anzeige nur des aktuell angemeldeten Benutzers.

🏆 Errungenschaften

Nach Abschluss dieses Projekts können Sie:

• Eine Webkonferenzanwendung mit Vue.js 2.x mit verschiedenen Benutzeroberflächenfunktionen erstellen.
• Daten asynchron mit Axios abrufen und anzeigen.
• Zustandsverwaltung und Ereignisbehandlung in einer Vue.js-Anwendung implementieren.
• Dynamische Benutzeroberflächen erstellen und zwischen verschiedenen Anzeigemodi wechseln.

Skills Graph

Einrichten der Projektstruktur

In diesem Schritt lernen Sie, wie Sie die Projektstruktur einrichten. Befolgen Sie die folgenden Schritte, um diesen Schritt abzuschließen:

Öffnen Sie den Projektordner für dieses Projekt. Die Verzeichnisstruktur sieht wie folgt aus:

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

Darunter:

• index.html ist die Hauptseite.
• css ist der Stilordner.
• images ist der Bildordner.
• js/axios.min.js ist die axios-Datei.
• js/userList.json ist die Datendatei, die angefordert werden muss.
• js/vue.js ist die Vue 2.x-Datei.

Klicken Sie auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Öffnen Sie als Nächstes "Web 8080" oben auf der VM und aktualisieren Sie die Seite manuell. Dann sehen Sie die Seite.

Implementierung des asynchronen Datenlesens und -renderns

In diesem Schritt lernen Sie, wie Sie die Funktion des asynchronen Datenlesens und -renderns implementieren.

1. Öffnen Sie die Datei index.html im bereitgestellten Projekt.
2. Fügen Sie in der data-Option der Vue-Instanz einige Attribute für die spätere Verwendung hinzu.

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

3. Fügen Sie in der new Vue()-Instanz den folgenden Code im mounted()-Lebenszyklushaken hinzu, um die Benutzerdaten aus ./js/userList.json mit Axios abzurufen:

new Vue({
  el: "#app",
  data: {
    //...
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      // Use axios to fetch data from the server
      const res = await axios({
        url: "./js/userList.json"
      });
      this.list = res.data;
    }
  }
});

4. Aktualisieren Sie im Anmeldefenster den Code, um die abgerufenen Benutzerdaten in der Dropdown-Liste anzuzeigen:

<!-- Der ursprüngliche Code: -->
<!-- <p>
  Select a user:
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Current user: Tom</p> -->

<!-- Der aktualisierte Code: -->
<p v-if="!isShow">
  Select a user:
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Current user: {{user.name}}</p>

Nach Abschluss dieses Schritts wird das Anmeldefenster die Benutzerdaten anzeigen, die asynchron aus ./js/userList.json abgerufen wurden.

Der Effekt sieht wie folgt aus:

Implementierung des Anmelde- und Abmeldeschaltens

In diesem Schritt lernen Sie, wie Sie die Funktion zum Umschalten zwischen Anmeldung und Abmeldung implementieren.

1. Öffnen Sie die Datei index.html im bereitgestellten Projekt.
2. Fügen Sie in den methods der new Vue()-Instanz die login-Funktion hinzu.
3. Fügen Sie in der login()-Methode den Code hinzu, um zwischen den Anmelde- und Abmeldefenstern zu wechseln:

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

4. Fügen Sie in den computed der new Vue()-Instanz die isShow-Eigenschaft hinzu, um die Textanzeige zu steuern:

computed: {
  loinOrlogout() {
    return this.isShow? "Logout" : "Login";
  }
},
methods: {
  //...
},

5. Aktualisieren Sie im Anmelde- oder Abmeldefenster den Code, um den entsprechenden Inhalt basierend auf dem Anmeldezustand anzuzeigen:

<!-- Der ursprüngliche Code: -->
<!-- <h3>Login</h3>
<p>
  Select a user:
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Current user: Tom</p>

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

<!-- Der aktualisierte Code: -->
<h3>{{loinOrlogout}}</h3>
<p v-if="!isShow">
  Select a user:
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>Current user: {{user.name}}</p>
<a @click="login" class="login-btn">{{loinOrlogout}}</a>

Nach Abschluss dieses Schritts wird die Funktion zum Umschalten zwischen Anmeldung und Abmeldung implementiert, und das Teilnehmerfenster zeigt standardmäßig nur die Informationen des aktuell angemeldeten Benutzers an.

Der Effekt sieht wie folgt aus:

Sicherstellen, dass der angemeldete Benutzer immer der erste in der Teilnehmerliste ist

In diesem Schritt lernen Sie, wie Sie sicherstellen, dass der angemeldete Benutzer immer der erste in der Teilnehmerliste ist.

1. Öffnen Sie die Datei index.html im bereitgestellten Projekt.
2. Aktualisieren Sie im Teilnehmerfenster den Code für class="say-list" und class="user-list", um standardmäßig nur die Informationen des aktuell angemeldeten Benutzers anzuzeigen:

<ul class="say-list">
  <li>
    <span class="iconfont icon-microphone"></span>
  </li>
  <li class="line"></li>
  <li>Wird angesprochen: {{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>

Nach Abschluss dieses Schritts wird der angemeldete Benutzer immer als erster Benutzer in der Teilnehmerliste angezeigt.

Der Effekt sieht wie folgt aus:

Implementierung des Sichtbarkeitsschaltens des Teilnehmerfensters

In diesem Schritt lernen Sie, wie Sie die Funktion zum Umschalten der Sichtbarkeit des Teilnehmerfensters implementieren.

1. Öffnen Sie die Datei index.html im bereitgestellten Projekt.
2. Fügen Sie in den methods der new Vue()-Instanz die showUserList-Funktion und die showRbtn-Funktion hinzu.

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

3. Aktualisieren Sie im HTML den Code, um die Schaltfläche zum Anzeigen oder Ausblenden des Teilnehmerfensters hinzuzufügen:

<!-- Der ursprüngliche Code: -->
<!-- <button id="show" class="right-btn">
  <span class="iconfont icon-left-arrow"></span>
</button> -->

<!-- Der aktualisierte Code: -->
<button
  v-if="isShow&&isShowRbtn"
  @click="showUserList"
  id="show"
  class="right-btn"
>
  <span class="iconfont icon-left-arrow"></span>
</button>

Nach Abschluss dieses Schritts können Sie das Teilnehmerfenster durch Klicken auf die Schaltfläche anzeigen oder ausblenden.

Der Effekt sieht wie folgt aus:

Implementierung des Umschaltens des Anzeigeeffekts der Teilnehmerliste

In diesem Schritt lernen Sie, wie Sie die Funktion zum Umschalten des Anzeigeeffekts der Teilnehmerliste implementieren.

1. Öffnen Sie die Datei index.html im bereitgestellten Projekt.
2. Fügen Sie in den methods der new Vue()-Instanz die changeBtnActive-Funktion hinzu.
3. Fügen Sie in der changeBtnActive()-Methode den Code hinzu, um das Umschalten des Anzeigeeffekts der Teilnehmerliste zu verarbeiten:

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

4. Suchen Sie im HTML die class="user-dialog" und aktualisieren Sie den Code, um die Schaltfläche hinzuzufügen, die zum Umschalten des Anzeigeeffekts der Teilnehmerliste verwendet wird:

<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>
  <!-- user list -->
  <!-- Omit the code already mentioned... -->
</div>

Nach Abschluss dieses Schritts können Sie den Anzeigeeffekt der Teilnehmerliste durch Klicken auf die entsprechenden Schaltflächen umschalten.

Der Effekt sieht wie folgt aus:

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Projekt abgeschlossen. Sie können in LabEx weitere Labs (Übungen) absolvieren, um Ihre Fähigkeiten zu verbessern.