其他通过html用node.js连接和显示mysql的方式
Posted
技术标签:
【中文标题】其他通过html用node.js连接和显示mysql的方式【英文标题】：Other ways to connect and display mysql with node.js through html 【发布时间】：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 很酷，但这似乎更像是处理数据库部分的另一种方式？ 正是....... 是的，但我想知道我为什么要针对我提出的这个特定问题这样做？ 【参考方案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 @。
【讨论】：
以上是关于其他通过html用node.js连接和显示mysql的方式的主要内容，如果未能解决你的问题，请参考以下文章
cocos creator学习01 关于cocos creator 通过get 和post连接node.js服务器的初步探索