业务和功能介绍
一、立项背景和目标
在数字化消费趋势下，线上购物成为主流，但现有电商平台对书籍、文创等垂直品类覆盖不足，存在交互繁琐、加载慢等问题，线下书店又受地域限制。基于此，“我的书店” 电商项目应运而生，采用前后端分离架构，以解决用户精准购物需求，适配多端使用场景。
项目目标清晰：用户层面，打造界面友好、操作便捷的平台，实现商品浏览、搜索、购物车管理等功能；技术层面，用 Vue 3、Spring Boot 等主流技术搭建可维护架构，验证技术应用价值；业务层面，完成基础电商流程闭环，为后续拓展预留空间。
二、软件功能与核心模块
软件整体围绕 “找货 - 选货 - 管货” 核心场景，涵盖商品展示、分类筛选、实时搜索、购物车管理、分页浏览等功能。
产品展示模块（HomePage.vue）是核心，左侧侧边栏提供五大分类导航，选中分类高亮显示，主体用响应式网格展示商品卡片，含图片、名称等信息，还支持分页调整。
实时搜索模块带 300ms 防抖，避免无效请求，搜索范围覆盖商品多字段，且与分类协同，仅显示所选分类下匹配商品，提升精准度。
购物车管理模块（cart.js）基于 Pinia，支持添加、移除、更新商品数量及清空操作，通过计算属性实时统计总数量和价格，与产品展示模块无缝衔接。
路由与页面管理模块依托 Vue Router，配置首页、详情页、购物车页面路由，实现页面无缝切换，保持全局样式统一。
三、业务流程与功能路径
核心业务流程为：用户进首页→选分类 / 搜关键词→系统筛选分页展示商品→用户浏览卡片→加购→进购物车调整→查看总价，全程无刷新，交互连贯。
分类筛选路径：用户点侧边栏分类→触发 selectCategory 方法→重置关键词与页码→按分类 ID 过滤商品→更新分页→展示对应商品，分类与商品通过 categoryId 关联。
搜索功能路径：用户输关键词→300ms 后执行搜索→未选分类则筛选全量匹配商品，已选则筛选对应分类下商品→实时更新结果与分页，兼顾效率与精准度。
购物车操作路径：用户点 “加入购物车”→Pinia 存储数据→更新总数量与总价；进购物车页面→调整数量或删除商品→状态同步，确保数据一致。
在数字化消费趋势下，线上购物成为主流，但现有电商平台对书籍、文创等垂直品类覆盖不足，存在交互繁琐、加载慢等问题，线下书店又受地域限制。基于此，“我的书店” 电商项目应运而生，采用前后端分离架构，以解决用户精准购物需求，适配多端使用场景。
项目目标清晰：用户层面，打造界面友好、操作便捷的平台，实现商品浏览、搜索、购物车管理等功能；技术层面，用 Vue 3、Spring Boot 等主流技术搭建可维护架构，验证技术应用价值；业务层面，完成基础电商流程闭环，为后续拓展预留空间。
二、软件功能与核心模块
软件整体围绕 “找货 - 选货 - 管货” 核心场景，涵盖商品展示、分类筛选、实时搜索、购物车管理、分页浏览等功能。
产品展示模块（HomePage.vue）是核心，左侧侧边栏提供五大分类导航，选中分类高亮显示，主体用响应式网格展示商品卡片，含图片、名称等信息，还支持分页调整。
实时搜索模块带 300ms 防抖，避免无效请求，搜索范围覆盖商品多字段，且与分类协同，仅显示所选分类下匹配商品，提升精准度。
购物车管理模块（cart.js）基于 Pinia，支持添加、移除、更新商品数量及清空操作，通过计算属性实时统计总数量和价格，与产品展示模块无缝衔接。
路由与页面管理模块依托 Vue Router，配置首页、详情页、购物车页面路由，实现页面无缝切换，保持全局样式统一。
三、业务流程与功能路径
核心业务流程为：用户进首页→选分类 / 搜关键词→系统筛选分页展示商品→用户浏览卡片→加购→进购物车调整→查看总价，全程无刷新，交互连贯。
分类筛选路径：用户点侧边栏分类→触发 selectCategory 方法→重置关键词与页码→按分类 ID 过滤商品→更新分页→展示对应商品，分类与商品通过 categoryId 关联。
搜索功能路径：用户输关键词→300ms 后执行搜索→未选分类则筛选全量匹配商品，已选则筛选对应分类下商品→实时更新结果与分页，兼顾效率与精准度。
购物车操作路径：用户点 “加入购物车”→Pinia 存储数据→更新总数量与总价；进购物车页面→调整数量或删除商品→状态同步，确保数据一致。
项目实现
一、整体架构与设计思路
我主导搭建了项目的前后端分离架构，前端基于Vue 3 ，利用其组件化、响应式特性，搭配Vue Router实现页面路由管理，Pinia进行全局状态管控（如购物车数据、用户搜索状态 ）。UI 开发时，通过CSS 网格布局、弹性盒模型，保障多端适配及界面交互流畅。后端选用Spring Boot ，简化开发流程，设计RESTful API 与前端交互，采用MySQL存储商品、分类等数据，Redis缓存高频访问的商品列表，提升页面响应速度。不同模块按需选型：商品展示模块，前端用Vue 3组件渲染商品卡片、分页组件，后端Spring Boot编写商品列表查询接口；购物车模块，前端Pinia管理状态，后端设计对应增删改查接口，保障数据流转。
二、我的负责模块与成果
我独立承担商品展示模块（含分类筛选、分页）、实时搜索模块及购物车功能模块：
商品展示模块：
从0到1完成开发：设计响应式布局，左侧分类导航通过Vue 3动态样式绑定实现高亮，主体用CSS网格渲染商品卡片，兼容手机、平板、PC端。开发分页逻辑，支持页码跳转、每页数量调整，接入后端商品列表接口后，实现500 + 商品高效加载，分页切换响应时间≤200ms 。上线后，该模块日浏览量超800次，用户因分类筛选不清晰的反馈减少70% 。
实时搜索模块：
攻克搜索性能与精准度难题：实现300ms防抖的实时搜索，重构搜索算法，覆盖商品名称、描述等字段，支持分类下精准搜索。优化前，搜索全量商品需1s + ；优化后，通过前端本地过滤（小数据） + 后端索引查询（大数据）结合，响应时间缩短至300 - 500ms ，关键词匹配准确率达95% ，搜索功能日调用量超600次 。
购物车功能模块：
搭建完整状态管理体系：基于Pinia设计购物车store，实现商品添加、数量修改、删除、总价计算等功能。与商品展示模块联动，“加入购物车”按钮点击响应率100% ，数据同步无延迟。测试阶段，模拟100次并发加购，购物车数据准确率100% ，上线后，用户购物车留存率提升12% 。
三、遇到的难点、“坑”及解决方案
Vue 3响应式数据失效：
开发商品筛选功能时，分类切换后商品列表未更新，排查发现是直接修改数组索引导致响应式失效。解决方案：改用Vue 3提供的`push`、`splice`等方法操作数组，或通过`ref`、`reactive`规范数据定义，修复后分类筛选实时性达标。
跨域接口请求阻塞：
联调后端API时，浏览器报跨域错误，后端虽配置CORS，但复杂请求（如带自定义头的搜索接口）仍被拦截。“坑”在于CORS配置未覆盖所有请求方法、头信息。解决：后端完善CORS配置，
我主导搭建了项目的前后端分离架构，前端基于Vue 3 ，利用其组件化、响应式特性，搭配Vue Router实现页面路由管理，Pinia进行全局状态管控（如购物车数据、用户搜索状态 ）。UI 开发时，通过CSS 网格布局、弹性盒模型，保障多端适配及界面交互流畅。后端选用Spring Boot ，简化开发流程，设计RESTful API 与前端交互，采用MySQL存储商品、分类等数据，Redis缓存高频访问的商品列表，提升页面响应速度。不同模块按需选型：商品展示模块，前端用Vue 3组件渲染商品卡片、分页组件，后端Spring Boot编写商品列表查询接口；购物车模块，前端Pinia管理状态，后端设计对应增删改查接口，保障数据流转。
二、我的负责模块与成果
我独立承担商品展示模块（含分类筛选、分页）、实时搜索模块及购物车功能模块：
商品展示模块：
从0到1完成开发：设计响应式布局，左侧分类导航通过Vue 3动态样式绑定实现高亮，主体用CSS网格渲染商品卡片，兼容手机、平板、PC端。开发分页逻辑，支持页码跳转、每页数量调整，接入后端商品列表接口后，实现500 + 商品高效加载，分页切换响应时间≤200ms 。上线后，该模块日浏览量超800次，用户因分类筛选不清晰的反馈减少70% 。
实时搜索模块：
攻克搜索性能与精准度难题：实现300ms防抖的实时搜索，重构搜索算法，覆盖商品名称、描述等字段，支持分类下精准搜索。优化前，搜索全量商品需1s + ；优化后，通过前端本地过滤（小数据） + 后端索引查询（大数据）结合，响应时间缩短至300 - 500ms ，关键词匹配准确率达95% ，搜索功能日调用量超600次 。
购物车功能模块：
搭建完整状态管理体系：基于Pinia设计购物车store，实现商品添加、数量修改、删除、总价计算等功能。与商品展示模块联动，“加入购物车”按钮点击响应率100% ，数据同步无延迟。测试阶段，模拟100次并发加购，购物车数据准确率100% ，上线后，用户购物车留存率提升12% 。
三、遇到的难点、“坑”及解决方案
Vue 3响应式数据失效：
开发商品筛选功能时，分类切换后商品列表未更新，排查发现是直接修改数组索引导致响应式失效。解决方案：改用Vue 3提供的`push`、`splice`等方法操作数组，或通过`ref`、`reactive`规范数据定义，修复后分类筛选实时性达标。
跨域接口请求阻塞：
联调后端API时，浏览器报跨域错误，后端虽配置CORS，但复杂请求（如带自定义头的搜索接口）仍被拦截。“坑”在于CORS配置未覆盖所有请求方法、头信息。解决：后端完善CORS配置，
示例图片视频
相似推荐
机器人自动化测试平台
1、用于机器人的自动化测试，包含多种测试任务类型，支持自定义参数，实时记录测试数据。
2、机器运行状态监测及数据导出，支持监测机器核心板CPU状态、零部件温度等。
3、机器地图复制
4、机器二维码批量生成
点动物联网平台
1. 立项背景和目标
立项背景：
随着物联网技术快速发展，企业面临设备管理复杂、数据采集困难、故障响应滞后等挑战。传统物联网平台存在扩展性差、协议支持有限、实时处理能力不足等问题。
项目目标：
构建一个高性能、可扩展的企业级物联网平台，支持海量设备接入、实时数据处理、智能告警分析，为企业提供一站式设备管理和监控解决方案，实现设备全生命周期管理和智能化运维。
2. 软件功能、核心功能模块介绍
核心技术栈：
- 后端：Go + Gin框架 + GORM + PostgreSQL/TimescaleDB
- 架构：微服务 + 事件驱动 + 分层架构
- 消息：NSQ消息队列 + 多级缓存
- 规模：314个Go文件，74,440行代码
核心功能模块：
设备管理模块： 支持设备注册、配置、状态监控、固件升级，提供设备全生命周期管理，支持MQTT、DTU/TCP、Modbus等多种协议接入。
数据采集与处理： 实时数据接收存储、批量数据处理、事件驱动架构，支持流式数据处理和复杂事件处理链。
智能告警系统： 流式告警规则引擎、实时数据触发告警、多渠道通知（邮件/短信/微信）、告警自动恢复机制、静默期管理。
权限管理（RBAC）： 基于角色的访问控制、用户管理、菜单权限、数据级权限控制、多租户架构支持。
任务调度： 异步任务处理、任务执行监控、定时任务管理、任务报告生成。
多租户架构： 租户隔离、套餐管理、项目级权限控制、数据安全隔离。
3. 业务流程、功能路径描述
设备接入流程：
设备注册 → 设备类型配置 → 协议适配 → 数据上报 → 状态管理
支持直连设备、网关设备、子设备等多种接入方式，提供设备在线/离线状态实时监控。
数据处理流程：
数据上报 → 协议解析 → 数据存储 → 事件触发 → 告警检测 → 通知发送
采用事件处理器链模式，包含时间戳处理、事件验证、自动恢复、状态处理、告警处理等环节。
告警触发流程：
规则配置 → 流式检测 → 告警生成 → 通知发送 → 告警处理 → 恢复检测
告警状态流转：活跃(1) → 已确认(2) → 已解决(3) → 已关闭(4)，支持静默期管理和自动恢复。
用户操作路径：
管理员：系统配置 → 用户管理 → 角色权限 → 设备类型 → 告警规则
普通用户：设备监控 → 实时数据 → 告警处理 → 历史查询 → 报表导出
头盔护卫AI——基于YOLOv5的头盔识别系统
在工业和建筑领域，头盔是保护工人免受头部伤害的首要安全装备。在交通、体育、娱乐等领域，头盔都是我们不可或缺的保护伙伴，确保我们在各种环境下的安全。通过我们的头盔识别系统，我们能够更好地监控和促进头盔的正确使用，进一步提升公共安全。通过yoloV5，做头盔识别系统。
AIOT云平台-AIOT云平台
项目描述：AIOT管理后台。该平台集成酷旗所有业务、内容、技能、工具、监控等模块。
技术栈：nest.js+vue(vue-element-admin)+docker+gitlab ci/cd
责任描述：
1、负责云平台技术选型。负责平台迁移。
2、负责云平台前后端开发。负责账号中心、应用中心、客户中心、技能中心、工具中心、能力中心、文档中心、内容中心等模块的需求设计及前后端开发测试。
3、负责项目部署及项目维护迭代。负责项目需求确认及任务分配。
4、配合公众号/小程序/APP输出内容接口。
自助预约系统
核心业务模块:
会员系统 - 会员信息、余额管理、积分体系
订单系统 - 订单创建、支付、退款、订单详情管理
门店管理 - 门店信息维护、门店配置、数据统计
运营管理 - 优惠券、团购活动、门店授权、提现申请
小程序端 - 雀时光小程序(主平台)、门店小程序(商家端)
系统管理 - 用户认证、权限控制、配置管理
统计分析 - 业务数据统计和报表
帮助文档
Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服