第四周-山东大学软件学院2024创新项目实训VCRS个人周报

 第四周

工作内容简介

本周主要完成的是对计算机网络相关知识点概念词条的搜索与展示

实现与展示

搜索

首先就是搜索功能的实现，功能比较简单，这里直接贴代码

<v-card class="mx-auto my-12" min-width="240">
            <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>

对所有知识点的获取还是通过对读取组内其他成员爬取好的json数据

getEntities(){
      const self = this;
      $.getJSON('entities.json', function (entities) {
        self.items = entities
      });
    },

概念词条的展示 

可以通过点击搜索出的每个知识点，获取该知识点的信息，通过该知识点信息的id去访问其具体的概念词条并展示出来。

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

效果展示