Question

我正在使用新闻Feed工具，我们可以将远程新闻消息发送到屏幕。现在我已经完成了系统的后端，现在在前端/客户端上工作。

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

我尝试让它看起来像CNN新闻Feed横幅： 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数据到新闻源

1 个答案: