（SSM练习）网上商城项目（十一）——首页实现+导航栏+销售排行+人气排行+最新商品+公告栏

首先看一下首页的实现效果图

可以在首页上看到几个模块：

导航栏+销售排行+公告栏+最新商品+人气商品（在销售排行下面，没有截到）

这些模块需要用到一些搜索的功能，

实现这些模块的顺序：持久层——dao层——service层——controller层——jsp层。由于持久化类在之前实现后台系统时已经全部完成了，所以这此从dao层开始：

一、实现dao层

dao层是由接口IndexDao和其对应的同名的数据库映射文件

接口中包含了六个方法，分别是：查看销售排行、查看人气排行、公告栏、查看最新商品、通过id查询商品、查询功能

package com.dao;

import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

import com.po.Goods;

@Repository("indexDao")
@Mapper
public interface IndexDao {
	public List<Map<String, Object>> getSaleOrder();
	public List<Map<String, Object>> getFocusOrder();
	public List<Map<String, Object>> selectNotice();
	public List<Map<String, Object>> getLastedGoods(Goods goods);
	public Goods selectGoodsById(Integer id);
	public List<Goods> search(String mykey);
}

其对应的同名映射文件，其详细代码如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.dao.IndexDao">
    <!-- 查询销售排行 -->
    <select id="getSaleOrder" resultType="map">
        select sum(od.SHOPPINGNUM) shopnumber,
				gd.id id, 
				gd.GNAME gname, 
				gd.GOPRICE goprice,  
				gd.GRPRICE grprice, 
				gd.GPICTURE  gpicture
		from GOODSTABLE gd   LEFT JOIN ORDERDETAIL  od  ON od.goodstable_id=gd.id
				 group by 
				 gd.id, 
				 gd.GNAME, 
				 gd.GOPRICE, 
				 gd.GRPRICE, 
				 gd.GPICTURE 
		order by shopnumber desc limit 10
    </select>
    <!-- 人气排行 -->
    <select id="getFocusOrder" resultType="map">
        select count(ft.goodstable_id) fn, gt.id id, gt.gname gname, 
		gt.grprice grprice, gt.gpicture gpicture 
		from GOODSTABLE gt 
  		LEFT JOIN FOCUSTABLE ft  ON ft.goodstable_id=gt.id   
		group by gt.id, gt.gname, gt.grprice, gt.gpicture
 		order by fn desc limit 10
    </select>
    <!-- 公告栏 -->
    <select id="selectNotice" resultType="Notice">
        select * from noticetable order by ntime desc
    </select>
    <!-- 最新商品 -->
    <select id="getLastedGoods" resultType="Goods" parameterType="Goods">
        select gt.*, gy.typename from GOODSTABLE gt,GOODSTYPE gy where gt.goodstype_id = gy.id 
		<if test="id != 0">
			and gy.id = #{id} 
		</if>
		order by  gt.id desc limit 15 
    </select>
    <!-- 根据id查询一个商品 -->
    <select id="selectGoodsById" resultType="Goods" parameterType="Integer">
        select gt.*,gy.typename from goodstable gt,goodstype gy where gt.id=#{id} and gt.goodstype_id = gy.id
    </select>
    <!-- 首页搜索 -->
    <select id="searh" resultType="Goods" parameterType="String">
        select gt.*, gy.typename from GOODSTABLE gt,GOODSTYPE gy where gt.goodstype_id = gy.id 
		and gt.gname like concat('%',#{mykey},'%')
    </select>
</mapper>

二、实现service层

此层是由IndexService接口和其实现类组成，

其接口中包含六个方法，分别是：访问主页、转发至注册页、转发至登录页、查看商品详情、查看公告、搜索栏搜索功能

接口详细代码如下所示：

package com.service.before;

import javax.servlet.http.HttpSession;

import org.springframework.ui.Model;

import com.po.Goods;

public interface IndexService {
    public String before(Model model,HttpSession session,Goods goods);
    public String toRegister(Model model);
    public String toLogin(Model model);
    public String goodsDetail(Model model,Integer id);
    public String selectANotice(Model model,Integer id);
    public String search(Model model,String mykey);
}

其接口实现类：

package com.service.before;

import java.util.List;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.ui.Model;

import com.dao.AdminNoticeDao;
import com.dao.AdminTypeDao;
import com.dao.IndexDao;
import com.po.Buser;
import com.po.Goods;
import com.po.Notice;
@Service("indexService")
@Transactional
public class IndexServiceImpl implements IndexService {
    @Autowired
    private IndexDao indexDao;
    @Autowired
    private AdminTypeDao adminTypeDao;
    @Autowired
    private AdminNoticeDao adminNoticeDao;
	@Override
	public String before(Model model, HttpSession session, Goods goods) {
		session.setAttribute("goodsType", adminTypeDao.selectGoodsType());
		model.addAttribute("salelist", indexDao.getSaleOrder());
		model.addAttribute("focuslist",indexDao.getFocusOrder());
		model.addAttribute("noticelist", indexDao.selectNotice());
		if (goods.getId() == null) {
			goods.setId(0);
		}
		model.addAttribute("lastedlist", indexDao.getLastedGoods(goods));
		return "before/index";
	}

	@Override
	public String toRegister(Model model) {
		model.addAttribute("rbuser",new Buser());
		return "before/register";
	}

	@Override
	public String toLogin(Model model) {
		model.addAttribute("lbuser",new Buser());
		return "before/login";
	}

	@Override
	public String goodsDetail(Model model, Integer id) {
		Goods goods = indexDao.selectGoodsById(id);
		model.addAttribute("goods", goods);
		return "before/goodsdetail";
	}

	@Override
	public String selectANotice(Model model, Integer id) {
		Notice notice = adminNoticeDao.selectANotice(id);
		model.addAttribute("notice", notice);
		return "admin/noticeDetail";
	}

	@Override
	public String search(Model model, String mykey) {
		List<Goods> list = indexDao.search(mykey);
		model.addAttribute("searchlist",list);
		return "before/searchResult";
	}

}

三、实现controller层

在com.controller.before包中创建IndexController，其详细代码如下所示：

package com.controller.before;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.po.Goods;
import com.service.before.IndexService;

@Controller
public class IndexController {
    @Autowired
    private IndexService indexService;
    //首页
    @RequestMapping("/before")
    public String before(Model model,HttpSession session,Goods goods) {
    	return indexService.before(model, session, goods);
    }
    @RequestMapping("/toRegister")
    public String toRegister(Model model) {
    	return indexService.toRegister(model);
    }
    @RequestMapping("/toLogin")
    public String toLogin(Model model) {
    	return indexService.toLogin(model);
    }
    //转到商品详情页面
    @RequestMapping("goodsDetail")
    public String goodsDetail(Model model,Integer id) {
    	return indexService.goodsDetail(model, id);
    }
    //首页搜索
    @RequestMapping("/search")
    public String search(Model model,String mykey) {
    	return indexService.search(model, mykey);
    }
}

四、jsp层实现，

此层需要编写四个jsp文件，分别是index.jsp这个是首页的基本组成文件，head.jsp这个是导航栏的jsp文件，同时还要实现goodsDetail.jsp这个是展示商品详情的jsp文件

index.jsp详细代码如下所示：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<jsp:include page="head.jsp"></jsp:include>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>首页</title>
<link href="css/before/daohang.css" rel="stylesheet" type="text/css" />
<link href="css/before/common.css" rel="stylesheet" type="text/css" />
<link href="css/before/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
		function openNotice(url){
			window.open (url, '站内公告', 'height=400, width=400, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');
		}
</script>
</head>
<body>
	<div class="blank"></div>
	<div class="block clearfix">
		<div class="AreaL">
			<!--销售排行-->
			<div class="box">
				<div class="box_2">
					<div class="top10Tit">
						<span>销售排行</span>
					</div>
					<div class="top10List clearfix">
						<c:forEach items="${salelist }" var="sg" varStatus="status">
							<ul class="clearfix">
								<img class="iteration" src="images/before/top_${status.index+1 }.gif" />
								<li class="topimg">
								<a href="goodsDetail?id=${sg.id }"> 
									<img class="samllimg" alt="" src="logos/${sg.gpicture}" /></a></li>
								<li class="iteration1">
								<a href="goodsDetail?id=${sg.id }">${sg.gname }</a><br />
								 售价：<font class="f1">￥${sg.grprice }元</font><br /></li>
							</ul>
						</c:forEach>
					</div>
				</div>
			</div>
			<!--销售排行 end -->
			<!--人气排行-->
			<div class="blank5"></div>
			<div class="box">
				<div class="box_2">
					<div class="top10Tit">
						<span>人气排行</span>
					</div>
					<div class="top10List clearfix">
					<c:forEach items="${focuslist }" var="sg" varStatus="status">
						<ul class="clearfix">
							<img class="iteration" src="images/before/top_${status.index+1 }.gif" />
							<li class="topimg">
							<a href="goodsDetail?id=${sg.id }"> 
								<img class="samllimg" alt="" src="logos/${sg.gpicture}" /></a></li>
							<li class="iteration1">
							<a href="goodsDetail?id=${sg.id }">${sg.gname }</a><br />
							 售价：<font class="f1">￥${sg.grprice }元</font><br /></li>
						</ul>
					</c:forEach>
					</div>
				</div>
			</div>
			<!--人气排行 end -->
		</div>
		<div class="AreaR">
			<div class="AreaR">
				<div class="AreaM clearfix">
					<div id="focus">
						<img src="images/before/540.jpg" />
					</div>
				</div>
				<div class="AreaRR clearfix">
					<!--公告栏-->
					<div class="box">
						<div class="box_1">
							<div class="title_bt">
								<h3>公告栏</h3>
							</div>
							<div class="post_list ared">
								<ul>
								<c:forEach items="${noticelist}" var="nt">
									<li><a href="javascript:openNotice('/testshop1/selectANotice?id=${nt.id }');">${nt.ntitle }</a></li>
								</c:forEach>
								</ul>
							</div>
						</div>
					</div>
					<!--公告栏 end-->
				</div>
			</div>
			<div class="AreaR">
				<!--最新商品列表-->
				<div class="blank5"></div>
				<div class="box">
					<div class="box_color ared">
						<div class="title_bt">
							<span><a href="#">更多</a></span>
							<h3>最新商品</h3>
						</div>
						<div class="itemgood_nr clearfix">
							<ul>
								<c:forEach items="${lastedlist }" var="sg">
									<li>
										<div>
											<p class="pic">
												<a href="goodsDetail?id=${sg.id }">
												<img src="logos/${sg.gpicture}" /></a>
											</p>
											<p class="wz">
												<strong><a href="goodsDetail?id=${sg.id }">${sg.gname }</a></strong>
												<em>现价:<span>￥${sg.grprice}</span></em>
											</p>
										</div>
									</li>
								</c:forEach>
							</ul>
						</div>
					</div>
				</div>
				<!--最新商品列表end-->
			</div>
		</div>
	</div>
</body>
</html>

head.jsp详细代码如下所示：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>首页</title>
<link href="css/before/daohang.css" rel="stylesheet" type="text/css" />
<link href="css/before/common.css" rel="stylesheet" type="text/css" />
<link href="css/before/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	function clearValue(){
		document.myForm.mykey.value = "";
	}
</script>
</head>
<body>
	<div class="all_zong">
		<!--最上面 灰色条部分-->
		<div class="all_zong_top">
			<div class="all_zong_top_right a8c">
				<table border="0" cellspacing="0" cellpadding="0" class="main_login">
					<tr>
						<td>
							<p id="content">
								<c:if test="${bruser!=null}">欢迎 ${bruser.bemail }</c:if>
								<c:if test="${bruser==null}"><a href="toLogin">登录</a></c:if>
							</p>
						</td>
						<td>
							<p>
								<a href="toRegister">注册</a>
							</p>
						</td>
						<td><span class="xx">|</span><a href="userCenter">用户中心</a><span
							class="xx">|</span></td>
						<!-- 没有登录 -->
						<c:if test="${bruser!= null}">	
						<td><a href="user/exit">退出</a><span
							class="xx">|</span></td>
						</c:if>
					</tr>
				</table>
			</div>
		</div>
		<!--end-->
		<!--logo 搜索-->
		<div class="all_zong_logo">
			<div class="all_zong_logo2">
				<img src="images/before/mylogo1.png" />
			</div>
			<div class="back_search">
				<div class="back_search_red">
					<form action="search" name="myForm" method="post">
						<div class="div2">
							<input type="text" name="mykey" class="txt" value="请输入您要查询的内容"  onfocus="clearValue()" />
						</div>
						<div class="div1">
							<input type="submit" class="an"  value="搜索" />
						</div>
					</form>
				</div>
			</div>
			<!--end-->
		</div>
		<!--红色 导航-->
		<div class="skin_a">
			<div class="front_daohangbj">
				<div class="all_zong">
					<div class="front_daohang">
						<ul>
							<li class="backbj"><a href="before?id=0">首页</a></li>
							<!-- 显示商品类型 -->
							<c:forEach items="${goodsType}" var="g">
								<li><a href="before?id=${g.id }">
								${g.typename }</a>
								</li>
							</c:forEach>
							<li class="buy">
								<p class="car">
									<a href="cart/selectCart">购物车</a>
								</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!--红色 导航 end-->
	</div>
</body>
</html>

goodsDetail.jsp其详细代码如下所示：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<jsp:include page="head.jsp"></jsp:include>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>商品详情</title>
<link href="css/before/daohang.css" rel="stylesheet" type="text/css" />
<link href="css/before/common.css" rel="stylesheet" type="text/css" />
<link href="css/before/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
	function goCart() {
		document.putcartform.submit();
	}
	function gofocus(gno) {
		window.location.href = "/testshop1/cart/focus?id=" + gno;
	}
</script>
</head>
<body>
	<form action="cart/putCart" name="putcartform" method="post">
		<div class="blank"></div>
		<div class="block clearfix">
			<div class="location ared">
				当前位置：<a href="#">首页</a> > <a href="#">商品详情</a>
			</div>
			<div class="blank"></div>
			<div id="goodsInfo">
				<div class="imgInfo">
					<input type="hidden" name="id"
						value="${goods.id }"/><img
						src="logos/${goods.gpicture}"
						width="230px" height="230px" />
				</div>
			</div>
			<!--商品表述-->
			<div class="goods_desc">
				<div class="bt">
					${goods.gname }
				</div>
				<div class="goods_show">
					<ul>
						<li><span>价格:</span> <strong class="yj">${goods.goprice }元</strong></li>
						<li><span>折扣价:</span><strong
							class="xj">${goods.grprice }元</strong>
						</li>
						<li><span>类型:</span> ${goods.typename }</li>
						<li><span>购买数量:</span><input type="text" name="shoppingnum"
							class="good_txt" value="1" /> (库存${goods.gstore }件)</li>
					</ul>
				</div>
				<p class="bottom10 top5">
					<img src="images/before/goods_ann2.gif" style="cursor: pointer"
						onclick="goCart()" />&nbsp;&nbsp;<input type="button"
						style="cursor: pointer" class="sh_bnt2"
						onclick="gofocus('${goods.id }')"
						value="关注" />
				</p>${msg }
			</div>
			<!--end-->
			</div>  
	</form>
</body>
</html>

五、测试

将项目发送到tomcat，重启tomcat，在浏览器网址栏输入http://localhost:8080/testshop1/before，其中testshop1是我的工程名

测试页面如下：