该项目是一个基于Vue3和FastApi的Web应用，结合Python和Neo4j，用于主题知识图谱的构建和操作。用户可以选择数据集，进行数据标注、上传和实体融合等数据处理任务。前端界面提供选择数据集、导航链接和状态控制，后端负责数据集的列表和内容获取。
简介
完整项目资源链接：https://download.csdn.net/download/m0_46573428/87796553
项目详细信息请看：毕业设计：Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前言_人工智能技术小白修炼手册的博客-CSDN博客
在进入数据处理的模块先需要先选择数据集。
功能设计：选择数据集，进入对应的数据处理模块。
主要代码
前端
Html
这段代码是一个Vue.js模板(template)，负责渲染一个网站的路由和链接导航栏页面视图。
具体而言，该模板包含以下内容：
-
一个带有样式的
<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()">确 认</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变量所指向的位置）及其基本信息。
该函数包含以下部分：
-
一个
for循环，使用os.walk()方法遍历指定目录下的所有子目录及文件。 -
在循环体内，获取当前遍历到的子目录列表，并依次对每个子目录中的
基本信息.json文件进行读取和解析操作，将解析结果存储到一个字典对象data中。其中包括当前数据集的名称、类型、大小、样本数等基本信息。 -
将
data字典对象中加入一项location，用于存储每个数据集在前端网页中展示时的位置坐标。具体而言，在该字符串中，top属性表示距顶部的距离，像素值通过简单的计算得出，并与当前索引值相乘来实现分散布局的效果。 -
将
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)，用于读取指定编号的数据集下所有文件中的数据并返回。
该函数包含以下部分：
-
调用
DataExport()函数获取指定数据集下的所有数据文件路径列表，并存储到files_list变量中。 -
遍历
files_list列表中的每个数据文件，使用open()方法打开文件，并将其读取到变量c中。在读取过程中，逐行读取文件内容，并使用字符串拼接的方式将各行内容合并到一起。 -
调用
changeJsonFormat()函数，将读取到的文本JSON格式化。 -
将处理后的数据添加到
data_list列表中。 -
判断
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'))
4070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
