我如何从 mysql 获取数据并使用 nodejs 和 javascript 渲染它？

Question

求救问题请问：我想制作一个简单的待办事项应用程序来添加待办事项任务并将其保存在数据库中 mysql 完全像这样 link ： https://www.w3schools.com/howto/howto_js_todolist.asp

但我想将数据保存在 mysql 数据库中而不是 li html 标签中，并在我单击添加（提交按钮）时直接呈现它，就像上面的例子一样！问题是我无法找到我可以在 nodejs 中创建新的 li 元素的方法，或者我可以在连接到我的数据库后处理数据行的方法！请任何人有提示！紧急求救

Answer 1

您好，欢迎来到 SO！

我不确定我是否明白你想要完成什么，但一般来说，你的数据流应该是这样的：

在数据库中存储数据：

在按钮上添加事件处理程序，它将使用 JS 获取您输入的任务字符串，将其存储在变量中并使用 REST API（例如 XMLHttpRequest）将此变量传递到您的服务器（Express 是很好的 nodejs FW )
服务器现在连接到池并将数据发送到特定的 table，完成后，您将从服务器

从数据库获取数据：

使用相同的按钮事件处理程序 - 在您收到 http200 之后 - 您开始使用 JS 创建
元素并将您收到的字符串作为响应连同 http 状态附加到它。

令人困惑的部分 - 你为什么要使用数据库，当你想要实现的一切都是将新任务附加到表单下方的任务列表时？

EDIT to explain API data flow further:

前端：

首先，您需要为按钮设置点击处理程序：

<button type="button" onclick="createNewProject()">Click Me!</button>

它会调用类似的函数：

let createNewProject = () => {
const xhr = new XMLHttpRequest() //REST API: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
const method = "post" //HTTP request method: https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
const uri = "/createnewproject" //URI which you use to communicate with backend

//putting data you want to send to server together: 
newProject = {}
newProject.project_name = document.getElementById("modal_project_name").value
newProject.project_description = document.getElementById("modal_project_description").value

//send REST request: 
xhr.open(method, uri)
xhr.setRequestHeader("Content-Type", "application/json")
xhr.send(JSON.stringify(newProject))

//receive response from server and handle it on frontend: 
xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        //do whatever your frontend needs to do
    }
}

服务器：

// please note that HTTP request type and URI do match with frontend
app.post("/saveproject", (req, res) => {
    let savedProject = req.body; //get data from frontend
    persistence.saveProject(savedProject, status => {
        res.status(status).send(); //send to persistence
    });
});

坚持：

这里使用 PG。您将需要创建连接配置文件，其中包含您的数据库服务器地址和连接（基于数据库类型，遵循文档），当然还需要在节点端导入任何需要导入的内容。

module.exports.createNewProject = (newProject, callback) => {
// queryText: SQL query
// queryValues: your data
const queryText = "INSERT INTO projects (project_name, project_description, project_statuses_id, updated_date) VALUES (, , (SELECT id FROM project_statuses WHERE project_status = 'active'), )"
const queryValues = [
    newProject.project_name,
    newProject.project_description,
    newProject.updated_date
]

pool.connect((err, client, done) => {
    if (err) {
        console.log("PERSISTENCE: ", err)
        done(err)
        callback(400)
        return console.error("POOL CONNECTION ERROR", err.code)
    }
    client.query(queryText, queryValues, (err, result) => {
        if (err) {
            console.log("PERSISTENCE: ", err)
            done(err)
            callback(400)
            return console.error("QUERY ERROR", err.code)
        }
        done()
        callback(200) //return HTTP response back to frontend https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
    })
})

我如何从 mysql 获取数据并使用 nodejs 和 javascript 渲染它？

How can i fetch data from mysql and render it with nodejs and javascript?

javascript

mysql

node.js

fetch-api