繁体   English   中英

Node JS+Express:如何在 HTML(EJS) 中定义和使用 MySQL 数据?

[英]Node JS+Express: How to define and use MySQL data in HTML(EJS)?

我创建了一个简单的 rest-api 应用程序(nodeJS+ExpressJS+MySQL)作为测试项目。 它运行良好,所以我想添加 HTML(EJS) 来显示数据,所以我一直致力于显示视图。 但是,我无法将 MySQL 数据传递给 HTML。

** 由于我还在学习nodeJS,我仍然感到困惑,因为一些教程在 app.js/server.js 中添加了路由器

由于我在 controller 中创建了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 } ]

服务器.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."); });

餐厅.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); };

关于您的原始问题,您得到的响应似乎可以作为普通的 object 访问(参考: 如何访问 RowDataPacket object )并且RowDataPacket只是 ZA8CFDE6331BD59EB2AC96F8911 响应的构造函数名称。

因此,您没有使用 function getAll的回调返回。 您正在向它传递一个名为result的回调并返回标准(err, result) 但是您将其视为正常的同步 function。 改变这个:

// 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 });
  });
});

使用箭头函数object 解构

请注意,因为在 getAll function 的 err 回调中,您正在返回(null, err)并且您应该返回result(err)因为不需要第二个参数,因为您应该始终首先检查err

另外,作为建议,我建议您使用标准的 javascript ,而不是对普通constant object 做同样的事情。 此外,您可以摆脱 controller 函数中的回调,并将查询视为异步调用,如下所示

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM