网上手机销售系统开发实战笔记：从需求分析到SSM+Layui落地的完整记录

好心情生活坊坊主 · *发表于* 2026-8-17 11:44:26

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

网上手机销售系统开发实战笔记：从需求分析到SSM+Layui落地的完整记录

一、项目背景与需求分析

手机是目前更新换代最快的消费电子产品之一，线上销售已经成为手机销售的主流渠道。一个功能完整的网上手机销售系统，需要覆盖商品展示、搜索筛选、购物车、下单支付、用户评价、后台管理等完整的电商业务链路。本项目就是围绕这一场景，从零搭建一套B/S架构的手机销售平台。
在需求分析阶段，我们将系统角色划分为两类：普通用户和管理员。普通用户可以浏览手机商品、按条件搜索筛选、查看商品详情、加入购物车、立即购买、发表评论、在线留言、管理个人订单；管理员负责商品的增删改查、公告发布、订单管理等运营工作。系统还设计了积分体系，用户购买商品可以获得积分，增加用户粘性。

图1 手机商城前台商品展示界面

二、技术选型与架构设计

后端选择SSM框架组合（Spring+SpringMVC+MyBatis），这是Java Web开发中最经典的轻量级框架组合，学习资料丰富，开发效率高。前端采用Layui框架，这是一款采用原生JavaScript编写的UI组件库，界面简洁美观，组件丰富，非常适合后台管理系统和中小型电商前台的快速开发。数据库使用MySQL 5.7+，服务器使用Tomcat 8.5。

) G/ s/ ^" x+ s( E* \|5 [* Q层级9 Z4 X/ S* \5 ~; y	8 G S( b- N6 f5 c技术选型 7 P9 w3 C* `2 c+ [1 G	. S( c% i: P) ^) x/ W& W- n4 X: o 说明9 m9 E5 B4 Y# k' R+ B
7 t7 Z9 U0 Q! S% F" y% K' z 前端框架 t7 m B& M6 w	$ @- d- h4 i$ D# V8 d: D% vLayui + jQuery0 g% a% R: g V0 L* }% ~	$ m, r% [( v# l5 v 轻量级UI组件库，模块化加载，适合快速开发! l) \+ W7 }5 \ v6 ]$ f- k
. Z+ @9 i! s1 B% S' U# g2 R后端框架 # p s8 o( d$ c/ \	7 ]& ~; m2 j: U0 xSSM（Spring+SpringMVC+MyBatis） 1 s- \|/ r, D( Q. K+ X: T' Q# z	8 e2 f) I8 j+ d7 h经典Java Web三层架构，轻量灵活 1 X5 G# `2 u2 O" T2 U
' Q w* I0 w8 I8 Z/ {! s; v& K 数据库 L3 F6 i z& {2 x, E, ~	% C; A1 f9 G$ Z# C, z0 V9 z3 R1 UMySQL 5.7++ r- d" C; }& w& `. m	8 \|. \# U: ]& Q1 `; w) I( W! E开源关系型数据库，性能稳定0 C! E# Z$ \1 R) ?
5 e# `0 X1 \/ g 服务器 " z& _4 ~1 `! s' b1 v3 f0 F* A	3 i8 x0 P! t: ~, S Tomcat 8.5 2 o# f- }7 G, i& }	0 c& g0 k; s- X1 _2 e 轻量级Servlet容器 U0 D8 h( G7 E* l: t7 g: T
- q+ \|% [! p3 x3 ?! u* I. {开发工具( n2 i/ ]& c7 K1 d6 L	8 [) p4 V6 ?: T3 W n E IDEA + Navicat . a) z5 p4 a/ c7 r( o	$ g% @1 b+ R. b1 Q" } 主流Java IDE和数据库管理工具 % x3 F8 B8 l3 y& v. N3 \
% [2 u' C a# x' H! {1 x JDK版本- r0 p$ W" j2 E8 {- f" ~	5 K4 V2 \. x0 H) bJDK 8 - \|! y) d& @7 b4 A6 u5 \|: {5 \) j	* k P3 a0 H2 g; N, j1 L兼容性最好的LTS版本 2 i' ^& o& O2 H9 m8 A

图2 SSM项目单体架构分层示意图

架构上采用标准的MVC三层模式：Controller层接收前端请求、参数绑定和视图跳转；Service层处理业务逻辑，如下单时的库存扣减、积分计算、订单生成；Mapper层通过MyBatis操作数据库。Spring负责依赖注入和声明式事务管理，确保下单等关键操作的原子性。
三、数据库设计

数据库设计是电商系统的核心，需要围绕"用户-商品-订单"这条主线展开。本系统的核心表包括用户表、手机商品表、购物车表、订单表、评论表、留言表、公告表等。以下是几张核心表的结构设计：
3.1 手机商品表（phone）

CREATE TABLE `phone` (
  `id` INT PRIMARY KEY AUTO_INCREMENT,
  `name` VARCHAR(100) NOT NULL COMMENT '手机名称',
  `image` VARCHAR(255) COMMENT '商品图片',
  `type` VARCHAR(50) COMMENT '手机类型',
  `is_new` TINYINT DEFAULT 0 COMMENT '是否新品 0否 1是',
  `is_special` TINYINT DEFAULT 0 COMMENT '是否特价 0否 1是',
  `stock` INT DEFAULT 0 COMMENT '库存数量',
  `original_price` DECIMAL(10,2) COMMENT '原价',
  `current_price` DECIMAL(10,2) NOT NULL COMMENT '现价',
  `points` INT DEFAULT 0 COMMENT '购买获得积分',
  `description` TEXT COMMENT '手机简介',
  `views` INT DEFAULT 0 COMMENT '点击次数',
  `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP,
  INDEX idx_type (`type`),
  INDEX idx_new (`is_new`),
  INDEX idx_special (`is_special`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='手机商品表';
3.2 订单表（orders）

CREATE TABLE `orders` (
  `id` INT PRIMARY KEY AUTO_INCREMENT,
  `order_no` VARCHAR(50) NOT NULL UNIQUE COMMENT '订单编号',
  `user_id` INT NOT NULL COMMENT '用户ID',
  `phone_id` INT NOT NULL COMMENT '商品ID',
  `quantity` INT NOT NULL COMMENT '购买数量',
  `total_price` DECIMAL(10,2) NOT NULL COMMENT '订单总价',
  `status` TINYINT DEFAULT 0 COMMENT '订单状态 0待付款 1已付款 2已发货 3已完成',
  `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP,
  INDEX idx_user (`user_id`),
  INDEX idx_status (`status`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='订单表';
3.3 购物车表（cart）

CREATE TABLE `cart` (
  `id` INT PRIMARY KEY AUTO_INCREMENT,
  `user_id` INT NOT NULL COMMENT '用户ID',
  `phone_id` INT NOT NULL COMMENT '商品ID',
  `quantity` INT DEFAULT 1 COMMENT '数量',
  `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP,
  UNIQUE KEY uk_user_phone (`user_id`, `phone_id`),
  INDEX idx_user (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='购物车表';
数据库设计的几个关键点：一是商品表用is_new和is_special两个布尔字段标记新品和特价，便于前台筛选和后台运营；二是购物车表用user_id+phone_id做联合唯一索引，同一商品在购物车中只保留一条记录，通过quantity累加数量；三是订单表独立存储订单快照信息，避免商品价格变动影响历史订单；四是所有查询字段都建立了索引，保证列表页和搜索页的查询性能。
四、前台核心功能实现

4.1 商品浏览与搜索筛选

商品列表页支持按手机类型筛选（全部、类型1-4），也支持多条件组合搜索：手机名称关键词、是否新品、是否特价。搜索条件通过表单提交到Controller，Service层使用MyBatis动态SQL拼接查询条件，实现灵活的条件查询。列表页采用Layui的流式布局展示商品卡片，每张卡片显示商品图片、名称、价格等信息。

<select id="searchPhones" resultType="Phone">
  SELECT * FROM phone
  <where>
<if test="name != null and name != ''">
   AND name LIKE CONCAT('%', #{name}, '%')
</if>
<if test="isNew != null">
   AND is_new = #{isNew}
</if>
<if test="isSpecial != null">
   AND is_special = #{isSpecial}
</if>
<if test="type != null and type != ''">
   AND type = #{type}
</if>
  </where>
  ORDER BY create_time DESC
</select>
4.2 商品详情与点击量统计

点击商品进入详情页，展示完整的商品信息：手机名称、类型、是否新品、是否特价、库存、原价、现价、购买获得积分、点击次数、商品简介，以及评论区。每次访问详情页时，点击次数字段views自动加1，用于统计商品热度，可后续用于热门推荐排序。
4.3 购物车与下单

用户在详情页可以选择购买数量，点击"添加到购物车"或"立即购买"。添加购物车时，如果该商品已在购物车中则数量累加，否则新增一条记录。立即购买直接跳转到订单确认页，提交后生成订单，同时扣减库存、增加用户积分。下单成功后弹出提示"下单成功，点击确定后跳转我的订单页面"。
// 下单业务逻辑（事务控制）
@Transactional
public Map<String, Object> placeOrder(Integer userId, Integer phoneId, Integer quantity) {
Map<String, Object> result = new HashMap<>();
// 1.检查库存
Phone phone = phoneMapper.selectById(phoneId);
if (phone.getStock() < quantity) {
      result.put("code", 1);
      result.put("msg", "库存不足");
      return result;
}
// 2.扣减库存
phoneMapper.decreaseStock(phoneId, quantity);
// 3.生成订单
Orders order = new Orders();
order.setOrderNo("ORD" + System.currentTimeMillis());
order.setUserId(userId);
order.setPhoneId(phoneId);
order.setQuantity(quantity);
order.setTotalPrice(phone.getCurrentPrice().multiply(new BigDecimal(quantity)));
order.setStatus(0);
orderMapper.insert(order);
// 4.增加用户积分
userMapper.addPoints(userId, phone.getPoints() * quantity);
result.put("code", 0);
result.put("msg", "下单成功");
result.put("orderNo", order.getOrderNo());
return result;
}
4.4 评论与留言

商品详情页底部有评论区，用户可以发表评价，管理员可以回复评论。留言板是独立的公开交流区，用户可以发布留言标题和内容，其他用户可以查看，管理员可以回复。评论和留言都按时间倒序排列，提升互动体验。
五、后台管理功能实现

图3 后台商品列表管理界面

5.1 商品管理

后台商品管理以表格形式展示所有手机商品，列包括：商品图片、名称、类型、是否新品、是否特价、库存、原价、现价、积分、点击次数、操作。管理员可以新增、编辑、删除商品，编辑页面支持上传商品图片、设置新品/特价标签、调整价格和库存等。商品管理是后台最核心的功能，直接影响前台展示。
5.2 公告管理

公告管理支持新增公告、修改公告、删除公告。公告在前台首页展示，用于发布促销活动、新品上架、系统维护等通知信息。公告内容支持富文本编辑，可以插入图片和格式化文字。
5.3 订单管理

管理员可以查看所有订单，按订单状态筛选（待付款、已付款、已发货、已完成），可以更新订单状态（如标记发货）。订单管理是电商运营的核心环节，确保交易流程顺畅。
六、开发中的关键技术点

6.1 积分体系设计

系统设计了购买获得积分的机制，每件商品设置一个积分值（points字段），用户下单成功后，积分累加到用户账户。积分可以后续扩展为积分兑换、会员等级等功能。积分计算放在下单事务中，确保与订单生成的原子性。
6.2 新品与特价标签

商品表中的is_new和is_special两个字段是运营的重要工具。新品标签用于展示新上架的手机，特价标签用于促销活动。前台列表页可以按这两个条件筛选，商品详情页也会显示对应的标签，提升营销效果。
6.3 Layui前端组件化

前端使用Layui的模块化加载机制，通过layui.use()引入需要的模块（如layer弹窗、form表单、table表格）。Layui的form模块提供了表单验证、下拉框、开关等组件，table模块可以快速渲染数据表格，layer模块提供弹窗提示，大大提升了前端开发效率。
6.4 文件上传

商品图片和用户头像都需要文件上传功能。SpringMVC通过配置CommonsMultipartResolver实现文件上传，Controller中用MultipartFile接收，保存到服务器upload目录，将相对路径存入数据库。前台通过img标签直接引用路径显示图片。
七、部署与运行步骤

1. 环境准备：安装JDK 8、MySQL 5.7+、Tomcat 8.5，配置JAVA_HOME和CATALINA_HOME环境变量。
2. 数据库初始化：创建数据库phone_shop，执行项目中的SQL脚本创建表结构和初始测试数据。
3. 项目导入：用IDEA打开项目，修改jdbc.properties中的数据库连接地址、用户名、密码。
4. 上传目录配置：确保项目中配置的文件上传目录存在且有写入权限。
5. 部署运行：在IDEA中配置Tomcat Server，将项目部署到Tomcat，启动服务。
6. 访问系统：浏览器打开http://localhost:8080/项目名，前台首页直接访问，后台管理使用admin账号登录。
八、开发踩坑与优化记录

第一，事务管理。最初下单操作没有加@Transactional注解，遇到库存扣减成功但订单生成失败的情况，导致数据不一致。后来在Service层的下单方法上加了@Transactional注解，确保库存扣减、订单生成、积分增加三个操作要么全部成功要么全部回滚。
第二，动态SQL拼接。搜索功能最初用if-else拼接SQL字符串，容易出错且难以维护。后来改用MyBatis的动态SQL标签（where、if、choose），代码更清晰，也避免了SQL注入风险。
第三，购物车重复添加。最初没有加联合唯一索引，用户重复点击"加入购物车"会生成多条记录。后来在cart表加了user_id+phone_id的联合唯一索引，同时在Service层判断是否已存在，存在则更新数量，不存在则新增。
第四，Layui模块加载。最初在页面中直接使用layer.alert()，但没有先layui.use("layer")，导致报错。后来统一在页面顶部用layui.use()引入需要的模块，在回调函数中使用，解决了模块未加载的问题。
第五，图片路径问题。开发环境和生产环境的上传目录路径不同，最初写死了绝对路径，部署后图片无法显示。后来改成相对路径，通过配置文件指定上传目录，前台用上下文路径拼接，解决了环境差异问题。
九、同类选题的拓展方向

如果你对电商系统开发感兴趣，这个选题还有不少可以深入的角度：
1. 接入在线支付。目前系统只模拟了下单流程，接入支付宝沙箱或微信支付后，可以实现真实的支付流程，研究支付回调、订单状态同步等技术。
2. 秒杀功能实现。针对特价手机设计秒杀活动，研究高并发下的库存超卖问题，使用Redis缓存、分布式锁、消息队列等技术方案。
3. 商品推荐系统。基于用户浏览历史和购买记录，用协同过滤算法实现个性化商品推荐，提升转化率。
4. 前后端分离重构。将前端从JSP改为Vue.js，后端提供RESTful API，研究前后端分离架构和JWT认证。
5. 多品类电商平台。从手机单一品类扩展到多品类（数码、家电、服饰），设计SKU体系、分类管理、属性模板等通用电商功能。
十、写在最后

网上手机销售系统是一个非常典型的电商项目，覆盖了商品管理、搜索筛选、购物车、下单、评论、留言、后台管理等完整的业务流程。从技术角度看，它展示了SSM框架在实际项目中的完整应用，包括动态SQL、事务管理、文件上传、Layui前端组件化等常见技术点；从业务角度看，它包含了积分体系、新品/特价标签等电商运营元素。
资料中包含完整的项目源码、数据库脚本、10000字以上的设计论文，拿到手可以直接导入IDEA运行，也可以在基础上根据自己的需求扩展功能。适合计算机科学与技术、软件工程、电子商务等专业的同学做课程设计或毕业设计参考。需要的同学可以在附件中下载全套资料。

关键词标签：网上手机销售系统电商平台 SSM框架 Layui 购物车订单管理 MySQL Java Web 积分体系毕业设计

网上手机销售系统开发实战笔记：从需求分析到SSM+Layui落地的完整记录

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

回复

浏览过的版块

快捷导航