我目前正在使用Express，Mustache和QRCode.js。
目前，从数据库编辑产品时，将使用胡须模板，并将/id 添加到 URL 的末尾以指定将编辑的产品 ID。在这个编辑页面上，在底部，我能够使用 QRCode 创建一个二维码.js链接到当前页面。它将被下载并打印到贴纸上，贴纸将放在架子上。这样，用户可以用手机扫描二维码并从产品库存中减去。
但是，我真的很想添加{{product.productId}}，{{product。制造商}} 和 {{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>
在此处输入更多空间：
假设您可以访问 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胡子文件中，你只需循环访问我们从服务器获得的信息。如果它包含所有产品的数据，那么我们可以在一个页面上为每个产品创建 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。