我正在学习如何将 node.js 与 mysql 一起使用。我试图找到一些好的文档但徒劳无功。我现在可以在浏览器中显示我的 mysql 数据，但我想在某个时候通过我的 index.html 和一个 css 文件来处理它。这是我的 app.js：// moduelsvar express = require('express');var app = express();var mysql = require('mysql');var bodyParser = require('bodyParser')// app.use(express.static(__dirname + '/public'));app.use(bodyParser.urlencoded({extended: false}));// connect to databasevar con = mysql.createConnection({ host: "localhost", user: "root", password: "1234", database: "BathBombs_DB"});// routesapp.get('/', function(request, response){ console.log('GET request received at /') con.query("SELECT * FROM customers", function (err, result) { if (err) throw err; else{ response.send(result) } });});// listen for trafic and display on localhost:9000app.listen(9000, function () { console.log('Connected to port 9000');});我的 index.html 网站如下所示：<!DOCTYPE html><html><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"> <title>Document</title></head><body> <form action="/" method="POST"> <table type="text" name="firstname" ></table> </form></body></html>
3 回答
开心每一天1111
TA贡献1836条经验 获得超13个赞
您必须进行 ajax 调用才能从服务器获取结果并使用 javascript 与 HTML 内容绑定，如下所示：
HTML 模板
<table id="tableData" class="table table-fixed">
<thead>
<tr>
</tr>
</thead>
<tbody class="tbody" >
</tbody>
这是进行ajax调用的脚本
$(document).ready(() => {
$.ajax({
url: "http://localhost:9000/list",
method: 'GET',
success: function(response){
if(response.rows.length > 0){
for(let index = 0; index < response.rows.length; index++) {
var newRow = $("<tr>");
var cols = "";
var firstname = '';
var lastname = '';
var gender = '';
cols += '<td> '+ response.rows[index].firstname +'</td>';
cols += '<td> '+ response.rows[index].lastname +'</td>';
cols += '<td> '+ response.rows[index].gender+'</td>';
newRow.append(cols);
$("#tableData .tbody").append(newRow);
}
}
}
})
})
哈士奇WWW
TA贡献1799条经验 获得超6个赞
一种简单的方法是使用像 Knex JS 这样的查询构建器。它提供了更好的体验并且更易于使用。我相信以下代码对您有意义：
const knex = require('knex');
const http = require('http');
const knex = require('knex')({
client: 'mysql',
connection: {
host : '127.0.0.1',
user : 'your_database_user',
password : 'your_database_password',
database : 'myapp_test'
}
});
const record = await knex.select('title', 'author', 'year').from('books');
const displayBody = record.map(single => {
return `<tr>
<td>${single.title}</td>
<td>${single.author}</td>
<td>${single.year}</td>
</tr>`;
})
let handleRequest = (request, response) => {
response.writeHead(200, {
'Content-Type': 'text/html'
});
response.write('<!DOCTYPE html>
<html>
<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">
<title>Homepage</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Year</th>
</tr>
</thead>
<tbody>');
response.write(displayBody);
response.write('</tbody>
</table>
</body>
</html>');
response.end();
};
http.createServer(handleRequest).listen(8000);
在上面的代码中，我们从books表中获取数据以显示或返回。
12345678_0001
TA贡献1802条经验 获得超5个赞
首先，您需要“发送/发送”您的“index.html”文件到浏览器。为此，您需要定义一个如下所示的 API 端点（它将 index.html 发送到浏览器）。
/* GET home page. */
app.get('/', getMainPage);
function getMainPage(req, res) {
console.debug('Route for mainViewpage: ' + __dirname );
console.log(process.env);
var mainViewFile = __dirname + '/../public/views/index.html'; // Replace this with path to your index.html file
console.log('mainView log' , mainViewFile);
fs.readFile(mainViewFile, function (err, html) {
if (err) {
throw err;
}
res.writeHeader(200, {"Content-Type": "text/html"});
res.write(html);
res.end();
});
}
完成此操作后，请遵循@priya tarun 在上一个答案中给出的方法。
注意：您还需要在 html 文件中包含 Jquery。您的“index.html”看起来像这样。我还没有完全测试，你可以做那部分。
<!DOCTYPE html>
<html>
<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">
<title>Document</title>
<!--Inlcudes JQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
</head>
<body>
<form action="/" method="POST">
<table type="text" name="firstname" ></table>
</form>
</body>
$(document).ready(() => {
$.ajax({
url: "http://localhost:9000/getCustomerData",
method: 'GET',
success: function(response){
if(response.rows.length > 0){
for(let index = 0; index < response.rows.length; index++) {
var newRow = $("<tr>");
var cols = "";
var firstname = '';
var lastname = '';
var gender = '';
cols += '<td> '+ response.rows[index].firstname +'</td>';
cols += '<td> '+ response.rows[index].lastname +'</td>';
cols += '<td> '+ response.rows[index].gender+'</td>';
newRow.append(cols);
$("#tableData .tbody").append(newRow);
}
}
}
})
})
</html>
注意：将您的 API 端点重命名为“/getCustomerData”而不是“/”来获取客户数据。使用 API 端点“/”将“index.html”提供给客户端/浏览器。
添加回答
举报
0/150
提交
取消