版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40788630/article/details/85632393
首先看一下首页的实现效果图
可以在首页上看到几个模块:
导航栏+销售排行+公告栏+最新商品+人气商品(在销售排行下面,没有截到)
这些模块需要用到一些搜索的功能,
实现这些模块的顺序:持久层——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()" /> <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是我的工程名
测试页面如下: