如何使购物车能够使用 node.js 与服务器交互?

How do I make a shopping cart to be able to interact with a server using node.js?

提问人:Freddy Leonardo Sosa Duran 提问时间:11/17/2023 更新时间:11/17/2023 访问量:23

问:

我对如何制作购物车以便能够使用 node.js 与后端的服务器进行交互感到困惑。这就是我目前使用 JS 得到的。我将其作为本地存储,但我不知道如何使用 node.js 将其发送到实际服务器。

let productsInCart = JSON.parse(localStorage.getItem('ShoppingCart'));
if(!productsInCart){
  productsInCart = [];
}
const parentElement =  document.querySelector('#buyItems');
const cartSumPrice = document.querySelector ('#sum-prices');
const products = document.querySelectorAll ('.product-under');


const countTheSumPrice = function(){
  let sumPrice = 0;
  productsInCart.forEach(product => {
    sumPrice += product.price;
  });
  return sumPrice;
}

const updateShoppingCartHTML = function(){
  localStorage.setItem('ShoppingCart',JSON.stringify(productsInCart));
      if (productsInCart.length > 0){
         let result = productsInCart.map(product => {
            return 'fill in the blank'
            
        
          });
          parentElement.innerHTML = result.join('')
          document.querySelector('.checkout').classList.remove('hidden');
          cartSumPrice.innerHTML = "$" + countTheSumPrice();

      }
      else{
        document.querySelector('.checkout').classList.add('hidden');
        parentElement.innerHTML = '<h4 class="empty">Your shopping cart is empty</h4>';
        cartSumPrice.innerHTML = "";
      }
}

function updateProdcutsInCart(product){
  for(let i=0; i < productsInCart.length; i++){
    if(productsInCart[i].id == product.id){
      productsInCart[i].count += 1;
      productsInCart[i].price = productsInCart[i].basePrice * productsInCart[i].count;
      return;
    }
  }
  productsInCart.push(product);
}





products.forEach(product => {
  product.addEventListener('click', (e) =>{
    if (e.target.classList.contains('addToCart')){
         const productID = e.target.dataset.prodcutID;
         const productName = product.querySelector('.productName').innerHTML;
         const productPrice = product.querySelector('.priceValue').innerHTML;
         const productImage = product.querySelector ('img').src;
         let productToCart = {
             name: productName,
             image: productImage,
             id: prodcutID,
             count: 1,
             price: +productPrice,
             basePrice : +productPrice
         }
        updateProdcutsInCart(productToCart);
        updateShoppingCartHTML(); 

    }
  });
});

parentElement.addEventListener('click', (e) =>{
  const isPlusButton = e.target.classList.contains('button-plus');
  const isMinusButton = e.target.classList.contains('button-minus');
  if (isPlusButton || isMinusButton){
    for(let i=0; i < productsInCart.length; i++){
      if (productsInCart[i].id === e.target.dataset.id){
        if(isPlusButton){
            productsInCart[i].count += 1;
        }
        else if(isMinusButton){
          productsInCart[i].count -= 1;
        }
        productsInCart[i].price = productsInCart[i].basePrice * productsInCart[i].count;
      }
      if(productsInCart[i].count <=0){
        productsInCart.splice(i,1);
      }
    }
    updateShoppingCartHTML();
  }
});

updateShoppingCartHTML()

我尝试在网上寻找解决方案,但在此过程中迷失了方向。

JavaScript 节点 .js 服务器 后端 购物车

评论

0赞 Phix 11/17/2023
developer.mozilla.org/en-US/docs/Web/API/Fetch_API
0赞 Marc 11/17/2023
问题是:“你想实现什么?服务器的目的是什么?
0赞 Community 11/17/2023
请澄清您的具体问题或提供其他详细信息以准确说明您的需求。正如目前所写的那样,很难确切地说出你在问什么。
0赞 Freddy Leonardo Sosa Duran 11/18/2023
@Marc我希望能够将我的商品添加到购物车,这些商品是我放入卡片容器中的图像,并且我希望该商品或至少价格能够显示在购物车中。但是,除了本地存储,我还想使用后端服务器,最好是node.js,如果更容易,如何将其与Express一起使用
0赞 Marc 11/18/2023
@FreddyLeonardoSosaDuran 您的评论没有澄清任何事情。你可以只用前端和localStorage来做你所描述的所有事情。所以让我重复一遍:服务器/后端的目的是什么?为什么你觉得需要一个节点/后端应用程序?(请记住,已经有解决方案可供使用。我认为这都是为了学习/学术目的)

答:

0赞 CodeS2201 11/17/2023 #1

您需要一个像 expressJS 这样的 nodeJS 后端框架。虽然它可以在纯节点中完成,但最好使用express,因为它使您的生活变得更加轻松。您可以使用 http 方法从服务器接收数据或向服务器发送数据。