Node.js+Express项目中如何将Mongoose查询数据渲染为前端下拉列表

步骤1：修改控制器，将查询到的数据传递给视图 #

你当前的控制器查询完数据后没有传给渲染的模板，先做如下调整：

require("../models/database");
const Category = require("../models/Category");

/**
 *  Get /
 * Homepage
 */

 exports.bike = async (req, res) => {
  try {
    Category.find({}).then((bike) => {
      // 如果Mongoose返回的数组结构和mock的bikeArray不一致，这里先处理成相同的嵌套对象结构
      const bikeData = JSON.parse(JSON.stringify(bike));
      res.render('./layouts/index', { bikeData }); // 把数据传给模板
    }).catch((e) => {
    console.log(e);
    })
    
  } catch (error) {
    res.status(500).send({ message: error.message || "Error Occured" });
  }
};

步骤2：在视图模板中把数据注入前端全局 #

在你的index模板（这里默认你用的是EJS模板引擎，其他引擎对应调整变量语法即可）中，加入如下代码，把后端传过来的数据挂载到window对象上，前端脚本可以直接读取：

<!-- 加在模板的head标签内，要在引入bike.js之前 -->
<script>
  window.bikeArray = <%- JSON.stringify(bikeData) %>;
</script>

步骤3：调整前端bike.js脚本 #

删掉开头引入静态mock数据的语句即可，你原有生成下拉列表的逻辑不需要做任何改动：

// 删掉这行：import  {bikeArray}  from './server/models/Category.js';

window.onload = function () {
  // 原有逻辑完全保留即可，window.bikeArray已经有对应数据
  var typSel = document.getElementById("typSel"),
  // ... 剩下的原有代码不变
}

注意事项 #

• 需保证MongoDB中存储的Category数据结构和你原来mock.js里的bikeArray结构完全一致，如果Mongoose查询返回的是数组格式，需要先在控制器里把数组处理成和mock一致的嵌套对象结构，原有前端逻辑才能直接复用
• 如果使用的模板引擎不是EJS，只需要对应调整模板中注入变量的语法，核心逻辑不变

内容的提问来源于stack exchange，提问作者Michael Brilz