时间戳

首页 > 解决方案 > 如何使用模板数据生成二维码？

javascript - 如何使用模板数据生成二维码？

问题描述

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

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

但是，我真的很想在该可下载二维码的右侧添加 {{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>

标签： javascriptjqueryexpressqr-codemustache

解决方案

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

假设您可以访问 Express 服务器，为什么不能创建一个检索所有产品的路由，并为每个唯一产品生成一个包含名称、ID、价格和二维码的小 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 mustache 文件中，您只需遍历我们从服务器获得的信息。如果它包含所有产品的数据，那么我们可以在一个页面上为每个产品创建 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.

推荐阅读