使用 node.js 更新和删除按钮

Question

我对编程很陌生，这听起来可能很愚蠢，但你们中的任何人都可以帮助我吗？我正在使用 node.js 设计一个购物车页面，它一次添加每个项目。有两个按钮更新和删除，除了这些按钮外一切正常。谁能帮我让这些按钮工作。 谢谢

这是我的代码。

cart.js

var express = require('express');
var router = express.Router();

router.all('/', function (req, res, next) {
    var cartTgt = [];
if (req.session.cart !== undefined) {
    cartTgt = req.session.cart;
}
res.render('cart', {title: 'Your Cart', cart: cartTgt,message: 'Successfully Added'});
});

module.exports = router;

order.js

var express = require('express');
var router = express.Router();
router.all('/', function (req, res, next) {
var message = '';
if (req.method === 'POST') {
    if (req.session.cart === undefined) {
        req.session.cart = [];
    }
    var item = {};
    item.itemname = req.body.itemname;
    item.quantity = req.body.quantity;
    req.session.cart.push(item);
    console.log(req.session.cart);
}
res.render('order', {title: 'Order Form', message: 'The item has been added to the cart!'});
});

module.exports = router;

cart.jade

html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    header
        h1= title
        hr
    section
    form(method='post' action='/cart')
        table
            thead
                tr
                    th Item Name
                    th Quantity
                    th Update
                    th Delete
            tbody
                each item in cart
                    tr
                        td #{item.itemname}
                        td #{item.quantity}
                        td: input(type='submit',value='Update')
                        td: form(method='post' action='/cart')                    
                                input(type='submit',value='Delete')

    br
    p= message

order.jade

html  
head    
    title= title    
    link(rel='stylesheet', href='/stylesheets/style.css')  
body    
    h1= title    
    hr    
    form(method='POST', action='/order')      
        label Item Name:      
        br      
        input(type='text', name='itemname')      
        br      
        label Quantity:      
        br      
        input(type='text', name='quantity')      
        br      
        input(type='submit')
    br
    a(href='/') Home Page
    br
    a(href='/cart') Cart Page
    hr
    p= message

Answer 1

解决方案： 您正在使用嵌套表单进行更新和删除，此外您没有发送要更新或删除的项目数量。因此，更好的选择是消除嵌套表单并使用简单的锚标记，您可以在其中发送GET 请求，其中包含查询字符串中的项目名称，并在cart.js 上检索项目名称并根据需要更新req.session.cart。

购物车.jade

 td: a(href='http://yourwesite/cart/update?item='+item.itemname) Update
 td: a(href='http://yourwesite/cart/delete?item='+item.itemname) Delete

Cart.Js

app.get('/update',function(req,res,next){
 // get the itemname from querystring using req.query.itemname
 // and perform operations in the req.session.cart array
 var temp = req.session.cart.map(function(value,index,array){
   if(value.itemname === req.query.itemname){
    value.quantity +=1;
   }
   return value;
 });

 req.session.cart = temp;

 res.render('cart', {title: 'Your Cart', cart: req.session.cart, message: 'Successfully Added'});

});
app.get('/delete',function(req,res,next){
 // get the itemname from querystring using req.query.itemname
 // and perform operations in the req.session.cart array
 var temp = req.session.cart.filter(function(value,index,array){
   if(value.itemname === req.query.itemname){
    // remove the item from the cart array
    return false; 
   }
    return true;
 });
 req.session.cart = temp;

 res.render('cart', {title: 'Your Cart', cart: req.session.cart, message: 'Successfully Added'});
});

注意事项： 如果您必须使用POST 请求，那么您必须有两个单独的表格。但是您也可以使用GET 请求来实现它，因此a 标签对此非常有利。

Answer 2

在这两种情况下：

• 表格应该针对每个项目，而不是针对整个表格。考虑到没有更多问题，无论按下哪个“更新”按钮，都只会更改一项。

• 在提交表单时，您也没有将项目名称发送到服务器。使用 HTML 表单时，您要在请求中发送的所有内容都必须位于 <input> 标记内（或者您使用 XMLHttpRequest 并手动指定您想要的内容）。我建议添加一个隐藏字段来存储它：

input(type='hidden' name='itemname' value='#{item.itemname}')

此外，您不能嵌套 HTML 表单，因此表格中使用的两个必须分开。最后，您确定一切都按预期工作吗？如果不使用购物车页面中的输入标签，则无法编辑数量。

我建议您更改代码（在 cart.jade 中）：

html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    header
        h1= title
        hr
    section
    //form(method='post' action='/cart') -> Moved below
    table
        thead
            tr
                th Item Name
                th Quantity
                // No th Update, explained why below
                th Delete
        tbody
            each item in cart
                tr
                    td #{item.itemname}

                    // The whole form needs to be inside a single <td> tag, so the quantity and update columns are merged together
                    td
                      form(method='post' action='/cart')
                        // Send the item's name
                        input(type='hidden' name='itemname' value='#{item.itemname}')

                        // Expose the quantity as a editable text box (in an input so it gets sent)
                        input(type='number' name='quantity' value='#{item.quantity}')
                        input(type='submit' value='Update')

                    // The delete button form, completely contained in the <td> tag
                    td
                      form(method='post' action='/cart')
                        // Send the item's name
                        input(type='hidden' name='itemname' value='#{item.itemname}')
                        input(type='submit' value='Delete')

    br
    p= message

为避免重复的隐藏输入，您可以尝试发送不带表单的请求：使用 XMLHttpRequest。我建议不要直接使用它，因此请尝试使用 qwest 或 jQuery 之类的库。