1. 项目背景与核心价值
这个经方药食两用服务平台是我去年指导的一个本科毕业设计项目，采用现在企业级开发最主流的SpringBoot+Vue前后端分离架构。很多同学在做类似项目时，最头疼的就是如何把论文、源码、部署文档这些毕业设计必需的材料有机整合起来。这个项目完整包含了从技术选型到最终部署的全套资料，特别适合需要做类似课题的计算机相关专业同学参考。
药食两用这个概念源自传统中医"药食同源"理论，指既是药品又是食品的原料。平台要解决的核心问题是：如何通过现代Web技术实现经方（经典中药方剂）的智能化推荐和食疗方案管理。这涉及到复杂的业务逻辑，比如根据用户体质自动匹配适合的药膳配方，就需要结合SpringBoot的后端业务处理能力和Vue的灵活前端展示。
2. 技术架构解析
2.1 后端技术栈选型
选择SpringBoot 2.7.x版本是经过慎重考虑的：
- 内嵌Tomcat服务器简化部署
- 自动配置特性大幅减少XML配置
- 完善的生态体系（集成MyBatis Plus后，基础的CRUD操作代码量减少70%）
数据库选用MySQL 8.0而非5.7，主要因为：
- 原生JSON支持更好，适合存储方剂的复杂组成结构
- 窗口函数等高级特性便于实现用药推荐算法
- 性能提升明显（实测相同查询效率提升约40%）
关键代码结构示例：
java复制// 方剂推荐核心算法
public List<Prescription> recommendPrescriptions(UserHealthCondition condition) {
// 1. 基于体质类型初步筛选
List<Prescription> candidates = prescriptionMapper
.selectList(new QueryWrapper<Prescription>()
.eq("suitable_constitution", condition.getConstitutionType()));
// 2. 应用症状匹配权重算法
return candidates.stream()
.sorted(Comparator.comparingDouble(p ->
calculateMatchingScore(p, condition.getSymptoms())))
.limit(5)
.collect(Collectors.toList());
}
2.2 前端技术方案
Vue 3组合式API相比Options API的优势在这个项目中体现得淋漓尽致：
- 逻辑关注点分离更清晰（比如将方剂搜索逻辑单独封装成usePrescriptionSearch）
- 更好的TypeScript支持
- 更小的打包体积（gzip后约减少30%）
典型页面组件结构：
code复制/src
/views
prescription/
- Search.vue // 方剂搜索
- Detail.vue // 详情展示
- Recommend.vue // 智能推荐
/stores
prescriptionStore.js // Pinia状态管理
3. 数据库设计要点
3.1 核心表结构
sql复制CREATE TABLE `prescription` (
`id` int NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL COMMENT '方剂名称',
`composition` json NOT NULL COMMENT '组成药材及用量',
`suitable_constitution` varchar(20) COMMENT '适宜体质',
`contraindications` text COMMENT '禁忌说明',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
CREATE TABLE `user_health_record` (
`user_id` int NOT NULL,
`constitution_type` enum('平和质','气虚质','阳虚质','阴虚质','痰湿质','湿热质','血瘀质','气郁质','特禀质'),
`current_symptoms` json COMMENT '当前症状标签',
`update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB;
3.2 关键设计考量
- 使用JSON类型存储动态字段（如症状、方剂组成），避免过度范式化
- 为体质类型等有限选项使用ENUM而非VARCHAR
- 所有表都采用utf8mb4字符集以支持完整Unicode（包括中药名生僻字）
4. 部署实战指南
4.1 后端部署要点
- 生产环境推荐配置：
yaml复制# application-prod.yml
server:
port: 8080
compression:
enabled: true
mime-types: application/json,text/html
spring:
datasource:
url: jdbc:mysql://localhost:3306/tcm_platform?useSSL=false&serverTimezone=Asia/Shanghai
username: [PROD_USER]
password: [PROD_PWD]
redis:
host: 127.0.0.1
port: 6379
- 打包注意事项：
bash复制# 跳过测试的打包命令
mvn clean package -DskipTests
# 指定生产环境配置
java -jar target/tcm-platform.jar --spring.profiles.active=prod
4.2 前端部署技巧
- 优化生产构建：
javascript复制// vue.config.js
module.exports = {
chainWebpack: config => {
config.optimization.minimize(true);
config.performance
.maxEntrypointSize(512000)
.maxAssetSize(512000);
}
}
- Nginx关键配置：
nginx复制location / {
try_files $uri $uri/ /index.html;
gzip on;
gzip_types text/plain text/css application/json application/javascript;
}
location /api {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
}
5. 开发踩坑实录
5.1 跨域问题解决方案
开发阶段常见跨域问题，推荐这样处理：
后端配置：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(false)
.maxAge(3600);
}
}
前端axios配置：
javascript复制const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 10000,
withCredentials: false // 根据实际需求调整
})
5.2 性能优化经验
- 接口响应慢排查步骤：
- 先用Arthas的trace命令定位慢SQL
- 检查是否缺少必要索引（特别是关联查询字段）
- 考虑添加二级缓存（Redis）
- 前端加载优化：
- 使用路由懒加载
- 第三方库按需引入（如element-plus）
- 图片资源使用WebP格式
6. 论文写作建议
技术类毕业论文常见结构参考：
- 引言部分
- 突出药食同源的文化背景
- 强调信息化管理的必要性
- 系统设计章节
- 附上完整的E-R图和架构图
- 详细说明推荐算法设计
- 实现部分
- 关键代码片段+解释（不超过总篇幅30%）
- 重点展示创新点实现
- 测试方案
- 单元测试覆盖率（建议≥70%）
- 压力测试结果（如JMeter测试报告）
特别提醒：论文中的系统截图要保持风格统一，建议使用同一套测试数据生成所有截图，避免出现界面样式或数据不一致的情况。
7. 项目扩展方向
如果时间允许，可以考虑以下增强功能：
- 微信小程序端（使用Uniapp改造现有Vue代码）
- 药材图片识别功能（集成TensorFlow.js）
- 用药提醒推送（结合WebSocket实时通知）
- 第三方登录（微信、支付宝快捷登录）
这个项目完整源码已经整理成标准的Maven多模块工程，前端采用Vue CLI创建的标准项目结构，数据库包含完整的测试数据和初始化脚本。部署文档详细记录了从零开始的环境搭建步骤，特别适合作为毕业设计参考模板。