软件工程应用与实践——知识图谱细节获取与数据呈现
Posted 叶卡捷琳堡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了软件工程应用与实践——知识图谱细节获取与数据呈现相关的知识，希望对你有一定的参考价值。
2021SC@SDUSC
目录
一、综述
在老年健康知识图谱系统中，用户在前端点击对应的知识，后端传输对应的word，mp4和word文档对应的音频信息到前端，用户可以查看详情。根据我们小组讨论的结果，本篇博客由我分析word文档的预览和呈现功能，以及知识图谱中具体知识获取的功能。播放视频功能由我的小组成员分析
具体功能如下
播放视频
呈现word文档的文字，图片并播放word文档对应的音频
本篇博客主要针对获取具体知识信息以及读取后端word文档的文字和图片并在前端预览的功能进行代码分析
二、前端代码
2.1 获取对应知识的全部信息
在本项目中，上次博客中提到，知识图谱的结构是一棵树，而树的最下面的叶子结点有两种情况，第3层或第4层。因此当用户点击第三层或第四层的数据时，后端都需要返回对应的数据。本项目使用el-tree的@node-click自定义回调函数，当用户点击时，自动调用方法。
<el-tree
class="filter-tree"
:data="treeData"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
@node-click="getCheckedNodes"
ref="tree">
</el-tree>
需要注意的是，node-click方法需要传入三个参数，传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身（element）。通过node.level可以获取当前点击按钮的层数，通过data.label可以获取对应节点的知识名称。这一部分在上一篇博客已经有所叙述，这里不再赘述。
打印data，node和element对象在控制台输出的结果
data对象
node对象
element 对象
//获取当前选中的节点并呈现数据
getCheckedNodes(data,node,element){
//如果是第3层节点
if(node.level == 3){
//获取知识名称
let knowledgeName = data.label;
//向后端发送axios请求，获取数据
instance.get("knowledge/third/" + knowledgeName).then(res=>{
this.tableData = res.data;
})
}
//如果是第4层节点
else if(node.level == 4){
//获取知识名称
let knowledgeName = data.label;
//向后端发送axios请求，获取数据
instance.get("knowledge/fourth/" + knowledgeName).then(res=>{
this.tableData = res.data;
})
}
},
2.2 前端对话框预览word并自动播放word对应的音频
在本次项目中，对于具体病症的知识存在word文档中，word文档中有图片和文字，需要在前端对话框中显示。此外，还需要在显示的同时用语音朗读出来。首先从后端获取了word文档的存储路径，之后利用前端发送http请求，通过文件流的形式读取word文件中的内容，并将其转为html代码，呈现在对话框中。本项目在word转html的过程中，使用了mammoth库，mammoth库是一个开源的，将.docx文件转为html的工具。
mammoth库的github地址如下https://github.com/mwilliamson/mammoth.js
安装mammoth库
npm install --save mammoth
获取word内容并转为html的js代码
showDetail(index,row){
//获取文件名称
let fileName = row.fileName;
let fileType = row.fileType;
//根据文件名和文件类型发送axios请求获取链接
if(fileType == '视频'){
axios.get("/videos/" + fileName).then(res=>{
this.videoSrc = res.videoSrc;
})
//显示视频对话框
this.videoDialogVisible = true;
}
else if(fileType == '文字'){
axios.get("/words/" + fileName).then(res=>{
this.wordSrc = res.wordSrc;
this.audioSrc = res.audioSrc;
})
//读取word文档对应的路径，转为html，并显示在页面上
let vm = this;
// AJAX异步请求对象
const xhr = new XMLHttpRequest();
xhr.open("get", this.wordSrc, true);
xhr.responseType = "arraybuffer";
xhr.onload = function () {
if (xhr.status == 200) {
mammoth
.convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
.then(function (resultObject) {
vm.$nextTick(() => {
vm.word=resultObject.value;
});
});
}
};
xhr.send();
this.wordDialogVisible = true;
}
调用mammoth.convertToHtml方法将读到的word文件流转为html代码
自动播放音频
本项目使用html5的audio标签，通过设置autoplay，实现自动播放音频，播放的音频是wav格式的
<audio ref="audio" :src="audioSrc" autoplay controls style="width: 100%;">
<source type="audio/wav">
</audio>
关闭对话框自动停止播放
本项目使用el-dialog的before-close回调函数，绑定对应的方法，当对话框关闭时，执行audio标签的pause方法，暂停音频播放
<el-dialog
title="文字说明"
:visible.sync="wordDialogVisible"
:before-close="closeAudioDialog"
width="50%">
<audio ref="audio" :src="audioSrc" autoplay controls style="width: 100%;">
<source type="audio/wav">
</audio>
<br><br>
<div id="wordContent" v-html="word"></div>
</el-dialog>
js方法
//关闭文本对话框时，自动停止播放音频
closeAudioDialog(done){
//暂停播放音频
this.$refs.audio.pause();
//关闭对话框
done();
}
三、后端代码
3.1 全局处理跨域
由于与知识相关的文件，视频和音频，存在static文件夹下，前端需要通过ajax请求通过文件流读取保存在后端的word文档，因此需要全局处理跨域，允许ajax请求访问资源
使用@Configuration注解
package com.sdu.nurse.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/*
全局解决跨域
*/
@Configuration
public class CrossOriginConfig
{
@Bean
public CorsFilter corsFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsFilter(source);
}
}
3.2 知识的具体信息
保存知识信息的实体类
具体的数据返回到前端的表格进行呈现
package com.sdu.nurse.entity;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
@Data
@NoArgsConstructor
@AllArgsConstructor
@Accessors(chain = true)
public class KnowLedge
{
//指标名称
private String indexName;
//文件名称
private String fileName;
//文件类型
private String fileType;
}
通过文件路径获取文件名
由于数据库中仅仅存储了文件所在的路径，因此需要根据路径获取文件名，使用mysql自带的substring_index函数获取文件名，在mybatis中对应的sql语句如下
<!--获取4级节点对应的知识-->
<select id="getFourthKnowLedgeNodes" resultType="com.sdu.nurse.entity.KnowLedge">
select distinct knowledge_file_type as fileType,
substring_index(knowledge_url,'/',-1) as fileName
from knowledge_info
where fourth_name = #{nodeName}
</select>
之后通过controller层返回对应的数据到前端，前端解析后端返回的数据即可
3.3 word文档对应音频的获取
在第一篇博客中，我谈到了数据预处理的步骤，由于有大量的word文档，因此需要使用程序将对应的文字转成对应的音频，并保存为.wav文件。具体的代码和安装示例在第一篇博客中已经叙述，这里不再赘述。
四、总结
关于知识图谱和具体知识的获取的部分就此完结，这一部分总共用了两篇博客进行叙述。其他的部分，比如视频的获取与播放等，由我的队友进行分析。这一部分涉及的重点有，树状结构的获取，具体知识的获取，word文档的预览，word文档转语音等内容。
以上是关于软件工程应用与实践——知识图谱细节获取与数据呈现的主要内容，如果未能解决你的问题，请参考以下文章