用 Vue.js 构建网络会议应用

介绍

在这个项目中，你将学习如何使用 Vue.js 2.x 构建一个网络会议应用程序。该项目专注于为网络会议软件中的参会者列表实现各种显示效果。

👀 预览

网络会议应用程序预览

🎯 任务

在这个项目中，你将学习：

如何实现异步数据读取和渲染功能，以在登录和参会者窗口中获取并显示用户数据。
如何实现登录和注销切换功能，允许用户登录和退出应用程序。
如何确保登录用户始终显示为参会者列表中的第一个用户。
如何实现切换参会者窗口可见性的功能。
如何实现切换参会者列表显示效果的功能，包括显示所有参会者、隐藏参会者列表以及仅显示当前登录用户。

🏆 成果

完成这个项目后，你将能够：

使用 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 文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新，你将看到页面。

图像描述

实现异步数据读取与渲染

在这一步中，你将学习如何实现异步数据读取与渲染功能。

打开提供项目中的 index.html 文件。
在 Vue 实例的 data 选项中，添加一些属性以供后续使用。

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() 生命周期钩子中添加以下代码，使用 Axios 从 ./js/userList.json 获取用户数据：

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 id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>当前用户：Tom</p> -->

<!-- 更新后的代码： -->
<p v-if="!isShow">
  选择一个用户：
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>当前用户：{{user.name}}</p>

完成此步骤后，登录窗口将异步显示从 ./js/userList.json 获取的用户数据。

效果如下：

登录窗口中的异步数据渲染效果

实现登录与登出切换

在这一步中，你将学习如何实现登录与注销切换功能。

打开提供项目中的 index.html 文件。
在 new Vue() 实例的 methods 中，添加 login 函数。
在 login() 方法中，添加用于在登录和注销窗口之间切换的代码：

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

在 new Vue() 实例的 computed 中，添加 isShow 属性以控制文本显示：

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

在登录或注销窗口中，更新代码以根据登录状态显示相应内容：

<!-- 原始代码： -->
<!-- <h3>Login</h3>
<p>
  选择一个用户：
  <select id="selectUser">
    <option value="1">Tom</option>
  </select>
</p>
<p>当前用户：Tom</p>

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

<!-- 更新后的代码： -->
<h3>{{loinOrlogout}}</h3>
<p v-if="!isShow">
  选择一个用户：
  <select v-model="indexUser" id="selectUser">
    <option v-for="item in list" :value="item.name">{{item.name}}</option>
  </select>
</p>
<p v-else>当前用户：{{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>正在与之交谈的人：{{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 文件。
在 new Vue() 实例的 methods 中，添加 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 文件。
在 new Vue() 实例的 methods 中，添加 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>

完成此步骤后，你将能够通过点击相应按钮来切换参会者列表的显示效果。

效果如下：

显示所有参会者的效果