首页 > 解决方案 > 从mysql运行GET请求时只返回空格前的第一个单词

问题描述

背景:

我正在做一个小型 crud 项目,学习如何将 CRUD 与 node.js 和 mysql 结合起来。对于本节,我将提取将填充几个输入字段的数据,以便我可以进行一些更改然后更新。

问题:

一切正常,只是当我运行GET请求时,我返回的数据是第一个空格之前的所有内容。因此,如果我有一个名为ALL Clear的产品,我只会得到结果ALL,这对于每个字段都是相同的。

目标:

我的目标是将全文而不是部分输入到我的输入字段中。

这是我的 server.js 代码,它显示了我的 GET 请求,其中包括 html 代码,该代码将呈现显示填充有来自 mysql 的数据的所有输入:

我做了什么:

我已经做过研究,但出于某种原因,我只找到了对 PHP 的引用

 app.get("/test", function(req, res) {
    let ID = req.query.ID;
    let option = req.query.selectpicker;
    mysqlConnection.query('SELECT * FROM ' + option + ' WHERE id=' + ID, function(err, result) {
    if (err) throw err;
    var html = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <title>Update Item</title>
    </head>
    <body>
    <h1 class="bg-dark p-3 text-center text-white">UPDATE ITEM</h1>
    <div class="form-group col-md-4 pt-5 container font-weight-bold">
    `;
    for (var i = 0; i < result.length; i++) {
    html += `<form class="contact_section_form pt-3 pb-3">`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Option</label>`
    html += `<input type="input" class="form-control" name="selectpicker" value=${option} readonly>`
    html += `</div>`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Id</label>`
    html += `<input type="input" class="form-control" name="idName" value=${result[i].id} readonly>`
    html += `</div>`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Supply Name</label>`
    html += `<input type="input" class="form-control" name="supplyName" value=${result[i].supply_name} readonly>`
    html += `</div>`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Description</label>`
    html += `<input type="input" class="form-control" name="descriptionInfo" value=${result[i].description_info} readonly>`
    html += `</div>`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Quantity</label>`
    html += `<input type="input" class="form-control" name="quantity" value=${result[i].qty}>`
    html += `</div>`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Size</label>`
    html += `<input type="input" class="form-control" name="size" value=${result[i].size }>`
    html += `</div>`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Amount</label>`
    html += `<input type="input" class="form-control" name="amount" value=${result[i].amount}>`
    html += `</div>`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Unit Of Measurement</label>`
    html += `<input type="input" class="form-control" name="unitOfMeasurement" value=${result[i].unit_of_measurement}>`
    html += `</div>`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Category</label>`
    html += `<input type="input" class="form-control" name="category" value=${result[i].category} readonly>`
    html += `</div>`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Category Id</label>`
    html += `<input type="input" class="form-control" name="categoryId" value=${result[i].category_id} readonly>`
    html += `</div>`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Date received</label>`
    html += `<input type="input" class="form-control" name="dateReceived" value=${result[i].date_received} readonly>`
    html += `</div>`
    html += `<div class="form-group">`
    html += `<label class="font-weight-bold">Last date removed</label>`
    html += `<input type="input" class="form-control" name="lastDateRemoved" value=${result[i].last_date_removed} readonly>`
    html += `</div>`
    html += `<div class="text-center">`
    html += `<button class="btn btn-md btn-secondary font-weight-bold text-uppercase" formmethod="POST" formaction="/update">Update</button>`
    html += `</div>`
    html += `</form>`
    }
    html += `</body>`
    html += `</html>`
    res.send(html);
    });
    });

这是将数据拉入输入表单时的示例:

第一的

这是此示例中数据库的图片,您可以看到我们用于上图中的项目是卫生纸,但它只是拉厕所

任何指导或反馈将不胜感激。

标签: mysqlnode.jsexpress

解决方案


尝试在所有属性周围加上引号value,就像这样。

 html += `<input type="input" class="form-control" 
     name="supplyName" 
     value="${result[i].supply_name}" readonly>`
           ^                        ^

但是,它比这更复杂一些,因为您的数据库列值本身可能包含"字符。将它们从字面上放入您的 html 会弄乱它。尝试这个:

 html += `<input type="input" class="form-control" 
     name="supplyName" 
     value="${escape(result[i].supply_name)}" readonly>`
           ^  ^^^^^^^                     ^ ^

专业提示使用像哈巴狗车把这样的 HTML 模板引擎会让你的生活变得更加轻松。

浏览器中的专业提示 View source ...是您的朋友。


推荐阅读