携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情
系统的架构设计
服务热线领域知识问答是采用B/S模式（浏览器/服务器）的Web应用，用户通过浏览器来访问。系统采用前后端分离的设计思想，政务服务数据保存在neo4j图数据库中。前端工程与后端工程分离开发，后端部分采用Python语言Flask框架搭建，前端页面则使用Vue.js框架搭建，然后通过API接口使用Json进行数据交互。
数据库设计
这里直接采用了前期创建的知识图谱进行使用。
服务端设计
Flask是使用Python编写的基于MVC设计模式的Web应用框架，具有轻量，扩展性强的特点。服务器端程序通过Py2neo对neo4j数据库实现查询的功能，并通过对数据进行处理和计算，并将结果整理成盒十的json数据格式通过Flask框架以URL的访问形式发布为API服务供前端程序使用。
Web前端设计
前端应用工程是基于 Vue.js 的脚手架工具 Vue- cli 构建的 SPA（单页面应用程序）项目。Vue.js 是一个轻巧、高性能的用于构建用户 web 界面的渐进式框架，其数据绑定和组件化的特点可以帮助开发人员更方便快速的创建 Web 应用。通过 Vue-cli快速搭建项目，然后通过 NPM 包管理工具来下载和管理使用到的 JavaScript 包，并配合 Webpack 来打包整个前端程序。
使用 Element-UI 框架中的组件来搭建整体页面，使用经过组件化后的 Echarts 来实现知识图谱的显示。Element-UI 是一套基于 Vue2.0 的桌面端组件库，提供了许多用于适用于构建桌面端 web 应用的组件。系统主界面主要分为三部分：搜索框，知识图谱展示区和答案流程图返回区域。
系统实现
系统实现了在文本框中搜索想要查询的问题，然后会将对应返回的数据分别显示在页面上。其中包括知识图谱的展示，具体事务办理的时间、地点所属部门以及办理事务的流程图。
知识图谱的显示
服务热线领域知识问答系统使用Echarts来实现政务服务数据的可视化图谱展示功能，Echarts支持个性化定制多种图表数据类型，这里我们主要应用了其中的力导布局图。不同实体使用了不同颜色来表示，比如深蓝色表示事项名称，它与所属部门、事项类型等实体之间存在不同的关系。
数据查询以及流程图的展示
当后端获取到前端发送的数据时，首先对数据进行知识定位处理，定位到所要处理的实体，然后使用这一实体在数据库中查询，返回与之相关联的数据，将查询到的节点数据与关系数据分别存在两个json文件中，同时将查询到的事务处理时间、部门、地点等信息进行语言拼接，使其成为一段完整的语句，将这些内容一同封装到一个json文件中，返回给前端，前端对json文件进行解析处理，其中返回的实体直接在图片库中进行匹配，匹配到的图片直接展示在前端的页面当中。
