笨爪1. 项目概述：Python+Vue构建中医文化宣传平台
去年帮本地一家中医馆搭建线上宣传系统时，我选择了Python+Django后端配合Vue3前端的方案。这种技术组合既能快速实现内容管理功能，又能打造流畅的移动端浏览体验。中医文化推广类网站通常需要处理大量图文内容、视频资源和互动咨询功能，传统静态网页或WordPress方案在内容更新效率和交互体验上往往力不从心。
这个技术栈的核心优势在于：
- Python的Django框架提供强大的Admin后台，非技术人员也能轻松维护药材数据库和医案内容
- Vue的组件化开发完美适配中医知识库的模块化展示需求
- 前后端分离架构便于后续扩展在线问诊等增值服务
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计解析
2.1 后端服务搭建
我推荐使用Django REST framework构建API服务，这是经过多个医疗类项目验证的稳定方案。关键配置要点包括：
python复制# settings.py 核心配置
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders', # 处理跨域
'tcm_app' # 中医业务模块
]
# 药材数据模型示例
class Herb(models.Model):
name = models.CharField(max_length=100, verbose_name="药材名称")
pinyin = models.CharField(max_length=100, verbose_name="拼音名")
category = models.CharField(max_length=50, choices=HERB_CATEGORIES)
efficacy = RichTextField(verbose_name="功效") # 使用富文本编辑器
contraindication = models.TextField(verbose_name="禁忌")
重要提示：医疗类网站必须设置严格的数据验证，特别是药材用量等敏感信息需要双重校验
2.2 前端工程搭建
使用Vue CLI创建项目时，建议选择以下配置：
- Vue 3 + TypeScript
- Pinia状态管理（替代Vuex）
- Vite构建工具
- 添加Sass支持
关键目录结构：
code复制src/
├── api/ # 接口封装
├── assets/ # 静态资源
├── components/ # 通用组件
│ ├── herb/ # 药材展示组件
│ ├── formula/ # 方剂卡片组件
│ └── video/ # 教学视频组件
├── router/ # 路由配置
├── stores/ # Pinia状态
└── views/ # 页面视图
3. 核心功能实现细节
3.1 药材数据库展示
中医网站最核心的是药材数据的结构化展示。我设计了三层展示方案：
- 列表页：支持拼音首字母筛选和功效分类
- 详情页：包含3D旋转展示、道地产区地图、配伍禁忌提示
- 关联推荐：基于图数据库的"常用配伍"关系网络
Vue组件关键代码：
vue复制<template>
<div class="herb-detail">
<HerbModelViewer :model="herb3dModel" />
<div class="tab-container">
<el-tabs v-model="activeTab">
<el-tab-pane label="基础信息">
<HerbBasicInfo :data="herbData" />
</el-tab-pane>
<el-tab-pane label="临床运用">
<CaseStudies :herbId="herbId" />
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script setup>
// 使用新版组合式API
const route = useRoute()
const herbId = ref(route.params.id)
const { data: herbData } = await useHerbDetail(herbId.value)
</script>
3.2 医案知识图谱
通过Python的NLTK和Spacy库处理古籍医案文本，构建实体关系图谱：
python复制# 中医实体识别示例
import spacy
nlp = spacy.load("zh_core_web_lg")
text = "桂枝汤由桂枝、芍药、生姜、大枣、甘草组成，主治太阳中风证。"
doc = nlp(text)
entities = []
for ent in doc.ents:
if ent.label_ in ("HERB", "FORMULA", "SYNDROME"):
entities.append({
"text": ent.text,
"type": ent.label_,
"start": ent.start_char,
"end": ent.end_char
})
前端使用Echarts实现交互式图谱可视化，支持点击节点查看关联医案。
4. 性能优化实践
4.1 图片加载策略
中医网站通常包含大量高清晰药材图片，我们采用以下优化方案：
- WebP格式自动转换
- 基于Intersection Observer的懒加载
- 响应式图片srcset配置
javascript复制// 图片懒加载指令
app.directive('lazyload', {
mounted(el, binding) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
el.src = binding.value
observer.unobserve(el)
}
})
})
observer.observe(el)
}
})
4.2 API缓存策略
针对药材基础信息这类变更频率低的数据，采用双层缓存：
- 服务端Redis缓存（TTL 24小时）
- 客户端SWR策略（stale-while-revalidate）
python复制# Django缓存装饰器示例
from django.views.decorators.cache import cache_page
@cache_page(60 * 60 * 24)
def herb_detail(request, herb_id):
# 数据库查询逻辑
5. 特色功能开发
5.1 体质测试问卷
使用Vue的动态表单组件实现中医九种体质测试：
vue复制<template>
<div class="questionnaire">
<div v-for="(question, index) in questions" :key="index">
<h3>{{ question.text }}</h3>
<el-radio-group
v-model="answers[index]"
@change="calculateScore"
>
<el-radio
v-for="option in question.options"
:label="option.value"
>
{{ option.text }}
</el-radio>
</el-radio-group>
</div>
</div>
</template>
后端使用模糊逻辑计算体质类型：
python复制def calculate_constitution(answers):
# 各体质维度得分
scores = {
'yang': 0,
'yin': 0,
# ...其他7种体质
}
# 基于中医体质判定规则的加权计算
for i, answer in enumerate(answers):
weights = QUESTION_WEIGHTS[i]
for constitution in scores:
scores[constitution] += weights.get(constitution, 0) * answer
# 归一化处理
total = sum(scores.values())
return {k: v/total for k, v in scores.items()}
5.2 方剂配伍禁忌检查
开发药材组合的"十八反十九畏"自动检测功能：
python复制# 禁忌规则数据库
INCOMPATIBLE_RULES = [
{"herbs": ["乌头", "贝母"], "type": "十八反"},
{"herbs": ["甘草", "甘遂"], "type": "十八反"}
]
def check_incompatible(herb_list):
warnings = []
for rule in INCOMPATIBLE_RULES:
if all(herb in herb_list for herb in rule["herbs"]):
warnings.append({
"type": rule["type"],
"herbs": rule["herbs"],
"description": f"{'、'.join(rule['herbs'])}属于{rule['type']}"
})
return warnings
前端实现实时检测提示：
javascript复制watch(selectedHerbs, (newVal) => {
const res = await checkCompatibility(newVal)
if (res.warnings.length > 0) {
showWarning({
title: '配伍禁忌提醒',
content: res.warnings.map(w => w.description).join('；')
})
}
})
6. 部署与运维要点
6.1 Docker化部署
编写多阶段构建的Dockerfile：
dockerfile复制# 前端构建阶段
FROM node:16 as frontend-builder
WORKDIR /app
COPY frontend/package*.json ./
RUN npm install
COPY frontend .
RUN npm run build
# 后端构建阶段
FROM python:3.9-slim
WORKDIR /app
COPY backend/requirements.txt .
RUN pip install -r requirements.txt
COPY backend .
COPY --from=frontend-builder /app/dist /app/static
EXPOSE 8000
CMD ["gunicorn", "tcm_site.wsgi:application", "--bind", "0.0.0.0:8000"]
6.2 内容安全策略
医疗类网站需要特别注意安全防护：
- 配置严格的CSP策略
- 实现敏感操作二次验证
- 定期数据库备份
python复制# settings.py 安全配置
SECURE_CONTENT_TYPE_NOSNIFF = True
SECURE_BROWSER_XSS_FILTER = True
CSRF_COOKIE_HTTPONLY = True
SESSION_COOKIE_SECURE = True
7. 实际开发中的经验教训
-
药材数据标准化：早期没有统一数据规范，导致不同来源的药材属性字段混乱。建议开发数据采集模板，包含以下必填字段：
- 中文名（需校验《中国药典》命名）
- 拉丁学名
- 药用部位
- 性味归经
- 功效分类
-
移动端适配陷阱：中医网站老年用户较多，需特别注意：
- 字体大小不小于16px
- 按钮点击区域不小于44×44pt
- 减少手势操作依赖
-
SEO优化要点：
- 为每个药材创建规范URL（/herb/拼音名）
- 生成结构化数据（Schema.org/Medicine）
- 建设内部链接网络（药材→方剂→症状）
-
视频内容处理：
- 使用HLS协议分片传输
- 添加中医专业字幕
- 实现播放速度调节（0.75x-2x）
这个项目让我深刻体会到，技术只是工具，真正重要的是对中医专业知识的尊重。比如在展示药材图片时，我们特意聘请专业药师审核每张图片的药材部位特征；在编写功效说明时，严格标注出处来源。这些细节才是赢得用户信任的关键。