🧸安清h：個(gè)人主頁(yè)?

? ?🎥個(gè)人專欄：【Spring篇】【計(jì)算機(jī)網(wǎng)絡(luò)】【Mybatis篇】

🚦作者簡(jiǎn)介：一個(gè)有趣愛(ài)睡覺(jué)的intp，期待和更多人分享自己所學(xué)知識(shí)的真誠(chéng)大學(xué)生。

---

目錄

🚀1.加入購(gòu)物車(chē)-數(shù)據(jù)創(chuàng)建

🚀2.加入購(gòu)物車(chē)-實(shí)體類(lèi)

🚀3.加入購(gòu)物車(chē)-持久層

?3.1規(guī)劃需要執(zhí)行的SQL語(yǔ)句

?3.2設(shè)計(jì)接口和抽象方法

?3.3 SQL映射

🚀4.加入購(gòu)物車(chē)-業(yè)務(wù)層

?4.1規(guī)劃異常

?4.2接口和抽象方法的設(shè)計(jì)

?4.3實(shí)現(xiàn)接口?

🚀5.加入購(gòu)物車(chē)-控制層

?5.2設(shè)計(jì)請(qǐng)求

?5.3處理請(qǐng)求

🚀6.加入購(gòu)物車(chē)-前端頁(yè)面

🎯1.顯示購(gòu)物車(chē)列表- 持久層

?1.1規(guī)劃SQL語(yǔ)句

?1.2構(gòu)建VO類(lèi)

?1.3設(shè)計(jì)接口和抽象方法

?1.4配置SQL映射

🎯2.顯示購(gòu)物車(chē)列表- 業(yè)務(wù)層

🎯3.顯示購(gòu)物車(chē)列表- 控制層

?3.1設(shè)計(jì)請(qǐng)求

?3.2處理請(qǐng)求?

🎯4.顯示購(gòu)物車(chē)列表- 前端頁(yè)面

🎃1. 增加購(gòu)物車(chē)商品數(shù)量-持久層

?1.1規(guī)劃需要執(zhí)行的SQL語(yǔ)句

?1.2設(shè)計(jì)接口和抽象方法

?1.3配置SQL映射?

🎃 2.增加購(gòu)物車(chē)商品數(shù)量-業(yè)務(wù)層

?2.1規(guī)劃異常

?2.2設(shè)計(jì)接口和抽象方法

??2.3實(shí)現(xiàn)方法

🎃 3.增加購(gòu)物車(chē)商品數(shù)量-控制層

?3.1處理異常

?3.2設(shè)計(jì)請(qǐng)求

?3.3處理請(qǐng)求?

🎃 4.增加購(gòu)物車(chē)商品數(shù)量-前端頁(yè)面

---

🚀1.加入購(gòu)物車(chē)-數(shù)據(jù)創(chuàng)建

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

num：當(dāng)用戶重復(fù)添加商品時(shí)，只修改num就可以了，無(wú)需再重復(fù)添加商品。?

🚀2.加入購(gòu)物車(chē)-實(shí)體類(lèi)

public class Cart extends BaseEntity{private Integer cid;private Integer uid;private Integer pid;private Long price;private Integer num;
。。。。。。
}

🚀3.加入購(gòu)物車(chē)-持久層

?3.1規(guī)劃需要執(zhí)行的SQL語(yǔ)句

1.向購(gòu)物車(chē)表中插入數(shù)據(jù)。

insert into t_cart values(值列表)

2.當(dāng)當(dāng)前的商品已經(jīng)在購(gòu)物車(chē)中存在，則直接更新num的數(shù)量即可。

update t_cart set num=? where cid=?

?3.在插入或更新具體執(zhí)行那個(gè)語(yǔ)句，取決于數(shù)據(jù)庫(kù)中是否有當(dāng)前的這個(gè)購(gòu)物車(chē)商品的數(shù)據(jù)，得去查詢才能查詢。對(duì)當(dāng)前的用戶的pid進(jìn)行查詢，加上uid=?，而不是對(duì)當(dāng)前的整張表進(jìn)行查詢。

select * from t_cart where pid=? and uid=?

?3.2設(shè)計(jì)接口和抽象方法

創(chuàng)建一個(gè)CartMapper接口持久層的文件。

/*** 插入購(gòu)物車(chē)數(shù)據(jù)* @param cart 購(gòu)物車(chē)數(shù)據(jù)* @return 受影響的行數(shù)* 插入時(shí)最好放在一個(gè)對(duì)象中傳遞，所以用Cart參數(shù)列表* 插入后在業(yè)務(wù)層可能調(diào)用，需要有返回值判斷能否插入成功*/Integer insert(Cart cart);/*** 更新購(gòu)物車(chē)某件商品的數(shù)量* @param cid 購(gòu)物數(shù)據(jù)id* @param num 更新的數(shù)量* @param modifiedUser 修改人* @param modifiedTime 修改時(shí)間* @return 受影響的行數(shù)* 更新時(shí)涉及到修改人和修改時(shí)間，除了cid外，還需要知道數(shù)量num*/Integer updateNumByCid(Integer cid, Integer num, String modifiedUser, Date modifiedTime);/*** 根據(jù)用戶的id和商品的id來(lái)查詢購(gòu)物車(chē)中的數(shù)據(jù)* @param uid 用戶id* @param pid 商品id*/Cart findByUidAndPid(Integer uid,Integer pid);

?3.3 SQL映射

1.創(chuàng)建一個(gè)CartMapper.xml映射文件，添加以上三個(gè)抽象方法的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 property="cid" column="cid"/><result column="created_user" property="createdUser"></result><result column="created_time" property="createdTime"></result><result column="modified_user" property="modifiedUser"></result><result column="modified_time" property="modifiedTime"></result></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 set num=#{num},modified_user=#{modifiedUser},modified_time=#{modifiedTime}where cid=#{cid}</update><select id="findByUidAndPid" resultMap="CartEntityMap">select * from t_cart where pid=#{pid} and uid=#{uid}</select>
</mapper>

2.進(jìn)行測(cè)試?

@SpringBootTest
public class CartMapperTests {@Autowiredprivate CartMapper cartMapper;@Testpublic void insert(){Cart cart = new Cart();cart.setNum(3);cart.setPid(10000002);cart.setUid(6);cartMapper.insert(cart);}@Testpublic void updateNumByCid(){cartMapper.updateNumByCid(1,6,"小明",new Date());}@Testpublic void findByUidAndPid(){Cart cart = cartMapper.findByUidAndPid(6,10000002);System.err.println(cart);}
}

🚀4.加入購(gòu)物車(chē)-業(yè)務(wù)層

?4.1規(guī)劃異常

1.插入數(shù)據(jù)時(shí)可能產(chǎn)生異常：InsertException。

2.更新數(shù)據(jù)時(shí)可能產(chǎn)生異常：UpdateException。

?4.2接口和抽象方法的設(shè)計(jì)

分析：

1.首先要進(jìn)行商品的查詢，這里面通過(guò)findByUidAndPid方法必須要傳遞過(guò)來(lái)的是uid和pid的字段。

2.假設(shè)拿到后，就要對(duì)原有的數(shù)據(jù)進(jìn)行更新，需要傳遞的字段有：cid,num,username。

    /*** 將商品添加到購(gòu)物車(chē)中* @param uid 用戶id* @param pid 商品id* @param amount 新增數(shù)量* @param username 用戶名（修改者）*/void addToCart(Integer uid,Integer pid,Integer amount,String username);

?4.3實(shí)現(xiàn)接口?

1.創(chuàng)建一個(gè)CartServiceImpl的實(shí)現(xiàn)類(lèi)。

@Service
public class CartServiceImpl implements ICartService {
//購(gòu)物車(chē)的業(yè)務(wù)層依賴于購(gòu)物車(chē)的持久層和商品的持久層@Autowiredprivate CartMapper cartMapper;@Autowired//購(gòu)物車(chē)中的一些定義的字段實(shí)際上是從商品表中分離出來(lái)的private ProductMapper productMapper;@Overridepublic void addToCart(Integer uid, Integer pid, Integer amount, String username) {//查詢當(dāng)前要添加的購(gòu)物車(chē)是否在表中已存在Cart result = cartMapper.findByUidAndPid(uid,pid);Date date = new Date();if(result == null){  //表示這個(gè)商品從來(lái)沒(méi)有被添加到購(gòu)物車(chē)中，則進(jìn)行新增操作//創(chuàng)建一個(gè)Cart對(duì)象Cart cart = new Cart();//補(bǔ)全數(shù)據(jù)：首先補(bǔ)全參數(shù)傳遞過(guò)來(lái)的數(shù)據(jù)cart.setPid(pid);cart.setUid(uid);//這里的amount暫且理解為在前端加好，把總數(shù)傳遞過(guò)來(lái)cart.setNum(amount);//補(bǔ)全價(jià)格：來(lái)自于商品中的數(shù)據(jù)Product product = productMapper.findById(pid);cart.setPrice(product.getPrice());//補(bǔ)全四日志cart.setCreatedUser(username);cart.setCreatedTime(date);cart.setModifiedUser(username);cart.setModifiedTime(date);//執(zhí)行數(shù)據(jù)的插入操作Integer rows = cartMapper.insert(cart);if(rows != 1){throw new InsertException("插入數(shù)據(jù)時(shí)產(chǎn)生未知的異常");}}else{  //表示當(dāng)前商品已經(jīng)存在于購(gòu)物車(chē)中，則更新這條數(shù)據(jù)的num值Integer num = result.getNum()+amount;Integer cid = result.getCid();Integer rows = cartMapper.updateNumByCid(cid,num,username,date);if(rows != 1){throw new UpdateException("更新時(shí)產(chǎn)生未知的異常");}}}
}

2. 再創(chuàng)建對(duì)應(yīng)的測(cè)試類(lèi)CartServiceTests。

@SpringBootTest
public class CartServiceTests {@Autowiredprivate ICartService cartService;@Testpublic void addToCart(){cartService.addToCart(6,10000013,2,"北伐不成功不改名");}
}

🚀5.加入購(gòu)物車(chē)-控制層

1.沒(méi)有需要處理的異常。

?5.2設(shè)計(jì)請(qǐng)求

請(qǐng)求路徑：/carts/add_to_cart

請(qǐng)求方式：POST

請(qǐng)求數(shù)據(jù)：Integer pid，Integer amount，HttpSession session

響應(yīng)結(jié)果：JsonResult<Void>

?5.3處理請(qǐng)求

1.創(chuàng)建一個(gè)CartController類(lèi)，具體代碼如下：

@RequestMapping("carts")
@RestController
public class CartController extends BaseController{@Autowiredprivate ICartService cartService;@RequestMapping("add_to_cart")public JsonResult<Void> addToCart(Integer pid, Integer amount, HttpSession session){cartService.addToCart(getuidFromSession(session),pid,amount,getUsernameFromSession(session));return new JsonResult<>(OK);}
}

?2.登錄后訪問(wèn)：http://localhost:8080/carts/add_to_cart?pid=10000003&amount=1

🚀6.加入購(gòu)物車(chē)-前端頁(yè)面

在product.html頁(yè)面給【加入購(gòu)物車(chē)】按鈕添加點(diǎn)擊事件，并發(fā)送ajax請(qǐng)求。

$("#btn-add-to-cart").click(function (){$.ajax({url:"/carts/add_to_cart",type:"POST",data:{"pid":id,"amount":$("#num").val()},dataType:"JSON",success:function (json){if(json.state==200){alert("加入購(gòu)物車(chē)成功");}else{alert("加入購(gòu)物車(chē)失敗");}},error:function (xhr){alert("加入購(gòu)物車(chē)時(shí)產(chǎn)生未知的異常"+xhr.message);}});});

在ajax函數(shù)中data參數(shù)的數(shù)據(jù)設(shè)置的方式：

• data:$("form表單選擇").serialize()。適合要么就是可以全部選擇的，或者手動(dòng)輸入的串的類(lèi)型。當(dāng)參數(shù)過(guò)多并且在同一個(gè)字符串中。
• data:new FormData($("form表單選擇")[0])。只適用提交文件，其他形式提交不了。
• data:"username=Tom"。適合參數(shù)值固定并且參數(shù)值列表有限，可以進(jìn)行手動(dòng)拼接。

  let user = "tom";
  data:"username="+user

• 適用JSON格式提交數(shù)據(jù)：

  data:{"username":"tom","age":18,"sex":0
  }

🎯1.顯示購(gòu)物車(chē)列表- 持久層

?1.1規(guī)劃SQL語(yǔ)句

分析上圖可知，紅線框住的圖片和商品標(biāo)題來(lái)自于product表，而藍(lán)線框住的應(yīng)該屬于 cart表，單價(jià)和數(shù)量應(yīng)該是從購(gòu)物車(chē)中傳過(guò)來(lái)的，再根據(jù)兩者計(jì)算總金額。由于數(shù)據(jù)來(lái)自于兩張表中的部分字段，所以要用到關(guān)聯(lián)查詢。

#多表查詢?nèi)绻侄尾恢貜?fù)則不需要顯式聲明字段屬于哪張表
select cid,uid,pid,t_cart.price,t_cart.num,t_product.image,t_product.title,t_product.price as real
from t_cart left join t_product on t_cart.pid=t_product.id
where uid=#{uid}
order by t_cart.createdTime DESC;

?1.2構(gòu)建VO類(lèi)

?VO：Value Object，值對(duì)象。當(dāng)進(jìn)行select查詢時(shí)，查詢的結(jié)果屬于多張表中的內(nèi)容，此時(shí)發(fā)現(xiàn)結(jié)果集不能直接使用某個(gè)POJO實(shí)體類(lèi)來(lái)接收，POJO實(shí)體類(lèi)不能包含多表查詢出來(lái)的結(jié)果。解決方案：重新構(gòu)建一個(gè)新的對(duì)象，這個(gè)對(duì)象用于存儲(chǔ)所查詢出來(lái)的結(jié)果集對(duì)應(yīng)的映射，所以把這樣的對(duì)象稱之為值對(duì)象。

在com.cy.store下新建一個(gè)包VO，在VO包里創(chuàng)建CartVO類(lèi)。?

//購(gòu)物車(chē)數(shù)據(jù)的VO類(lèi)(Value Object)值對(duì)象
public class CartVO implements Serializable {private Integer cid;private Integer uid;private Integer pid;private Long price;private Integer num;private String title;private String image;private Long realPrice;
......
}

?1.3設(shè)計(jì)接口和抽象方法

在CartMapper中編寫(xiě)如下代碼：

List<CartVO> findVOByUid(Integer uid);

?1.4配置SQL映射

    <select id="findVOByUid" resultType="com.cy.store.Vo.CartVO">select cid,uid,pid,t_cart.price,t_cart.num,t_product.image,t_product.title,t_product.price as realPricefrom t_cart left join t_product on t_cart.pid=t_product.idwhere uid=#{uid}order by t_cart.createdTime DESC</select>

單元測(cè)試

    @Testpublic void findVOByUid(){System.out.println(cartMapper.findVOByUid(6));}

🎯2.顯示購(gòu)物車(chē)列表- 業(yè)務(wù)層

1.先編寫(xiě)業(yè)務(wù)層的接口方法。

List<CartVO> getVOByUid(Integer uid);

2.在實(shí)現(xiàn)類(lèi)中實(shí)現(xiàn)方法。

@Overridepublic List<CartVO> getVOByUid(Integer uid) {List<CartVO> list = cartMapper.findVOByUid(uid);return list;}

🎯3.顯示購(gòu)物車(chē)列表- 控制層

?3.1設(shè)計(jì)請(qǐng)求

請(qǐng)求路徑：/carts/（只要發(fā)一個(gè)carts就可以把列表返回，不需要carts下的什么）

請(qǐng)求方式：GET

請(qǐng)求數(shù)據(jù)：HttpSession session

響應(yīng)結(jié)果：JsonResult<List<CartVO>>

?3.2處理請(qǐng)求?

1.實(shí)現(xiàn)請(qǐng)求處理方法的代碼編寫(xiě)。

    @RequestMapping({"/",""})public JsonResult<List<CartVO>> getVOByUid(HttpSession session){List<CartVO> data = cartService.getVOByUid(getuidFromSession(session));return new JsonResult<>(OK,data);} 

2.先登錄再進(jìn)行功能測(cè)試，訪問(wèn)http://localhost:8080/carts。

🎯4.顯示購(gòu)物車(chē)列表- 前端頁(yè)面

要把cart.html頁(yè)面通過(guò)向Controller層中的getVOByUid方法發(fā)送請(qǐng)求就可以返回所有的數(shù)據(jù)。

1.先注釋掉以下代碼：

<script src="../js/cart.js" type="text/javascript" charset="utf-8"></script>

2.用戶一打開(kāi)頁(yè)面就自動(dòng)發(fā)送請(qǐng)求，請(qǐng)求數(shù)據(jù)。讀取form表單，對(duì)它的結(jié)構(gòu)做一個(gè)了解，因?yàn)橐褦?shù)據(jù)顯示在form表單中。

• action="orderConfirm.html"
• tbody標(biāo)簽的id="cart-list"屬性，自動(dòng)加載的內(nèi)容需要體現(xiàn)在tbody中。
• type="button"：結(jié)算按鈕的submit改成button，后續(xù)需要傳數(shù)據(jù)。

3.ready()函數(shù)來(lái)完成自動(dòng)的ajax請(qǐng)求的提交和處理。

<script type="text/javascript">$(document).ready(function () {showCartList();});//展示購(gòu)物車(chē)列表數(shù)據(jù)function showCartList() {$("#cart-list").empty();$.ajax({url: "/carts",type: "GET",dataType: "JSON",success: function(json) {let list = json.data;for (var i = 0; i < list.length; i++) {//用戶所拿到的是一個(gè)list集合，在這個(gè)list集合中封裝的是cartVO對(duì)象，在這里先拿到這個(gè)list集合let tr = '<tr>\n' +'<td>\n' + //在這里給復(fù)選框一個(gè)cid值，在往后點(diǎn)擊結(jié)算的時(shí)候會(huì)把這個(gè)cid值傳遞給下個(gè)頁(yè)面//把這個(gè)數(shù)據(jù)提交給另一個(gè)頁(yè)面是以參數(shù)的形式提交，所以這個(gè)表單一定要有內(nèi)部屬性'<input name="cids" value="#{cid}" type="checkbox" class="ckitem" />\n' +'</td>\n' +'<td><img src="..#{image}collect.png" class="img-responsive" /></td>\n' +'<td>#{title}#{msg}</td>\n' +'<td>￥<span id="goodsPrice#{cid}">#{singlePrice}</span></td>\n' +'<td>\n' +'<input type="button" value="-" class="num-btn" οnclick="reduceNum(1)" />\n' +'<input id="goodsCount#{cid}" type="text" size="2" readonly="readonly" class="num-text" value="#{num}">\n' +'<input class="num-btn" type="button" value="+" οnclick="addNum(#{cid})" />\n' +'</td>\n' +'<td><span id="goodsCast#{cid}">#{totalPrice}</span></td>\n' +'<td>\n' +'<input type="button" οnclick="delCartItem(this)" class="cart-del btn btn-default btn-xs" value="刪除" />\n' +'</td>\n' +'</tr>';tr = tr.replaceAll(/#{cid}/g, list[i].cid);tr = tr.replaceAll(/#{image}/g, list[i].image);tr = tr.replaceAll(/#{title}/g, list[i].title);tr = tr.replaceAll(/#{singlePrice}/g, list[i].realPrice);tr = tr.replaceAll(/#{num}/g, list[i].num);tr = tr.replaceAll(/#{totalPrice}/g, list[i].realPrice * list[i].num);if (list[i].realPrice < list[i].price) {tr = tr.replace(/#{msg}/g, "比加入時(shí)降價(jià)" + (list[i].price - list[i].realPrice) + "元");} else {tr = tr.replace(/#{msg}/g, "");}$("#cart-list").append(tr);}},error: function (xhr) {alert("加載購(gòu)物車(chē)列表數(shù)據(jù)時(shí)產(chǎn)生未知的異常"+xhr.status);}});}</script>

🎃1. 增加購(gòu)物車(chē)商品數(shù)量-持久層

?1.1規(guī)劃需要執(zhí)行的SQL語(yǔ)句

1.執(zhí)行更新t_cart表記錄的num的值，無(wú)需重復(fù)開(kāi)發(fā)。

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

2.根據(jù)cid查詢購(gòu)物車(chē)的這條記錄是否存在。

select * from t_cart where cid=?

?1.2設(shè)計(jì)接口和抽象方法

Cart findByCid(Integer cid);

?1.3配置SQL映射?

    <select id="findByCid" resultMap="CartEntityMap">select * from t_cart where cid=#{cid}</select>

編寫(xiě)單元測(cè)試。

    @Testpublic void findByCid(){System.out.println(cartMapper.findByCid(2));}

🎃 2.增加購(gòu)物車(chē)商品數(shù)量-業(yè)務(wù)層

?2.1規(guī)劃異常

1.在更新時(shí)會(huì)產(chǎn)生更新異常。

2.查詢到的數(shù)據(jù)是否有訪問(wèn)權(quán)限。

3.查詢的數(shù)據(jù)不存在，拋出：CartNotFoundException異常。

public class CartNotFoundException extends ServiceException{public CartNotFoundException() {super();}public CartNotFoundException(String message) {super(message);}public CartNotFoundException(String message, Throwable cause) {super(message, cause);}public CartNotFoundException(Throwable cause) {super(cause);}protected CartNotFoundException(String message, Throwable cause, boolean enableSuppression, boolean writableStackTrace) {super(message, cause, enableSuppression, writableStackTrace);}
}

?2.2設(shè)計(jì)接口和抽象方法

    /*** 更新用戶的購(gòu)物車(chē)數(shù)據(jù)* @param cid * @param uid* @param username * @return 增加成功后新的數(shù)量*/Integer addNum(Integer cid,Integer uid,String username);

??2.3實(shí)現(xiàn)方法

    @Overridepublic Integer addNum(Integer cid, Integer uid, String username) {Cart result = cartMapper.findByCid(cid);if(result == null){throw new CartNotFoundException("數(shù)據(jù)不存在");}if(!result.getUid().equals(uid)){throw new AccessDeniedException("數(shù)據(jù)非法訪問(wèn)");}Integer num = result.getNum()+1;Integer rows = cartMapper.updateNumByCid(cid,num,username,new Date());if(rows != 1){throw new UpdateException("更新時(shí)產(chǎn)生異常");}//返回新的購(gòu)物車(chē)總量return num;}

🎃 3.增加購(gòu)物車(chē)商品數(shù)量-控制層

?3.1處理異常

else if(e instanceof CartNotFoundException) {result.setState(4007);result.setMessage("購(gòu)物車(chē)數(shù)據(jù)不存在的異常");}

?3.2設(shè)計(jì)請(qǐng)求

請(qǐng)求路徑：/carts/{cid}/num/add

請(qǐng)求方式：POST

請(qǐng)求數(shù)據(jù)：Integer cid，HttpSession session

響應(yīng)結(jié)果：JsonResult<Integer>

?3.3處理請(qǐng)求?

    @RequestMapping("{cid}/num/add")public JsonResult<Integer> addNum(Integer cid,HttpSession session){Integer data = cartService.addNum(cid,getuidFromSession(session),getUsernameFromSession(session));return new JsonResult<>(OK,data);}

先登錄在訪問(wèn)url地址對(duì)應(yīng)的地址。?

🎃 4.增加購(gòu)物車(chē)商品數(shù)量-前端頁(yè)面

1.前面已經(jīng)在onclick中改過(guò)里面的內(nèi)容，所以無(wú)需重復(fù)修改了，但是需要重新編寫(xiě)addNum()以確保點(diǎn)擊后能夠增加數(shù)量。

<input class="num-btn" type="button" value="+" οnclick="addNum(#{cid})" />

			function addNum(cid){$.ajax({url: "/carts/"+cid+"/num/add",type: "POST",dataType: "JSON",success: function (json) {if (json.state == 200) {//先拿到數(shù)量展示的id，$("#goodsCount"+cid).val(json.data)//由于price的值不是放在val控件上，也不是放在某一個(gè)屬性上，通過(guò)html來(lái)拿，//html就是拿到它標(biāo)簽內(nèi)部的這個(gè)東西，如果內(nèi)部是個(gè)串拿到的就是個(gè)串//獲取某個(gè)標(biāo)簽內(nèi)部的內(nèi)容：文本、標(biāo)簽//因?yàn)閯偤眠@個(gè)內(nèi)容即:singlePrice作為一個(gè)子內(nèi)容放在了開(kāi)始和結(jié)束的中間let price = $("#goodsPrice"+cid).html();let totalPrice = price * json.data;$("#goodsCast"+cid).html(totalPrice);} else {alert("增加購(gòu)物車(chē)商品數(shù)量失敗")}},error: function (xhr) {alert("增加購(gòu)物車(chē)商品數(shù)量時(shí)產(chǎn)生未知的異常!"+xhr.message);}});}