让我们一起开会

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

网络会议应用程序预览

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

  • 使用Vue.js 2.x构建一个具有各种用户界面功能的网络会议应用程序。
  • 使用Axios异步获取和显示数据。
  • 在Vue.js应用程序中实现状态管理和事件处理。
  • 创建动态用户界面并在不同显示模式之间切换。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/templating("`HTML Templating`") subgraph Lab Skills html/basic_elems -.-> lab-445755{{"`让我们一起开会`"}} html/head_elems -.-> lab-445755{{"`让我们一起开会`"}} html/lists_desc -.-> lab-445755{{"`让我们一起开会`"}} html/layout -.-> lab-445755{{"`让我们一起开会`"}} html/forms -.-> lab-445755{{"`让我们一起开会`"}} html/inter_elems -.-> lab-445755{{"`让我们一起开会`"}} html/templating -.-> lab-445755{{"`让我们一起开会`"}} end

设置项目结构

在这一步中,你将学习如何设置项目结构。请按照以下步骤完成此步骤:

打开此项目的项目文件夹。目录结构如下:

├── 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” 并手动刷新,你将看到页面。

图像描述

实现异步数据读取与渲染

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

  1. 打开提供项目中的 index.html 文件。
  2. 在Vue实例的 data 选项中,添加一些属性以供后续使用。
new Vue({
  el: "#app",
  data() {
    return {
      list: [],
      indexUser: "Tom",
      isShow: false,
      isShowRbtn: false,
      isShowUserList: true,
      isShowOtherUser: false,
      isShowIndexUser: true,
      user: "",
      buttonIndex: 2
    };
  }
});
  1. 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;
    }
  }
});
  1. 在登录窗口中,更新代码以在下拉菜单中显示获取到的用户数据:
<!-- 原始代码: -->
<!-- <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 获取的用户数据。

效果如下:

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

实现登录与注销切换

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

  1. 打开提供项目中的 index.html 文件。
  2. new Vue() 实例的 methods 中,添加 login 函数。
  3. login() 方法中,添加用于在登录和注销窗口之间切换的代码:
methods: {
  //...
  login() {
    this.isShow =!this.isShow;
    this.user = this.list.find((item) => item.name == this.indexUser);
  },
},
  1. new Vue() 实例的 computed 中,添加 isShow 属性以控制文本显示:
computed: {
  loinOrlogout() {
    return this.isShow? "Logout" : "Login";
  }
},
methods: {
  //...
},
  1. 在登录或注销窗口中,更新代码以根据登录状态显示相应内容:
<!-- 原始代码: -->
<!-- <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>

完成此步骤后,将实现登录与注销切换功能,并且参会者窗口默认仅显示当前登录用户的信息。

效果如下:

登录后的效果
注销后的效果

确保登录用户始终在参会者列表中排第一

在这一步中,你将学习如何确保登录用户始终在参会者列表中排第一。

  1. 打开提供项目中的 index.html 文件。
  2. 在“参会者”窗口中,更新 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>

完成此步骤后,登录用户将始终显示为参会者列表中的第一个用户。

效果如下:

参会者列表中的第一个用户始终是登录用户

实现参会者窗口的可见性切换

在这一步中,你将学习如何实现切换参会者窗口可见性的功能。

  1. 打开提供项目中的 index.html 文件。
  2. new Vue() 实例的 methods 中,添加 showUserList 函数和 showRbtn 函数。
methods: {
  showUserList() {
    this.isShowUserList =!this.isShowUserList;
    this.showRbtn();
  },
  showRbtn() {
    this.isShowRbtn =!this.isShowRbtn;
  },
},
  1. 在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>

完成此步骤后,你将能够通过点击按钮来显示或隐藏参会者窗口。

效果如下:

隐藏/显示参会者窗口按钮图标的位置

实现参会者列表显示效果的切换

在这一步中,你将学习如何实现切换参会者列表显示效果的功能。

  1. 打开提供项目中的 index.html 文件。
  2. new Vue() 实例的 methods 中,添加 changeBtnActive 函数。
  3. changeBtnActive() 方法中,添加处理参会者列表显示效果切换的代码:
methods: {
  changeBtnActive(userFlag, otherUserFlag, value) {
    this.isShowIndexUser = userFlag;
    this.isShowOtherUser = otherUserFlag;
    this.buttonIndex = value;
  },
},
  1. 在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>

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

效果如下:

显示所有参会者的效果
不显示参会者列表的效果
仅显示当前登录用户的效果
✨ 查看解决方案并练习

总结

恭喜!你已完成此项目。你可以在LabEx中练习更多实验以提升技能。

您可能感兴趣的其他 HTML 教程