1. 项目概述SSM457中药保健品商城全栈开发实录这个项目是我去年为本地一家百年老字号中药连锁店开发的线上商城系统核心目标是解决传统中药店铺面临的三大痛点客户群体老龄化、线下获客成本高、保健品销售渠道单一。系统采用SpringBootMyBatisVue.js的全栈架构经过6个月开发迭代最终实现日均UV突破8000的运营效果。下面我将从架构设计到具体实现完整还原这个具有行业特色的电商系统开发过程。2. 技术架构设计解析2.1 为什么选择SSMVue技术栈在技术选型阶段我们对比了三种方案传统JSP方案开发快但维护难SpringCloud微服务扩展性强但复杂度高SSMVue全分离架构最终选择选择SSMVue主要基于以下考量中药商品数据结构复杂需要多级分类、属性关联MyBatis的动态SQL能灵活应对药店店员计算机水平有限需要高度可视化的管理后台Element UI的成熟组件库可快速搭建系统需要与医保系统、物流系统对接Spring的声明式事务管理更可靠2.2 前后端分离架构实践我们采用完全解耦的架构设计[前端] ├── Vue 2.6 Vuex状态管理 ├── Vue Router实现动态路由 ├── Element UI 自定义主题 └── Axios封装请求拦截器 [后端] ├── Spring Boot 2.3.7.RELEASE ├── MyBatis-Plus 3.4.2增强CRUD操作 ├── Redis 6.0缓存热点数据 └── Swagger 3.0API文档生成特别在跨域处理上我们没有简单使用CrossOrigin注解而是通过自定义过滤器实现精细控制public class CorsFilter implements Filter { Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) { HttpServletResponse response (HttpServletResponse) res; response.setHeader(Access-Control-Allow-Origin, getAllowOrigin(request)); response.setHeader(Access-Control-Allow-Methods, POST, GET, OPTIONS, DELETE); response.setHeader(Access-Control-Max-Age, 3600); // 特别处理中药饮片类商品的OPTIONS请求 if (!OPTIONS.equalsIgnoreCase(request.getMethod())) { chain.doFilter(req, res); } } }3. 核心功能模块实现3.1 特色商品管理系统中药商品与传统电商商品的最大区别在于需要关联《中国药典》标准存在配伍禁忌关系需要区分处方药/非处方药我们的商品表设计如下CREATE TABLE herb_product ( id bigint(20) NOT NULL AUTO_INCREMENT, name varchar(100) NOT NULL COMMENT 商品名称, catalog_id int(11) NOT NULL COMMENT 分类ID, spec varchar(50) NOT NULL COMMENT 规格(如50g/瓶), origin_place varchar(100) DEFAULT NULL COMMENT 产地, is_rx tinyint(1) DEFAULT 0 COMMENT 是否处方药, compatibility_warning text COMMENT 配伍禁忌说明, pharmacopoeia_standard varchar(255) DEFAULT NULL COMMENT 药典标准, PRIMARY KEY (id), FULLTEXT KEY ft_idx (name,origin_place) COMMENT 全文检索索引 ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;前端采用树形表格展示商品分类el-table :dataproducts row-keyid :tree-props{children: children, hasChildren: hasChildren} el-table-column propname label药材名称 width180 / el-table-column propspec label规格 / el-table-column label操作 template #defaultscope el-button v-if!scope.row.isRx clickaddToCart(scope.row) 加入购物车 /el-button el-button v-else disabled clickshowRxTip 需医师处方 /el-button /template /el-table-column /el-table3.2 智能推荐算法实现针对中药保健品的特点我们设计了多维度推荐策略基于功效的协同过滤如购买安神助眠类商品的用户群体季节时令推荐夏季推凉茶、冬季推膏方体质辨识推荐通过用户填写的中医体质问卷算法核心代码片段public ListProduct recommendProducts(Long userId) { // 获取用户最近浏览记录 ListBrowseHistory histories browseHistoryMapper.selectByUser(userId); // 体质推荐权重40% ListProduct constitutionProducts recommendByConstitution(userService.getConstitution(userId)); // 协同过滤推荐权重30% ListProduct cfProducts cfRecommend(userId); // 时令推荐权重30% ListProduct seasonalProducts seasonRecommend(LocalDate.now().getMonthValue()); // 加权合并结果 return mergeRecommendations( constitutionProducts, 0.4, cfProducts, 0.3, seasonalProducts, 0.3 ); }4. 特殊业务场景处理4.1 处方药审核流程按照国家药品管理法要求我们设计了严格的处方药购买流程graph TD A[用户提交处方药订单] -- B[系统生成待审核订单] B -- C{自动审核} C --|证件齐全| D[进入支付流程] C --|需人工审核| E[药师后台审核] E --|审核通过| D E --|审核不通过| F[短信通知用户]实际代码实现时我们使用Spring State Machine管理订单状态Configuration EnableStateMachineFactory public class OrderStateMachineConfig { Override public void configure(StateMachineTransitionConfigurerOrderState, OrderEvent transitions) { transitions .withExternal() .source(OrderState.WAIT_AUDIT) .target(OrderState.WAIT_PAYMENT) .event(OrderEvent.AUDIT_PASS) .and() .withExternal() .source(OrderState.WAIT_AUDIT) .target(OrderState.CANCELED) .event(OrderEvent.AUDIT_REJECT); } }4.2 中药煎煮服务预约这是项目中最具特色的功能模块用户可以选择代煎服务系统自动计算煎药时间自煎指导关联煎药视频教程服务预约表设计关键字段CREATE TABLE herb_decotion_service ( order_id varchar(32) NOT NULL COMMENT 关联订单ID, service_type enum(SELF,PROXY) NOT NULL, expect_finish_time datetime DEFAULT NULL COMMENT 预计完成时间, real_finish_time datetime DEFAULT NULL, current_step tinyint(4) DEFAULT 1 COMMENT 当前煎药步骤, step_images json DEFAULT NULL COMMENT 步骤拍照记录, PRIMARY KEY (order_id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;5. 性能优化实践5.1 药材图片懒加载方案中药商品详情页平均包含15-20张图片药材外观、切片显微、包装等我们采用以下优化手段使用WebP格式图片体积比JPEG小30%实现可视区域懒加载CDN加速静态资源Vue实现代码template div classimage-gallery img v-for(img, index) in images :keyindex v-lazyimg.url :altimg.alt loadhandleImageLoad /div /template script import { Lazyload } from vant; Vue.use(Lazyload, { loading: require(/assets/loading.gif), error: require(/assets/error.png) }); /script5.2 高并发下单解决方案在双11等促销时段我们遇到库存超卖问题最终采用RedisLua脚本方案-- 库存扣减脚本 local key KEYS[1] local num tonumber(ARGV[1]) local stock tonumber(redis.call(GET, key)) if stock num then redis.call(DECRBY, key, num) return 1 else return 0 endJava调用示例public boolean deductStock(String productCode, int num) { String script local key KEYS[1]...; // 上述Lua脚本 RedisScriptLong redisScript new DefaultRedisScript(script, Long.class); Long result redisTemplate.execute(redisScript, Collections.singletonList(stock: productCode), String.valueOf(num)); return result 1; }6. 项目部署与运维6.1 多环境配置管理我们使用Spring Profile实现环境隔离# application-prod.yml spring: datasource: url: jdbc:mysql://prod-db:3306/herb_shop?useSSLfalse username: prod_user password: ${DB_PASSWORD} deployment: frontend: domain: https://shop.herb.com cdn: https://cdn.herb.com6.2 监控系统搭建基于PrometheusGrafana搭建监控看板重点关注指标处方药审核平均耗时商品详情页加载时长P99值库存同步延迟时间对应的Spring Boot配置Configuration public class MetricsConfig { Bean MeterRegistryCustomizerMeterRegistry metricsCommonTags() { return registry - registry.config().commonTags( application, herb-shop-backend, region, System.getenv(REGION) ); } }7. 开发经验与避坑指南7.1 中药数据标准化我们踩过的最大坑是药材名称不统一问题例如数据库存的是黄芪用户搜索黄耆供应商提供北芪解决方案建立药材别名表使用Elasticsearch同义词扩展在商品详情页显式展示《中国药典》标准名称// 同义词查询示例 Repository public interface HerbAliasRepository extends JpaRepositoryHerbAlias, Long { Query(SELECT h.standardName FROM HerbAlias h WHERE h.aliasName :alias) String findStandardNameByAlias(Param(alias) String alias); }7.2 移动端适配技巧针对中老年用户群体我们特别优化了字体大小可调节最小16px增强颜色对比度WCAG AA标准简化支付流程3步完成通过Vue的混入实现字体控制// fontMixin.js export default { data() { return { fontSize: localStorage.getItem(fontSize) || 16px } }, methods: { setFontSize(size) { this.fontSize ${size}px; document.documentElement.style.setProperty(--base-font-size, this.fontSize); localStorage.setItem(fontSize, this.fontSize); } } }这个项目让我深刻体会到传统行业与互联网技术的结合绝不是简单的把商品搬到网上而是要通过技术手段解决行业特有的痛点。比如我们为药店开发的智能配伍检查功能就在实际运营中避免了多起用药风险。