如何从mysql获取数据并用nodejs和javascript呈现它?

eaf3rand  于 2021-06-18  发布在  Mysql
关注(0)|答案(1)|浏览(246)

关闭。这个问题需要更加突出重点。它目前不接受答案。
**想改进这个问题吗?**通过编辑这篇文章更新这个问题,使它只关注一个问题。

两年前关门了。
改进这个问题
sos问题请:我想制作一个简单的todo应用程序来添加一个todo任务并将其保存在数据库mysql中,就像下面的链接:https://www.w3schools.com/howto/howto_js_todolist.asp
但是我想把数据保存在mysql数据库中,而不是li html标签,当我点击add(submit按钮)时直接呈现它,就像上面的例子一样!!问题是我找不到在nodejs中创建新li元素的方法,也找不到在连接数据库后处理数据行的方法!!任何人都有提示!求救

6yt4nkrj

6yt4nkrj1#

你好,欢迎来到so!
我不确定我是否理解您要完成的任务,但一般来说,您的数据流应该是这样的:
在数据库中存储数据:
在按钮上添加事件处理程序,它将使用js获取您输入的任务字符串,将其存储在变量中,并使用restapi(例如xmlhttprequest)将此变量传递给您的服务器(express是good nodejs fw)
服务器现在连接到池并将数据发送到特定表,一旦完成,您将从服务器获得http响应
从数据库获取数据:
使用相同的按钮事件处理程序-收到http200后-开始创建
元素,并将作为响应收到的字符串以及http状态附加到该字符串。
让人困惑的是,当您想要获取的所有内容都是将新任务附加到表单下的任务列表中时,为什么要使用数据库?
编辑以进一步解释api数据流:
前端:
首先,您需要点击处理程序为您的按钮:

<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。您需要创建连接配置文件,其中包含db服务器的地址和连接(基于db类型,遵循文档),当然还需要导入需要在节点端导入的内容。

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 ($1, $2, (SELECT id FROM project_statuses WHERE project_status = 'active'), $3)"
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
    })
})

相关问题