Javascript 使用NodeJs在MySql中保存用户信息_Javascript_Html_Mysql_Node.js_Web

Javascript 使用NodeJs在MySql中保存用户信息

javascript html mysql node.js web

Javascript 使用NodeJs在MySql中保存用户信息,javascript,html,mysql,node.js,web,Javascript,Html,Mysql,Node.js,Web,我想做一张登记表。按下“提交”按钮后，脚本打开mymysql数据库并在“Users”表中插入新行。一切正常，除了浏览器无法解释NodeJsrequire功能。其他一些帖子说使用browserify，但我想知道这是否可以在没有其他程序的情况下完成我的代码： register.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title>

我想做一张登记表。按下“提交”按钮后，脚本打开mymysql数据库并在“Users”表中插入新行。一切正常，除了浏览器无法解释NodeJs

require

功能。其他一些帖子说使用browserify，但我想知道这是否可以在没有其他程序的情况下完成

我的代码：

register.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src = "index.js" type="text/javascript"></script>
<script src = "register.js" type = "text/javascript"></script>

<link rel="stylesheet" type="text/css" href = "register.css">
</head>

<body>
<form name = "registerForm" method = "post">
<p id = "fillRule">Username must contain lower or uppercase or _! Fill in all boxes except the job! Pass must contain small and uppercase letters and its lenght must be at least 6 char, max 10!</p>
<label for="username">Username:</label>
<input type = "text" id = "username" name = "username" onchange = "checkUser()"> <br/>
<label for="firstname">Firstname:</label>
<input type = "text" id = "firstname" name = "firstame" onchange = "checkFirst()"> <br/>
<label for="lastname">Lastname:</label>
<input type = "text" id = "lastname" name = "lastname" onchange = "checkLast()"> <br/>
<label for="job">Your job:</label>
<input type = "text" id = "job" name = "job" onchange="checkJob()"> <br/>
<label for="pass">Password:</label>
<input type = "text" id = "pass" name = "pass" onchange = "checkPass()">        <br/>
<label for="mail">E-mail:</label>
<input type = "email" id = "mail" name = "mail" onchange = "checkMail()"> <br/>
<input type = "button" value = "send" id = "gomb" disabled = "disabled"   onclick = "registerButtonClick()">
</form>
</body>

</html>

您不能直接从浏览器连接到MySQL数据库。节点是浏览器中Javascript解释器的独立环境，它在服务器中运行，您应该在那里连接到数据库。使用以下节点创建HTTP服务器相当容易：

var http=require（'http'）；
var端口=3000；
const requestHandler=函数（请求、响应）{
console.log（request.url）
end（'Hello Node.js Server！'）；
};
const server=http.createServer（requestHandler）；
侦听（端口，函数（错误）{
如果（错误）{
返回console.log（'发生了不好的事情'，错误）
}
log（'服务器正在'+端口上侦听'）；
});

但是，您必须直接手动处理路由（即根据URL中请求的路径执行不同的操作），所以我建议您阅读一些Node的Web框架，比如Expressjs⁽¹⁾ 比如说

在Express中，您可以执行以下操作：

var express=require（'express'）；
var-app=express（）；
app.get（'/hello'，函数（req，res）{
res.send（'Hello'）；
});
app.get（'/world'，函数（req，res）{
res.send（“世界”）；
});
应用程序侦听（3000，函数（）{
log（'端口3000上侦听的示例应用程序！'）
});

这将给你

和

，一个返回“你好”，另一个返回“世界”

至于浏览器和服务器之间的通信，您可以使用AJAX。我建议您使用fetch，⁽²⁾ 但是您可以使用

jQuery.ajax

⁽³⁾ 另外，也可以使用任何其他解决方案，甚至可以直接调用浏览器的

XMLHttpRequest

。⁽⁴⁾

⁽¹⁾

⁽²⁾ Fetch是浏览器中web请求的新标准，您已经可以通过此polyfill使用它：

⁽³⁾

⁽⁴⁾

为什么要在网页上包含服务器端代码？这是我的问题。我应该如何正确地执行它？在node.js中运行node.js代码，而不是试图将其包含在网页中。它们是完全不同的东西。您是否已将node.js设置为服务器？@SamiKuhmonen，时间是2017年，今天没有人确切知道哪些JavaScript代码应该放在哪里。；）

    //export {addUser};

    // String formatting
    if (!String.format) {
    String.format = function(format) {
        var args = Array.prototype.slice.call(arguments, 1);
        return format.replace(/{(\d+)}/g, function(match, number) {
            return typeof args[number] != 'undefined'
                ? args[number]
                : match
                ;
        });
    };
}
//

var mysql = require("mysql");

function createConnection(hostName, userName, passwd, db)
{
    const con = mysql.createConnection({
        host: hostName,
        user: userName,
        password: passwd,
        database: db
    });
    return con;
}

 function openConnection(con)
{
    con.connect(function (err) {
        if (err) {
            console.log('Error connecting to Db');
            return;
        }
        console.log('Connection established');
    });
}

function executeFullSelect(con, tableName)
{
    const statement = "SELECT * FROM " + tableName + ";";
    con.query(statement, function(err, rows)
    {
        if (err)
        {
            throw err;
        }
        console.log("Data received from " + tableName + ".\n");
        console.log(rows);
        /*for (var i = 0; i < rows.length; i++)
        {
            console.log(rows[i].UserName);
        }*/
    });
}

function insert(con, userName,firstName, lastName, job, mail, passwd)
{
    const statement = String.format("call newUser(\"{0}\", \"{1}\", \"{2}\", \"{3}\", \"{4}\", \"{5}\");", userName, firstName, lastName, job, mail, passwd);
    con.query(statement, function(err, rows)
    {
        if (err)
        {
            console.log("Error at insert");
            return 0;
        }

        console.log(userName + " was successfully added:)");
        return 1;
    })
}

function closeConnection(con)
{
    con.end(function (err) {});
}

function addUser(userName, firstName, lastName, job, mail ,passwd)
{
    const con = createConnection("localhost", "root", "micimacko", "users");
    openConnection(con);
    if (!insert(con, userName, firstName, lastName, job, mail ,passwd))
    {
        closeConnection(con);
        return 0;
    }
    closeConnection(con);
    return 1;
}

function registerButtonClick()
{
    const userName = document.forms["registerForm"]["username"].value;
    const firstName = document.forms["registerForm"]["firstname"].value;
    const lastName = document.forms["registerForm"]["lastname"].value;
    const job = document.forms["registerForm"]["job"].value;
    const mail = document.forms["registerForm"]["mail"].value;
    const pass = document.forms["registerForm"]["pass"].value;

    if (addUser(userName, firstName, lastName, job, mail, pass))
    {
        alert("added");
    }
    else
    {
        alert("failed");
    }
}