1. 立项背景和目标
商城项目(Shangchen)是面向家装建材行业(地板/木制品)的全栈电商展示平台。项目旨
在打破传统建材销售对线下展厅的依赖,通过多端数字化展示(H5/小程序/App)实现产品多
维度呈现、案例场景化营销和视频内容传播,提升品牌影响力和客户转化率,最终构建"产品
展示-案例种草-在线交易"的营销闭环。
2. 软件功能与核心模块
- 产品管理体系:支持木种、色系、风格、工艺等12个维度的产品分类,集成图片轮播、视
频展示、工艺参数和案例关联功能
- 案例展示系统:提供空间场景分类、风格筛选、产品反向关联,支持图文视频混排展示
- 视频营销中心:接入微信视频号,分类管理产品工艺、空间案例、品牌事件三类内容,统
计播放数据
- 会员交易系统:包含用户注册/登录、积分余额管理、订单支付(微信/支付宝)、提现申
请、财务对账完整流程
- 运营管理后台:提供产品/案例/视频的CRUD、轮播图配置、分类体系维护、订单处理、数
据统计等功能
3. 业务流程与功能路径
用户通过首页轮播图或分类导航进入产品/案例/视频模块 → 多维度筛选目标内容 →
查看详情页(图片/视频/参数/关联案例) → 收藏/分享/生成海报 → 注册会员并下单 →
选择支付方式完成交易 → 订单管理与售后。管理员通过后台上传产品素材 → 配置分类标签
→ 绑定案例关系 → 设置轮播推广 → 处理订单/提现申请 → 查看运营数据。
1. 整体架构与技术栈
采用前后端分离架构,后端基于 GoFrame v2 + HotGo 框架,严格遵循 api → controller →
service → logic → dao 五层架构,使用 PostgreSQL 存储业务数据,Redis
实现缓存和队列。移动端采用 Uni-app + Vue 3 + TypeScript,使用 Wot-UI 组件库和
UnoCSS 原子化样式,通过 Alova 3 处理 HTTP 请求,Pinia 管理状态,支持
H5/微信小程序/原生App 三端编译。管理后台使用 Vue 3 + Naive UI + TypeScript,基于
Vite 5 构建。三端通过 RESTful API 交互,文件存储对接
OSS,支付集成微信/支付宝双通道。
2. 我的负责模块与成果
负责 产品管理、案例展示、视频中心 三大核心模块的全栈开发。完成 12
张数据表设计、35+ 个 RESTful API 接口开发、管理后台 8 个 CRUD 页面和移动端 15
个展示页面。实现产品与案例双向关联查询,优化列表接口响应时间从 800ms 降至
120ms(通过 Redis 缓存热门分类和 SQL
查询优化)。封装视频号数据同步定时任务,日均处理 500+ 条视频元数据。前端通过
UnoCSS 按需生成样式,构建产物体积减少 40%,首屏加载时间优化至 1.2s。
3. 遇到的难点与解决方案
- 多维度筛选性能瓶颈:产品表支持木种、色系、风格等 10+ 个维度组合查询,初期多表
JOIN 导致慢查询。通过将分类 ID 冗余存储为 JSONB 字段配合 GIN 索引,改用单表查询 +
Redis 缓存分类元数据,查询耗时降低 85%。
- Uni-app 多端兼容性问题:小程序不支持 video 标签自动播放和部分 CSS
属性。采用条件编译 #ifdef MP-WEIXIN
隔离平台代码,封装统一的视频播放组件适配不同端能力。
- 图片加载优化:案例详情页包含 20+
张高清图,初次加载白屏时间长。引入渐进式加载(缩略图 → 原图)+
IntersectionObserver 懒加载 + WebP 格式自适应,首屏可交互时间缩短 60%。