使用Node.js / Express.js使用获取的mysql数据填充html dropdownlist

如何解决使用Node.js / Express.js使用获取的mysql数据填充html dropdownlist

尝试使用Express.js用数据填充选择下拉列表。

项目结构

dbConnection.js

const MysqL = require('MysqL');

var dbConnection = MysqL.createConnection({
    host:      'localhost',// database host
    user:       'horation',// your database username
    password: 'hmsvictory',// your database password
    port:       3306,// default MysqL port
    db:       'display_images'         // your database name
});
dbConnection.connect((err) => {
if (err) throw err;
console.log('Connected to MysqL Server!');
});

module.exports = dbConnection;

index.js

'use strict';
var express = require('express');
var router = express.Router();

var _sql = require("MysqL");

var myConnection  = require('express-myconnection');

var _config = require('../DataStore/dbConnection');
 var dbOptions = {
    host:      _config.host,user:       _config.user,password: _config.password,database: _config.db
                }

app.use(myConnection(_sql,dbOptions,'pool'));

/* GET home page. */
router.get('/',function (req,res) {
_sql.connect(_config.dbConnection()).then(() => {
    return _sql.query`SELECT name FROM studentinfo`
}).then(result => {
    console.log(result); 
    // Pass the DB result to the template
    res.render('/index',{dropdownVals: result.recordset});
}).catch(err => {
    console.log(err)
})
});
module.exports = router;

index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <Meta charset="utf-8" />
    <title></title>
 </head>
<body>
    <h1>Binding MysqL data to a DropDownList</h1>
    <label>Name: </label>
   <select>
      <% for (const i in dropdownVals) { %>
        <option value="<%= dropdownVals[i].id %>"> <%= dropdownVals[i].name %> </option>
    <% } %>
</select>
</body>
</html>

app.js

const express = require('express'),path = require('path') // add path module,app = express(),cors = require('cors'),bodyParser = require('body-parser');

// make server object that contain port property and the value for our server.
var server = {
  port: 4040
};

// routers
const router = require('./routes/index');

// use the modules
app.use(cors())
app.use(bodyParser.json());
app.use(express.json())
app.use(express.urlencoded({extended: true})) // parsing incoming requests with urlencoded based body-parser


// use router
app.use('/index',router);
// router user input
app.get('/',function(req,res) {
    res.sendFile(path.resolve(__dirname,'views') + '/index.html');
 });

// starting the server
app.listen( server.port,() => console.log(`Server started,listening port: ${server.port}`));

运行上面的代码，我得到了：

但是，我希望获得此下拉列表：

必需：

如何从用户表中获取 MysqL数据并显示在index.html dropownlist中？

解决方法

我一直希望从这里获得帮助，但是与此同时，我设法将app.js文件更改为此并且它起作用了！

'use strict';
const express = require('express'); 
const path = require('path');// add path module,const cors = require('cors');
const bodyParser = require('body-parser');
const engine = require('consolidate');

const app = express();


// view engine setup
 app.set('views',__dirname+ '/views');
 // make server object that contain port property and the value for our server.
 //app.engine('html',engine.mustache);
 app.engine('html',require('ejs').renderFile);
 app.set('view engine','html');

 // routers
 const apiRouter = require('./routes/index');

 // use the modules
 app.use(cors());
 app.use(bodyParser.json());
 app.use(express.json())
 app.use(express.urlencoded({extended: true})) // parsing incoming requests with urlencoded based body-parser


 // use router
 app.use('/',apiRouter);
 // router user input
 app.get('*',function(req,res){
   res.render('index.html');
 });

  const server = {
  port: 4040
};

// starting the server
 app.listen(server.port,() => console.log(`Server started,listening port: ${server.port}`));

快乐编码