努力设置逻辑以在express.js（node.js）中显示详细页面

Question

我正在努力调出一个可以显示详细页面的工作逻辑 显示帖子的标题、图片和详细信息。到目前为止，我已经设法显示列表页面，该页面实际上列出了当前登录用户的所有帖子以及标题、图像和详细信息。当我单击图像时，我会被带到将显示特定帖子详细信息的链接。顺便说一句，链接看起来像这样http://192.168.1.250:5000/ideas/detail/5d491f36886a56259bad2580 好吧，我的代码的奇怪之处在于，当我点击图片时，我按预期被带到了详细页面，但有趣的是，帖子的标题、图片和细节都不是显示并在我的 detail.handlebars 视图页面上使情况变得更糟，我有一个虚拟文本“No video ideas listed”，这个文本被渲染了。下面是我的路线ideas.js代码，分别查看index.handlebars、detail.handlebars。非常感谢您的帮助和支持。

ideas.js（路由）

const express = require('express');
const mongoose = require('mongoose');
const router = express.Router();
const {ensureAuthenticated} = require('../helpers/auth');

// Load Idea Model
require('../models/Idea');
const Idea = mongoose.model('ideas');

// Idea Index Page
router.get('/', ensureAuthenticated, (req, res) => {
  Idea.find({user: req.user.id})
    .sort({date:'desc'})
    .then(ideas => {
      res.render('ideas/index', {
        ideas:ideas
      });
    });
});

// Idea Detail Page
router.get('/detail/:id', ensureAuthenticated, (req, res) => {
  Idea.findOne ({
  _id: req.params.id
  })
  .then(idea => {
   if(idea.user != req.user.id){
      req.flash('error_msg', 'Not Authorized');
      res.redirect('/ideas');
   } else {
      res.render('ideas/detail', {
       idea:idea
     });
    }

  });
});

// Process Detail
router.get('/detail/:id', ensureAuthenticated, (req, res) => {
  Idea.findOne({
    _id: req.params.id
  })
  .then(idea => {
    // new values
    idea.title = req.body.title;
    idea.imageUrl = req.file.path;
    idea.details = req.body.details

 })
  });


// Add Idea Form
router.get('/add', ensureAuthenticated, (req, res) => {
  res.render('ideas/add');
});

// Edit Idea Form
router.get('/edit/:id', ensureAuthenticated, (req, res) => {
  Idea.findByIdAndUpdate({
    _id: req.params.id
  })
  .then(idea => {
    if(idea.user != req.user.id){
      req.flash('error_msg', 'Not Authorized');
      res.redirect('/ideas');
    } else {
      res.render('ideas/edit', {
        idea:idea
      });
    }

  });
});

// Process Form
router.post('/', ensureAuthenticated, (req, res) => {
  let errors = [];

  if(!req.body.title){
    errors.push({text:'Please add a title'});
  }
  if(!req.body.details){
    errors.push({text:'Please add some details'});
  }

  if(errors.length > 0){
    res.render('/add', {
      errors: errors,
      title: req.body.title,
      imageUrl: req.file.path,
      details: req.body.details

    });
  } else {
    const newUser = {
      title: req.body.title,
      imageUrl: req.file.path,
      details: req.body.details,
      user: req.user.id
    }
    new Idea(newUser)
      .save()
      .then(idea => {
        req.flash('success_msg', 'Video idea added');
        res.redirect('/ideas');
      })
  }
});

// Edit Form process
router.put('/:id', ensureAuthenticated, (req, res) => {
  Idea.findByIdAndUpdate({
    _id: req.params.id
  })
  .then(idea => {
    // new values
    idea.title = req.body.title;
    idea.imageUrl = req.file.path;
    idea.details = req.body.details

    idea.save()
      .then(idea => {
        req.flash('success_msg', 'Video idea updated');
        res.redirect('/ideas');
      })
  });
});

// Delete Idea
router.delete('/:id', ensureAuthenticated, (req, res) => {
  Idea.deleteOne({_id: req.params.id})
    .then(() => {
      req.flash('success_msg', 'Video idea removed');
      res.redirect('/ideas');
    });
});

module.exports = router;

index.handlebars(视图)

{{#each ideas}}
  <div class="card card-body mb-2">
    <h4>{{title}}</h4>

    <a href="/ideas/detail/{{id}}"><img class="ind1Class"  src="{{imageUrl}}" alt="thumbnail" class="img-thumbnail"
  style="width: 200px">

    <p>{{details}}</p>
    <a class="btn btn-dark btn-block mb-2" href="/ideas/edit/{{id}}">Edit</a>
    <form method="post" action="/ideas/{{id}}?_method=DELETE">
      <input type="hidden" name="_method" value="DELETE">
      <input type="submit" class="btn btn-danger btn-block" value="Delete">
    </form>
  </div>
{{else}}
  <p>No video ideas listed</p>
{{/each}}

detail.handlebars（视图）

{{#each ideas}}
  <div class="card card-body mb-2">
    <h4>{{title}}</h4>
     <img class="detaClass" src="{{imageUrl}}">
    <p>{{details}}</p>
    <a class="btn btn-dark btn-block mb-2" href="/ideas/edit/{{id}}">Edit</a>
    <form method="post" action="/ideas/{{id}}?_method=DELETE">
      <input type="hidden" name="_method" value="DELETE">
      <input type="submit" class="btn btn-danger btn-block" value="Delete">
    </form>
  </div>
{{else}}
  <p>No video ideas listed</p>
{{/each}}

Answer 1

我终于明白了这一点，我并没有注意太多的紧张......特别是如果只是吹了一米'无论如何让我们停止追逐，路线上几乎没有出错ideas.js和意见@ 987654322@ 在 // Idea Detail Page 部分应该是这样的，

   // Idea Detail Page
router.get('/detail/:id', ensureAuthenticated, (req, res) => {
  Idea.findOne ({
  _id: req.params.id
  })
    .then(idea => {
      res.render('ideas/detail', {
       idea:idea


  });
});  
});

以及对意见（detail.handlebars）的一些调整 需要进行，因为在 app.js 上我使用静态方法保存图像目录，以便自动处理请求并通过 express 返回文件。我们需要在<div class="name"><img src="{{{imageUrl}}}"</div> 上添加/ 所以它看起来像这样<div class="name"><img src="/{{{imageUrl}}}"</div> 否则，如果您单击损坏的图像并说在新选项卡上打开图像，您将意识到 它试图到达/ideas/detail/images/2019-08-16T11:13:17.831Z-flask.png 的路径，它会抱怨Cannot GET /ideas/detail/images/2019-08-16T11:13:17.831Z-flask.png 来解决相对路径问题添加/ 的问题，如上所述。 以下是编辑后的视图 (detail.handlebars)

{{#idea}}
  <div class="card card-body mb-2">
    <h4>{{title}}</h4>

    <div class="name"><img src="/{{{imageUrl}}}"</div>

    <p>{{details}}</p>

  </div>
{{/idea}}