毕业设计：Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——数据处理：选择数据集_知识图谱neo4j毕业设计csdn

简介

完整项目资源链接：https://download.csdn.net/download/m0_46573428/87796553

项目详细信息请看：毕业设计：Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前言_人工智能技术小白修炼手册的博客-CSDN博客

在进入数据处理的模块先需要先选择数据集。

功能设计：选择数据集，进入对应的数据处理模块。

主要代码

前端

Html

这段代码是一个Vue.js模板(template)，负责渲染一个网站的路由和链接导航栏页面视图。

具体而言，该模板包含以下内容：

1. 一个带有样式的<div>元素，用于布局整个页面。在该<div>元素中还包含：

• main1类的子<div>元素，用于显示选择数据集的页面块。

  • <img>元素，用于展示网站Logo。

  • <h1>元素，用于展示网站名称。

  • choose类的子<div>元素，包括：

    • 一个<select>元素，用户可从中选择不同的数据集。

    • 一个“确认”<button>元素，用于提交选项并触发transfer()函数。

• main2类的子<div>元素，用于根据所选数据集显示对应的数据处理页面块。

  • leftBar类的子<div>元素，包括：

    • 一个展示“关系抽取”的文本元素。

    • 一个包含数据标注链接的<ul>元素，可以通过点击链接跳转到对应页面。

      • 每个链接都包含一个<li>元素，并使用符号箭头进行装饰。

      • 在模板中使用了v-if指令来控制切换箭头的可见性。

    • 一个展示“图谱更新”的文本元素。

    • 一个包含数据上传和实体融合链接的<ul>元素，同样可以通过点击链接跳转到对应页面。结构同前一个<ul>元素。

  • main类的子<div>元素，使用<router-view>元素显示当前路由页面内容。

<template>
  <div style="padding-top: 8%; width: 70%; margin: auto">
    <div class="main1" v-if="!isShowMain">
      <div class="top">
        <img class="logo" src="../assets/logo.png" alt="" />
        <h1>IME</h1>
      </div>
      <div class="choose">
        <select name="" id="" v-model="id">
          <option value="">请选择数据集</option>
          <option
            class="test"
            v-for="(item, index) in database_info_list"
            :key="index"
            :value="item.database_id"
          >
            {{ item.name }}
          </option>
        </select>
 
        <button @click="transfer()">确 &nbsp;&nbsp;&nbsp; 认</button>
      </div>
    </div>
    <div class="main2" v-if="isShowMain">
      <div class="leftBar">
        <div style="margin-top: 40px">关系抽取</div>
        <ul>
          <li>
            <img src="../assets/右箭头.svg" v-if="isShow[0]" /><router-link
              :to="`/DataProcessing/Label/${id}`"
              active-class="_active"
              @click="changeisShow1"
              >数据标注</router-link
            >
          </li>
        </ul>
        <div>图谱更新</div>
        <ul>
          <li>
            <img src="../assets/右箭头.svg" v-if="isShow[1]" /><router-link
              :to="`/DataProcessing/DataUpload/${id}`"
              active-class="_active"
              @click="changeisShow2"
              >数据上传</router-link
            >
          </li>
          <li>
            <img src="../assets/右箭头.svg" v-if="isShow[2]" /><router-link
              :to="`/DataProcessing/Fusion/${id}`"
              active-class="_active"
              @click="changeisShow3"
              >实体融合</router-link
            >
          </li>
        </ul>
      </div>
 
      <div class="main">
        <router-view> </router-view>
      </div>
    </div>
  </div>
</template>

Script

这段代码是一个Vue.js组件（默认导出），名称为DataProcessing。该组件主要负责获取数据集列表、展示数据集的数据，并根据用户选择展示不同的页面。

该组件中包含以下部分：

1. name属性，定义了组件的名称。

2. props属性为空对象，表示该组件未接收任何父组件的数据传递。

3. data()方法，定义了组件的局部数据对象，包括：

• isShowMain：布尔类型的变量，用于控制页面显示和隐藏。

• isShow：包含三个布尔类型元素值的数组，用于记录当前选中的页面块。

• database_info_list：空数组，用于存储所有可选的数据集信息。

• id：字符串类型的变量，默认为空，用于记录用户当前选择的数据集ID。

• data：空数组，用于存储选中数据集的所有数据。

• index：数字类型的变量，初始值为1，但并未在代码其他部分被使用。

4. methods对象，包含多个自定义函数。

• databaseList()：通过axios.get()方法获取数据集列表并将其存储到database_info_list变量中。

• transfer()：判断是否选择了数据集，如果选择则展示对应的页面块，并调用browse()函数获取选中数据集的全部数据。

• browse(id)：通过axios.get()方法获取指定ID数据集的所有数据，并将其存储到data变量中。

• changeisShow1()、changeisShow2()、changeisShow3()：切换当前选中的页面块，对isShow数组的值进行修改。

5. mounted生命周期函数，当组件被挂载时执行。在该函数中调用databaseList()函数，获取所有可选数据集列表。

<script>
export default {
  name: "DataProcessing",
  props: {},
  data() {
    return {
      isShowMain: false,
      isShow: [true, false, false],
      database_info_list: [],
      id: "",
      data: [],
      index: 1,
    };
  },
  methods: {
    // 获取数据集列表
    databaseList: function () {
      this.axios
        .get("http://localhost:8000/DatabaseList")
        .then((res) => {
          this.database_info_list = JSON.parse(JSON.stringify(res.data));
          console.log(this.database_info_list);
        })
        .catch((error) => {
          alert("databaseList失败");
        });
    },
    transfer: function () {
      if (this.id != "") {
        this.isShowMain = !this.isShowMain;
        this.browse(this.id);
      } else {
        alert("请选择数据集！");
      }
    },
    // 数据标注：展示数据集的数据
    browse: function (id) {
      this.axios
        .get("http://localhost:8000/Browse?database_id=" + id)
        .then((res) => {
          if (res.data == "数据为空") {
            alert("数据集为空");
          }
          console.log(res.data);
          this.data = res.data;
      
        })
        .catch((error) => {
          alert("Browse 失败");
        });
    },
 
    changeisShow1: function () {
      this.isShow = [true, false, false]; //取反
    },
    changeisShow2: function () {
      this.isShow = [false, true, false]; //取反
    },
    changeisShow3: function () {
      this.isShow = [false, false, true]; //取反
    },
 
  },
  mounted: function () {
    this.databaseList();
    // this.isShow = this.$route.query.isShow;
  },
};
</script>

Css

<style scoped>
* {
  color: #666;
}
.main1 {
  text-align: center;
  width: 75%;
  margin: auto;
}
.leftBar {
  float: left;
  height: 550px;
  background: rgba(240, 240, 240, 0.6);
  width: 20%;
  border-radius: 15px;
  box-shadow: rgb(0 0 0 / 20%) 0px 3px 10px;
}
 
.main {
  float: right;
  height: 550px;
  width: 76%;
  background: rgba(240, 240, 240, 0.6);
 
  border-radius: 15px;
  box-shadow: rgb(0 0 0 / 20%) 0px 3px 10px;
}
li {
  list-style: none;
}
.leftBar > div {
  text-align: center;
  line-height: 60px;
  font-weight: bold;
}
.leftBar > ul > li {
  text-align: center;
  line-height: 40px;
  width: 100%;
}
.leftBar > ul > li:hover {
  color: #486e53;
  border-left: #486e53 5px solid;
}
._active {
  color: #486e53;
  font-weight: bold;
  width: 100%;
}
img {
  height: 20px;
  margin-right: 10px;
  margin-bottom: -5px;
  margin-left: -31px;
}
 
h1 {
  font-size: 100px;
  color: rgb(107, 146, 77);
  float: left;
  padding: 143px 220px 0px 0px;
}
.logo {
  float: left;
  padding: 142px 30px 0px 230px;
  height: 100px;
}
 
.top {
  width: 100%;
}
.choose {
  width: 100%;
}
button {
  float: left;
  border: none;
  background: rgb(107, 146, 77);
  color: white;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 15px;
 
  width: 150px;
  margin-top: 71px;
  margin-left: 31px;
}
button:hover {
  cursor: pointer;
}
select {
  float: left;
 
  margin: auto;
  margin-top: 70px;
  margin-left: 125px;
  padding: 10px 10px 10px 10px;
  width: 350px;
  border: #ccc solid 1px;
  border-radius: 15px;
  color: #444;
  background: #eee;
}
</style>

后端

这段代码是一个Python函数，DatabaseList()，用于返回指定目录下的所有数据集目录（在本段代码中database_root变量所指向的位置）及其基本信息。

该函数包含以下部分：

1. 一个for循环，使用os.walk()方法遍历指定目录下的所有子目录及文件。

2. 在循环体内，获取当前遍历到的子目录列表，并依次对每个子目录中的基本信息.json文件进行读取和解析操作，将解析结果存储到一个字典对象data中。其中包括当前数据集的名称、类型、大小、样本数等基本信息。

3. 将data字典对象中加入一项location，用于存储每个数据集在前端网页中展示时的位置坐标。具体而言，在该字符串中，top属性表示距顶部的距离，像素值通过简单的计算得出，并与当前索引值相乘来实现分散布局的效果。

4. 将data字典对象作为一个元素添加到database_info_list列表中，并在整个循环结束后返回database_info_list作为函数的输出结果。

# 返回数据集列表及其基本信息
def DatabaseList():
    """
    作用：返回数据集列表及其基本信息
    输入：
    输出：数据集列表及其基本信息
    """
    database_info_list = []
    for root, dirs, files in os.walk(database_root):
        database_list = dirs
        print(database_list)
        for i in range(len(database_list)):
            with open(database_root + database_list[i] + '/基本信息.json', 'r', encoding='utf-8') as f:
                data = json.load(f)
                data['location'] = 'top:' + str(111 + i * 179) + 'px;'
                database_info_list.append(data)
        print('DatabaseList', '成功')
        break
 
    return database_info_list

函数Browse(database_id)，用于读取指定编号的数据集下所有文件中的数据并返回。

该函数包含以下部分：

1. 调用DataExport()函数获取指定数据集下的所有数据文件路径列表，并存储到files_list变量中。

2. 遍历files_list列表中的每个数据文件，使用open()方法打开文件，并将其读取到变量c中。在读取过程中，逐行读取文件内容，并使用字符串拼接的方式将各行内容合并到一起。

3. 调用changeJsonFormat()函数，将读取到的文本JSON格式化。

4. 将处理后的数据添加到data_list列表中。

5. 判断data_list列表是否为空。如果为空，则返回字符串'数据为空'；否则返回完整的data_list列表作为函数的输出结果。

# 读取数据库下DataFiles的所有文件数据
def Browse(database_id):
    """
    作用：读取数据库下DataFiles的所有文件数据
    输入：database_id
    输出：数据库下DataFiles的所有文件数据
    """
    data_list = []
    data = ''
    files_list = DataExport(database_id)
 
    name = FindDatabase(database_id)
    for f_path in files_list:
        c = ''
        for f in open(f_path, 'r', encoding='utf-8'):
            c += f
        # print(c)
        data_list.append(changeJsonFormat(c))
    if len(data_list) == 0:
        return '数据为空'
 
    print('Browse', '成功')
    return data_list
 
# print(Browse(database_id = '1003172907'))