热销商品和商品详情
商品熱銷排行
商品-創建數據表
1.使用use命令先選中store數據庫。
USE store;2.在store數據庫中創建t_product數據表。
CREATE TABLE t_product (id int(20) NOT NULL COMMENT '商品id',category_id int(20) DEFAULT NULL COMMENT '分類id',item_type varchar(100) DEFAULT NULL COMMENT '商品系列',title varchar(100) DEFAULT NULL COMMENT '商品標題',sell_point varchar(150) DEFAULT NULL COMMENT '商品賣點',price bigint(20) DEFAULT NULL COMMENT '商品單價',num int(10) DEFAULT NULL COMMENT '庫存數量',image varchar(500) DEFAULT NULL COMMENT '圖片路徑',status int(1) DEFAULT '1' COMMENT '商品狀態 1：上架 2：下架 3：刪除',priority int(10) DEFAULT NULL COMMENT '顯示優先級',created_time datetime DEFAULT NULL COMMENT '創建時間',modified_time datetime DEFAULT NULL COMMENT '最后修改時間',created_user varchar(50) DEFAULT NULL COMMENT '創建人',modified_user varchar(50) DEFAULT NULL COMMENT '最后修改人',PRIMARY KEY (id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8;商品-創建實體類
創建com.cy.store.entity.Product類，并繼承自BaseEntity類。在類中聲明與數據表中對應的屬性。
package com.cy.store.entity;/** 商品數據的實體類 */ public class Product extends BaseEntity implements Serializable {private Integer id;private Integer categoryId;private String itemType;private String title;private String sellPoint;private Long price;private Integer num;private String image;private Integer status;private Integer priority;// Generate: Getter and Setter、Generate hashCode() and equals()、toString() }商品-熱銷排行-持久層
規劃需要執行的SQL語句
查詢熱銷商品列表的SQL語句大致是。
SELECT * FROM t_product WHERE status=1 ORDER BY priority DESC LIMIT 0,4接口與抽象方法
在com.cy.store.mapper包下創建ProductMapper接口并在接口中添加查詢熱銷商品findHotList()的方法。
package com.cy.store.mapper; import com.cy.store.entity.Product; import java.util.List;/** 處理商品數據的持久層接口 */ public interface ProductMapper {/*** 查詢熱銷商品的前四名* @return 熱銷商品前四名的集合*/List<Product> findHotList(); }配置SQL映射
1.在main\resources\mapper文件夾下創建ProductMapper.xml文件，并在文件中配置findHotList()方法的映射。
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.cy.store.mapper.ProductMapper"><resultMap id="ProductEntityMap" type="com.cy.store.entity.Product"><id column="id" property="id"/><result column="category_id" property="categoryId"/><result column="item_type" property="itemType"/><result column="sell_point" property="sellPoint"/><result column="created_user" property="createdUser"/><result column="created_time" property="createdTime"/><result column="modified_user" property="modifiedUser"/><result column="modified_time" property="modifiedTime"/></resultMap><!-- 查詢熱銷商品的前四名：List<Product> findHostList() --><select id="findHotList" resultMap="ProductEntityMap">SELECT*FROMt_productWHEREstatus=1ORDER BYpriority DESCLIMIT 0,4</select> </mapper>2.在com.cy.store.mapper包下創建ProductMapperTests測試類，并添加測試方法。
package com.cy.store.mapper; import com.cy.store.entity.Product; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.test.context.junit4.SpringRunner; import java.util.List;@RunWith(SpringRunner.class) @SpringBootTest public class ProductMapperTests {@Autowiredprivate ProductMapper productMapper;@Testpublic void findHotList() {List<Product> list = productMapper.findHotList();System.out.println("count=" + list.size());for (Product item : list) {System.out.println(item);}} }商品-熱銷排行-業務層
規劃異常
說明：無異常。
接口與抽象方法
創建com.cy.store.service.IProductService接口，并在接口中添加findHotList()方法。
package com.cy.store.service; import com.cy.store.entity.Product; import java.util.List;/** 處理商品數據的業務層接口 */ public interface IProductService {/*** 查詢熱銷商品的前四名* @return 熱銷商品前四名的集合*/List<Product> findHotList(); }實現抽象方法
1.創建com.cy.store.service.impl.ProductServiceImpl類，并添加@Service注解；在類中聲明持久層對象以及實現接口中的方法。
package com.cy.store.service.impl; import com.cy.store.entity.Product; import com.cy.store.mapper.ProductMapper; import com.cy.store.service.IProductService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List;/** 處理商品數據的業務層實現類 */ @Service public class ProductServiceImpl implements IProductService {@Autowiredprivate ProductMapper productMapper;@Overridepublic List<Product> findHotList() {List<Product> list = productMapper.findHotList();for (Product product : list) {product.setPriority(null);product.setCreatedUser(null);product.setCreatedTime(null);product.setModifiedUser(null);product.setModifiedTime(null);}return list;} }2.在com.cy.store.service包下創建測試類ProductServiceTests，并編寫測試方法。
package com.cy.store.service; import com.cy.store.entity.Product; import com.cy.store.service.ex.ServiceException; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.test.context.junit4.SpringRunner; import java.util.List;@RunWith(SpringRunner.class) @SpringBootTest public class ProductServiceTests {@Autowiredprivate IProductService productService;@Testpublic void findHotList() {try {List<Product> list = productService.findHotList();System.out.println("count=" + list.size());for (Product item : list) {System.out.println(item);}} catch (ServiceException e) {System.out.println(e.getClass().getSimpleName());System.out.println(e.getMessage());}} }商品-熱銷排行-控制器
處理異常
說明：無異常。
設計請求
1.設計用戶提交的請求，并設計響應的方式。
請求路徑：/products/hot_list 請求參數：無 請求類型：GET 響應結果：JsonResult<List<Product>> 是否攔截：否，需要將index.html和products/**添加到白名單2.在LoginInterceptorConfigurer類中將index.html頁面和products/**請求添加到白名單。
patterns.add("/web/index.html"); patterns.add("/products/**");處理請求
1.創建com.cy.controller.ProductController類繼承自BaseController類，類添加@RestController和@RequestMapping(“products”)注解，并在類中添加業務層對象。
package com.cy.store.controller; import com.cy.store.entity.Product; import com.cy.store.service.IProductService; import com.cy.store.util.JsonResult; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.List;@RestController @RequestMapping("products") public class ProductController extends BaseController {@Autowiredprivate IProductService productService; }2.在類中添加處理請求的getHotList()方法。
@RequestMapping("hot_list") public JsonResult<List<Product>> getHotList() {List<Product> data = productService.findHotList();return new JsonResult<List<Product>>(OK, data); }3.完成后啟動項目，直接訪問http://localhost:8080/products/hot_list進行測試。
商品-熱銷排行-前端頁面
1.在index.html頁面給“熱銷排行”列表的div標簽設置id屬性值。
<div id="hot-list" class="panel-body panel-item"><!-- ... --> </div>2.在index.html頁面中body標簽內部的最后，添加展示熱銷排行商品的代碼。
<script type="text/javascript"> $(document).ready(function() {showHotList(); });function showHotList() {$("#hot-list").empty();$.ajax({url: "/products/hot_list",type: "GET",dataType: "JSON",success: function(json) {let list = json.data;console.log("count=" + list.length);for (let i = 0; i < list.length; i++) {console.log(list[i].title);let html = '<div class="col-md-12">'+ '<div class="col-md-7 text-row-2"><a href="product.html?id=#{id}">#{title}</a></div>'+ '<div class="col-md-2">￥#{price}</div>'+ '<div class="col-md-3"><img src="..#{image}collect.png" class="img-responsive" /></div>'+ '</div>';html = html.replace(/#{id}/g, list[i].id);html = html.replace(/#{title}/g, list[i].title);html = html.replace(/#{price}/g, list[i].price);html = html.replace(/#{image}/g, list[i].image);$("#hot-list").append(html);}}}); } </script>3.完成后啟動項目，直接訪問http://localhost:8080/web/index.html進行測試。
顯示商品詳情
商品-顯示商品詳情-持久層
規劃需要執行的SQL語句
根據商品id顯示商品詳情的SQL語句大致是。
SELECT * FROM t_product WHERE id=?接口與抽象方法
在ProductMapper接口中添加抽象方法。
/*** 根據商品id查詢商品詳情* @param id 商品id* @return 匹配的商品詳情，如果沒有匹配的數據則返回null*/ Product findById(Integer id);配置SQL映射
1.在ProductMapper.xml文件中配置findById(Integer id)方法的映射。
<!-- 根據商品id查詢商品詳情：Product findById(Integer id) --> <select id="findById" resultMap="ProductEntityMap">SELECT*FROMt_productWHEREid=#{id} </select>2.在ProductMapperTests測試類中添加測試方法。
@Test public void findById() {Integer id = 10000017;Product result = productMapper.findById(id);System.out.println(result); }商品-顯示商品詳情-業務層
規劃異常
如果商品數據不存在，應該拋出ProductNotFoundException，需要創建com.cy.store.service.ex.ProductNotFoundException異常。
package com.cy.store.service.ex;/** 商品數據不存在的異常 */ public class ProductNotFoundException extends ServiceException {// Override Methods... }接口與抽象方法
在業務層IProductService接口中添加findById(Integer id)抽象方法。
/*** 根據商品id查詢商品詳情* @param id 商品id* @return 匹配的商品詳情，如果沒有匹配的數據則返回null*/ Product findById(Integer id);實現抽象方法
1.在ProductServiceImpl類中，實現接口中的findById(Integer id)抽象方法。
@Override public Product findById(Integer id) {// 根據參數id調用私有方法執行查詢，獲取商品數據Product product = productMapper.findById(id);// 判斷查詢結果是否為nullif (product == null) {// 是：拋出ProductNotFoundExceptionthrow new ProductNotFoundException("嘗試訪問的商品數據不存在");}// 將查詢結果中的部分屬性設置為nullproduct.setPriority(null);product.setCreatedUser(null);product.setCreatedTime(null);product.setModifiedUser(null);product.setModifiedTime(null);// 返回查詢結果return product; }2.在ProductServiceTests測試類中編寫測試方法。
@Test public void findById() {try {Integer id = 100000413;Product result = productService.findById(id);System.out.println(result);} catch (ServiceException e) {System.out.println(e.getClass().getSimpleName());System.out.println(e.getMessage());} }商品-顯示商品詳情-控制器
處理異常
在BaseController類中的handleException()方法中添加處理ProductNotFoundException的異常。
// ... else if (e instanceof ProductNotFoundException) {result.setState(4006); } // ...設計請求
設計用戶提交的請求，并設計響應的方式。
請求路徑：/products/{id}/details 請求參數：@PathVariable("id") Integer id 請求類型：GET 響應結果：JsonResult<Product>處理請求
1.在ProductController類中添加處理請求的getById()方法。
@GetMapping("{id}/details") public JsonResult<Product> getById(@PathVariable("id") Integer id) {// 調用業務對象執行獲取數據Product data = productService.findById(id);// 返回成功和數據return new JsonResult<Product>(OK, data); }2.完成后啟動項目，直接訪問http://localhost:8080/products/10000017/details進行測試。
商品-顯示商品詳情-前端頁面
1.檢查在product.html頁面body標簽內部的最后是否引入jquery-getUrlParam.js文件，如果引入無需重復引入。
<script type="text/javascript" src="../js/jquery-getUrlParam.js"></script>2.在product.html頁面中body標簽內部的最后添加獲取當前商品詳情的代碼。
<script type="text/javascript"> let id = $.getUrlParam("id"); console.log("id=" + id); $(document).ready(function() {$.ajax({url: "/products/" + id + "/details",type: "GET",dataType: "JSON",success: function(json) {if (json.state == 200) {console.log("title=" + json.data.title);$("#product-title").html(json.data.title);$("#product-sell-point").html(json.data.sellPoint);$("#product-price").html(json.data.price);for (let i = 1; i <= 5; i++) {$("#product-image-" + i + "-big").attr("src", ".." + json.data.image + i + "_big.png");$("#product-image-" + i).attr("src", ".." + json.data.image + i + ".jpg");}} else if (json.state == 4006) { // 商品數據不存在的異常location.href = "index.html";} else {alert("獲取商品信息失敗！" + json.message);}}}); }); </script>3.完成后啟動項目，先訪問http://localhost:8080/web/index.html頁面，然后點擊“熱銷排行”中的某個子項，將跳轉到product.html商品詳情頁，觀察頁面是否加載的是當前的商品信息。
總結
- 上一篇： 如何选择适合你的兴趣爱好（六十三），养鱼
- 下一篇： Hive基于SQL创建漏斗模型