当前位置： 首页 > news >正文

【SSM】第二章 网上蛋糕项目商城-首页

news 2025/7/27 10:08:07

概念

本文在上一文章搭建完数据库，以及创建好JavaWeb项目之后，导入项目所需的jar包，以及前端静

态文件后，对SSM的功能开发。

开发流程

在项目的web文件夹下，创建to.jsp页面，作为当前项目的默认首页面，其代码如下：

<%--Created by IntelliJ IDEA.User: yhhDate: 2025/6/13Time: 9:33To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title>
</head>
<body><%request.getRequestDispatcher("/home.do").forward(request,response);%>
</body>
</html>

并通过web.xml文件中进行设置该页面作为启动页

以上启动页中代码的作用是当tomcat服务器启动后，默认进行to.jsp页面，则通过请求转发给controller控制器发送请求地址为"/home.do",则我们接下来需要再controller包中创建HomeController类作为主页控制器接收浏览器的请求。其代码如下：

package com.cakeshop.controller;import com.cakeshop.entity.User;
import com.cakeshop.service.IGoodsService;
import com.cakeshop.service.ITypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.List;
import java.util.Map;@Controller
public class HomeController {@AutowiredITypeService typeService;@AutowiredIGoodsService goodsService;@RequestMapping("/home.do")public String home(HttpSession session, HttpServletRequest request){session.setAttribute("typeList",typeService.getAllType());request.setAttribute("scroll",goodsService.getScrollGood());request.setAttribute("newList",goodsService.getGoodsList(3));request.setAttribute("hotList",goodsService.getGoodsList(2));return "index";}
}

在以上代码中通过@Controller表示将该类作为控制器，通过@Autowired自动加载处理产品分类的业务逻辑层和商品的业务逻辑层，等下我们需要建立起来，接着通过@RequestMapping("/home.do")接收to.jsp页面的请求，并执行下面的方法，在该方法中将业务逻辑层返回的产品分类集合，首页滚动栏上的条幅商品集合，新品商品集合，热门商品集合分别保存在session和request对象中，以供首页页面显示数据，最后跳转至index.jsp页面。

接着我们需要在service包中创建ITypeService接口和IGoodsService接口，其代码如下

package com.cakeshop.service;import com.cakeshop.entity.Type;
import org.apache.ibatis.annotations.Param;import java.util.List;public interface ITypeService {List<Type> getAllType();}

package com.cakeshop.service;import com.cakeshop.entity.Goods;
import com.cakeshop.entity.Order;
import com.cakeshop.entity.OrderItem;
import org.apache.ibatis.annotations.Param;import java.util.List;
import java.util.Map;public interface IGoodsService {List<Map<String,Object>> getScrollGood();List<Map<String,Object>> getGoodsList(int recommendType);}

则因接口中都是未实现的方法，我们需要对接口中定义的方法进行实现并执行对应的功能代码，我们在service包中新建imp包，作为存储所有该service中的接口的实现类。对应于ITypeService接口的实现类为TypeServiceImp，对应于IGoodsService接口的实现类为GoodsServiceImp，其代码如下：

package com.cakeshop.service.imp;import com.cakeshop.dao.ITypeDao;
import com.cakeshop.entity.Type;
import com.cakeshop.service.ITypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;
@Service(value = "typeService")
public class TypeServiceImp implements ITypeService {@AutowiredITypeDao typeDao;@Overridepublic List<Type> getAllType() {return typeDao.GetAllType();}
}

package com.cakeshop.service.imp;import com.cakeshop.dao.IGoodsDao;
import com.cakeshop.entity.Goods;
import com.cakeshop.entity.Order;
import com.cakeshop.entity.OrderItem;
import com.cakeshop.service.IGoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.text.SimpleDateFormat;
import java.util.List;
import java.util.Map;
@Service(value = "goodsService")
public class GoodsServiceImp implements IGoodsService {@AutowiredIGoodsDao goodsDao;@Overridepublic List<Map<String, Object>> getScrollGood() {return goodsDao.getScrollGood();}@Overridepublic List<Map<String, Object>> getGoodsList(int recommendType) {return goodsDao.getGoodsList(recommendType);}}

从以上代码中，我们看到业务逻辑层只是作为数据代码的加工，而并非执行获取数据，对于数据的获取需要数据访问层去执行，我们接着需要在dao层中创建ITypeDao和IGoodsDao两个接口，其对应的代码如下：

package com.cakeshop.dao;import com.cakeshop.entity.Type;
import org.apache.ibatis.annotations.*;import java.util.List;public interface ITypeDao {@Select("select * from type")public List<Type> GetAllType();}

package com.cakeshop.dao;import com.cakeshop.entity.Goods;
import com.cakeshop.entity.Recommend;
import org.apache.ibatis.annotations.*;import java.util.List;
import java.util.Map;public interface IGoodsDao {@Select("select g.id,g.name,g.cover,g.price  from recommend r,goods g where r.goods_id=g.id and r.type=1")List<Map<String,Object>> getScrollGood();@Select("select g.id,g.name,g.cover,g.price,t.name typename from recommend r,goods g,type t where type=#{type} and r.goods_id=g.id and g.type_id=t.id")List<Map<String,Object>> getGoodsList(@Param("type") int recommendType);}

以上代码中，根据不同方法对应的功能要求执行不同的查询语句，分别做了对产品分类表的查询，并将查询的数据封装在Type实体类的List集合中，查询条幅商品，新品商品，热门商品并将数据以Map集合的结构封装在List集合中。

最终通过控制层，业务逻辑层以及数据访问层的访问，将需要展示给用户的数据从mysql数据库中查询出来并转发给index.jsp页面上呈现出来，其index.jsp页面代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><!DOCTYPE html>
<html>
<head><title>首页</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link type="text/css" rel="stylesheet" href="css/bootstrap.css"><link type="text/css" rel="stylesheet" href="css/style.css"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="layer/layer.js"></script><script type="text/javascript" src="js/cart.js"></script>
</head>
<body>
<!--header-->
<jsp:include page="/header.jsp"><jsp:param name="flag" value="1"></jsp:param>
</jsp:include>
<!--banner--><div class="banner"><div class="container"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators" id="olnum"><c:forEach items="${scroll}" var="g" varStatus="status"><c:choose><c:when test="${status.first}"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li></c:when><c:otherwise><li data-target="#carousel-example-generic" data-slide-to="${status.index}"></li></c:otherwise></c:choose></c:forEach></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox" id="lunbotu" style="width: 1242px; height: 432px;"><c:forEach items="${scroll}" var="g" varStatus="status"><c:choose><c:when test="${status.first}"><div class="item active"><h2 class="hdng"><a href="/goods_detail.do?id=${g.id}">${g.name}</a><span></span></h2><p>今日精选推荐</p><a class="banner_a" href="/goods_buy.do?id=${g.id}&url=home.do" >加入购物车</a><div class="banner-text"><a href="/goods_detail.do?id=${g.id}"><img src="${g.cover}" alt="${g.name}" width="350" height="350"></a></div></div></c:when><c:otherwise><div class="item"><h2 class="hdng"><a href="/goods_detail.do?id=${g.id}">${g.name}</a><span></span></h2><p>今日精选推荐</p><a class="banner_a" href="goods_buy.do?id=${g.id}&url=home.do" >加入购物车</a><div class="banner-text"><a href="/goods_detail.do?id=${g.id}"><img src="${g.cover}" alt="${g.name}" width="350" height="350"></a></div></div></c:otherwise></c:choose></c:forEach></div></div></div>
</div><!--//banner--><div class="subscribe2"></div><!--gallery-->
<div class="gallery"><div class="container"><div class="alert alert-danger">热销推荐</div><div class="gallery-grids"><c:forEach items="${hotList}" var="g"><div class="col-md-4 gallery-grid glry-two"><a href="/goods_detail.do?id=${g.id}"><img src="${g.cover}" class="img-responsive" alt="${g.name}" width="350" height="350"/></a><div class="gallery-info galrr-info-two"><p><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span><a href="/goods_detail.do?id=${g.id}">查看详情</a></p><a class="shop" href="goods_buy.do?id=${g.id}&url=home.do">加入购物车</a><div class="clearfix"></div></div><div class="galy-info"><p>${g.typeName} > ${g.name}</p><div class="galry"><div class="prices"><h5 class="item_price">¥ ${g.price}</h5></div><div class="clearfix"></div></div></div></div></c:forEach></div><div class="clearfix"></div><div class="alert alert-info">新品推荐</div><div class="gallery-grids"><c:forEach items="${newList}" var="g"><div class="col-md-3 gallery-grid "><a href="/goods_detail.do?id=${g.id}"><img src="${g.cover}" class="img-responsive" alt="${g.name}"/></a><div class="gallery-info"><p><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span><a href="/goods_detail.do?id=${g.id}">查看详情</a></p><a class="shop" href="goods_buy.do?id=${g.id}&url=home.do" >加入购物车</a><div class="clearfix"></div></div><div class="galy-info"><p>${g.typeName} > ${g.name}</p><div class="galry"><div class="prices"><h5 class="item_price">¥ ${g.price}</h5></div><div class="clearfix"></div></div></div></div></c:forEach></div></div>
</div>
<!--//gallery--><!--subscribe-->
<div class="subscribe"></div>
<!--//subscribe--><!--footer-->
<jsp:include page="/footer.jsp"></jsp:include>
</body>
</html>

在index.jsp页面中包含的header.jsp和foot.jsp头部和底部页面，其代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="header"><div class="container"><nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><h1 class="navbar-brand"><a href="/home.do"></a></h1></div><!--navbar-header--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="/home.do" <c:if test="${param.flag==1}">class="active"</c:if>>首页</a></li><li class="dropdown"><a href="#" class="dropdown-toggle <c:if test="${param.flag==2}">active</c:if>" data-toggle="dropdown">商品分类<b class="caret"></b></a><ul class="dropdown-menu multi-column columns-2"><li><div class="row"><div class="col-sm-12"><h4>商品分类</h4><ul class="multi-column-dropdown"><li><a class="list" href="/goods_list.do">全部系列</a></li><c:forEach items="${typeList}" var="t"><li><a class="list" href="/goods_list.do?typeid=${t.id}">${t.name}</a></li></c:forEach></ul></div></div></li></ul></li><li><a href="/goodsrecommend_list.do?type=2" <c:if test="${param.flag==3 && t==2}">class="active"</c:if>>热销</a></li><li><a href="/goodsrecommend_list.do?type=3" <c:if test="${param.flag==3 && t==3}">class="active"</c:if>>新品</a></li><c:choose><c:when test="${empty user }"><li><a href="/user_register.jsp" <c:if test="${param.flag==10 }">class="active"</c:if>>注册</a></li><li><a href="/user_login.jsp" <c:if test="${param.flag==9 }">class="active"</c:if>>登录</a></li></c:when><c:otherwise><li><a href="/order_list.do" <c:if test="${param.flag==5 }">class="active"</c:if>>我的订单</a></li><li><a href="/user_center.jsp" <c:if test="${param.flag==4 }">class="active"</c:if>>个人中心</a></li><li><a href="/user_logout.do" >退出</a></li></c:otherwise></c:choose><c:if test="${!empty user && user.isadmin }"><li><a href="/admin/index.jsp" target="_blank">后台管理</a></li></c:if></ul><!--/.navbar-collapse--></div><!--//navbar-header--></nav><div class="header-info"><div class="header-right search-box"><a href="javascript:;"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a><div class="search"><form class="navbar-form" action="/goods_search.do"><input type="text" class="form-control" name="keyword"><button type="submit" class="btn btn-default <c:if test="${param.flag==7 }">active</c:if>" aria-label="Left Align">搜索</button></form></div></div><div class="header-right cart"><a href="/goods_cart.do"><span class="glyphicon glyphicon-shopping-cart <c:if test="${param.flag==8 }">active</c:if>" aria-hidden="true"><span class="card_num"><c:choose><c:when test="${empty total}">0</c:when><c:otherwise>${total}</c:otherwise></c:choose></span></span></a></div><div class="clearfix"> </div></div><div class="clearfix"> </div></div>
</div>
<%@ page contentType="text/html;charset=UTF-8" language="java" %><div class="footer"><div class="container"><div class="text-center"></div></div>
</div>

其最终页面呈现效果如下：

http://www.lryc.cn/news/600727.html

相关文章：

  • lottie 动画使用
  • MySQL数据库本地迁移到云端完整教程
  • 《每日AI-人工智能-编程日报》--2025年7月26日
  • 使用Netty搭建一个网络聊天室
  • Java面试题及详细答案120道之（041-060）
  • 图片查重从设计到实现（5）Milvus可视化工具
  • 力扣872. 叶子相似的树
  • 如何在 Ubuntu 24.04 或 22.04 中创建自定义 Bash 命令
  • Sklearn 机器学习 数值指标 entropy熵函数
  • 认识泛型、泛型类和泛型接口
  • 好的编程语言设计是用简洁清晰的原语组合复杂功能
  • 消息缓存系统
  • JavaEE初阶第十一期：解锁多线程，从 “单车道” 到 “高速公路” 的编程升级（九）
  • 《计算机组成原理与汇编语言程序设计》实验报告二 基本数字逻辑及汉字显示
  • 告别配置混乱！Spring Boot 中 Properties 与 YAML 的深度解析与最佳实践
  • 非定长滑动窗口(持续更新)
  • Netty中AbstractChannelHandlerContext源码分析
  • C++连接MySQL完整教程
  • easy-llm-cli的安装和使用
  • Ubuntu安装node-red
  • 广东省省考备考（第五十七天7.26）——数量、言语（强化训练）
  • 【CTF-PWN】【攻防世界题目pwnstack】python攻击脚本ret（checksec、pwngdb、IDA）（含“/bin/sh“）
  • Traffic Lights set的使用
  • AI Agent开发学习系列 - langchain之LCEL(5)：如何创建一个Agent？
  • Ansible列出常见操作系统的发行版，Ansible中使用facts变量的两种方式
  • 定义域第一题
  • InfluxDB Flux 查询协议实战应用（二）
  • 修改site-packages位置与pip配置
  • 网络：应用层
  • docker安装问题汇总