Question

我目前正在使用Express，Mustache和QRCode.js。

当前，当从数据库中编辑产品时，将使用胡须模板，并将/ id添加到URL的末尾以指定要编辑的产品ID。在此编辑页面的底部，我能够使用QRCode.js创建一个链接到当前页面的QR代码。将其下载并打印在贴纸上，该贴纸将放在架子上。这样，用户可以用手机扫描QR码，然后从产品目录中扣除。

但是，我真的很想在该可下载QR码的右侧添加{{product.productId}}，{{product.Manufacturer}}和{{product.product.Sku}}。这样，就可以轻松地将它们下载并直接转到打印机，而不必将它们放入编辑程序中以手动添加信息。这是我的第一个后端产品。有人会给我一个路线图吗？

这是我的代码：

<pre>

    <div class="generate">

    <div class="generate_qrcode" id="output"></div>
     </div>
     <div class="qrcode__span">Right click to download as a .png</div>

     <!-- <img class="QRCode" src="qrcode-encoding.png" /> -->
        <script>
            let qrcode = new QRCode("output", {
                text: window.location.href,
                width: 256,
                height: 256,
                colorDark : "#04243c",
                colorLight : "#FFFFFF",
                correctLevel : QRCode.CorrectLevel.H
            });
        </script>

    <!-- HTML/Product Edit Field (on same page as above code) -->


    <body class="product_edit">
            <h2 class="ep__h2">Edit Product</h2>
            <div class="ep">
            <form class="ep__form" 
    action="/product_edit/{{product.productId}}" method="POST" 
    autocomplete="off">
                <label for="productname" class="ep__label">Product Name: 
    </label>
                <input type="text" name="product_name" class="ep__input" 
    placeholder="Product Name" value="{{product.productName}}">
                <label for="manufacturer" class="ep__label">Manufacturer: 
    </label>
                <input type="text" name="product_manufacturer" 
    class="ep__input" placeholder="Manufacturer" value=" . 
    {{product.productManufacturer}}">
                <label for="product_size" class="ep__label">Size:</label>
                <input type="text" name="product_size" class="ep__input" 
    placeholder="Size" value="{{product.productSize}}">
                <label for="product_qty" class="ep__label">Quantity: 
    </label>
                <button type="button" class="ep__qtyminus" value="-" 
    name="product_qty" field="product_qty">-</button>
                <input type="number" name="product_qty" 
    class="ep__qtynumber" value="{{product.productQty}}">
                <button type="button" class="ep__qtyplus" value="+" 
    name="product_qty" field="product_qty">+</button>
                <label for="product_sku" class="ep__label--half">SKU: 
    </label>
                <label for="product_minimum" class="ep__label-- 
    half">Minimum:</label>
                <input type="text" name="product_sku" class="ep__input-- 
    half" placeholder="SKU" value="{{product.productSku}}">
                <input type="number" name="product_minimum" 
    class="ep__input--half" placeholder="Minimum" value="
    {{product.productMinimum}}">
                <label for="product_color" class="ep__label--half">Color: 
   </label>
                <label for="product_number" class="ep__label--half">Number: 
   </label>
                <input type="text" name="product_color" class="ep__input-- 
    half" placeholder="Color" value="{{product.productColor}}">
                <input type="number" name="product_number" 
    class="ep__input--half" placeholder="Minimum" value=" . 
    {{product.productNumber}}">
                <button class="ep__save" type="submit">Save</button>
            </form>
            </div>

</pre>

Answer 1

在此处键入以获取更多空间：

假设您有权访问Express服务器，为什么不能创建一条检索所有产品的路由，并为每个独特的产品生成一个包含名称，id，价格和QR码的小html？然后express可以编译所有HTML并将其发送到浏览器。

app.get('/products/print_stickers', function(req, res, next){

    // below is psuedo code
    var products_array = database.getAllProductInfo(); 

    res.render('print_page', { 
        products: products_array // pass data to mustahce template
    });
})

然后在您的print_page胡子文件中，您只需遍历我们从服务器获得的信息即可。如果其中包含所有产品的数据，那么我们可以在一页上为每个产品创建html标签！

var sticker_html = `
    <ul>
        {{#.}}
            <li>
                <div class="left_side">
                    ${new QRCode("output", {
                        text: 'http://mywebsite/product/id/{{product_id}}', // using {{ mustache }} to insert product id
                        width: 256,
                        height: 256,
                        colorDark : "#04243c",
                        colorLight : "#FFFFFF",
                        correctLevel : QRCode.CorrectLevel.H
                    })}
                </div>
                <div class="right_side">
                    <p>{{name}}</p>
                    <p>{{date}}</p>  // using {{ mustache }} to insert product information 
                    <p>{{price}}</p>
                </div>
            </li>
        {{/.}}
    </ul>;
`;
Mustache.render(tmp, products_array);

因此，在这一点上，您将转到此页面，服务器将获取产品，为每个唯一商品生成html，将其发送到您的浏览器，进行打印，然后使用剪刀将其剪裁并发布他们在您需要它们的地方。如果您只需要打印单个标签，则可以使用带有产品ID的可选查询参数，然后说if product_id, then only get 1 product from DB, generate sticker html as normal。

如何使用模板数据生成QR码？

1 个答案: