視頻
vue+python 中藥可視化架構前後端分離帶數據庫echarts可視化、Flask
1 系統簡介
系統簡介：本框架是一個基於Vue+Flask+ECharts+MySQL構建的中醫熱性藥知識圖譜可視化系統，旨在為用户提供中醫藥材和方劑的知識查詢與可視化分析服務。環境的核心功能包括：首頁，展示系統概覽及熱性藥材的知識點圖譜；藥材搜索與介紹模塊，支持用户查詢中醫熱性藥材的詳細信息；方劑搜索與構成查看模塊，提供熱性方劑的組成成分及其藥理作用；功效關鍵詞提取與分析模塊，通過自然語言處理科技提取關鍵詞並生成可視化分析圖表；以及用户管理模塊，包含登錄、註冊、修改個人信息、頭像及密碼等能力，確保用户體驗的安全性和個性化需求。
2 功能設計
框架採用B/S（瀏覽器/服務器）架構模式，前端基於Vue.js框架，結合Vuex進行狀態管理，Vue Router實現路由導航，ECharts負責數據可視化圖表的渲染。前端憑藉RESTful API與Flask後端交互，後端負責業務邏輯處理，同時利用MySQL數據庫進行數據存儲，包括中醫熱性藥材、方劑、功效關鍵詞等相關信息的持久化管理。此外，框架還集成了數據爬蟲模塊，用於抓取並處理中醫藥相關數據，清洗後導入數據庫，為框架提供數據承受。
2.1系統架構圖
2.2 功能模塊圖
3 功能展示
3.1 登錄 & 註冊
登錄註冊做的是一個可以切換的登錄註冊界面，點擊去登錄後者去註冊可以切換，背景是一個視頻，循環播放。
登錄需要驗證用户名和密碼是否正確，如果不正確會有錯誤提示。
註冊需要驗證用户名是否存在，如果錯誤會有提示。
3.2 主頁
主頁的佈局採用了左側是菜單，右側是運行面板的佈局方法，右側的上方還有用户的頭像和退出按鈕，如果是新註冊用户，沒有頭像，這邊則不顯示，需要在個人設置中上傳了頭像之後就會顯示。
3.3 藥材搜索 & 藥材詳情
藥材搜索：
藥材詳情
3.4 方劑搜索 & 構成查看
方劑搜索：
方劑的構成，組成成分：
3.5 數據大屏可視化
數據大屏可視化含有了
藥材的類型和藥味的分析：
類型和藥味的排名：
3.6 關鍵詞分析 & 關鍵詞提取
關鍵詞提取：
關鍵詞分析：
3.7 個人設置
個人設置方面包含了用户信息修改、密碼修改功能。
用户信息修改中可以上傳頭像，完成用户的頭像個性化設置，也可以修改用户其他信息。
修改密碼應該輸入用户舊密碼和新密碼，驗證舊密碼成功後，就可以完成密碼修改。
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>