0

您好，我需要一些关于我正在从事的当前项目的帮助。目标是能够从 UI 与 SQL 交互并在表中显示返回的数据。

我正在使用节点 V9.8.0、express 4.16.3 和 mssql 4.1.0。

我能够连接和获取数据并将其显示在 UI 上，但我认为我的设置不是最佳实践。

我的主要障碍是弄清楚如何将信息发送到服务器而不是查询 SQL 并将用户重定向回 UI，并显示带有预期数据的表格。

前端设置，表单和ajax。我知道表单中的操作应该与 ajax 的 URL 匹配，但要让它工作，我在服务器端有两个发布路由。表单提交到第一个 post 路由并将 req.body 写入文件。ajax post URL 读取文件，然后连接到 SQL，并根据用户的输入和可以接受参数的预定义查询字符串知道要获取哪些数据。

 <form id="myForm" action="/qa-hub/tools/wss_qa_tool/sql/data" method="POST">
                        <div class="row">
                            <div class="col-md">
                                <div class="form-group">
                                    <select type="text" id="slct1" class="form-control" placeholder="&#xf002; SQL query search..." 
                                    name="query" list="query">
                                        <option value="">Query select...</option>
                                        <option value="vacant_units">vacant_units</option>
                                        <option value="cancelable_contracts">cancelable_contracts</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md">
                                <div class="form-group">
                                    <input type="text" id="slct2" style="display: none;" class="form-control" placeholder="Entity #" name="location" />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                                <div class="col-md">
                                    <div class="form-group">
                                        <input type="text" id="slct3" style="display: none;" class="form-control" placeholder="Unit #" name="unit" />
                                    </div>
                                </div>
                            </div>
                            <button value="submit" id="submitBtn" class="btn btn-secondary" style="width: 25%; font-size: 14pt">Submit</button>
                        </form>

<script>

$.ajax({
        type: "POST",
        url: "/qa-hub/tools/wss_qa_tool/api/data",
        dataType: "json"
        }).then(addData)
                function addData(data) {
                // console.log(Object.keys(data.recordset[0]));
                Object.keys(data.recordset[0]).forEach(function(column) {
                    $("#theadRow").append("<th>" + column + "</th>");
                });

                let master = "";

                for(var i = 0; i < data.recordset.length; i++) {
                for( var key in data.recordset[i]) {
                    var current = "<td>" + data.recordset[i][key] + "</td>";
                        master = master + current;

                }
                $("#tBody").append("<tr>" + master + "</tr>");
                master = "";
                }
                $('#myTable').DataTable()
            }
</script>

这是我在服务器端的设置。因此，这将从表单中获取 req.body 并将其写入文件，然后将用户重定向回来。

router.post("/sql/data", (req, res) => {
    let query = req.body.query;
    let sent_params = queries[query].params;
        let sentArr = sent_params.map( x => req.body.hasOwnProperty(x));
        // console.log(sentArr);
        if(sentArr.includes(false) ) {
            console.log("Missing parameter");
            res.redirect("/qa-hub/tools/wss_qa_tool");
        } else {
            let tempObj = {};
            for(var i = 0; i < sent_params.length; i++) {
                tempObj[sent_params[i]] = req.body[sent_params[i]];
            }
            tempObj["query"] = query;
            let sentObj = tempObj;


        let userId = req.user.id;

        fs.writeFile(`./temp/${userId}.json`, JSON.stringify(sentObj), (error) => {
            if(error) console.log(error);
            res.redirect("back");
        });
    }
});

这就是魔法发生的地方。然后，此发布路由将读取文件并将信息传递给可以接收参数的已保存 SQL 查询，然后将信息发送回 UI。

router.post("/api/data", (req, res, next) => {
    let userId = req.user.id;
    fs.readFile(`./temp/${userId}.json`, "utf-8", (err, info) => {
        if(info === undefined || info === "" || Object.keys(JSON.parse(info)).length === 0 ) {
            console.log("No data was found.");
        } else {
            let data = JSON.parse(info);
            let query = data.query;
            let location = data.location;
            let unit = data.unit;
            let selected_query = queries[query].arguments([location, unit]);

            var config = {
            user: 'xxxx',
            password: 'xxxx',
            server: 'xxxx', 
            database: 'xxxx'
            };

            sql.connect(config, function (err) {

                if (err) console.log("Error at the config.");

                console.log("Connected!");

                // create Request object
                var request = new sql.Request();

                // query to the database and get the records
                request.query( selected_query, function (err, queryData) {

                    if (err) console.log("There was an error")
                    // console.log(queryData);
                    res.send(JSON.stringify(queryData));
                    sql.close();
                    console.log("SQL connection closed.")
                    fs.unlink(`./temp/${userId}.json`, (err) => {
                        if(err) console.log(err);
                        console.log("File was deleted successfully!");
                    });
                });
            });
        }
    });
});

对我来说，这似乎是一个骇人听闻的设置，但我需要尽快产生结果。我想不通或找不到的是，我怎样才能用一条发布路线制作相同的设置？我无法理解如何将信息发送到服务器、SQL 查询以获取数据以及将数据和用户重定向回同一页面。想知道这种设置的最佳做法是什么？或者可能有任何有见地的阅读来帮助指导我？任何帮助表示赞赏。

4

0 回答 0