软件工程应用与实践（3）——知识图谱细节获取与数据呈现

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文档转语音等内容。