本篇文章为你整理了学习笔记——书城项目第五阶段之购物项加号、购物项减号（购物类目是什么意思）的详细内容，包含有购物中的加加减减 购物类目是什么意思 购物用什么符号表示 购物计入什么科目 学习笔记——书城项目第五阶段之购物项加号、购物项减号，希望能帮助你了解 学习笔记——书城项目第五阶段之购物项加号、购物项减号。
一、设置购物项加号
（1）找到“+”号的位置，在“cart.html”中的第61行中，添加单击事件，通过“异步”操作来设置
span @click="addCount" + /span
（2）在Vue中新建一个函数
addCount:function(){
//发送异步请求，对当前购物项的数量进行加1的操作（将当前购物项的图书id传过去）
event.target.previousElementSibling.name;
axios({
method:"post",
url:"cart",
params:{
flag:"addCount",
id:id
},
（3）在“cart.html”中的第60行代码添加“:name”
input type="text" v-model="cartItem.count" :name="cartItem.book.bookId"
（4）在“CartServlet.java”中添加函数“addCount”
protected void addCount(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获得请求参数
String id = request.getParameter("id");
//2.获得购物车对象
HttpSession session = request.getSession();
Cart cart = (Cart)session.getAttribute("cart");
//3.调用cart对象中的方法，对购物项的数量进行加1操作
}
（5）在“Cart.java”中写一个“数量加1”的方法
/**
* 对购物项的数量进行加1的操作
* @param id
public void addCount(Integer id){
CartItem item = map.get(id);
item.setCount(item.getCount()+1);
}
（6）完善刚刚“CartServlet.java”中的添加函数“addCount”
protected void addCount(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获得请求参数
String id = request.getParameter("id");
//2.获得购物车对象
HttpSession session = request.getSession();
Cart cart = (Cart)session.getAttribute("cart");
//3.调用cart对象中的方法，对购物项的数量进行加1操作
cart.addCount(Integer.parseInt(id));
//4.后台的数据已经刷新完毕，前台的数据还未刷新，通过调用showCart把前台的数据刷新
showCart(request,response);
}
（7）完善刚刚Vue中的函数
addCount:function(){
//发送异步请求，对当前购物项的数量进行加1的操作（将当前购物项的图书id传过去）
event.target.previousElementSibling.name;
axios({
method:"post",
url:"cart",
params:{
flag:"addCount",
id:id
}).then(response= {
if(response.data.flag){
//alert(response.data.resultData[0]);
//需要将后台传过来的数据，展示在网页上(vue的方式)
this.cartItems=response.data.resultData[0];
this.totalCount=response.data.resultData[1];
this.totalAmount=response.data.resultData[2];
},
（8）结果：刷新服务器后，在弹出的页面中，将一些图书添加到购物车中。点击“购物车”后，将某个书籍的数量加1，在“数量”中点击“+”号后，会发现“金额”、“商品数量”、“总金额”的值会发生变化，说明此时代码OK。
二、购物项减号
前面的步骤和上面的“购物项加号”类似，后面需要考虑“如果图书的数量是1时，再按减号时，是将这条购物项记录默认删除，还是弹出提示再删除”。
（1）找到减号的位置，在“cart.html”中的第59行中，设置一个点击事件
span @click="subtractCount" - /span
（2）在Vue中创建一个函数
subtractCount:function(){
//需要获得当前购物项的id
var id = event.target.nextElementSibling.name;
axios({
method:"post",
url:"cart",
params:{
flag:"subtractCount",
id:id
}
（3）将请求发送到“CartServlet.java”中，在“CartServlet.java”中创建一个方法
protected void subtractCount(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获得请求参数
String id = request.getParameter("id");
//2.获得购物车对象
HttpSession session = request.getSession();
Cart cart = (Cart)session.getAttribute("cart");
//3.调用cart对象中的方法，对购物项的数量进行减1操作
cart.subtractCount(Integer.parseInt(id));
//4.后台的数据已经刷新完毕，前台的数据还未刷新，通过调用showCart把前台的数据刷新
showCart(request,response);
}
（4）在“Cart.java”中创建一个方法，进行减1操作
/**
* 对购物项的数量进行减1的操作
* @param id
public void subtractCount(Integer id){
CartItem item = map.get(id);
item.setCount(item.getCount()-1);
}
（5）在“cart.html”中的“subtractCount”函数中判断当前购物项的数量是否为1，分为“不为1”和“为1”两种情况，使用异步操作
subtractCount:function () {
//需要获得当前购物项的id
//当目前购物项的数量为1的话，执行的删除操作，不为1才是减一操作
//1. 获得到文本框的value属性值
var count=event.target.nextElementSibling.value;
var id=event.target.nextElementSibling.name;
if(count==1){
//问一下，确定要删除吗？
if(confirm("确定要删除吗？")){
//执行删除操作(在发送一个请求删除)
axios({
method:"post",
url:"cart",
params:{
flag:"deleteCartItem",
id:id
}).then(response= {
if(response.data.flag){
//alert(response.data.resultData[0]);
//需要将后台传过来的数据，展示在网页上(vue的方式)
this.cartItems=response.data.resultData[0];
this.totalCount=response.data.resultData[1];
this.totalAmount=response.data.resultData[2];
}else{//说明count不为1，肯定大于1
axios({
method:"post",
url:"cart",
params:{
flag:"subtractCount",
id:id
}).then(response= {
if(response.data.flag){
//alert(response.data.resultData[0]);
//需要将后台传过来的数据，展示在网页上(vue的方式)
this.cartItems=response.data.resultData[0];
this.totalCount=response.data.resultData[1];
this.totalAmount=response.data.resultData[2];
},
（6）结果：将服务器刷新，添加几个图书到购物车中，点击“购物车”按钮，将一些图书的数量减掉，当图书的数量为1时，再点“-”时，会弹出提示“确认要删除吗？”当点击“确定”时，该购物项的记录会整体删除，此时表明代码ok 。
以上就是学习笔记——书城项目第五阶段之购物项加号、购物项减号（购物类目是什么意思）的详细内容，想要了解更多 学习笔记——书城项目第五阶段之购物项加号、购物项减号的内容，请持续关注盛行IT软件开发工作室。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。