Spring Boot + Vue的网上商城之购物车实现

Spring Boot + Vue的网上商城之购物车实现

实现购物车功能的思路如下：

1. 创建购物车表：在数据库中创建一个购物车表，用于存储用户的购物车信息。购物车表可以包含字段如下：购物车ID、用户ID、商品ID、商品名称、数量等。

2. 后端接口设计：

   • 获取购物车列表：创建一个接口，根据用户ID查询购物车表，返回该用户的购物车列表。
   • 添加商品到购物车：创建一个接口，接收商品ID和数量作为参数，将商品添加到购物车表中。
   • 修改购物车商品数量：创建一个接口，接收购物车ID和新的商品数量作为参数，更新购物车表中对应的商品数量。
   • 删除购物车商品：创建一个接口，接收购物车ID作为参数，从购物车表中删除对应的商品。

3. 前台页面设计：

   • 创建一个购物车组件，用于展示购物车列表。
   • 在购物车组件中，使用axios发送HTTP请求调用后端接口，获取购物车列表、添加商品到购物车、修改购物车商品数量、删除购物车商品等功能。
   • 在页面中展示购物车列表，并提供相应的操作按钮，如增加数量、减少数量、删除商品等。

4. 前台接口调用：

   • 在main.js文件中配置axios，设置后端接口的基础URL。
   • 在购物车组件中，使用axios发送HTTP请求调用后端接口，实现购物车相关的功能。

通过以上步骤，我们可以实现一个简单的购物车功能。在后端使用Spring Boot框架，提供购物车相关的接口；在前台使用Vue框架，调用后端接口，实现购物车页面的展示和操作。

介绍

在网上商城项目中，购物车是一个重要的功能模块。购物车实现了用户将商品添加到购物车、修改购物车商品数量、删除购物车商品等操作，为用户提供了便捷的购物体验。本文将介绍如何使用Spring Boot和Vue框架实现网上商城的购物车功能。

后端实现

数据库设计

首先，我们需要设计购物车相关的数据库表。一般来说，购物车表需要包含以下字段：购物车ID、用户ID、商品ID、商品数量等。

CREATE TABLE `cart` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL,
  `quantity` int(11) NOT NULL,
  PRIMARY KEY (`id`)
);
1
2
3
4
5
6
7

后端接口实现

接下来，我们使用Spring Boot框架实现购物车的后端接口。

首先，我们创建一个Cart实体类，用于映射数据库表。

@Entity
@Table(name = "cart")
public class Cart {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name = "user_id")
    private Long userId;

    @Column(name = "product_id")
    private Long productId;

    private Integer quantity;

    // 省略getter和setter方法
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

然后，我们创建一个CartRepository接口，继承自JpaRepository，用于对购物车表进行操作。

public interface CartRepository extends JpaRepository<Cart, Long> {
    List<Cart> findByUserId(Long userId);
    void deleteByUserIdAndProductId(Long userId, Long productId);
}
1
2
3
4

接下来，我们创建一个CartService类，用于处理购物车相关的业务逻辑。

@Service
public class CartService {
    @Autowired
    private CartRepository cartRepository;

    public List<Cart> getCartByUserId(Long userId) {
        return cartRepository.findByUserId(userId);
    }

    public void addToCart(Long userId, Long productId, Integer quantity) {
        Cart cart = new Cart();
        cart.setUserId(userId);
        cart.setProductId(productId);
        cart.setQuantity(quantity);
        cartRepository.save(cart);
    }

    public void updateCart(Long userId, Long productId, Integer quantity) {
        Cart cart = cartRepository.findByUserIdAndProductId(userId, productId);
        cart.setQuantity(quantity);
        cartRepository.save(cart);
    }

    public void deleteFromCart(Long userId, Long productId) {
        cartRepository.deleteByUserIdAndProductId(userId, productId);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

最后，我们创建一个CartController类，用于处理购物车相关的HTTP请求。

@RestController
@RequestMapping("/api/cart")
public class CartController {
    @Autowired
    private CartService cartService;

    @GetMapping("/{userId}")
    public List<Cart> getCartByUserId(@PathVariable Long userId) {
        return cartService.getCartByUserId(userId);
    }

    @PostMapping("/{userId}")
    public void addToCart(@PathVariable Long userId, @RequestBody Cart cart) {
        cartService.addToCart(userId, cart.getProductId(), cart.getQuantity());
    }

    @PutMapping("/{userId}/{productId}")
    public void updateCart(@PathVariable Long userId, @PathVariable Long productId, @RequestBody Cart cart) {
        cartService.updateCart(userId, productId, cart.getQuantity());
    }

    @DeleteMapping("/{userId}/{productId}")
    public void deleteFromCart(@PathVariable Long userId, @PathVariable Long productId) {
        cartService.deleteFromCart(userId, productId);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

至此，我们已经完成了购物车后端接口的实现。

前台实现

前台页面设计

在前台页面中，我们需要展示购物车列表、添加商品到购物车、修改购物车商品数量、删除购物车商品等功能。

首先，我们创建一个Cart组件，用于展示购物车列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

然后，我们在App组件中引入Cart组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

前台接口调用

接下来，我们需要在前台页面中调用后端接口，实现购物车相关的功能。

首先，我们需要在main.js文件中配置axios，用于发送HTTP请求。

import axios from "axios";

axios.defaults.baseURL = "http://localhost:8080/api";

Vue.prototype.$http = axios;
1
2
3
4
5

然后，我们在Cart组件中调用后端接口。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

至此，我们已经完成了购物车前台页面的实现。

结论

通过使用Spring Boot和Vue框架，我们成功实现了网上商城的购物车功能。在后端实现中，我们设计了购物车表，并使用Spring Boot框架实现了购物车的后端接口。在前台实现中，我们设计了购物车组件，并使用Vue框架调用后端接口，实现了购物车相关的功能。希望本文对大家理解Spring Boot和Vue框架的使用，并实现网上商城的购物车功能有所帮助！