Node-Webkit mysql 数据到新闻提要

Question

我正在开发一个新闻提要工具，我们可以将远程新闻消息发送到屏幕上。现在我已经完成了系统的后端工作，现在正在 frontend/client.

上工作

我将使用node-web kit 在屏幕上显示新闻。我已经与数据库建立了连接，并且它还在控制台日志中显示了消息。但我不明白在新闻提要页面上显示它。

我试着让它看起来像 CNN 新闻提要横幅： CNN feed banner

样式不是问题，但我没有从 json（mysql 输出）到屏幕上获取日期。

我在控制台中从 mysql 获得的输出如下所示：

[{"id":1,"message":"Test message #1"},{"id":2,"message":"Test message #2"},{"id":3,"message":"Test message #3"}]

来自客户端的代码如下所示：

<html>
  <head>
    <title>NewsFeed</title>

  <script>

  var mysql      = require('mysql');
  var connection = mysql.createConnection({
    host     : 'XXXXX',
    user     : 'XXXXX',
    password : '',
    database : 'XXXXX'
  });

  connection.connect(function(err) {
    if (err) {
      console.error('error connecting: ' + err.stack);
      return;
    }

    connection.query('SELECT * FROM message', function (error, results, fields) {
      if (error) throw error;
      json = JSON.stringify(results);
      console.log(json);
    });
  });

  </script>
  </head>
  <body>
  </body>
</html>

有人知道如何从控制台读取 Json 信息到 HTML 视图吗？

还有没有办法在数据库中添加新消息时让新闻提要自动更新？

更新：我认为自动刷新不是最好的方法。所以我在考虑远程刷新。这个想法是；

后端系统上的用户登录添加一条消息，然后按按钮重新加载页面。

喜欢这张图片：Idea reload remote

Answer 1

试试这个。

首先，在你DOM中添加一个节点元素，它将包含所有消息。

<body>
    <h1>Messages</h1>
    <div id="message-container"></div>
</body>

然后让你函数写在DOM:

connection.connect(function(err) {
    if (err) {
      console.error('error connecting: ' + err.stack);
      return;
    }

    connection.query('SELECT * FROM message', function (error, results, fields) {
      if (error) throw error;
      json = JSON.stringify(results);
      console.log(json);

      var container = document.getElementById("message-container")

      // Use this in case you can't perform a more precise query
      container.innerHTML = "";

      results.forEach(function(item){
          var node = document.createElement("p");
          var textnode = document.createTextNode(item.message); 

          node.appendChild(textnode);
          container.appendChild(node); 
      })
    });
});

为了让您的数据保持最新，您可以进行一些好的民意测验：

function startTimer() {
    setTimeout(query, 10000)
}

function query() {
  connection.query('SELECT * FROM message', function (error, results, fields) {
      if (error) throw error;
      json = JSON.stringify(results);
      console.log(json);

      var container = document.getElementById("message-container")

      // Use this in case you can't perform a more precise query
      container.innerHTML = "";

      results.forEach(function(item){
          var node = document.createElement("p");
          var textnode = document.createTextNode(item.message); 

          node.appendChild(textnode);
          container.appendChild(node); 
          startTimer()
      })
    });
}

connection.connect(function(err) {
    if (err) {
      console.error('error connecting: ' + err.stack);
      return;
    }
    query()
})

这样你就有了第一个请求。完成后，应用程序将等待 10 秒并提示第二个请求。完成后，等待 10 秒，依此类推...

Node-Webkit mysql 数据到新闻提要

Node-Webkit mysql data to news feed

html

javascript

mysql

json

node-webkit