Создайте веб-приложение для видеоконференций с Vue.js

Введение

В этом проекте вы научитесь создавать веб-приложение для видеоконференций с использованием Vue.js 2.x. Проект сосредоточен на реализации различных эффектов отображения списка участников в веб-видеоконференц-software.

👀 Предпросмотр

Предпросмотр веб-приложения для видеоконференций

🎯 Задачи

В этом проекте вы научитесь:

Как реализовать функцию асинхронного чтения и рендеринга данных для извлечения и отображения пользовательских данных в окнах входа и участников.
Как реализовать функцию переключения между входом и выходом, позволяющую пользователям входить и выходить из приложения.
Как обеспечить отображение авторизованного пользователя всегда в качестве первого пользователя в списке участников.
Как реализовать функцию переключения видимости окна участников.
Как реализовать функцию переключения эффекта отображения списка участников, включая отображение всех участников, скрытие списка участников и отображение только текущего авторизованного пользователя.

🏆 Достижения

После завершения этого проекта вы сможете:

Создать веб-приложение для видеоконференций с использованием Vue.js 2.x с различными функциями пользовательского интерфейса.
Асинхронно получать и отображать данные с использованием Axios.
Реализовать управление состоянием и обработку событий в приложении на Vue.js.
Создавать динамические пользовательские интерфейсы и переключаться между разными режимами отображения.

Настройте структуру проекта

В этом шаге вы научитесь настраивать структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта для этого проекта. Структура каталогов следующая:

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

В них:

index.html - главная страница.
css - папка со стилями.
images - папка с изображениями.
js/axios.min.js - файл axios.
js/userList.json - файл с данными, которые необходимо запросить.
js/vue.js - файл Vue 2.x.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Описание изображения

Реализуйте асинхронное чтение и рендеринг данных

В этом шаге вы научитесь реализовывать функцию асинхронного чтения и рендеринга данных.

Откройте файл index.html в предоставленном проекте.
В опции data экземпляра Vue добавьте некоторые атрибуты для последующего использования.

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

В экземпляре new Vue() добавьте следующий код в хуки жизненного цикла mounted(), чтобы получить данные пользователя из ./js/userList.json с использованием Axios:

new Vue({
  el: "#app",
  data: {
    //...
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      // Используйте axios для получения данных с сервера
      const res = await axios({
        url: "./js/userList.json"
      });
      this.list = res.data;
    }
  }
});

В окне входа обновите код, чтобы отобразить полученные данные пользователя в выпадающем списке:

<!-- Исходный код: -->
<!-- <p>
  Select a user:
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>Current user: Tom</p> -->

<!-- Обновленный код: -->
<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>

После завершения этого шага окно входа будет отображать данные пользователя, полученные асинхронно из ./js/userList.json.

Эффект выглядит так:

Эффект асинхронного рендеринга данных в окне входа

Реализуйте переключение между входом и выходом

В этом шаге вы научитесь реализовывать функцию переключения между входом и выходом.

Откройте файл index.html в предоставленном проекте.
В methods экземпляра new Vue() добавьте функцию login.
В методе login() добавьте код для переключения между окнами входа и выхода:

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

В computed экземпляра new Vue() добавьте свойство isShow для управления отображением текста:

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

В окне входа или выхода обновите код, чтобы отображать соответствующее содержимое в зависимости от состояния входа:

<!-- Исходный код: -->
<!-- <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> -->

<!-- Обновленный код: -->
<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>

После завершения этого шага будет реализована функция переключения между входом и выходом, и окно участников по умолчанию будет отображать только информацию о текущем авторизованном пользователе.

Эффект выглядит так:

Эффект после входа

Эффект после выхода

Убедитесь, что авторизованный пользователь всегда находится первым в списке участников

В этом шаге вы научитесь гарантировать, что авторизованный пользователь всегда будет первым в списке участников.

Откройте файл index.html в предоставленном проекте.
В окне Участники обновите код для class="say-list" и class="user-list" так, чтобы по умолчанию отображалось только информация о текущем авторизованном пользователе:

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

После завершения этого шага авторизованный пользователь всегда будет отображаться первым в списке участников.

Эффект выглядит так:

Первым пользователем в списке участников всегда является авторизованный пользователь

Реализуйте переключение видимости окна участника

В этом шаге вы научитесь реализовывать функцию переключения видимости окна участников.

Откройте файл index.html в предоставленном проекте.
В methods экземпляра new Vue() добавьте функцию showUserList и функцию showRbtn.

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

В HTML обновите код, чтобы добавить кнопку для показа или скрытия окна участников:

<!-- Исходный код: -->
<!-- <button id="show" class="right-btn">
  <span class="iconfont icon-left-arrow"></span>
</button> -->

<!-- Обновленный код: -->
<button
  v-if="isShow&&isShowRbtn"
  @click="showUserList"
  id="show"
  class="right-btn"
>
  <span class="iconfont icon-left-arrow"></span>
</button>

После завершения этого шага вы сможете показывать или скрывать окно участников, нажимая на кнопку.

Эффект выглядит так:

Расположение иконки кнопки для скрытия/показания окна участников

Реализуйте переключение эффекта отображения списка участников

В этом шаге вы научитесь реализовывать функцию переключения эффекта отображения списка участников.

Откройте файл index.html в предоставленном проекте.
В methods экземпляра new Vue() добавьте функцию changeBtnActive.
В методе changeBtnActive() добавьте код для обработки переключения эффекта отображения списка участников:

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

В HTML найдите class="user-dialog" и обновите код, чтобы добавить кнопку для переключения эффекта отображения списка присутствующих:

<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>
  <!-- список пользователей -->
  <!-- Пропускаем уже упомянутый код... -->
</div>

После завершения этого шага вы сможете переключать эффект отображения списка участников, нажимая на соответствующие кнопки.

Эффект выглядит так:

Эффект отображения всех участников