Node JS+Express:如何在 HTML(EJS) 中定义和使用 MySQL 数据?
Posted
技术标签:
【中文标题】Node JS+Express:如何在 HTML(EJS) 中定义和使用 MySQL 数据?【英文标题】:Node JS+Express: How to define and use MySQL data in HTML(EJS)? 【发布时间】:2021-07-26 23:08:07 【问题描述】:我创建了一个简单的 rest-api 应用程序(nodeJS+ExpressJS+mysql)作为测试项目。 它运行良好,所以我想添加 html(EJS) 来显示数据,所以我一直致力于显示视图。 但是,我无法将 MySQL 数据传递到 HTML。
**由于我还在学习nodeJS,我仍然感到困惑,因为一些教程在app.js/server.js中添加了路由器
由于我在控制器中创建了getAll()
,因此我在server.js
中使用了Restaurant.getAll()
。
下面是Restaurant.getAll()
的console.log 结果。我已经尝试使用JSON.stringtify(data)
,但没有区别。
如果有人能告诉我如何更改或修复我的代码,我将不胜感激。 感谢您的所有帮助。
restaurant_list: [
RowDataPacket
id: 1,
name: 'A',
genre: 'Japanese',
rating: 4
,
RowDataPacket
id: 2,
name: 'B',
genre: 'Mexican',
rating: 4
,
RowDataPacket
id: 3,
name: 'C',
genre: 'Chinese',
rating: 4
]
server.js
const express = require("express");
const Restaurant = require("./app/models/restaurant.model.js");
const app = express();
app.use(express.json()); //Used to parse JSON bodies
app.use(express.urlencoded()); //Parse URL-encoded bodies
// set the view engine to ejs
app.set('views', './app/views');
app.set('view engine', 'ejs');
// simple route
app.get("/", function(req, res)
var data = Restaurant.getAll();
res.render("index.ejs", data: data );
);
require("./app/routes/restaurant.routes.js")(app);
// set port, listen for requests
app.listen(3000, () =>
console.log("Server is running on port 3000.");
);
restaurant.model.js
const sql = require("./db.js");
// constructor
const Restaurant = function(restaurant)
this.name = restaurant.name;
this.genre = restaurant.genre;
this.rating = restaurant.rating;
;
Restaurant.getAll = result =>
sql.query("SELECT * FROM restaurant_list", (err, res) =>
if (err)
console.log("error: ", err);
result(null, err);
return;
console.log("restaurant_list: ", res);
result(null, res);
);
;
module.exports = Restaurant;
restaurant.routes.js
module.exports = app =>
const restaurant_list = require("../controllers/restaurant.controller.js");
// Retrieve all restaurants
app.get("/", restaurant_list.findAll);
;
【问题讨论】:
【参考方案1】:关于您的原始问题,您得到的响应似乎可以作为普通对象访问(参考:How to access a RowDataPacket object)并且RowDataPacket
只是对象响应的构造函数名称。
因此,您没有使用函数getAll
的回调返回。您正在传递一个名为result
的回调并返回标准(err, result)
。但是您将其视为正常的同步功能。改变这个:
// simple route
app.get("/", function(req, res)
var data = Restaurant.getAll();
res.render("index.ejs", data: data );
);
到这里:
app.get("/", function(req, res)
Restaurant.getAll(function(err, data)
if (err) // handle your error case
else
res.render("index.js", data: data );
);
);
甚至更好(es6 语法):
app.get("/", function(req, res)
Restaurant.getAll((err, data) =>
if (err) // handle your error case
else res.render("index.js", data );
);
);
使用arrow functions 和object destructuring。
要小心,因为在 getAll 函数的 err 回调中,您将返回 (null, err)
,并且您应该返回 result(err)
,因为不需要第二个参数,因为您应该始终首先检查 err
。
另外,作为一个建议,我建议您使用标准的 javascript Classes,而不是在普通的 constant
对象上做同样的事情。此外,您可以摆脱控制器函数中的回调,并将您的查询视为异步调用like this。
【讨论】:
感谢您的澄清!我尝试从 EJS 正常访问它(使用 data[0].name、data.restaurant_list.name、data.name)但它总是以错误告终,指出“无法读取属性 '0'/'restaurant_list'/name ' 的未定义”。并感谢有关使用类和异步调用的建议。我会在解决当前问题后尝试。 @lane3445 在我发现您的问题时编辑了我的答案 非常感谢!它完美地工作!我尝试了另一种方法,但这看起来更干净。以上是关于Node JS+Express:如何在 HTML(EJS) 中定义和使用 MySQL 数据?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Express JS/Railway JS (Node.JS) 生成 JSON
如何使用 Express 和 Node.js 从表单发送参数
请求新页面时如何将 AngularJS 路由与 Express (Node.js) 一起使用?