Как создать QR-код с шаблонными данными? - PullRequest
Новая
       15

Как создать QR-код с шаблонными данными?

0 голосов
/ 16 октября 2018

В настоящее время я использую Express, Mustache и QRCode.js.

В настоящее время при редактировании продукта из базы данных используется шаблон усов, а / id добавляется в конец URL-адреса дляукажите, какой идентификатор продукта будет редактироваться.На этой странице редактирования внизу мне удалось создать QR-код с QRCode.js, который ссылается на текущую страницу.Это должно быть загружено и напечатано на этикетке, которая будет идти на полке.Таким образом, пользователи могут сканировать QR-код с помощью своего телефона и вычитать из инвентаря продукта.

Однако я бы очень хотел добавить {{product.productId}}, {{product.Manufacturer}}и {{product.product.Sku}} справа от загружаемого QR-кода.Таким образом, их можно легко загрузить и сразу перейти к принтеру, вместо того, чтобы добавлять их в программу редактирования для добавления информации вручную.Это мой первый конечный продукт.Кто-нибудь даст мне план, как это сделать?

Вот мой код: 

<code><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>

1 Ответ

0 голосов
/ 16 октября 2018

Введите здесь больше места:

Если у вас есть доступ к серверу Express, почему вы не можете создать маршрут, который извлекает все продукты, и для каждого уникального продукта генерируется небольшой HTML-файл, содержащий имя, идентификатор, цена и QR-код?Затем 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 для каждого уникального элемента, отправит его в ваш браузер, распечатает его, затем использует ножницыразрезать их и выложить там, где они вам нужны.Если вам нужно просто напечатать одну наклейку, вы можете использовать необязательный параметр запроса с идентификатором продукта и сказать if product_id, then only get 1 product from DB, generate sticker html as normal.

...