Question

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

    SELECT cs_name FROM course_master where cs_id = 4

此查询将返回以下结果。

[ { cs_name: 'JAVA programming' } ]

我想在html页面中显示此结果。基本上我想使用节点js使用＆＃34; GET＆＃34; 请求和响应。这是我的节点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文件中定义的文本框中显示课程名称。

任何人都可以帮助使用节点js将此文本框与mysql绑定吗？

Answer 1

您可以通过socket.io实现此目的。您需要了解有关此内容的更多信息，以了解以下代码段。

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

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

让我澄清一下关注server.js片段

在此，您可以在db中获取或设置所有查询。

// 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");
});

现在运行＆＃34; node server.js＆＃34;来自CLI的命令。您的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。

如果发现任何错误，请回复此处。

由于

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

1 个答案: