ssm-Student Mall-The tenth day of the project

3. Product display

Adjust the page: add hyperlinks to the three-level classification on the index.jsp page

<li><a href="../goods/showSearch.do?categoryId=${computer.id}">${computer.name}</a></li>

Adjust the GoodsController controller class

给方法添加参数
@RequestMapping("/showSearch.do")
public String showSearch(Integer categoryId){

    return "search";
}

3.1 Product Display - Persistence Layer

3.2 Product Display - Business Layer

3.3 Product Display - Controller Layer

public String showSearch(Integer categoryId,ModelMap map){
    //调用业务层的方法,返回集合
    List<Goods> goodsList =
    goodsService.getGoodsByCategoryId(categoryId, 0, 12);
    //把集合设置到map
    map.addAttribute("goodsList",goodsList);        

    return "search";
}

3.4 Product display - page

Display product information in search.jsp page

<div id="wrap">
    <c:forEach items="${goodsList}" var="goods">
                <div class="lf box" id="d1">
                    <div class="info">
                    <div class="img pic">
                        <img src="..${goods.image}" alt="" onclick="toItemInfo(${item.id})" />
                    </div>          
                    <div class="describe">
                        <p onclick="toItemInfo(${item.id})">${goods.title}</p>
                        <span class="price"><b>¥</b><span class="priceContent">${goods.price}</span></span>
                        <span class="addCart"><img id="collect" src="../images/search/care.png" alt="" /><a href="javascript:void(0);" class="add_cart">加入购物车</a></span>
                        <!--<span class="succee" style="display: none"> 
                            <img src="/images/search/product_true.png" alt="" /> 
                            <span>已移入购物车</span>
                        </span>-->
                    </div>
                    </div>
                </div>
        </c:forEach>        
            </div>

Adjust Pages: Show Pagination

<div  align="right" style="margin-right: 80px">
共28中商品,共4页|1 2 3 4

Display how many records are defined in the GoodsMapper interface

Integer selectCount(Integer categoryId);

In the GoodsMapper.xml file, define the select node to complete the query function

<select id="selectCount" resultType="java.lang.Integer">

    select 
        count(*)
    from 
        t_goods;
    where
        category_id=#{categoryId}

</select>

Define methods in the IGoodsService interface

Integer getCount(Integer categoryId);

In the GoodsService implementation class, call the method of the persistence layer and send back the value

In the controller method showSearch(), call the business layer method, getCount(), get the number of records, and set the value in the map

//在map设置记录数
    map.addAttribute("count",goodsService.getCount(categoryId));

Display the number of records on the search.jsp page

<div  align="right" style="margin-right: 80px">
共${count}种商品,共4页|1 2 3 4

Complete code for page pagination processing

<div  align="right" style="margin-right: 80px">
共${count}种商品,共${pages}页|
<c:forEach var="i" begin="1" end="${pages}">
  <a 
  href="../goods/showSearch.do?categoryId=${categoryId}&page=${i}"
  <c:if test="${currentPage==i}">
  style="color:#ff0000"
  </c:if>
  >
  ${i}
  </a>
</c:forEach>

4. Product Details

4.1 Product Details Page - Persistence Layer

Define methods in GoodsMapper interface

Goods selectByGoodsId(Integer id);

Write select statement in GoodsMapper.xml

<select id="selectByGoodsId" resultType="...">

    select
        ....
    from
        t_goods
    where
        id=#{id}

</select>

test:

4.2 Product Details Page - Business Layer

Define methods in the IGoodsService interface

Goods getGoodsById(Integer id);

Implement a method in the GoodsService class to return the object of the persistence layer

test:

4.3 Product Details Page - Controller Layer

/goods/goodsInfo.do
请求参数:goodsId,categoryId
请求方式:GET
响应方式:转发
@
public String goodsInfo(Integer goodsId,Integer categoryId,ModelMap map){
    //1.调用业务层方法 getGoodsById(goodsId),返回goods对象
    //2.把goods对象设置到map中
    //3.return "product_details";
}

Rewrite product details.html to product details.jsp

4.4 Product Details Page - Page

Adjust the code on the search.jsp page: call the toItemInfo function on the link of the image and title: onclick="toItemInfo(${goods.id},${goods.categoryId})"

<script type="text/javascript">
/* 商品详情页  */
function toItemInfo(goodsId,categoryId) {
    if (goodsId) {
        window.location.href="../goods/goodsInfo.do?goodsId="+goodsId+"&categoryId="+categoryId;
    }else {
        alert("商品id不存在");
    }
} 
</script>    

Adjust the code on the index.jsp page to add links to the best-selling products to the product details

<a href="${pageContext.request.contextPath}/goods/goodsInfo.do?goodsId=${goods.id}&categoryId=${goods.categoryId}">
查看详情
</a>

Display dynamic data on product detail page product_details.jsp page

图片
<div id="mediumDiv">
        <img width="460px" height="360px" id="mImg" src="..${goods.image}"/>
    </div>

 <!-- 右侧-->
<div class="right_detail lf">
    <!-- 商品名称-->
    <h1>${goods.itemType}</h1>
    <!-- 商品全称-->
    <h3>${goods.title}</h3>
    <!-- 价格部分-->
    <div class="price">
        <div id="pro_price"><b>学员售价:</b><span>¥${goods.price}</span></div>
        <div class="promise">
            <b>服务承诺:</b>
            <span>*退货补运费</span>
            <span>*30天无忧退货</span>
            <span>*48小时快速退款</span>
            <span>*72小时发货</span>
        </div>
    </div>

4.5 Product Details - Recommended for you

In the goodsInfo method of the GoodsController class, call the business layer method getGoodsByCategoryId() to get a List of 4 commodities, and set the list to the map;

//查询该分类的热门商品4个
    List<Goods> goodsList=
            goodsService.getGoodsByCategoryId(categoryId, 0, 4);
    //把goodsList设置到map中
    map.addAttribute("goodsList",goodsList);

在product_details.jsp页面显示数据。

<c:forEach items="${goodsList}" var="goods">
             <div class="detail_1 lf">
                <div class="detail_img1">
                    <img src="..${goods.image}" border="0">
                </div>
                <p>${goods.title}</p>
            </div>    
        </c:forEach>  

购物车

设计表 t_cart

create table t_cart(
    id int auto_increment primary key,
    uid int not null,
    goods_id varchar(200),
    count int,
    created_user varchar(50),
    created_time date,
    modified_user varchar(50),
    modified_time date      
)default charset=utf8;

1.添加购物车

1.1 添加购物车-持久层

新建Cart实体类,然后新建CartMapper接口,在接口中定义方法

void insertCart(Cart cart)

新建CartMapper.xml(拷贝,改名),定义insert节点,完成插入数据功能

<mapper namespace="......CartMapper">
    <insert id="insertCart" parameterType=".......">
        insert into t_cart(
            uid,goods_id,count,
            created_user,created_time,
            modified_user,modified_time
        )values(
           #{uid},#{goodsId},#{count},
           #{createdUser},#{createdTime},
           #{modifiedUser},#{modifiedTime}
        )
    </insert>
</mapper>

测试:

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324810814&siteId=291194637