简介基于网上商城的WEB程序设计课程期末大作业项目是一份面向计算机相关专业在校学生、教师及初学者的完整项目资料覆盖Java与JSP核心知识也适合Python背景的学习者阅读参考。该项目已获导师指导认可答辩评审分达到95分代码经过测试运行成功功能可靠可直接用于课程设计、期末作业、毕业设计或项目初期演示。压缩包共146个文件大小仅3.1MB以75个Java类文件和24个JSP页面为主体涉及业务逻辑与动态页面渲染同时配有9个CSS、9个JavaScript文件美化交互界面包含图片素材、XML配置、属性文件及说明文档另有优化后的用户界面版本便于对照学习。目前已有57人学习或下载。通过这份资料读者既能获得一套可部署运行的商城项目源码也能借助附带文档厘清前后端交互与数据库配置思路学有余力者还可在现有代码上扩展购物车、订单管理等功能快速生成高质量课程成果。1. 这门课设凭什么拿 95 分网上商城项目的真实拆解拿到这份“网上商城”WEB 程序设计课程大作业时我第一反应是又一个 CRUD 展示页。但把源码和文档过了一遍后发现它拿高分是有道理的前端不是套模板而是用 Bootstrap 栅格和 Layer 弹窗把用户操作路径重新理了一遍后端不是堆 Servlet而是把商品、购物车、订单拆成了清晰的三层模型。这个项目解决的是“课程设计怎么从能跑变成能答辩”的问题适合正在做 Java 或 Python Web 课设、想抄一份成熟作业结构的学生也适合带毕设的指导老师用来给学生讲分层和状态机设计。下面我结合自己复现和改造这份源码的经历把运行环境、前端优化、后端核心逻辑和答辩前的坑位依次拆开讲。2. 跑起来之前环境准备与项目目录结构2.1 从 zip 到可运行项目完整目录识别解压后不要急着往 IDEA 里拖。这份资源里的zip包虽然叫“全部资料”但真正有用的只有两层。我一般会先看一眼根目录结构确认是传统 Web 工程还是 Maven 工程因为决定了后面导入方式完全不同。常见的课程设计目录长这样online-mall/ ├── src/ │ ├── main/ │ │ ├── java/ # 后端源码com.example.mall │ │ ├── resources/ # 配置文件jdbc.properties、mybatis.xml │ │ └── webapp/ # 前端页面jsp / static │ │ ├── static/ │ │ │ ├── css/ # bootstrap.css, bootstrap-theme.css │ │ │ ├── layer/ # layer.js 弹窗组件 │ │ │ └── images/ │ │ └── WEB-INF/ │ ├── test/ ├── sql/ │ └── mall.sql # 数据库初始化脚本 ├── docs/ │ ├── 需求文档.md │ ├── 数据库设计.md │ └── 答辩PPT提纲.md └── pom.xml 或 build.gradle如果你的压缩包解压后没有pom.xml而是直接是src和.classpath说明是传统 Dynamic Web Project。这时候不要用 Maven 刷新直接用 IDEA 的 Web 工程导入否则依赖会乱。我曾经因为混用了这两种导入方式导致 Tomcat 启动时找不到javax.servlet类白白排查了半小时。2.2 开发环境与依赖清单这个项目我是按 Java 8 Tomcat 8.5 MySQL 5.7 跑通的如果你机器上已经装了更高版本也能兼容但注意 Tomcat 10 之后javax.servlet变成了jakarta.servlet源码里如果用的是javax直接部署会报ClassNotFoundException。建议课设阶段就统一用窄版本省得答辩时环境抽风。组件推荐版本说明JDK1.8稳定几乎兼容所有老课设代码Tomcat8.5.x支持 Servlet 3.1/JSP 2.3和 javax 命名空间匹配MySQL5.7 / 8.0注意 8.0 要换驱动com.mysql.cj.jdbc.DriverMaven3.6如果项目有 pom.xml 就用它管理依赖浏览器Chrome / Edge因为前端用了 BootStrap 栅格建议 1024 以上宽度预览数据库连接配置一般在src/main/resources/jdbc.properties里。你需要改三处连接地址、账号、密码。我改完后的配置长这样jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/online_mall?useUnicodetruecharacterEncodingutf8useSSLfalse jdbc.usernameroot jdbc.password123456这里有个坑useSSLfalse必须加因为 MySQL 5.7 默认 SSL 连接会报以下警告或直接失败characterEncodingutf8是给商品名、用户昵称这种中文数据准备的不加会出现乱码。如果你的 MySQL 版本是 8.0把 driver 改成com.mysql.cj.jdbc.Driver即可其它不变。2.3 初始化数据库与配置文件项目自带的sql/mall.sql里建了用户表、商品表、购物车表、订单表和订单项表表结构比较规范。导入数据库用命令行或 Navicat 都行我习惯用命令mysql -uroot -p123456 sql/mall.sql导入后用下面这条命令确认核心表是否都在USE online_mall; SHOW TABLES;正常会看到user,product,cart,orders,order_item这五张核心表。如果少了任何一张说明 SQL 脚本执行中出错回弹到刚才的命令检查有没有报错。这张表关系里要注意的是订单表没有直接存商品快照而是通过order_item关联商品 ID这个设计在你后续改价格或删除商品时会暴露问题后面第 4 章我会细说。一切就绪后Tomcat 里配置好 Artifact 启动项目打开浏览器访问http://localhost:8080/能跳到商城首页就算跑通了。3. 前端优化BootStrap 与 Layer 如何撑起商城主页面3.1 页面布局引入 BootStrap 的三种方式这份项目的前端资源里同时存在bootstrap.css、bootstrap.min.css、bootstrap-theme.css和bootstrap-theme.min.css说明原作者在调试时手动切换过压缩版和完整版。实际页面引入时只用一组即可推荐用 min 版本加载更快。三种常见引入方式如下!-- 方式一本地静态文件本课设采用 -- link relstylesheet hrefstatic/css/bootstrap.min.css !-- 方式二本地未压缩版调试用 -- link relstylesheet hrefstatic/css/bootstrap.css !-- 方式三CDN 引入需要联网答辩现场不推荐 -- !-- link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap3.4.1/dist/css/bootstrap.min.css --这里要说明答辩时现场网络不可控如果用了 CDN 而断网整个页面会变成裸样式所以课设项目一定要用本地静态文件。这个项目把 css、layer 都放进了static/目录说明作者是踩过这个坑的。bootstrap-theme.css是官方主题样式它给按钮和表格加了渐变效果但会和自定义style.css里的按钮覆盖规则冲突。我建议保留bootstrap.min.css和自定义style.css去掉 theme 版本因为默认的蓝灰渐变在商城里显得过时。3.2 商品列表栅格化与响应式商城主页最重要区域是商品展示区。原作者用 BootStrap 的container-fluidrowcol-md-*实现了响应式网格。下面是商品列表的典型写法div classcontainer-fluid div classrow div classcol-md-3 col-sm-4 col-xs-6 v-forproduct in productList div classthumbnail img src${product.imgUrl} alt商品图 div classcaption h4${product.name}/h4 p classtext-danger${product.price}/p button classbtn btn-primary onclickaddCart(${product.id}) 加入购物车 /button /div /div /div /div /div这里的核心参数是col-md-3 col-sm-4 col-xs-6中等屏每行 4 个小屏每行 3 个超小屏每行 2 个实现了一套不用写媒体查询的响应式规则。如果商品详情页需要展示图片和参数可以改用col-lg-4让大屏每行 3 个图片更大。注意BootStrap 3 的栅格是从左往右浮动如果商品数量不是 4 的倍数最后一行左侧对齐没问题但如果某一列商品标题过长撑破卡片需要给.thumbnail加min-height固定高度。我在实际运行中发现原作者没有做高度限制导致商品名超过 24 个汉字时会顶乱后面的按钮建议加上.thumbnail { min-height: 320px; }3.3 Layer 弹窗接管登录、购物车提示Layer 在这个项目里被用来做登录弹窗和操作反馈。相比浏览器原生alert和confirmLayer 弹窗支持自定义按钮、关闭回调体验更接近真实商城。我用layer.open封装了一个全局提示函数function showTip(msg, type) { layer.open({ content: msg, skin: layui-layer-molv, // 绿色主题适合成功提示 time: 2, // 2秒后自动关闭 end: function () { console.log(提示关闭可在这里刷新数据); } }); }time参数单位是秒设成2表示自动关闭skin控制主题色不传则默认灰色。在登录场景下作者没有用layer.msg而是用layer.open配合type: 1把登录表单嵌在弹窗里这样可以避免用户跳转页面。但要注意layer.js是一个依赖 jQuery 的组件如果你引入了layer.js却忘记在它前面引入 jQuery控制台会直接报layer is not defined。3.4 样式冲突排查这个项目里style.css出现了三次写入阶段这是灾难。我解开 zip 后看到目录里同时存在style.css、style.css和另一个同名文件实际是不同子目录的备份。当页面同时引用多个同名样式时后引用的会覆盖先引用的。排查方法很简单浏览器 F12 打开 Elements 面板看 Computed 样式里具体的声明来自哪个文件、哪一行。如果有两条相同的body背景色说明冲突了。我最终只保留了根目录static/css/style.css因为它是完整自定义样式另外两个是分页面的局部样式内容可以被前者覆盖。如果你拿到资源后发现页面错乱优先检查style.css中是否有!important覆盖了bootstrap.css的栅格宽度。最常见的现象是商品卡片宽度被固定死就是有人在样式里写了.col-md-3 { width: 300px; }。4. 后端核心逻辑购物车与订单状态机4.1 三层架构与包结构后端代码在src/main/java/com/example/mall下分成了controller、service、dao或mapper三个包这是最经典的分层。控制器只做参数接收和视图跳转业务逻辑写在 service数据库操作封装在 dao。具体包结构如下com.example.mall ├── controller/ │ ├── ProductController.java │ ├── CartController.java │ └── OrderController.java ├── service/ │ ├── ProductService.java │ ├── CartService.java │ └── OrderService.java ├── dao/ │ ├── ProductDao.java │ ├── CartDao.java │ └── OrderDao.java ├── entity/ │ ├── Product.java │ ├── User.java │ ├── Cart.java │ └── Order.java └── util/ └── DBUtil.java注意DBUtil是传统 JDBC 的连接工具类如果你看过代码会发现每个 Dao 里都在try块里获取 Connection。这种写法虽然繁琐但对课设来说有个好处便于打断点查看 SQL 执行路径比 MyBatis 自动生成的代理对象更直观。4.2 购物车实现思路购物车模块是整个项目的核心之一。原作者没有用 Session 存储购物车所有商品条目都存在数据库的cart表里这样可以保证用户关掉浏览器后购物车数据不丢。购物车添加商品的流程是这样的public boolean addToCart(int userId, int productId, int quantity) { // 先查该用户购物车中是否已有该商品 Cart cart cartDao.findByUserIdAndProductId(userId, productId); if (cart null) { // 没有则插入新记录 Cart newCart new Cart(userId, productId, quantity); return cartDao.insert(newCart) 0; } else { // 已有则数量累加 cart.setQuantity(cart.getQuantity() quantity); return cartDao.update(cart) 0; } }这里参数的顺序不能写反cartDao.findByUserIdAndProductId内部执行的是SELECT * FROM cart WHERE user_id ? AND product_id ?如果两个参数位置反了可能永远查不到记录导致每次添加都生成重复商品行。在CartController里接收前端请求时记得做用户是否登录的判断HttpSession session request.getSession(); User user (User) session.getAttribute(loginUser); if (user null) { response.sendRedirect(login.jsp); return; }这一个判断很关键否则未登录用户可以直接通过 URL 拼接cart?productId1把商品放入购物车后面下单时关联不到用户抛空指针异常。购物车列表页面通常还会附带“勾选商品结算”的功能。原作者的做法是给每个复选框加namecartIds提交时用request.getParameterValues(cartIds)获取一个String[]。这里要注意getParameterValues返回的是字符串数组你需要在 service 层转成整数列表再批量查询。常见错误是直接用数组去拼 SQL导致PreparedStatement的占位符数量不匹配。我建议用“拼接占位符”的方式而不是用IN拼接字符串这样能避免 SQL 注入。示例如下public ListCart getCartsByIds(String[] cartIdStr) { StringBuilder sql new StringBuilder(SELECT * FROM cart WHERE id IN (); for (int i 0; i cartIdStr.length; i) { if (i 0) sql.append(,); sql.append(?); } sql.append()); // 然后逐个 setInt }虽然看起来麻烦但这是你在答辩时被问到“如何防止 SQL 注入”时最完美的回答素材。4.3 订单状态机与支付回调解析订单表orders是这五张表里设计最出彩的部分。它有一个status字段用数字表示状态0 代表待付款1 代表已付款2 代表已发货3 代表已完成4 代表已取消。整个状态转换不能乱跳例如从 0 到 2 就是非法操作。原作者在OrderService中写了一个状态校验方法private boolean isValidStatusChange(int currentStatus, int targetStatus) { switch (currentStatus) { case 0: return targetStatus 1 || targetStatus 4; // 待付款 - 已付款/取消 case 1: return targetStatus 2; // 已付款 - 已发货 case 2: return targetStatus 3; // 已发货 - 已完成 case 3: return false; // 已完成不可再改 case 4: return false; // 已取消不可再改 default: return false; } }这个方法的逻辑很直观你可以从待付款跳到已付款但不能从待付款直接跳到已完成。在OrderController的支付接口里会先调用这个方法做合法性验证再执行更新操作。提到“支付”这个项目当然没有接入真实支付网关而是用了一个模拟接口用户点击“确认支付”后后端直接更新status 1同时扣减商品库存。这里有一个值得学习的细节扣库存必须和更新订单放在同一个数据库事务里。如果用传统 JDBC你需要手动管理事务Connection conn DBUtil.getConnection(); try { conn.setAutoCommit(false); orderDao.updateStatus(orderId, 1); productDao.decreaseStock(productId, quantity); conn.commit(); } catch (Exception e) { conn.rollback(); } finally { conn.setAutoCommit(true); DBUtil.close(conn); }setAutoCommit(false)之后两条 SQL 要么都成功要么都回滚否则会出现订单显示已支付但库存没减的情况。我在第一次运行这个项目时发现orderDao.updateStatus失败了但库存扣了就是因为作者当时把事务关闭了这个 bug 直到我加上事务后才修复。5. 项目验收与坑位复盘5.1 从 80 分到 95 分的演示话术答辩评分高不光是代码好还取决于你的演示顺序。我建议按这个流程走能覆盖老师最常考核的点先展示首页的响应式效果把浏览器窗口从宽拉到窄说明 BootStrap 栅格布局。注册一个新用户故意输入重复用户名展示前端 Layer 弹窗提示和后台校验。正常登录将商品加入购物车展示购物车数量实时刷新。结算下单订单状态从“待付款”变为“已付款”此时去数据库查orders表展示状态字段变化。最后展示订单列表的“取消订单”操作状态从“待付款”变为“已取消”。我在实际演示中第 4 步是最出彩的。因为很多同学只会展示页面跳转而你直接打开 Navicat 执行SELECT * FROM orders;让老师看到status字段从 0 变成 1这比任何 PPT 都有说服力。如果被问到“订单状态是怎么管理的”就把第 4.3 节的isValidStatusChange方法拿出来讲说明你考虑到了非法状态跳转。5.2 常见报错排查运行这个项目时我遇到过三个高频报错这里直接列出来你的排查路径。报错信息原因解决方案java.lang.ClassNotFoundException: com.mysql.jdbc.Driver驱动包没覆盖检查 WEB-INF/lib 下是否有mysql-connector-java-5.1.x.jarMaven 项目则检查pom.xmldependencyCommunications link failureMySQL 地址或端口不对localhost:3306是否被防火墙拦截改用127.0.0.1测试HTTP Status 500 - javax.servlet.ServletExceptionJSP 页面中 EL 表达式或 JSTL 标签缺失检查是否存在jstl-1.2.jar同时确认web.xml中 servlet 版本与 Tomcat 匹配Unknown column create_time in field list实体类字段与数据库字段不一致查看Order.java里是否用了驼峰命名而数据库是下划线如果是请在 SQL 中用别名映射这里有一个最容易忽略的问题源码里如果把jdbc.properties和DBUtil.java放在不同包运行时读取不到资源会导致NullPointerException。我遇到过DBUtil.getConnection()返回null的情况原因就是配置文件的路径写错。用传统 JDBC 的同学建议在DBUtil中打印一下当前类加载路径便于定位。public static Connection getConnection() throws Exception { InputStream in DBUtil.class.getClassLoader() .getResourceAsStream(jdbc.properties); Properties props new Properties(); props.load(in); Class.forName(props.getProperty(jdbc.driver)); return DriverManager.getConnection( props.getProperty(jdbc.url), props.getProperty(jdbc.username), props.getProperty(jdbc.password)); }注意getResourceAsStream的路径不带开头的/代表从 classpath 根目录找。如果配置文件放在src/main/resources下这样写没问题。如果你把配置文件放在src/main/webapp/WEB-INF下那必须用ServletContext.getRealPath()去读两种方式不能混用。5.3 把这份课设改造成个人项目如果你不想直接交原封不动的代码这里提供三个低成本的改造点可以快速让项目变得“像你写的”。第一给商品表增加一个category字段并在首页加一个分类筛选标签页。这个改动只涉及前端一个循环和后端一条 SQL但答辩老师看到新的模块就会多问几句你答得上来就是加分项。第二把订单流程从“模拟支付”改成“货到付款”。这个更简单把status1的注释改成“已确认”然后去掉支付确认弹窗订单直接从待确认跳到待发货。第三融合 Python 技术栈的同学可以在同一份数据库上用 Flask 写一个管理后台通过 HTTP 接口调用 MySQL这样你就同时展示了两套 Web 技术栈。个人经验是先用 Java 商城跑通页面和订单再写一个简单的 Python 接口展示商品列表两边的数据库共用既显得项目工程量大又体现你的数据库设计能力。但要注意两个服务同时跑的时候MySQL 连接数会翻倍把连接池上限调大到 20 以上否则并发压力下会出现Too many connections的报错。本文还有配套的精品资源点击获取 网上商城课设95分实战拆解：Bootstrap前端与订单状态机设计
简介基于网上商城的WEB程序设计课程期末大作业项目是一份面向计算机相关专业在校学生、教师及初学者的完整项目资料覆盖Java与JSP核心知识也适合Python背景的学习者阅读参考。该项目已获导师指导认可答辩评审分达到95分代码经过测试运行成功功能可靠可直接用于课程设计、期末作业、毕业设计或项目初期演示。压缩包共146个文件大小仅3.1MB以75个Java类文件和24个JSP页面为主体涉及业务逻辑与动态页面渲染同时配有9个CSS、9个JavaScript文件美化交互界面包含图片素材、XML配置、属性文件及说明文档另有优化后的用户界面版本便于对照学习。目前已有57人学习或下载。通过这份资料读者既能获得一套可部署运行的商城项目源码也能借助附带文档厘清前后端交互与数据库配置思路学有余力者还可在现有代码上扩展购物车、订单管理等功能快速生成高质量课程成果。1. 这门课设凭什么拿 95 分网上商城项目的真实拆解拿到这份“网上商城”WEB 程序设计课程大作业时我第一反应是又一个 CRUD 展示页。但把源码和文档过了一遍后发现它拿高分是有道理的前端不是套模板而是用 Bootstrap 栅格和 Layer 弹窗把用户操作路径重新理了一遍后端不是堆 Servlet而是把商品、购物车、订单拆成了清晰的三层模型。这个项目解决的是“课程设计怎么从能跑变成能答辩”的问题适合正在做 Java 或 Python Web 课设、想抄一份成熟作业结构的学生也适合带毕设的指导老师用来给学生讲分层和状态机设计。下面我结合自己复现和改造这份源码的经历把运行环境、前端优化、后端核心逻辑和答辩前的坑位依次拆开讲。2. 跑起来之前环境准备与项目目录结构2.1 从 zip 到可运行项目完整目录识别解压后不要急着往 IDEA 里拖。这份资源里的zip包虽然叫“全部资料”但真正有用的只有两层。我一般会先看一眼根目录结构确认是传统 Web 工程还是 Maven 工程因为决定了后面导入方式完全不同。常见的课程设计目录长这样online-mall/ ├── src/ │ ├── main/ │ │ ├── java/ # 后端源码com.example.mall │ │ ├── resources/ # 配置文件jdbc.properties、mybatis.xml │ │ └── webapp/ # 前端页面jsp / static │ │ ├── static/ │ │ │ ├── css/ # bootstrap.css, bootstrap-theme.css │ │ │ ├── layer/ # layer.js 弹窗组件 │ │ │ └── images/ │ │ └── WEB-INF/ │ ├── test/ ├── sql/ │ └── mall.sql # 数据库初始化脚本 ├── docs/ │ ├── 需求文档.md │ ├── 数据库设计.md │ └── 答辩PPT提纲.md └── pom.xml 或 build.gradle如果你的压缩包解压后没有pom.xml而是直接是src和.classpath说明是传统 Dynamic Web Project。这时候不要用 Maven 刷新直接用 IDEA 的 Web 工程导入否则依赖会乱。我曾经因为混用了这两种导入方式导致 Tomcat 启动时找不到javax.servlet类白白排查了半小时。2.2 开发环境与依赖清单这个项目我是按 Java 8 Tomcat 8.5 MySQL 5.7 跑通的如果你机器上已经装了更高版本也能兼容但注意 Tomcat 10 之后javax.servlet变成了jakarta.servlet源码里如果用的是javax直接部署会报ClassNotFoundException。建议课设阶段就统一用窄版本省得答辩时环境抽风。组件推荐版本说明JDK1.8稳定几乎兼容所有老课设代码Tomcat8.5.x支持 Servlet 3.1/JSP 2.3和 javax 命名空间匹配MySQL5.7 / 8.0注意 8.0 要换驱动com.mysql.cj.jdbc.DriverMaven3.6如果项目有 pom.xml 就用它管理依赖浏览器Chrome / Edge因为前端用了 BootStrap 栅格建议 1024 以上宽度预览数据库连接配置一般在src/main/resources/jdbc.properties里。你需要改三处连接地址、账号、密码。我改完后的配置长这样jdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/online_mall?useUnicodetruecharacterEncodingutf8useSSLfalse jdbc.usernameroot jdbc.password123456这里有个坑useSSLfalse必须加因为 MySQL 5.7 默认 SSL 连接会报以下警告或直接失败characterEncodingutf8是给商品名、用户昵称这种中文数据准备的不加会出现乱码。如果你的 MySQL 版本是 8.0把 driver 改成com.mysql.cj.jdbc.Driver即可其它不变。2.3 初始化数据库与配置文件项目自带的sql/mall.sql里建了用户表、商品表、购物车表、订单表和订单项表表结构比较规范。导入数据库用命令行或 Navicat 都行我习惯用命令mysql -uroot -p123456 sql/mall.sql导入后用下面这条命令确认核心表是否都在USE online_mall; SHOW TABLES;正常会看到user,product,cart,orders,order_item这五张核心表。如果少了任何一张说明 SQL 脚本执行中出错回弹到刚才的命令检查有没有报错。这张表关系里要注意的是订单表没有直接存商品快照而是通过order_item关联商品 ID这个设计在你后续改价格或删除商品时会暴露问题后面第 4 章我会细说。一切就绪后Tomcat 里配置好 Artifact 启动项目打开浏览器访问http://localhost:8080/能跳到商城首页就算跑通了。3. 前端优化BootStrap 与 Layer 如何撑起商城主页面3.1 页面布局引入 BootStrap 的三种方式这份项目的前端资源里同时存在bootstrap.css、bootstrap.min.css、bootstrap-theme.css和bootstrap-theme.min.css说明原作者在调试时手动切换过压缩版和完整版。实际页面引入时只用一组即可推荐用 min 版本加载更快。三种常见引入方式如下!-- 方式一本地静态文件本课设采用 -- link relstylesheet hrefstatic/css/bootstrap.min.css !-- 方式二本地未压缩版调试用 -- link relstylesheet hrefstatic/css/bootstrap.css !-- 方式三CDN 引入需要联网答辩现场不推荐 -- !-- link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap3.4.1/dist/css/bootstrap.min.css --这里要说明答辩时现场网络不可控如果用了 CDN 而断网整个页面会变成裸样式所以课设项目一定要用本地静态文件。这个项目把 css、layer 都放进了static/目录说明作者是踩过这个坑的。bootstrap-theme.css是官方主题样式它给按钮和表格加了渐变效果但会和自定义style.css里的按钮覆盖规则冲突。我建议保留bootstrap.min.css和自定义style.css去掉 theme 版本因为默认的蓝灰渐变在商城里显得过时。3.2 商品列表栅格化与响应式商城主页最重要区域是商品展示区。原作者用 BootStrap 的container-fluidrowcol-md-*实现了响应式网格。下面是商品列表的典型写法div classcontainer-fluid div classrow div classcol-md-3 col-sm-4 col-xs-6 v-forproduct in productList div classthumbnail img src${product.imgUrl} alt商品图 div classcaption h4${product.name}/h4 p classtext-danger${product.price}/p button classbtn btn-primary onclickaddCart(${product.id}) 加入购物车 /button /div /div /div /div /div这里的核心参数是col-md-3 col-sm-4 col-xs-6中等屏每行 4 个小屏每行 3 个超小屏每行 2 个实现了一套不用写媒体查询的响应式规则。如果商品详情页需要展示图片和参数可以改用col-lg-4让大屏每行 3 个图片更大。注意BootStrap 3 的栅格是从左往右浮动如果商品数量不是 4 的倍数最后一行左侧对齐没问题但如果某一列商品标题过长撑破卡片需要给.thumbnail加min-height固定高度。我在实际运行中发现原作者没有做高度限制导致商品名超过 24 个汉字时会顶乱后面的按钮建议加上.thumbnail { min-height: 320px; }3.3 Layer 弹窗接管登录、购物车提示Layer 在这个项目里被用来做登录弹窗和操作反馈。相比浏览器原生alert和confirmLayer 弹窗支持自定义按钮、关闭回调体验更接近真实商城。我用layer.open封装了一个全局提示函数function showTip(msg, type) { layer.open({ content: msg, skin: layui-layer-molv, // 绿色主题适合成功提示 time: 2, // 2秒后自动关闭 end: function () { console.log(提示关闭可在这里刷新数据); } }); }time参数单位是秒设成2表示自动关闭skin控制主题色不传则默认灰色。在登录场景下作者没有用layer.msg而是用layer.open配合type: 1把登录表单嵌在弹窗里这样可以避免用户跳转页面。但要注意layer.js是一个依赖 jQuery 的组件如果你引入了layer.js却忘记在它前面引入 jQuery控制台会直接报layer is not defined。3.4 样式冲突排查这个项目里style.css出现了三次写入阶段这是灾难。我解开 zip 后看到目录里同时存在style.css、style.css和另一个同名文件实际是不同子目录的备份。当页面同时引用多个同名样式时后引用的会覆盖先引用的。排查方法很简单浏览器 F12 打开 Elements 面板看 Computed 样式里具体的声明来自哪个文件、哪一行。如果有两条相同的body背景色说明冲突了。我最终只保留了根目录static/css/style.css因为它是完整自定义样式另外两个是分页面的局部样式内容可以被前者覆盖。如果你拿到资源后发现页面错乱优先检查style.css中是否有!important覆盖了bootstrap.css的栅格宽度。最常见的现象是商品卡片宽度被固定死就是有人在样式里写了.col-md-3 { width: 300px; }。4. 后端核心逻辑购物车与订单状态机4.1 三层架构与包结构后端代码在src/main/java/com/example/mall下分成了controller、service、dao或mapper三个包这是最经典的分层。控制器只做参数接收和视图跳转业务逻辑写在 service数据库操作封装在 dao。具体包结构如下com.example.mall ├── controller/ │ ├── ProductController.java │ ├── CartController.java │ └── OrderController.java ├── service/ │ ├── ProductService.java │ ├── CartService.java │ └── OrderService.java ├── dao/ │ ├── ProductDao.java │ ├── CartDao.java │ └── OrderDao.java ├── entity/ │ ├── Product.java │ ├── User.java │ ├── Cart.java │ └── Order.java └── util/ └── DBUtil.java注意DBUtil是传统 JDBC 的连接工具类如果你看过代码会发现每个 Dao 里都在try块里获取 Connection。这种写法虽然繁琐但对课设来说有个好处便于打断点查看 SQL 执行路径比 MyBatis 自动生成的代理对象更直观。4.2 购物车实现思路购物车模块是整个项目的核心之一。原作者没有用 Session 存储购物车所有商品条目都存在数据库的cart表里这样可以保证用户关掉浏览器后购物车数据不丢。购物车添加商品的流程是这样的public boolean addToCart(int userId, int productId, int quantity) { // 先查该用户购物车中是否已有该商品 Cart cart cartDao.findByUserIdAndProductId(userId, productId); if (cart null) { // 没有则插入新记录 Cart newCart new Cart(userId, productId, quantity); return cartDao.insert(newCart) 0; } else { // 已有则数量累加 cart.setQuantity(cart.getQuantity() quantity); return cartDao.update(cart) 0; } }这里参数的顺序不能写反cartDao.findByUserIdAndProductId内部执行的是SELECT * FROM cart WHERE user_id ? AND product_id ?如果两个参数位置反了可能永远查不到记录导致每次添加都生成重复商品行。在CartController里接收前端请求时记得做用户是否登录的判断HttpSession session request.getSession(); User user (User) session.getAttribute(loginUser); if (user null) { response.sendRedirect(login.jsp); return; }这一个判断很关键否则未登录用户可以直接通过 URL 拼接cart?productId1把商品放入购物车后面下单时关联不到用户抛空指针异常。购物车列表页面通常还会附带“勾选商品结算”的功能。原作者的做法是给每个复选框加namecartIds提交时用request.getParameterValues(cartIds)获取一个String[]。这里要注意getParameterValues返回的是字符串数组你需要在 service 层转成整数列表再批量查询。常见错误是直接用数组去拼 SQL导致PreparedStatement的占位符数量不匹配。我建议用“拼接占位符”的方式而不是用IN拼接字符串这样能避免 SQL 注入。示例如下public ListCart getCartsByIds(String[] cartIdStr) { StringBuilder sql new StringBuilder(SELECT * FROM cart WHERE id IN (); for (int i 0; i cartIdStr.length; i) { if (i 0) sql.append(,); sql.append(?); } sql.append()); // 然后逐个 setInt }虽然看起来麻烦但这是你在答辩时被问到“如何防止 SQL 注入”时最完美的回答素材。4.3 订单状态机与支付回调解析订单表orders是这五张表里设计最出彩的部分。它有一个status字段用数字表示状态0 代表待付款1 代表已付款2 代表已发货3 代表已完成4 代表已取消。整个状态转换不能乱跳例如从 0 到 2 就是非法操作。原作者在OrderService中写了一个状态校验方法private boolean isValidStatusChange(int currentStatus, int targetStatus) { switch (currentStatus) { case 0: return targetStatus 1 || targetStatus 4; // 待付款 - 已付款/取消 case 1: return targetStatus 2; // 已付款 - 已发货 case 2: return targetStatus 3; // 已发货 - 已完成 case 3: return false; // 已完成不可再改 case 4: return false; // 已取消不可再改 default: return false; } }这个方法的逻辑很直观你可以从待付款跳到已付款但不能从待付款直接跳到已完成。在OrderController的支付接口里会先调用这个方法做合法性验证再执行更新操作。提到“支付”这个项目当然没有接入真实支付网关而是用了一个模拟接口用户点击“确认支付”后后端直接更新status 1同时扣减商品库存。这里有一个值得学习的细节扣库存必须和更新订单放在同一个数据库事务里。如果用传统 JDBC你需要手动管理事务Connection conn DBUtil.getConnection(); try { conn.setAutoCommit(false); orderDao.updateStatus(orderId, 1); productDao.decreaseStock(productId, quantity); conn.commit(); } catch (Exception e) { conn.rollback(); } finally { conn.setAutoCommit(true); DBUtil.close(conn); }setAutoCommit(false)之后两条 SQL 要么都成功要么都回滚否则会出现订单显示已支付但库存没减的情况。我在第一次运行这个项目时发现orderDao.updateStatus失败了但库存扣了就是因为作者当时把事务关闭了这个 bug 直到我加上事务后才修复。5. 项目验收与坑位复盘5.1 从 80 分到 95 分的演示话术答辩评分高不光是代码好还取决于你的演示顺序。我建议按这个流程走能覆盖老师最常考核的点先展示首页的响应式效果把浏览器窗口从宽拉到窄说明 BootStrap 栅格布局。注册一个新用户故意输入重复用户名展示前端 Layer 弹窗提示和后台校验。正常登录将商品加入购物车展示购物车数量实时刷新。结算下单订单状态从“待付款”变为“已付款”此时去数据库查orders表展示状态字段变化。最后展示订单列表的“取消订单”操作状态从“待付款”变为“已取消”。我在实际演示中第 4 步是最出彩的。因为很多同学只会展示页面跳转而你直接打开 Navicat 执行SELECT * FROM orders;让老师看到status字段从 0 变成 1这比任何 PPT 都有说服力。如果被问到“订单状态是怎么管理的”就把第 4.3 节的isValidStatusChange方法拿出来讲说明你考虑到了非法状态跳转。5.2 常见报错排查运行这个项目时我遇到过三个高频报错这里直接列出来你的排查路径。报错信息原因解决方案java.lang.ClassNotFoundException: com.mysql.jdbc.Driver驱动包没覆盖检查 WEB-INF/lib 下是否有mysql-connector-java-5.1.x.jarMaven 项目则检查pom.xmldependencyCommunications link failureMySQL 地址或端口不对localhost:3306是否被防火墙拦截改用127.0.0.1测试HTTP Status 500 - javax.servlet.ServletExceptionJSP 页面中 EL 表达式或 JSTL 标签缺失检查是否存在jstl-1.2.jar同时确认web.xml中 servlet 版本与 Tomcat 匹配Unknown column create_time in field list实体类字段与数据库字段不一致查看Order.java里是否用了驼峰命名而数据库是下划线如果是请在 SQL 中用别名映射这里有一个最容易忽略的问题源码里如果把jdbc.properties和DBUtil.java放在不同包运行时读取不到资源会导致NullPointerException。我遇到过DBUtil.getConnection()返回null的情况原因就是配置文件的路径写错。用传统 JDBC 的同学建议在DBUtil中打印一下当前类加载路径便于定位。public static Connection getConnection() throws Exception { InputStream in DBUtil.class.getClassLoader() .getResourceAsStream(jdbc.properties); Properties props new Properties(); props.load(in); Class.forName(props.getProperty(jdbc.driver)); return DriverManager.getConnection( props.getProperty(jdbc.url), props.getProperty(jdbc.username), props.getProperty(jdbc.password)); }注意getResourceAsStream的路径不带开头的/代表从 classpath 根目录找。如果配置文件放在src/main/resources下这样写没问题。如果你把配置文件放在src/main/webapp/WEB-INF下那必须用ServletContext.getRealPath()去读两种方式不能混用。5.3 把这份课设改造成个人项目如果你不想直接交原封不动的代码这里提供三个低成本的改造点可以快速让项目变得“像你写的”。第一给商品表增加一个category字段并在首页加一个分类筛选标签页。这个改动只涉及前端一个循环和后端一条 SQL但答辩老师看到新的模块就会多问几句你答得上来就是加分项。第二把订单流程从“模拟支付”改成“货到付款”。这个更简单把status1的注释改成“已确认”然后去掉支付确认弹窗订单直接从待确认跳到待发货。第三融合 Python 技术栈的同学可以在同一份数据库上用 Flask 写一个管理后台通过 HTTP 接口调用 MySQL这样你就同时展示了两套 Web 技术栈。个人经验是先用 Java 商城跑通页面和订单再写一个简单的 Python 接口展示商品列表两边的数据库共用既显得项目工程量大又体现你的数据库设计能力。但要注意两个服务同时跑的时候MySQL 连接数会翻倍把连接池上限调大到 20 以上否则并发压力下会出现Too many connections的报错。本文还有配套的精品资源点击获取