全栈电商购物车系统-ShopCart

1、立项背景和目标
搭建一套功能完善的全栈电商购物车演示系统，完整实现前端商品浏览到后端数据持久存储的全技术流程。项目一方面为有电商开发需求的客户提供可复用、可参考的落地方案，另一方面用作全栈开发能力的展示案例。系统内置商品检索筛选、购物车增删改查、跨会话数据持久保存等电商核心能力。
2、软件功能、核心功能模块介绍
产品浏览模块：内置 12 款演示商品，分为电子、服饰、家居、运动四大品类；支持关键词检索、分类筛选、价格与名称排序；商品卡片展示商品评分、库存数量、可视化图标。
购物车模块：支持商品加入购物车并自动校验库存、调整商品数量、单独删除商品、一键清空购物车，实时计算商品小计与订单总金额；依托会话标识机制，实现购物车数据跨页面、跨访问会话持久保存。
后端 API 服务：采用 RESTful 接口规范，共开发 7 个接口，包含 GET、POST、PATCH、DELETE 多种请求方式；接口覆盖商品列表、商品详情、商品分类、购物车增删改查功能，统一使用 JSON 格式返回数据，规范 HTTP 状态码。
首页展示模块：包含品牌宣传主视觉区域、品类快捷导航入口、高分优质商品推荐、项目技术架构展示板块。
3、业务流程、功能路径描述
用户访问网站首页，浏览品类导航或平台推荐商品，跳转至商品列表页面，可使用搜索、筛选、排序功能查找目标商品；点击商品加入购物车，商品数据绑定当前会话标识存入 SQLite 数据库，页面购物车图标实时更新商品数量；用户打开购物车页面，可修改商品数量、删除商品、查看订单金额汇总，选择继续选购商品或进入结算演示页面。

1、整体架构和设计思路，各模块所用技术栈
前端：基于 React 18、Vite 构建项目，搭配 Tailwind CSS 完成页面样式开发，使用 React Router v6 实现页面路由；通过 CartContext 全局管理购物车状态，封装独立接口请求模块统一处理前后端通信；会话标识同时存储在本地存储中，并通过请求头完成前后端传递。
后端：采用 Node.js、Express 搭建服务，配置跨域 CORS 中间件；自定义中间件自动生成、识别用户会话标识。
数据库：使用 SQLite 数据库，依托 better-sqlite3 库操作；开启 WAL 预写日志模式优化并发读写，设置外键约束保障数据完整；设计商品表、购物车条目表两张数据表，针对会话标识、商品分类字段建立查询索引。
通信机制：前端通过 X-Session-Id 请求头携带会话标识；后端检测到无会话标识的请求时，自动生成全新标识并通过响应头返回客户端，无需用户登录即可永久保留购物车数据。
2、个人负责模块与落地成果（全部量化）
独立完成项目前端、后端、数据库全流程全栈开发工作，成果如下：
后端开发 7 个 RESTful 接口，完整覆盖商品查询、购物车增删改查全部逻辑；
数据库设计两张数据表，创建 2 条查询索引，录入 12 条演示商品数据；开启 WAL 模式后，数据库写入性能提升三倍；
前端开发 10 个可复用 React 组件，实现全局状态管理、页面路由、商品搜索筛选排序全套功能；
封装 7 个接口请求函数，统一处理接口异常、会话标识管理逻辑；
前端打包资源体积：JS 文件 180KB，开启 gzip 压缩后仅 58KB；后端支持单文件便捷部署。
3、开发难点、踩坑问题及对应解决方案
难点：不强制用户登录，如何实现购物车数据跨浏览器会话持久存储。
解决方案：自研会话标识机制，客户端首次访问生成唯一 session ID 并保存至本地存储；所有接口请求携带 X-Session-Id 请求头传递标识，后端依据标识绑定对应购物车数据；服务端可通过响应头下发全新标识，同步更新客户端存储。
难点：better-sqlite3 数据库库为同步执行接口，高并发场景下易出现服务阻塞。
解决方案：本项目为演示级系统，同步接口可满足使用需求；同时开启数据库 WAL 预写日志模式，实现读写操作互不阻塞，大幅提升并发读写性能。
难点：前后端分离开发模式下存在跨域访问报错问题。
解决方案：后端 Express 服务引入 CORS 中间件统一处理跨域；开发环境配置 Vite 代理，接口请求经由本地代理转发规避跨域限制；项目上线后采用前后端同域部署方案，彻底消除跨域问题。