F035 vue+neo4j中医南药药膳知识图谱可视化系统 | vue+flask
文章结尾部分有CSDN官方提供的学长 联系方式名片
关注B站，有好处！
编号: F035
视频
待发布
1 系统简介
系统简介：本系统是一个基于Vue+Flask+ECharts+MySQL构建的中医热性药知识图谱可视化系统，旨在为用户提供中医药材和方剂的知识查询与可视化分析服务。系统的核心功能包括：首页，展示系统概览及热性药材的知识点图谱；药材搜索与介绍模块，支持用户查询中医热性药材的详细信息；方剂搜索与构成查看模块，提供热性方剂的组成成分及其药理作用；功效关键词提取与分析模块，通过自然语言处理技术提取关键词并生成可视化分析图表；以及用户管理模块，包含登录、注册、修改个人信息、头像及密码等功能，确保用户体验的安全性和个性化需求。
2 功能设计
系统采用B/S（浏览器/服务器）架构模式，前端基于Vue.js框架，结合Vuex进行状态管理，Vue Router实现路由导航，ECharts负责数据可视化图表的渲染。前端通过RESTful API与Flask后端交互，后端负责业务逻辑处理，同时利用MySQL数据库进行数据存储，包括中医热性药材、方剂、功效关键词等相关信息的持久化管理。此外，系统还集成了数据爬虫模块，用于抓取并处理中医药相关数据，清洗后导入数据库，为系统提供数据支持。
2.1系统架构图
2.2 功能模块图
3 功能展示
知识图谱的构建
在neo4j中查看知识图谱：
3.1 登录 & 注册
登录注册做的是一个可以切换的登录注册界面，点击去登录后者去注册可以切换，背景是一个视频，循环播放。
登录需要验证用户名和密码是否正确，如果不正确会有错误提示。
注册需要验证用户名是否存在，如果错误会有提示。
3.2 主页
主页的布局采用了左侧是菜单，右侧是操作面板的布局方法，右侧的上方还有用户的头像和退出按钮，如果是新注册用户，没有头像，这边则不显示，需要在个人设置中上传了头像之后就会显示。
3.3 药材搜索 & 药材详情
药材搜索：
药材查看：
药材详情
3.4 知识图谱可视化
知识图谱：
检索知识图谱：
3.5 数据大屏可视化
数据大屏可视化包含了
以下的分析，带有地图分析、药材的类型、出处等分析指标：
3.6 个人设置
个人设置方面包含了用户信息修改、密码修改功能。
用户信息修改中可以上传头像，完成用户的头像个性化设置，也可以修改用户其他信息。
修改密码需要输入用户旧密码和新密码，验证旧密码成功后，就可以完成密码修改。
4程序代码
4.1 代码说明
代码介绍：该功能旨在构建一个中医热性药物的可视化界面，基于Vue框架和ECharts图表库。界面将展示中医药物的热性分布，用户可以通过地图、柱状图等方式查看药物的热性分布情况。界面支持药物信息的筛选、查看详情以及交互式的数据探索。
4.2 流程图
4.3 代码实例
<template><div class="app-container"><div class="filter-container"><el-select v-model="selectValue" placeholder="请选择"><el-option label="全部" value="all"></el-option><el-option label="高热" value="high"></el-option><el-option label="中热" value="medium"></el-option><el-option label="微热" value="low"></el-option></el-select></div><div id="chart" style="width: 100%; height: 600px;"></div><div class="table-container"><el-table :data="medicineList" stripe><el-table-column prop="name" label="药物名称"></el-table-column><el-table-column prop="properties" label="性味"></el-table-column><el-table-column prop="effects" label="功效"></el-table-column></el-table></div></div>
</template><script>
import echarts from 'echarts'
import 'echarts/map/js/china.js'export default {data() {return {chart: null,selectValue: 'all',medicineList: [{name: '药物A',properties: '辛、温',effects: '温中散寒'},// ... more data]}},mounted() {this.initChart()},methods: {initChart() {this.chart = echarts.init(document.getElementById('chart'))const option = {title: {text: '中医药热性分布图'},toolbox: {feature: {saveAsImage: {}}},series: [{type: 'map',mapType: 'china',data: []}]}this.chart.setOption(option)}}
}
</script><style>
.app-container {padding: 20px;
}.filter-container {margin-bottom: 20px;
}.table-container {margin-top: 20px;
}
</style>