前端显示数据 from 数据库 nodejs html - Javascript

在Web开发中，往往需要从数据库中获取数据并在前端显示。本文将介绍如何使用Node.js和HTML/Javascript将从数据库中取出的数据显示在前端页面上。

使用Node.js连接数据库

首先，需要使用Node.js来连接数据库。这里我们以MySQL为例进行介绍。使用Node.js连接MySQL需要使用mysql模块。安装方式如下：

npm install mysql

连接数据库的代码如下：

var mysql = require('mysql');
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'your_password',
  database : 'your_database_name'
});

connection.connect();

从数据库获取数据

连接数据库成功后，下一步就是从数据库中获取数据。代码如下：

connection.query('SELECT * FROM your_table_name', function (error, results, fields) {
  if (error) throw error;
  console.log('The solution is: ', results[0]);
});

上述代码使用SELECT语句从数据库中查询数据，并将查询结果输出到控制台。

在前端页面中显示数据

获取到数据后，就需要将它显示在前端页面上。这里我们使用HTML和JavaScript来实现。首先，我们需要在HTML文件中添加一个用于显示数据的DIV：

<div id="data"></div>

然后，在JavaScript文件中将从数据库中获取到的数据处理并显示到页面上：

var dataDiv = document.getElementById('data');

for (var i = 0; i < results.length; i++) {
  var item = results[i];

  var itemDiv = document.createElement('div');
  itemDiv.innerHTML = item.name + ': ' + item.value;

  dataDiv.appendChild(itemDiv);
}

上述代码将从数据库中获取到的数据遍历并添加到页面上用于显示。

完整代码

最终，我们得到了如下使用Node.js和HTML/Javascript实现前端显示数据从数据库中获取的完整代码：

var mysql = require('mysql');
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : 'your_password',
  database : 'your_database_name'
});

connection.connect();

connection.query('SELECT * FROM your_table_name', function (error, results, fields) {
  if (error) throw error;

  var dataDiv = document.getElementById('data');

  for (var i = 0; i < results.length; i++) {
    var item = results[i];

    var itemDiv = document.createElement('div');
    itemDiv.innerHTML = item.name + ': ' + item.value;

    dataDiv.appendChild(itemDiv);
  }
});

connection.end();

总结

本文介绍了使用Node.js和HTML/Javascript从数据库中获取数据并在前端页面上显示的方法。通过本文的介绍，相信读者已经对这一过程有了更深的了解。