提问人:Freddy Leonardo Sosa Duran 提问时间:11/17/2023 更新时间:11/17/2023 访问量:23
如何使购物车能够使用 node.js 与服务器交互?
How do I make a shopping cart to be able to interact with a server using node.js?
问:
我对如何制作购物车以便能够使用 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()
我尝试在网上寻找解决方案,但在此过程中迷失了方向。
答:
0赞
CodeS2201
11/17/2023
#1
您需要一个像 expressJS 这样的 nodeJS 后端框架。虽然它可以在纯节点中完成,但最好使用express,因为它使您的生活变得更加轻松。您可以使用 http 方法从服务器接收数据或向服务器发送数据。
评论