中医药介绍小程序

项目简介

这是一个完整的中医药文化传播平台，包含微信小程序端和PC管理后台。系统实现了中药材展示、分类浏览、科普文章、用户评论等核心功能，旨在弘扬中医药文化，让更多人了解和学习中医药知识。采用前后端分离架构，适合作为微信小程序全栈开发学习项目或计算机设计参考。

技术栈

后端技术

技术	版本/说明
运行环境	Node.js
Web框架	Express 4.16.1
数据库	MySQL 5.7+
数据库驱动	mysql / mysql2
身份认证	jsonwebtoken (JWT)
文件上传	multer
跨域处理	cors
HTTP请求	axios 1.6.3
热重载	nodemon 3.0.2

管理后台技术

技术	版本/说明
前端框架	Vue 2.6.11
UI组件库	Element UI 2.15.6
路由管理	Vue Router 3.2.0
状态管理	Vuex 3.4.0
HTTP请求	Axios 0.24.0
图表库	ECharts 5.3.1
富文本编辑器	Quill 1.3.7
CSS预处理器	Less

小程序端技术

技术	版本/说明
开发框架	微信小程序原生框架
开发语言	JavaScript (ES6+)
样式语言	WXSS
模板语言	WXML

项目特点

• 前后端分离：后端提供RESTful API，前端独立开发部署
• 中医药文化传播：专注中医药知识科普和文化传承
• 完整内容管理：涵盖中药材、科普文章、轮播图等内容管理
• 用户互动：支持用户评论和交流
• 分类体系：按中药功效分类（滋补、香料、汤料、酒料、贵细、茶饮等）
• 富文本支持：支持富文本内容编辑和展示
• 数据可视化：管理后台集成ECharts图表展示

功能模块

小程序端功能

1. 首页模块 (pages/index)

• 轮播图展示
• 中药分类导航
• 热门中药推荐
• 科普文章入口
• 搜索功能

2. 中药分类模块 (pages/cate)

• 按功效分类浏览
• 分类图标展示
• 中药列表

3. 中药详情模块 (pages/detail)

• 中药图片展示
• 中药基本信息（名称、功效、性味归经）
• 详细介绍（富文本）
• 用法用量
• 用户评论查看
• 评论功能

4. 科普模块 (pages/kepu)

• 中医药科普文章列表
• 名医故事
• 中医典故
• 养生知识
• 文章详情展示

5. 搜索模块 (pages/search)

• 关键词搜索
• 搜索结果展示
• 搜索历史

6. 个人中心模块 (pages/my)

• 用户信息展示
• 我的评论
• 收藏管理
• 设置功能

管理后台功能

1. 首页仪表盘 (Dashboard.vue)

• 数据统计概览
• 访问量统计
• 内容数量统计

2. 轮播图管理 (Banner.vue)

• 轮播图列表
• 新增/编辑/删除轮播图
• 图片上传
• 排序管理

3. 分类管理 (Cate.vue)

• 中药分类列表
• 新增/编辑/删除分类
• 分类图标上传
• 分类说明

4. 中药管理 (Product.vue)

• 中药信息列表
• 新增/编辑/删除中药
• 中药图片上传
• 富文本详情编辑
• 功效分类
• 性味归经设置

5. 科普文章管理 (Kepu.vue)

• 科普文章列表
• 新增/编辑/删除文章
• 富文本内容编辑
• 文章封面上传
• 发布管理

6. 评论管理 (Comment.vue)

• 评论列表
• 评论审核
• 评论删除
• 用户评论统计

7. 用户管理 (User.vue)

• 用户列表
• 用户信息查看
• 用户状态管理

项目结构

traditional-chinese-medicine/
├── admin/                          # 管理后台（Vue2 + Element UI）
│   ├── public/                     # 静态资源
│   ├── src/
│   │   ├── api/                    # API接口封装
│   │   ├── assets/                 # 静态资源
│   │   ├── components/             # 公共组件
│   │   ├── filters/                # 过滤器
│   │   ├── router/                 # 路由配置
│   │   ├── store/                  # Vuex状态管理
│   │   ├── utils/                  # 工具函数
│   │   ├── views/                  # 页面视图
│   │   │   ├── Banner.vue          # 轮播图管理
│   │   │   ├── Cate.vue            # 分类管理
│   │   │   ├── Product.vue         # 中药管理
│   │   │   ├── Kepu.vue            # 科普管理
│   │   │   ├── Comment.vue         # 评论管理
│   │   │   ├── User.vue            # 用户管理
│   │   │   ├── Home.vue            # 主布局
│   │   │   ├── Login.vue           # 登录页
│   │   │   └── Dashboard.vue       # 首页仪表盘
│   │   ├── App.vue                 # 根组件
│   │   └── main.js                 # 入口文件
│   ├── package.json
│   └── vue.config.js               # Vue配置
│
├── express/                        # 后端服务（Express + MySQL）
│   ├── bin/
│   │   └── www                     # 启动入口
│   ├── config/
│   │   ├── db.js                   # 数据库配置
│   │   └── index.js                # 全局配置
│   ├── controllers/                # 控制器
│   ├── public/
│   │   └── images/                 # 上传图片存储
│   │       ├── banner/             # 轮播图
│   │       ├── cate/               # 分类图标
│   │       └── product/            # 中药图片
│   ├── routes/                     # 路由文件
│   │   ├── admin/                  # 管理端API
│   │   │   ├── banner.js           # 轮播图接口
│   │   │   ├── cate.js             # 分类接口
│   │   │   ├── product.js          # 中药接口
│   │   │   ├── kepu.js             # 科普接口
│   │   │   ├── comment.js          # 评论接口
│   │   │   └── user.js             # 用户接口
│   │   ├── web/                    # 小程序端API
│   │   │   ├── banner.js           # 轮播图接口
│   │   │   ├── cate.js             # 分类接口
│   │   │   ├── product.js          # 中药接口
│   │   │   ├── kepu.js             # 科普接口
│   │   │   ├── comment.js          # 评论接口
│   │   │   └── user.js             # 用户接口
│   │   ├── index.js                # 路由入口
│   │   └── upload.js               # 文件上传
│   ├── services/                   # 业务逻辑层
│   ├── util/                       # 工具函数
│   ├── app.js                      # Express应用配置
│   └── package.json
│
├── min/                            # 微信小程序
│   ├── components/                 # 自定义组件
│   │   └── productItem/            # 中药列表项组件
│   ├── images/                     # 图片资源
│   │   └── tabbar/                 # TabBar图标
│   ├── pages/                      # 页面目录
│   │   ├── index/                  # 首页
│   │   ├── cate/                   # 分类页
│   │   ├── search/                 # 搜索页
│   │   ├── detail/                 # 中药详情
│   │   ├── kepu/                   # 科普列表
│   │   ├── kepuDetail/             # 科普详情
│   │   ├── comment/                # 评论页
│   │   └── my/                     # 个人中心
│   ├── utils/
│   │   ├── api.js                  # API接口封装
│   │   ├── request.js              # 请求封装
│   │   └── util.js                 # 工具函数
│   ├── app.js                      # 小程序入口
│   ├── app.json                    # 小程序配置
│   ├── app.wxss                    # 全局样式
│   ├── project.config.json         # 项目配置
│   └── sitemap.json                # 站点地图
│
├── 图片资源/                        # 项目图片资源
│   ├── 分类/                        # 分类图标
│   └── 中药/                        # 中药图片
├── chinesemMedicineCulture.sql     # 数据库SQL文件
├── mysql.sh                        # MySQL脚本
├── mysql操作手册.md                 # MySQL操作说明
├── 数据库创建方法.md                # 数据库创建说明
├── 新 - 运行必读.docx              # 运行说明文档
├── 小程序.mp4                      # 小程序演示视频
└── 后台管理系统.mp4                 # 管理后台演示视频

数据模型

用户表 (users)

{
  id: int,                    // 用户ID
  phone: varchar(255),        // 手机号
  password: varchar(255),     // 密码
  username: varchar(255),     // 用户名
  nickname: varchar(255),     // 昵称
  openId: varchar(1100),      // 微信OpenID
  avatar: varchar(255),       // 头像
  role: int                   // 角色 (0普通用户, 99管理员)
}

轮播图表 (banner)

{
  id: int,                    // 轮播图ID
  cover: varchar(255)         // 图片地址
}

分类表 (cate)

{
  id: int,                    // 分类ID
  title: varchar(255),        // 分类名称
  cover: varchar(255)         // 分类图标
}

中药表 (product)

{
  id: int,                    // 中药ID
  title: varchar(255),        // 中药名称
  content: longtext,          // 详细介绍（富文本）
  cover: varchar(255),        // 封面图
  imgs: longtext,             // 图集
  cate_id: int,               // 分类ID
  efficacy: varchar(500),     // 功效
  taste: varchar(100),        // 性味
  meridian: varchar(100),     // 归经
  usage: varchar(500),        // 用法用量
  taboo: varchar(500),        // 禁忌
  is_hot: int,                // 是否热门 (0否 1是)
  create_time: timestamp,     // 创建时间
  update_time: timestamp      // 更新时间
}

科普表 (kepu)

{
  id: int,                    // 科普ID
  title: varchar(255),        // 标题
  poster: varchar(255),       // 封面图
  content: longtext,          // 内容（富文本）
  create_time: timestamp      // 创建时间
}

评论表 (comment)

{
  id: int,                    // 评论ID
  user_id: int,               // 用户ID
  product_id: int,            // 中药ID
  content: longtext,          // 评论内容
  create_time: timestamp      // 创建时间
}

中药分类

分类名称	说明	代表药材
滋补	补益气血、滋养身体	人参、黄芪、当归、枸杞
香料	芳香化湿、理气开胃	陈皮、砂仁、豆蔻、丁香
汤料	煲汤常用药材	淮山、莲子、百合、红枣
酒料	泡酒常用药材	鹿茸、海马、杜仲、巴戟天
贵细	名贵稀有药材	冬虫夏草、燕窝、鹿茸、灵芝
茶饮	泡茶饮用药材	菊花、金银花、玫瑰花、决明子

运行环境要求

后端环境

• Node.js 14.0+
• MySQL 5.7+
• npm 或 yarn

管理后台

• Node.js 14.0+
• npm 或 yarn
• 现代浏览器（Chrome、Firefox、Edge等）

小程序端

• 微信开发者工具（最新稳定版）
• 基础库版本 2.19.0+
• 需要有效的AppID

快速开始

1. 数据库配置

1. 创建MySQL数据库

CREATE DATABASE chinesemMedicineCulture CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

2. 导入数据库文件

mysql -u root -p chinesemMedicineCulture < chinesemMedicineCulture.sql

3. 修改数据库配置 编辑 express/config/db.js：

var db = mysql.createConnection({
  database: 'chinesemMedicineCulture', // 数据库名称
  port: '3306', // 端口号
  host: 'localhost', // 主机地址
  user: 'root', // 用户名
  password: 'root', // 密码（修改为你的密码）
});

2. 启动后端服务

# 进入后端目录
cd express

# 安装依赖
npm install

# 启动服务（开发模式）
npm run dev

后端服务默认运行在 http://localhost:5002

3. 启动管理后台

# 进入管理后台目录
cd admin

# 安装依赖
npm install

# 启动开发服务器
npm run dev

管理后台默认运行在 http://localhost:8080

4. 运行小程序

1. 打开微信开发者工具
2. 选择"导入项目"
3. 选择 min 目录
4. 填入AppID（可使用测试号）
5. 点击"导入"

5. 配置小程序API地址

编辑 min/utils/request.js，修改API基础地址：

const baseUrl = 'http://localhost:5002'; // 修改为你的后端地址

默认账号

管理后台

• 手机号：18715023xxxx
• 密码：123456

小程序端

• 支持微信授权登录
• 或使用手机号登录

界面预览

项目包含演示视频文件：

• 小程序.mp4 - 小程序端完整功能演示
• 后台管理系统.mp4 - 管理后台完整功能演示

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 在线问诊：添加中医在线咨询功能
2. 体质测试：中医体质辨识测试
3. 养生方案：个性化养生建议
4. 药膳食谱：中药药膳食谱推荐
5. 穴位查询：经络穴位图谱和查询
6. 名医名方：历代名医和经典方剂
7. 中药鉴别：AI图像识别中药材
8. 用药提醒：用药时间和剂量提醒
9. 社区交流：用户交流和经验分享
10. 视频教学：中医药知识视频课程

注意事项

1. 本项目为学习演示项目，部分数据为模拟数据
2. 生产环境部署需要配置HTTPS
3. 小程序上线需要完成微信认证
4. 涉及医疗健康内容需符合相关法规要求
5. 建议定期备份数据库数据
6. 中医药知识仅供参考，不作为医疗诊断依据

常见问题

Q: 数据库连接失败？

A: 检查MySQL服务是否启动，数据库配置是否正确

Q: 图片无法显示？

A: 检查后端服务是否启动，图片路径配置是否正确

Q: 小程序无法请求后端？

A: 检查request.js中的baseUrl配置，开发时需在微信开发者工具中关闭"不校验合法域名"

Q: 管理后台登录失败？

A: 确认数据库中users表有管理员账号（role=99）

Q: 富文本内容显示异常？

A: 检查富文本编辑器配置，确保内容格式正确

许可证

本项目仅供学习交流使用，请勿用于商业用途。