SpringBoot電腦商城項目--商品詳情+加入購物車

商品詳情

1. 持久層

1.1. 規劃sql語句

? ? ? ? 根據id查詢商品詳情

1.2 mapper層編寫抽象方法

    /*** 根據商品id查詢商品詳情* @param id 商品id* @return 匹配的id商品詳情，如果沒有匹配的數據，則返回null*/Product findById(Integer id);

1.3 xml文件中編寫sql映射

? ? ? ? 查到的數據要封裝成resultMap結果集

    <select id="findById" resultMap="ProductEntityMap">select * from t_product where id=#{id}</select>

2.?業務層

2.1 規劃異常

? ? ? ? 根據id查詢商品信息時可能會出現找不到的異常，需要定義一個ProductNotFoundException類

package com.cy.store.service.ex;/** 商品數據不存在的異常 */
public class ProductNotFoundException extends ServiceException {public ProductNotFoundException() {super();}public ProductNotFoundException(String message) {super(message);}public ProductNotFoundException(String message, Throwable cause) {super(message, cause);}public ProductNotFoundException(Throwable cause) {super(cause);}protected ProductNotFoundException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {super(message, cause, enableSuppression, writableStackTrace);}
}

2.2 在Service類編寫接口和抽象方法

    /** 根據商品id查詢商品詳情 */Product findById(Integer id);

2.3 實現類實現接口重寫抽象方法

    /*** 根據商品id查詢商品詳情* @param id 商品id* @return 匹配的id商品詳情，如果沒有匹配的數據，則返回null*/@Overridepublic Product findById(Integer id) {Product product = productMapper.findById(id);// 判斷查詢結果是否為nullif (product == null) {throw new ProductNotFoundException("嘗試訪問的商品數據不存在");}// 將查詢結果中的部分屬性設置為nullproduct.setPriority(null);product.setCreatedUser(null);product.setCreatedTime(null);product.setModifiedUser(null);product.setModifiedTime(null);return product;}

3. 控制層

3.1 捕獲異常

? ? ? ? 在BaseController中捕獲ProductNotFoundException異常

else if (e instanceof ProductNotFoundException){result.setState(4006);result.setMessage("商品數據不存在");}

3.2 controller實現請求

    /*** 獲取商品詳情* @param id 商品id* @return 商品詳情*/@RequestMapping("/details/{id}")public JsonResult<Product> getById(@PathVariable("id") Integer id){Product data = productService.findById(id);return new JsonResult<>(OK,data);}

4. 前端頁面

? ? ? ? product.html頁面

		<!-- 引入用于獲取URL參數的jQuery插件，以便后續JS代碼中獲取商品ID --><script type="text/javascript" src="../js/jquery-getUrlParam.js"></script><script type="text/javascript">// 文檔加載完成后執行以下代碼$(document).ready(function () {// 使用 jQuery 插件 getUrlParam 獲取 URL 中的 "id" 參數值，即商品IDvar id = $.getUrlParam("id");console.log("id=" + id);// 發起 AJAX 請求獲取該商品的詳細信息$.ajax({url: "/products/details/"+ id, // 請求地址type: "GET", // 請求方法為 GETsuccess: function (json) { // 請求成功時的回調函數if (json.state == 200) { // 如果返回狀態碼為 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);// 循環更新5張商品圖片的路徑（大圖和縮略圖）for (var 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>

加入購物車

1. 在數據庫中創建購物車的表（t_cart）

CREATE TABLE t_cart (cid INT AUTO_INCREMENT COMMENT '購物車數據id',uid INT NOT NULL COMMENT '用戶id',pid INT NOT NULL COMMENT '商品id',price BIGINT COMMENT '加入時商品單價',num INT COMMENT '商品數量',created_user VARCHAR(20) COMMENT '創建人',created_time DATETIME COMMENT '創建時間',modified_user VARCHAR(20) COMMENT '修改人',modified_time DATETIME COMMENT '修改時間',PRIMARY KEY (cid)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. 創建Cart實體類

? ? ? ? @Data：是Lombok提供的注解，自動生成類的getter、setter、toString等方法

package com.cy.store.entity;import lombok.Data;/**購物車數據的實體類*/
@Data
public class Cart extends BaseEntity {private Integer cid;private Integer uid;private Integer pid;private Long price;private Integer num;
}

3. 持久層

3.1 規劃sql語句

向購物車表中插入數據

insert into t_cart () value()

如果當前商品已經存在與購物車中，則直接更新數量num就行

update t_cart set
? ? ? ? ? ? num=#{num},
? ? ? ? ? ? modified_user=#{modifiedUser},
? ? ? ? ? ? modified_time=#{modifiedTime}
? ? ? ? where cid=#{cid}

在插入或者更新具體執行哪個語句，取決于數據庫中是否有當前這個購物車商品的數量，得去查詢才能確定

select * from t_cart where uid=#{uid} AND pid=#{pid}

3.2 創建CartMapper接口，編寫抽象方法

@Mapper
public interface CartMapper {/*** 插入購物車數據* @param cart 購物車數據* @return 受影響的行數*/Integer insert(Cart cart);/*** 根據用戶id和商品id修改購物車數據* @param cid 購物車id* @param num 修改之后的數量* @param modifiedUser 修改執行人* @param modifiedTime 修改時間* @return*/Integer updateNumByCid(Integer cid,Integer num,String modifiedUser,Date modifiedTime);/*** 根據用戶id和商品id查詢購物車數據* @param uid 用戶id* @param pid 商品id* @return 匹配的購物車數據，如果沒有匹配的數據則返回null*/Cart findByUidAndPid(Integer uid, Integer pid);}

3.3 在CartMapper.xml文件中進行sql映射以及sql的編寫

<?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.CartMapper"><resultMap id="CartEntityMap" type="com.cy.store.entity.Cart"><id column="cid" property="cid"/><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><!-- 插入購物車數據--><insert id="insert" useGeneratedKeys="true" keyProperty="cid">insert into t_cart (uid, pid, price, num, created_user, created_time, modified_user, modified_time)values (#{uid}, #{pid}, #{price}, #{num}, #{createdUser}, #{createdTime}, #{modifiedUser}, #{modifiedTime})</insert><!-- 修改購物車數據中商品的數量--><update id="updateNumByCid">update t_cart setnum=#{num},modified_user=#{modifiedUser},modified_time=#{modifiedTime}where cid=#{cid}</update><!-- 根據用戶id和商品id查詢購物車中的數據--><select id="findByUidAndPid" resultMap="CartEntityMap">select * from t_cart where uid=#{uid} AND pid=#{pid}</select>
</mapper>

3.4 在CartMapperTest類中進行測試

@SpringBootTest
class CartMapperTest {@Autowiredprivate CartMapper cartMapper;@Testpublic void insert() {Cart cart = new Cart();cart.setUid(1);cart.setPid(2);cart.setNum(2);cart.setPrice(3000l);cart.setCreatedTime(new Date());cart.setModifiedTime(new Date());cart.setCreatedUser("admin1");cart.setModifiedUser("admin1");Integer rows = cartMapper.insert(cart);System.out.println(rows);}@Testpublic void updateNumByCid() {Integer rows = cartMapper.updateNumByCid(1, 2, "admin", new Date());System.out.println(rows);}@Testpublic void findByUidAndPid() {Cart cart = cartMapper.findByUidAndPid(1, 1);System.out.println(cart);}}

4.?業務層

4.1 規劃異常

插入數據庫購物車數據時可能產生InsertException異常
更新數據時可能出現UpdateException異常

4.2 創建CartService接口類，編寫業務層的抽象方法

? ? ? ? 更新時間這些字段可以通過new Date()獲取，所以CartService接口層只需要用戶id，商品id以及數量，更新人這些字段

package com.cy.store.service;public interface CartService {/*** 添加商品到購物車* @param uid 用戶id* @param pid 商品id* @param amount 商品數量* @param username 用戶名*/void addToCart(Integer uid, Integer pid, Integer amount, String username);}

4.3 實現類實現接口，重寫抽象方法

? ? ? ? 其中的商品價格可以通過商品表獲取，這里需要注入ProductMapper，調用根據pid獲取商品價格

@Service
public class CartServiceImpl implements CartService {@Autowiredprivate CartMapper cartMapper;@Autowiredprivate ProductMapper productMapper;/*** 添加購物車* @param uid 用戶id* @param pid 商品id* @param amount 商品數量* @param username 用戶名*/@Overridepublic void addToCart(Integer uid, Integer pid, Integer amount, String username) {
//        查詢當前用戶購物車中是否存在此商品Cart res = cartMapper.findByUidAndPid(uid, pid);Date date = new Date();//        不存在的話就添加if (res == null) {
//            補全價格Cart cart = new Cart();cart.setUid(uid);cart.setPid(pid);cart.setNum(amount);
//            獲取商品表中商品的價格，封裝到cart中Product product = productMapper.findById(pid);cart.setPrice(product.getPrice());cart.setCreatedTime(date);cart.setModifiedTime(date);cart.setCreatedUser( username);cart.setModifiedUser(username);cartMapper.insert(cart);}else {//存在的話就修改購物車中商品的數量
//            商品數量=購物車中的數量+用戶傳遞的數量amount = res.getNum()+amount;Integer integer = cartMapper.updateNumByCid(res.getCid(), amount, username, date);if (integer!=1){throw new UpdateException("更新數據時產生未知的異常");}}}
}

4.4 測試

package com.cy.store.service;import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;@SpringBootTest
class CartServiceTest {@Autowiredprivate CartService cartService;@Testvoid addToCart() {cartService.addToCart(3, 10000001, 10, "admin");}
}

5. 控制層

5.1 設計請求

請求路徑：/carts/addToCart

請求方式：GET

請求參數：pid,amount ,session

響應數據：JsonResult<Void>

5.2 實現請求

package com.cy.store.controller;import com.cy.store.service.CartService;
import com.cy.store.util.JsonResult;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/carts")
public class CartController extends BaseController{@Autowiredprivate CartService cartService;@RequestMapping("addToCart")public JsonResult addToCart(Integer pid, Integer amount, HttpSession session) {Integer uid = getUidFromSession(session);String username = getUsernameFromSession(session);cartService.addToCart( uid,pid, amount, username);return new JsonResult<>(OK);}
}

5.3 啟動項目，測試

6. 前端頁面

? ? ? ? 在product.html頁面給【加入購物車】按鈕添加點擊事件。發送ajax請求

? ? ? ? 在ajax函數中data參數的數據設置的方式：

data:$("form表單名稱").seriallize()：當參數過多并且在同一個表單中，字符串的提交時
data:new FormData($("form表單名稱")[0])：只適用于文件
data:"username=Tom"：適合于參數值固定并且參數值列表有限，可以進行手動拼接

let user = "admin"

data:"username="+user

使用JSON格式提交數據

data: {"pid": id, // 商品id"amount": $("#num").val() // 監聽數量輸入框中的值
}

代碼如下：

// 點擊“加入購物車”按鈕時觸發 AJAX 請求，將商品加入購物車（當前被注釋）$("#btn-add-to-cart").click(function() {$.ajax({url: "/carts/addToCart",type: "POST",// 通過json格式傳參data: {"pid": id, // 商品id"amount": $("#num").val() // 監聽數量輸入框中的值},dataType: "JSON",success: function(json) {if (json.state == 200) {alert("增加成功！");} else {alert("增加失敗！" + json.message);}},error: function(xhr) {alert("您的登錄信息已經過期，請重新登錄！HTTP響應碼：" + xhr.status);location.href = "login.html";}});});

? ? ? ? 重啟項目進行測試，查看數據庫是否新增成功