【山东大学创新实训】VCRS-前端设计与开发（7）

在之前的工作中，已经完成了界面左侧的侧边栏，右侧的对话组件，和首页中间的数据可视化，接下来的内容就是为页面添加一个顶部的菜单，并根据队友给的各实体知识点的概念词条，将概念词条可视化。

顶部菜单

在界面的顶部添加一个菜单，提供一个全局搜索功能，一个通知列表，一个用户下拉框，用来跳转用户主页，退出登录等操作。

<template>
  <nav
    class="navbar navbar-expand-lg navbar-absolute"
    :class="{ 'bg-white': showMenu, 'navbar-transparent': !showMenu }"
  >
    <div class="container-fluid">
      <div class="navbar-wrapper">
        <div
          class="navbar-toggle d-inline"
          :class="{ toggled: $sidebar.showSidebar }"
        >
          <button type="button" class="navbar-toggler" @click="toggleSidebar">
            <span class="navbar-toggler-bar bar1"></span>

            <span class="navbar-toggler-bar bar2"></span>

            <span class="navbar-toggler-bar bar3"></span>
          </button>
        </div>

        <a class="navbar-brand" href="javascript:void(0)"> {{ $route.name }}</a>
      </div>

      <button
        class="navbar-toggler"
        type="button"
        @click="toggleMenu"
        data-toggle="collapse"
        data-target="#navigation"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-bar navbar-kebab"></span>

        <span class="navbar-toggler-bar navbar-kebab"></span>

        <span class="navbar-toggler-bar navbar-kebab"></span>
      </button>

      <div class="collapse navbar-collapse show text-left" v-show="showMenu">
        <ul class="navbar-nav" :class="$rtl.isRTL ? 'mr-auto' : 'ml-auto'">
          <li class="search-bar input-group" @click="searchModalVisible = true">
            <button
              class="btn btn-link"
              id="search-button"
              data-toggle="modal"
              data-target="#searchModal"
            >
              <i class="tim-icons icon-zoom-split"></i>

              <span class="d-lg-none d-md-block">Search</span>
            </button>
          </li>

          <modal
            :show.sync="searchModalVisible"
            class="modal-search"
            id="searchModal"
            :centered="false"
            :show-close="true"
          >
            <input
              slot="header"
              v-model="searchQuery"
              type="text"
              class="form-control"
              id="inlineFormInputGroup"
              placeholder="SEARCH"
            />
          </modal>

          <drop-down>
            <a
              href="javascript:void(0)"
              data-toggle="dropdown"
              class="dropdown-toggle nav-link"
            >
              <div class="notification d-none d-lg-block d-xl-block"></div>

              <i class="tim-icons icon-sound-wave"></i>

              <p class="d-lg-none text-left">Notifications</p>
            </a>

            <ul class="dropdown-menu dropdown-menu-right dropdown-navbar">
              <li class="nav-link">
                <a href="#" class="nav-item dropdown-item">
                  Mike John responded to your email
                </a>
              </li>

              <li class="nav-link">
                <a href="javascript:void(0)" class="nav-item dropdown-item">
                  You have 5 more tasks
                </a>
              </li>

              <li class="nav-link">
                <a href="javascript:void(0)" class="nav-item dropdown-item">
                  Your friend Michael is in town
                </a>
              </li>

              <li class="nav-link">
                <a href="javascript:void(0)" class="nav-item dropdown-item">
                  Another notification
                </a>
              </li>

              <li class="nav-link">
                <a href="javascript:void(0)" class="nav-item dropdown-item">
                  Another one
                </a>
              </li>
            </ul>
          </drop-down>

          <drop-down>
            <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
              <div class="photo">
                <img src="@/assets/img/anime3.png" alt="Profile Photo" />
              </div>

              <b class="caret d-none d-lg-block d-xl-block"></b>

              <p class="d-lg-none">Log out</p>
            </a>

            <ul class="dropdown-menu dropdown-navbar">
              <li class="nav-link">
                <a href="javascript:void(0)" class="nav-item dropdown-item">
                  Profile
                </a>
              </li>

              <li class="nav-link">
                <a href="javascript:void(0)" class="nav-item dropdown-item">
                  Settings
                </a>
              </li>

              <li class="dropdown-divider"></li>

              <li class="nav-link">
                <a href="javascript:void(0)" class="nav-item dropdown-item">
                  Log out
                </a>
              </li>
            </ul>
          </drop-down>
        </ul>
      </div>
    </div>
  </nav>
</template>

 效果如下：

 

知识实体概念的可视化展示

可视化展示知识实体概念是为了让用户想具体而详细的查看某一个概念时可以搜索其名称来查看其具体的概念。

搜索

首先实现搜索的功能，在右侧展示一个搜索列表，可以通过搜索概念名称来找到该知识点，点击每个知识点可以在左侧观看其详细信息。

<div class="col-lg-3">
          <v-card class="mx-auto my-12">
            <v-text-field
              v-model="search"
              label="搜索"
              prepend-icon="mdi-magnify"
              class="mx-3"
            ></v-text-field>
            <v-list class="scroll-list">
              <v-list-item
                v-for="item in filteredItems"
                :key="item['id']"
                @click="handleClick(item)"
                clickable
              >
                <v-list-item-content>{{ item['title'] }}</v-list-item-content>
              </v-list-item>
            </v-list>
          </v-card>
        </div>

效果如下：

显示对应知识点的详细概念

点击知识点列表中的每一个概念触发的函数handleClick如下：

handleClick(item) {
      this.loadItemData(item['id']);
    },

 它会去调用loadItemData函数，并将item的id传递给loadItemData

loadItemData(id) {
      const self = this;
      $.getJSON(`text_data/${id}.json`, function (data) {
        self.currentItem = data;
      });
    },

在loadItemData中get相对应的json，将概念展示出来。

效果如下：