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

发布于:2023-09-16 ⋅ 阅读:(78) ⋅ 点赞:(0)

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`)
);

后端接口实现

接下来,我们使用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方法
}

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

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

接下来,我们创建一个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);
    }
}

最后,我们创建一个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);
    }
}

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

前台实现

前台页面设计

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

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

<template>
  <div>
    <h2>购物车</h2>
    <table>
      <thead>
        <tr>
          <th>商品ID</th>
          <th>商品名称</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in cartItems" :key="item.id">
          <td>{{ item.productId }}</td>
          <td>{{ item.productName }}</td>
          <td>{{ item.quantity }}</td>
          <td>
            <button @click="updateCart(item, item.quantity - 1)">-</button>
            <button @click="updateCart(item, item.quantity + 1)">+</button>
            <button @click="deleteFromCart(item)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: []
    };
  },
  methods: {
    getCartByUserId() {
      // 发送HTTP请求,获取购物车列表数据
      // 更新this.cartItems
    },
    addToCart(productId, quantity) {
      // 发送HTTP请求,将商品添加到购物车
      // 刷新购物车列表
    },
    updateCart(item, quantity) {
      // 发送HTTP请求,更新购物车商品数量
      // 刷新购物车列表
    },
    deleteFromCart(item) {
      // 发送HTTP请求,删除购物车商品
      // 刷新购物车列表
    }
  },
  mounted() {
    this.getCartByUserId();
  }
};
</script>

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

<template>
  <div id="app">
    <h1>网上商城</h1>
    <router-view></router-view>
    <Cart></Cart>
  </div>
</template>

<script>
import Cart from "./components/Cart.vue";

export default {
  components: {
    Cart
  }
};
</script>

前台接口调用

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

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

import axios from "axios";

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

Vue.prototype.$http = axios;

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

<script>
export default {
  // ...
  methods: {
    getCartByUserId() {
      this.$http.get(`/cart/${userId}`).then(response => {
        this.cartItems = response.data;
      });
    },
    addToCart(productId, quantity) {
      const cart = {
        productId: productId,
        quantity: quantity
      };
      this.$http.post(`/cart/${userId}`, cart).then(() => {
        this.getCartByUserId();
      });
    },
    updateCart(item, quantity) {
      const cart = {
        quantity: quantity
      };
      this.$http.put(`/cart/${userId}/${item.productId}`, cart).then(() => {
        this.getCartByUserId();
      });
    },
    deleteFromCart(item) {
      this.$http.delete(`/cart/${userId}/${item.productId}`).then(() => {
        this.getCartByUserId();
      });
    }
  },
  // ...
};
</script>

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

结论

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

本文含有隐藏内容,请 开通VIP 后查看