javascript - 将 MONGO 中的 JSON 包含到 HTML 中时出现 500 ReferenceError

问题描述

我正在使用 header.ejs 为 products.ejs 页面设置导航栏。在 app.js 中，我使用 Products 模块从 mongoDB 加载 json 文件，而我的 mongoose 模式位于 products.js 中。我正在尝试在我的 home/products 路由中渲染 products.ejs，但出现“未定义标题”错误。如果我使用 res.send(products)，我会得到 json，但我无法呈现我试图放入 json 的页面。

一些代码：1.app.js：

// Module dependencies.
var express = require("express")
  , http    = require("http")
  , path    = require("path")
  , routes  = require("./routes")
  , mongoose = require("mongoose");
var app     = express();

var Products = require('./models/products');

//mongodb connection
var db = mongoose.connect("mongodb://localhost:27017/shop");
var db =  mongoose.connection;
//mongo error
db.on('error', console.error.bind(console, 'connection error:'));

// All environments
app.set("port", 80);
app.set("views", __dirname + "/views");
app.set("view engine", "ejs");
app.use(express.favicon());
app.use(express.logger("dev"));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookieParser("61d333a8-6325-4506-96e7-a180035cc26f"));
app.use(express.session());
app.use(app.router);
app.use(express.static(path.join(__dirname, "public")));
app.use(express.errorHandler());

// App routes
app.get("/home" , routes.index);
app.get("/hello", routes.hello);

app.get("/home/mens", routes.mens);
app.get("/home/womens", routes.womens);
app.get("/home/mens/mens_clothing", routes.mens_clothing);
app.get("/home/womens/womens_clothing", routes.womens_clothing);

app.use(function (req, res, next) {
    res.locals.title='Shop';
    next();
});

app.get('/home/products',(req,res,next)=>{
 Products.find({},function(err,products){
  if(err) return next(err);
  console.log(req);
res.render('products',{
   products:products
});

 })

});



// Run server
http.createServer(app).listen(app.get("port"), function() {
    console.log("Express server listening on port " + app.get("port"));
});

产品.ejs

<div class="container">
   <% for (var i=0; i< Products.length; i++){ %>

    <h2>
     <%= Products[i].page_title %>
    </h2>

    <div class="row align_container border">

       <div class="col-md-5 col-sm-5">
         <img src="/images/<%=Products[i].image_groups[0].images[0].link %>" alt="" class="img-responsive">
       </div>

       <div class="col-md-7 col-sm-7 align_container">
          <h3>
            <%= Products[i].page_description %>
          </h3>
          <a class="btn btn-default align_child" href="/product/<%= Products[i]._id %>">Show Details</a>
        </div>

     </div> -->
     <% } %>
 </div>

<%- include('footer.ejs') -%>

我在 products.js 中的猫鼬schmema：

var mongoose = require('mongoose');
var ProductSchema = new mongoose.Schema({
    _id: {
      type: String
    },
    page_description: {
      type: String
    },
    page_title: {
      type: String
    },
    name: {
      type: String,
      unique: true,
      required: true
    },
    image: {
      type: Buffer
    },

    price: {
      type: Number
    }

})
var Products= mongoose.model('Product', ProductSchema );
module.exports = Products;
//module.exports.getProducts = function(callback, limit) {
  //Products.find(callback).limit(limit);
//}

我的 header.ejs：

<!DOCTYPE html>
<html lang="en">
      <head>
        <title><%= title %></title>
        <link rel="stylesheet" href="/stylesheets/style.css" />
             <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
             <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    </head>

    <body>
        <!--<h1><%= title %></h1>
        <p>Welcome to <%= title %></p>-->

            </script>
            <nav class="navbar navbar-expand-sm navrbar-light bg-light">
                <a href="/home" class="navbar-brand"> Online Shop </a>
                <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class=" collapse navbar-collapse" id="navbarMenu">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="/home/mens" class="nav-link">Men's</a></li>
                        <li class="nav-item">
                            <a href="/home/womens" class="nav-link">Women's</a></li>
                    </ul>
                 </div>
                 <div id="#navbarMenu">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <i class="fas fa-user-plus"></i>
                                Sign up
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                 <i class="fas fa-sign-in-alt"></i>
                                    Log in
                            </a>
                        </li>
                    </ul>
                 </div>
            </nav>

我的路线.js：

exports.index = function(req, res) {
    res.render("index", {
        // Template data
        title: "Online Shop"
    });
};


exports.hello = function(req, res) {
    var _         = require("underscore");
    var mdbClient = require('mongodb').MongoClient;

    mdbClient.connect("mongodb://localhost:27017/shop", function(err, db) {
        var collection = db.collection('categories');

        collection.find().toArray(function(err, items) {
            res.render("hello", {
                // Underscore.js lib
                _     : _,

                // Template data
                title : "Hello World!",
                items : items
            });

            db.close();
        });
    });
};

exports.mens = function(req, res){
    res.render("mens", {
        title:"Online Shop"
    });
};

exports.womens = function(req, res){
    res.render("womens", {
        title:"Online Shop"
    });
};

exports.mens_clothing = function(req, res){
    res.render("mens_clothing", {
        title:"Online Shop"
    });
};

exports.womens_clothing = function(req, res){
    res.render("womens_clothing", {
        title:"Online Shop"
    });
};

exports.products = function(req, res) {
    res.render("products", {
        title: "Online Shop"
    });

};

标签： javascriptnode.jsmongodbexpress

javascript - 将 MONGO 中的 JSON 包含到 HTML 中时出现 500 ReferenceError

问题描述

解决方案

推荐阅读