如何使用节点 js 和 html 构建客户端服务器应用程序？答案

【问题标题】：How to build client server app using node js and html?如何使用节点 js 和 html 构建客户端服务器应用程序？
【发布时间】：2020-08-11 04:47:22
【问题描述】：

我有一个名为 temp.html 的 html 文件我想在该 html 页面中显示选择查询结果。这是我的选择查询。

    SELECT cs_name FROM course_master where cs_id = 4

此查询将返回以下结果。

[ { cs_name: 'JAVA programming' } ]

我想在 html 页面中显示这个结果。基本上我想使用节点 js 使用 "GET" 请求和响应。这是我的节点 js 文件结构。

var mysql      = require('mysql');
var connection = mysql.createConnection({
host     : '127.0.0.1',
user     : 'root',
password : '',
database : 'eduportal'
});
connection.connect();

connection.query('SELECT cs_name FROM course_master where cs_id = 4', function(err, rows, fields) {
if (!err)
console.log('The solution is: ', rows);
else
console.log('Error while performing Query.');
});
connection.end();

这是我的 HTML 文件。

<!doctype html>
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>        
</head>
<body>
    <div id="course_name">          
        Course Name:<input type="text" id="cname">                
    </div>
</body>
</html>

我想在 HTML 文件中定义的文本框中显示课程名称。

谁能帮忙用node js把这个文本框和mysql绑定？

【问题讨论】：

你可能需要安装'Express' $ npm install express --save ExpressJS

标签： javascript html mysql node.js

【解决方案1】：

您可以通过socket.io 实现此目的。您需要了解更多相关信息才能理解以下 sn-p。

在此我提供了一个示例代码来完全满足您的要求。

此代码中可能仍有一些调整，因此您可以根据自己的理解进行更改。

让我澄清一下 server.js sn-p

在此您可以将所有查询放入数据库中获取或设置。

//server.js

var app = require("express")();
var mysql = require("mysql");
var http = require('http').Server(app);
var io = require("socket.io")(http);

/* Creating POOL MySQL connection.*/

var pool = mysql.createConnection({
host     : '127.0.0.1',
user     : 'root',
password : '',
database : 'eduportal'
});

app.get("/", function(req, res) {
    res.sendFile(__dirname + '/index.html');
});


io.on('connection', function(socket) {
    console.log("A user is connected");
        get_cs_name(function(res,cs_name) {
            if (res) {
                io.emit('get_cs_name', cs_name);
            } else {
                io.emit('error');
            }
        });
});

var get_cs_name = function(callback) {
    pool.getConnection(function(err, connection) {
        if (err) {
            connection.release();
            callback(false);
            return;
        }
        connection.query("SELECT cs_name FROM course_master where cs_id = 4", function(err, rows) {
            connection.release();
            if (!err) {
                callback(true,rows[0].cs_name);
            }
        });
        connection.on('error', function(err) {
            callback(false,null);
        });
    });
}

http.listen(3000, function() {
    console.log("Listening on 3000");
});

现在从 CLI 运行“node server.js”命令。您的 http 请求将在 3000 端口上处理。请记住这一点。

//index.html

<html>
  <head>
    <title>Socket.io</title>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function(){
          var socket = io();

          socket.on('get_cs_name',function(cs_name){
             alert(cs_name);
             $("#cname").val(cs_name);
          });
    });
    </script>
  </head>
  <body>
    <div id="course_name">          
        Course Name:<input type="text" id="cname">                
    </div>
  </body>
</html>

现在是时候浏览您的 html 文件以查看它是否正常工作的实际结果，请在浏览器中点击http://localhost:3000。

如果发现任何错误，请在此处 ping 我。

谢谢

【讨论】：

感谢您的帮助。我正在尝试，但我有一个问题。没有socket.io还有其他方式吗？
我收到此错误。 Node_script>node testing.js module.js:338 throw err; ^ 错误：在 Function.Module._load (module.js:278:25) 在 Module.require (module.js:365: 17) 需要 (module.js:384:17) 在 Object. (E:\Henry\jinny\web-programming\HW1\public_html\Node_s cript\testing.js:7:11) 在 Module._compile (module.js:460:26)