(十一)搭建springboot商城--加入购物车

1 数据库创建


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 创建实体类 

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

3 持久层 

3.1 规划需要执行的SQL语句

1.向购物车表中插入数据

insert into t_catr values (值列表)

2.当当前的商品已经在购物车中存在,则直接更新num的数量即可

update t_cart set num=? where cid=? 

3.在插入或者更新具体执行哪个语句,取决于数据库中是否有当前这个购物车商品的数据,得去查询才能确定。

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

3.2 设计接口和抽象方法

创建一个CartMapper接口持久层的文件。 

package com.cy.store.mapper;

import com.cy.store.entity.Cart;

import java.util.Date;

public interface CartMapper {
    /**
     * 插入购物车数据
     * @param cart 购物车数据
     * @return 受影响的行数
     */
    Integer insert(Cart cart);

    /**
     * 更新购物车某件商品的数据
     * @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 
     */
    Cart findByUidAndPid(Integer uid,Integer pid);
}

3.3 SQL映射 

创建一个CartMapper.xml映射文件。添加以上三个抽象方法的SQL语句的映射。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- namespace属性:用于指定当前的映射文件和哪个接口进行映射,需要指定接口的文件路径,需要标注包的完整路径 -->
<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
        set num=#{num},modified_use#{modified_use},modified_time={#modified_time}
        where 
            cid=#{cid}
    </update>
    
    <select id="findByUidAndPid" resultMap="CartEntityMap">
        select * from t_cart where  uid=#{uid} and pid=#{pid}
    </select>
    


    
</mapper>

3.4 测试

package com.cy.store.mapper;

import com.cy.store.entity.Address;
import com.cy.store.entity.Cart;
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.Date;
import java.util.List;

//@SpringBootTest:表示标注当前的类i是一个测试类,不会随打包发送
@SpringBootTest
//@RunWith:表示启动这个单元测试类(是不能够运行的),需要传递一个参数,必须时SpringRunner的实例类型
@RunWith(SpringRunner.class)
public class CartMapperTests {
    @Autowired
    private CartMapper cartMapper;
    @Test
    public void test()
    {
        Cart cart=new Cart();
        cart.setUid(8);
        cart.setPid(10000001);
        cart.setNum(3);
        cart.setPrice(10000L);
        cartMapper.insert(cart);
    }
    @Test
    public void updateNumByCid(){
        cartMapper.updateNumByCid(2,4,"张三",new Date());
    }

    @Test
    public void findByUidAndPid(){
        Cart cart=cartMapper.findByUidAndPid(9,10000001);
        System.out.println(cart);
    }




}

4 业务层 

4.1 规划异常

1.插入数据时可能产生异常:InsertException

2.更新数据时产生异常:updateException

4.2 接口和抽象方法

创建一个ICartService接口文件。

public interface ICartService {
    /**
     * 将商品添加到购物车中
     * @param uid 用户id
     * @param pid 商品id
     * @param amount 新增数量
     * @param username 用户名
     */
    void addToCart(Integer uid,Integer pid,Integer amount,String username);
}

4.3 实现接口

创建一个CartServiceImpl实现类 

package com.cy.store.service.impl;

import com.cy.store.entity.Address;
import com.cy.store.entity.Cart;
import com.cy.store.entity.Product;
import com.cy.store.mapper.AddressMapper;
import com.cy.store.mapper.CartMapper;
import com.cy.store.mapper.ProductMapper;
import com.cy.store.service.IAddressService;
import com.cy.store.service.ICartService;
import com.cy.store.service.IDistrictService;
import com.cy.store.service.ex.*;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import java.util.Date;
import java.util.List;

@Service
/**购物车的实现类**/
public class CartServiceImpl implements ICartService {
   /**购物车的业务层依赖于购物车的持久层以及商品的持久层**/
    @Autowired
    private CartMapper cartMapper;
    @Autowired
    private ProductMapper productMapper;

    @Override
    public void addToCart(Integer uid, Integer pid, Integer amount, String username) {
       //查询当前要添加的这个购物车是否在表中已存在
        Cart result= cartMapper.findByUidAndPid(uid, pid);
        Date date = new Date();
        if(result==null){
            //表示商品从来没有添加到购物车中,进行新增操作
            //需要创建一个cart对象
            Cart cart = new Cart();
            //补全数据:参数传递的数据
            cart.setUid(uid);
            cart.setPid(pid);
            cart.setNum(amount);
            //价格:来自于商品中的数据
            Product product = productMapper.findById(pid);
            cart.setPrice(product.getPrice());
            //补全日志
            cart.setCreatedUser(username);
            cart.setCreatedTime(date);
            cart.setModifiedUser(username);
            cart.setModifiedTime(date);
            //执行输入操作
            Integer rows = cartMapper.insert(cart);
            if(rows!=1){
                throw new InsertException("插入失败");
            }
        }else{//反之表示当前的商品在购物车中,更新num值
            Integer num=result.getNum()+amount;
            Integer rows = cartMapper.updateNumByCid(result.getCid(),
                    num,
                    username, date);
            if(rows!=1){
                throw new UpdateException("更新异常");
            }
        }
    }
}

 创建对应测试类CartServiceTest.

package com.cy.store.service;

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;

@SpringBootTest
@RunWith(SpringRunner.class)
public class CartServiceTests {
    @Autowired
    private ICartService cartService;
    @Test

    public void addToCart(){
        //已存在的一件购物车数据的更新操作
        cartService.addToCart(9,10000001,50000,"张明");
    }


}

5 控制层

 1.没有需要处理的异常

2,设计请求处理

/carts/add_to_cart

get

pid amount session

JsonResult<Void>

3.完成请求处理方法的编写。创建一个CartController类。

@RestController
@RequestMapping("carts")
public class CartController extends BaseController{
    @Autowired
    private 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);
    }

}

5 前端页面 

 在product.html页面给加入购物车按钮添加点击事件,并发送ajax请求。

$("#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){
							console.log(json.data)
							alert("加入购物车成功")
						}else{
							alert("加入购物车失败")
						}
					},
					error:function (xhr) {
						alert("加入购物车时产生未知的异常"+xhr.message)
					}
				})
			});

在ajax函数中data参数的数据设置方式:

·data:$("form表单选择").seriaize().当参数过多并且在同一个表单中,字符串的提交等

·data:new FormData($("form表单选择"))[0]只适用提交文件。

·data:“username=tom".适合参数值固定并且参数值列表有限,可以进行手动拼接。

·适用json格式提交数据

data:{

”username”=“tom”,

“age”=18

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是实现微信小程序点击加入购物车并显示购物车商品数量的代码: 1. 在app.js定义全局变量cartList,用于存放购物车商品列表 ``` App({ globalData: { cartList: [] } }) ``` 2. 在商品列表页面的wxml添加加入购物车按钮,并绑定tap事件 ``` <view class="add-cart" bindtap="addToCart">加入购物车</view> ``` 3. 在商品列表页面的js编写addToCart方法,将商品添加到购物车列表,并更新购物车图标上的数量 ``` const app = getApp() Page({ data: { goodsList: [...], cartCount: 0 }, addToCart(e) { const goodsId = e.currentTarget.dataset.goodsId const cartList = app.globalData.cartList const index = cartList.findIndex(item => item.id === goodsId) if (index !== -1) { cartList[index].count++ } else { cartList.push({ id: goodsId, count: 1 }) } const cartCount = cartList.reduce((sum, item) => sum + item.count, 0) this.setData({ cartCount }) } }) ``` 4. 在app.json配置购物车页面路径和购物车图标 ``` { "pages": [ "...", "pages/cart/cart" ], "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "assets/tabbar/home.png", "selectedIconPath": "assets/tabbar/home_selected.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "assets/tabbar/cart.png", "selectedIconPath": "assets/tabbar/cart_selected.png" } ] } } ``` 5. 在购物车页面的wxml显示购物车商品数量 ``` <view class="cart-count">{{cartCount}}</view> ``` 6. 在购物车页面的js获取购物车商品列表,并计算购物车商品数量 ``` const app = getApp() Page({ data: { cartList: [], cartCount: 0 }, onLoad() { const cartList = app.globalData.cartList const cartCount = cartList.reduce((sum, item) => sum + item.count, 0) this.setData({ cartList, cartCount }) } }) ``` 以上就是实现微信小程序点击加入购物车并显示购物车商品数量的代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值