其他通过html用node.js连接和显示mysql的方式答案

【问题标题】：Other ways to connect and display mysql with node.js through html其他通过html用node.js连接和显示mysql的方式
【发布时间】：2020-03-23 11:42:38
【问题描述】：

嘿，我正在尝试学习如何将 node.js 与 mysql 一起使用。我可以在浏览器中显示来自 mysql 的数据。我想知道是否有另一种方式（更智能的方式）来做到这一点，而不是我迄今为止所做的。

更具体地说，我正在寻找一种不同的方法来处理我在 index.html 中使用的 Jquery 以外的数据。我宁愿一起避免使用 Jquery。当然，前提是这不是解决此问题的最佳方式。

我见过一些使用 sendFile，但我似乎根本无法让它工作，可能是因为我不知道如何在 html 端处理它。

这是我的 app.js

// moduels
var express = require('express');
var app = express();
var mysql = require('mysql');
var bodyParser = require('body-Parser')
var urlencodedParser = bodyParser.urlencoded({ extended: false });

// sends data to html side 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use('/', express.static(__dirname + '/'));
app.set('view engine', 'html');

// connect to database
var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "1234",
    database: "BathBombs_DB"
});

con.connect();

// routes
app.get('/api', function(request, response){
    console.log('GET request received at /') 
    con.query("SELECT * FROM customers", function (err, result) {
        if (err) throw err;
        else{
            response.json(result);
            //response.sendFile(__dirname + "/index.html");
        }

    });
});

// listen for trafic and display on localhost:9000
app.listen(9000, function () {
    console.log('Connected to port 9000');
});

这是我的 index.html。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <title>Document</title>
  </head>
  <body>

     <table id="table">
       <tr>
         <td></td>
       </tr>
     </table>

  <script>

    $(document).ready(function(){

      $.get("http://localhost:9000/api", function(data){
        var html = '';
        for (var i = 0; i < data.length; i++) {  
          html += '<tr><td>' + data[i].id + '</td><td>'   
          html += '<tr><td>' + data[i].firstname + '</td><td>'
          html += '<tr><td>' + data[i].lastname + '</td><td>'
          html += '<tr><td>' + data[i].address + '</td><td>'
          html += '<tr><td>' + data[i].postal_code + '</td><td>'
          html += '<tr><td>' + data[i].city + '</td><td>'
          html += '<tr><td>' + data[i].country + '</td><td>'
          html += '<tr><td>' + data[i].email + '</td><td>'
          html += '<tr><td>' + data[i].tlf + '</td><td>'        
        }
        $('#table').empty().append(html);
      });
    });

  </script>

  </body>
  </html>

【问题讨论】：

看看这个knexjs.org
很酷，但这似乎更像是处理数据库部分的另一种方式？
正是.......
是的，但我想知道我为什么要针对我提出的这个特定问题这样做？

标签： javascript jquery html mysql node.js

【解决方案1】：

您正在寻找现代的Fetch API。 How to use it。

您已经设置了路由，它将处理对/api 的所有 HTTP GET 请求，因此您可以拥有这样的功能：

async function getData(url = '') {
    const response = await fetch(url, {
        method: 'GET',
    });

    return response.json();
}

你可以这样称呼它：

const url = '/api';
const response = getData(url);

response.then((items) => {        
    // construct your table nodes here
});

您可能会对async 和await 的用法感到困惑，但如果您想使用Fetch API，最好了解它们，因为对fetch 的调用会返回@987654325 @。

【讨论】：